Commit a746a781 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

feat(themes): set generic css variables for colors to enable instance themes 

- set new colors using the css variables for theming in tailwind.config.js
- replace admin and
public colors with new variable enabled colors
parent f611a16c

app/Entities/EpisodeComment.php

+1 −1
Original line number Diff line number Diff line
@@ -119,7 +119,7 @@ class EpisodeComment extends UuidEntity 


    public function getHasReplies(): bool

    {

        return $this->getReplies() !== null;

        return $this->getReplies() !== [];

    }



    public function getReplyToComment(): ?self

app/Helpers/components_helper.php

+11 −11
Original line number Diff line number Diff line
@@ -24,9 +24,9 @@ if (! function_exists('hint_tooltip')) { 
    function hint_tooltip(string $hintText = '', string $class = ''): string

    {

        $tooltip =

            '<span data-toggle="tooltip" data-placement="bottom" tabindex="0" title="' .

            '<span data-tooltip="bottom" tabindex="0" title="' .

            $hintText .

            '" class="inline-block text-gray-500 align-middle focus:ring-castopod';

            '" class="inline-block align-middle text-skin-muted focus:ring-accent';



        if ($class !== '') {

            $tooltip .= ' ' . $class;
@@ -56,14 +56,14 @@ if (! function_exists('data_table')) { 
            'table_open' => '<table class="w-full whitespace-no-wrap">',



            'thead_open' =>

                '<thead class="text-xs font-semibold text-left text-gray-500 uppercase">',

                '<thead class="text-xs font-semibold text-left uppercase text-skin-muted">',



            'heading_cell_start' => '<th class="px-4 py-2">',

            'cell_start' => '<td class="px-4 py-2">',

            'cell_alt_start' => '<td class="px-4 py-2">',



            'row_start' => '<tr class="border-t hover:bg-pine-50">',

            'row_alt_start' => '<tr class="border-t hover:bg-pine-50">',

            'row_start' => '<tr class="border-t border-subtle hover:bg-base">',

            'row_alt_start' => '<tr class="border-t border-subtle hover:bg-base">',

        ];



        $table->setTemplate($template);
@@ -88,7 +88,7 @@ if (! function_exists('data_table')) { 
            return lang('Common.no_data');

        }



        return '<div class="overflow-x-auto bg-white rounded-lg border-3 border-pine-100 ' . $class . '" >' .

        return '<div class="overflow-x-auto rounded-lg bg-elevated border-3 border-subtle ' . $class . '" >' .

            $table->generate() .

            '</div>';

    }
@@ -105,7 +105,7 @@ if (! function_exists('publication_pill')) { 
    function publication_pill(?Time $publicationDate, string $publicationStatus, string $customClass = ''): string

    {

        $class = match ($publicationStatus) {

            'published' => 'text-pine-600 border-pine-600 bg-pine-50',

            'published' => 'text-pine-500 border-pine-500 bg-pine-50',

            'scheduled' => 'text-red-600 border-red-600 bg-red-50',

            'not_published' => 'text-gray-600 border-gray-600 bg-gray-50',

            default => 'text-gray-600 border-gray-600 bg-gray-50',
@@ -208,7 +208,7 @@ if (! function_exists('episode_numbering')) { 
                $class .

                '" title="' .

                lang($transKey, $args) .

                '">' .

                '" data-tooltip="bottom">' .

                lang($transKey . '_abbr', $args) .

                '</abbr>';

        }
@@ -238,7 +238,7 @@ if (! function_exists('location_link')) { 
            icon('map-pin', 'mr-2') . $location->name,

            [

                'class' =>

                    'inline-flex items-baseline hover:underline focus:ring-castopod' .

                    'inline-flex items-baseline hover:underline focus:ring-accent' .

                    ($class === '' ? '' : " {$class}"),

                'target' => '_blank',

                'rel' => 'noreferrer noopener',
@@ -264,8 +264,8 @@ if (! function_exists('audio_player')) { 
                theme="light"

                language="{$language}"

                icons="castopod-icons"

                class="{$class}"

                style="--vm-player-box-shadow:0; --vm-player-theme: #009486; --vm-control-spacing: 4px;"

                class="{$class} relative z-0"

                style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-control-spacing: 4px; --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"

            >

                <vm-audio preload="none">

                    <source src="{$source}" type="{$mediaType}" />

app/Helpers/page_helper.php

+4 −4
Original line number Diff line number Diff line
@@ -20,17 +20,17 @@ if (! function_exists('render_page_links')) { 
    {

        $pages = (new PageModel())->findAll();

        $links = anchor(route_to('home'), lang('Common.home'), [

            'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',

            'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',

        ]);

        $links .= anchor(route_to('credits'), lang('Person.credits'), [

            'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',

            'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',

        ]);

        $links .= anchor(route_to('map'), lang('Page.map'), [

            'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',

            'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',

        ]);

        foreach ($pages as $page) {

            $links .= anchor($page->link, $page->title, [

                'class' => 'px-2  py-1 underline hover:no-underline focus:ring-castopod',

                'class' => 'px-2  py-1 underline hover:no-underline focus:ring-accent',

            ]);

        }

app/Resources/js/audio-player.ts

+7 −3
Original line number Diff line number Diff line
@@ -39,14 +39,18 @@ import "./modules/play-episode-button"; 


const player = html`<div

  id="castopod-audio-player"

  class="fixed bottom-0 left-0 flex flex-col w-full bg-white border-t sm:flex-row z-50"

  class="fixed bottom-0 left-0 flex flex-col w-full bg-elevated border-t border-subtle sm:flex-row z-50"

  data-episode="-1"

  style="display: none;"

>

  <div class="flex items-center">

    <img src="" alt="" class="h-[52px] w-[52px]" />

    <div class="flex flex-col px-2">

      <p class="text-sm w-48 truncate" title="" id="castopod-player-title"></p>

      <p

        class="text-sm w-48 truncate font-semibold"

        title=""

        id="castopod-player-title"

      ></p>

      <p

        class="text-xs w-48 truncate"

        title=""
@@ -60,7 +64,7 @@ const player = html`<div 
    language="en"

    icons="castopod-icons"

    class="flex-1"

    style="--vm-player-box-shadow:0; --vm-player-theme: #009486;"

    style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"

  >

    <vm-audio preload="none" id="testing-audio">

      <source src="" type="" />

app/Resources/js/modules/EpisodesMap.ts

+3 −3
Original line number Diff line number Diff line
@@ -46,13 +46,13 @@ const drawEpisodesMap = async (mapDivId: string, dataUrl: string) => { 
        data[i].latitude,

        data[i].longitude,

      ]).bindPopup(

        '<div class="flex min-w-max"><img src="' +

        '<div class="flex min-w-max w-full gap-x-2"><img src="' +

          data[i].cover_path +

          '" alt="' +

          data[i].episode_title +

          '" class="mr-2 rounded w-16 h-16" /><div class="flex flex-col"><h2 class="lg:text-base text-sm ! font-bold"><a href="' +

          '" class="rounded w-16 h-16" /><div class="flex flex-col flex-1"><h2 class="leading-tight text-sm w-56 line-clamp-2 font-bold"><a href="' +

          data[i].episode_link +

          '" class="hover:underline !text-pine-800">' +

          '" class="hover:underline font-semibold !text-accent-base">' +

          data[i].episode_title +

          '</a></h2><a href="' +

          data[i].podcast_link +