From a505a1de56e8e3056379bd60d0595f432e294728 Mon Sep 17 00:00:00 2001 From: Yassine Doghri Date: Thu, 21 Oct 2021 13:12:38 +0000 Subject: [PATCH] feat: restyle episode and person cards + add focus style to interactive elements for a11y fix components in follow and remote action pages by calling new instances directly --- app/Helpers/components_helper.php | 2 +- app/Helpers/page_helper.php | 8 +- app/Language/en/Podcast.php | 1 + app/Language/fr/Podcast.php | 1 + app/Resources/js/modules/Dropdown.ts | 2 +- app/Resources/styles/custom.css | 15 ++++ app/Views/Components/Button.php | 10 ++- app/Views/Components/DropdownMenu.php | 10 ++- app/Views/Components/Forms/Checkbox.php | 19 +++-- app/Views/Components/Forms/Field.php | 7 +- app/Views/Components/Forms/Radio.php | 2 +- app/Views/Components/Heading.php | 2 +- tailwind.config.js | 9 +- themes/cp_admin/_layout.php | 6 +- themes/cp_admin/_partials/_nav_aside.php | 2 +- themes/cp_admin/_partials/_nav_header.php | 2 +- themes/cp_admin/episode/_card.php | 50 +++++++++++ themes/cp_admin/episode/create.php | 2 +- themes/cp_admin/episode/edit.php | 2 +- themes/cp_admin/episode/list.php | 14 ++-- themes/cp_admin/episode/publish.php | 2 +- themes/cp_admin/person/_card.php | 33 ++++++++ themes/cp_admin/person/edit.php | 4 +- themes/cp_admin/person/list.php | 49 ++--------- themes/cp_admin/podcast/_card.php | 27 ++++++ themes/cp_admin/podcast/import.php | 2 +- themes/cp_admin/podcast/latest_episodes.php | 83 ++----------------- themes/cp_admin/podcast/list.php | 45 +--------- themes/cp_app/_admin_navbar.php | 4 +- themes/cp_app/_layout.php | 6 +- themes/cp_app/_persons_modal.php | 4 +- themes/cp_app/embed.php | 2 +- themes/cp_app/episode/_layout.php | 8 +- .../cp_app/episode/_partials/navigation.php | 2 +- themes/cp_app/home.php | 21 +++-- themes/cp_app/map.php | 6 +- themes/cp_app/page.php | 6 +- .../cp_app/podcast/_partials/navigation.php | 2 +- themes/cp_app/podcast/_partials/sidebar.php | 4 +- themes/cp_app/podcast/about.php | 2 +- themes/cp_app/podcast/follow.php | 12 +-- themes/cp_app/post/remote_action.php | 2 +- themes/cp_auth/_layout.php | 4 +- themes/cp_install/_layout.php | 2 +- 44 files changed, 250 insertions(+), 248 deletions(-) create mode 100644 themes/cp_admin/episode/_card.php create mode 100644 themes/cp_admin/person/_card.php create mode 100644 themes/cp_admin/podcast/_card.php diff --git a/app/Helpers/components_helper.php b/app/Helpers/components_helper.php index 00474d3c..fd05c267 100644 --- a/app/Helpers/components_helper.php +++ b/app/Helpers/components_helper.php @@ -238,7 +238,7 @@ if (! function_exists('location_link')) { icon('map-pin', 'mr-2') . $location->name, [ 'class' => - 'inline-flex items-baseline hover:underline' . + 'inline-flex items-baseline hover:underline focus:ring-castopod' . ($class === '' ? '' : " {$class}"), 'target' => '_blank', 'rel' => 'noreferrer noopener', diff --git a/app/Helpers/page_helper.php b/app/Helpers/page_helper.php index 7a24aaa1..13ecee41 100644 --- a/app/Helpers/page_helper.php +++ b/app/Helpers/page_helper.php @@ -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', + 'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod', ]); $links .= anchor(route_to('credits'), lang('Person.credits'), [ - 'class' => 'px-2 py-1 underline hover:no-underline', + 'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod', ]); $links .= anchor(route_to('map'), lang('Page.map'), [ - 'class' => 'px-2 py-1 underline hover:no-underline', + 'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod', ]); foreach ($pages as $page) { $links .= anchor($page->link, $page->title, [ - 'class' => 'px-2 py-1 underline hover:no-underline', + 'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod', ]); } diff --git a/app/Language/en/Podcast.php b/app/Language/en/Podcast.php index c3dd5040..d8c0a20e 100644 --- a/app/Language/en/Podcast.php +++ b/app/Language/en/Podcast.php @@ -18,6 +18,7 @@ return [ 'no_episode_hint' => 'Navigate the podcast episodes with the navigation bar above.', 'follow' => 'Follow', + 'followTitle' => 'Follow {actorDisplayName} on the fediverse!', 'followers' => '{numberOfFollowers, plural, one {# follower} other {# followers} diff --git a/app/Language/fr/Podcast.php b/app/Language/fr/Podcast.php index d74d1f8d..f389e497 100644 --- a/app/Language/fr/Podcast.php +++ b/app/Language/fr/Podcast.php @@ -18,6 +18,7 @@ return [ 'no_episode_hint' => 'Naviguez au sein des épisodes du podcast episodes grâce à la barre de navigation ci-dessus.', 'follow' => 'Suivre', + 'followTitle' => 'Suivez {actorDisplayName} sur le fédiverse !', 'followers' => '{numberOfFollowers, plural, one {# abonné·e} other {# abonné·e·s} diff --git a/app/Resources/js/modules/Dropdown.ts b/app/Resources/js/modules/Dropdown.ts index e94bd176..64b61f6e 100644 --- a/app/Resources/js/modules/Dropdown.ts +++ b/app/Resources/js/modules/Dropdown.ts @@ -25,9 +25,9 @@ const Dropdown = (): void => { const offsetY = menu.dataset.dropdownOffsetY ? parseInt(menu.dataset.dropdownOffsetY) : 0; + console.log(offsetX, offsetY); popperInstance = createPopper(button, menu, { placement: menu.dataset.dropdownPlacement as Placement, - // strategy: "fixed", modifiers: [ { name: "offset", diff --git a/app/Resources/styles/custom.css b/app/Resources/styles/custom.css index f35a75fb..e229f820 100644 --- a/app/Resources/styles/custom.css +++ b/app/Resources/styles/custom.css @@ -17,4 +17,19 @@ .rounded-conditional-2xl { border-radius: max(0px, min(1rem, calc((100vw - 1rem - 100%) * 9999))); } + + .backdrop-gradient { + background-image: linear-gradient( + 180deg, + hsla(0, 0%, 35.29%, 0) 0%, + hsla(0, 0%, 34.53%, 0.034375) 16.36%, + hsla(0, 0%, 32.42%, 0.125) 33.34%, + hsla(0, 0%, 29.18%, 0.253125) 50.1%, + hsla(0, 0%, 24.96%, 0.4) 65.75%, + hsla(0, 0%, 19.85%, 0.546875) 79.43%, + hsla(0, 0%, 13.95%, 0.675) 90.28%, + hsla(0, 0%, 7.32%, 0.765625) 97.43%, + hsla(0, 0%, 0%, 0.8) 100% + ); + } } diff --git a/app/Views/Components/Button.php b/app/Views/Components/Button.php index 5a4d7258..ed9b6c50 100644 --- a/app/Views/Components/Button.php +++ b/app/Views/Components/Button.php @@ -76,11 +76,17 @@ class Button extends Component } if ($this->iconLeft !== '') { - $this->slot = '' . $this->slot; + $this->slot = (new Icon([ + 'glyph' => $this->iconLeft, + 'class' => 'mr-2 opacity-75', + ]))->render() . $this->slot; } if ($this->iconRight !== '') { - $this->slot .= ''; + $this->slot .= (new Icon([ + 'glyph' => $this->iconRight, + 'class' => 'ml-2 opacity-75', + ]))->render(); } unset($this->attributes['slot']); diff --git a/app/Views/Components/DropdownMenu.php b/app/Views/Components/DropdownMenu.php index 17038786..ef4f1e22 100644 --- a/app/Views/Components/DropdownMenu.php +++ b/app/Views/Components/DropdownMenu.php @@ -11,6 +11,12 @@ class DropdownMenu extends Component { public string $id = ''; + public string $placement = 'bottom-end'; + + public string $offsetX = '0'; + + public string $offsetY = '0'; + public array $items = []; public function setItems(string $value): void @@ -48,7 +54,9 @@ class DropdownMenu extends Component class="absolute z-50 flex flex-col py-2 text-black whitespace-no-wrap bg-white border-black rounded-lg border-3" aria-labelledby="{$this->labelledby}" data-dropdown="menu" - data-dropdown-placement="bottom-end">{$menuItems} + data-dropdown-placement="{$this->placement}" + data-dropdown-offset-x="{$this->offsetX}" + data-dropdown-offset-y="{$this->offsetY}">{$menuItems} HTML; } } diff --git a/app/Views/Components/Forms/Checkbox.php b/app/Views/Components/Forms/Checkbox.php index 69973dc6..e9070873 100644 --- a/app/Views/Components/Forms/Checkbox.php +++ b/app/Views/Components/Forms/Checkbox.php @@ -17,12 +17,16 @@ class Checkbox extends FormComponent public function render(): string { + $attributes = [ + 'id' => $this->value, + 'name' => $this->name, + 'class' => 'form-checkbox text-pine-500 border-black border-3 focus:ring-castopod w-6 h-6', + ]; + if ($this->required) { + $attributes['required'] = 'required'; + } $checkboxInput = form_checkbox( - [ - 'id' => $this->value, - 'name' => $this->name, - 'class' => 'form-checkbox text-pine-500 border-black border-3 focus:ring-castopod w-6 h-6', - ], + $attributes, 'yes', old($this->name) ? old($this->name) === $this->value : $this->isChecked, ); @@ -30,10 +34,7 @@ class Checkbox extends FormComponent $hint = $this->hint === null ? '' : hint_tooltip($this->hint, 'ml-1'); return << - {$checkboxInput} - {$this->slot}{$hint} - + HTML; } } diff --git a/app/Views/Components/Forms/Field.php b/app/Views/Components/Forms/Field.php index dd70c639..8f81fc24 100644 --- a/app/Views/Components/Forms/Field.php +++ b/app/Views/Components/Forms/Field.php @@ -40,12 +40,15 @@ class Field extends FormComponent unset($fieldComponentAttributes['helperText']); unset($fieldComponentAttributes['hintText']); - $fieldComponentAttributes = flatten_attributes($fieldComponentAttributes); + $fieldComponentAttributes['class'] = 'mb-1'; + + $element = __NAMESPACE__ . '\\' . $this->as; + $fieldElement = new $element($fieldComponentAttributes); return << {$this->label} - as} {$fieldComponentAttributes} class="mb-1"/> + {$fieldElement->render()} {$helperText} HTML; diff --git a/app/Views/Components/Forms/Radio.php b/app/Views/Components/Forms/Radio.php index fa1010fd..e34f25f2 100644 --- a/app/Views/Components/Forms/Radio.php +++ b/app/Views/Components/Forms/Radio.php @@ -26,7 +26,7 @@ class Radio extends FormComponent ); return <<{$radioInput}{$this->slot} + HTML; } } diff --git a/app/Views/Components/Heading.php b/app/Views/Components/Heading.php index 249bc183..2ddd3306 100644 --- a/app/Views/Components/Heading.php +++ b/app/Views/Components/Heading.php @@ -23,7 +23,7 @@ class Heading extends Component 'large' => 'text-3xl', ]; - $class = $this->class . ' relative z-10 font-bold text-pine-800 font-display before:w-full before:absolute before:h-1/2 before:left-0 before:bottom-0 before:rounded-full before:bg-pine-100 before:-z-10 ' . $sizeClasses[$this->size]; + $class = $this->class . ' relative z-10 font-bold text-pine-800 font-display before:w-full before:absolute before:h-1/2 before:left-0 before:bottom-0 before:rounded-full before:bg-pine-100 before:z-[-10] ' . $sizeClasses[$this->size]; return <<tagName} class="{$class}">{$this->slot}tagName}> diff --git a/tailwind.config.js b/tailwind.config.js index dbc52011..cf66ca79 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -51,20 +51,15 @@ module.exports = { admin: "300px calc(100% - 300px)", podcast: "1fr minmax(auto, 960px) 1fr", podcastMain: "1fr minmax(200px, 300px)", - podcasts: "repeat(auto-fill, minmax(14rem, 1fr))", + cards: "repeat(auto-fill, minmax(14rem, 1fr))", + latestEpisodes: "repeat(5, 1fr)", }, gridTemplateRows: { admin: "40px 1fr", }, - zIndex: { - "-10": "-10", - }, borderWidth: { 3: "3px", }, - ringWidth: { - 3: "3px", - }, }, }, variants: {}, diff --git a/themes/cp_admin/_layout.php b/themes/cp_admin/_layout.php index daf87339..2bac8cff 100644 --- a/themes/cp_admin/_layout.php +++ b/themes/cp_admin/_layout.php @@ -26,11 +26,11 @@
-
- renderSection('pageTitle') ?> +
+ renderSection('pageTitle') ?> renderSection('headerLeft') ?>
-
renderSection('headerRight') ?>
+
renderSection('headerRight') ?>
diff --git a/themes/cp_admin/_partials/_nav_aside.php b/themes/cp_admin/_partials/_nav_aside.php index d704da04..6abe45c4 100644 --- a/themes/cp_admin/_partials/_nav_aside.php +++ b/themes/cp_admin/_partials/_nav_aside.php @@ -9,7 +9,7 @@ diff --git a/themes/cp_admin/_partials/_nav_header.php b/themes/cp_admin/_partials/_nav_header.php index d1ee029b..bb97fdd1 100644 --- a/themes/cp_admin/_partials/_nav_header.php +++ b/themes/cp_admin/_partials/_nav_header.php @@ -22,7 +22,7 @@ aria-expanded="false">
podcasts === [] ? '' : '' ?> + ->podcasts === [] ? '' : '' ?>
username ?> diff --git a/themes/cp_admin/episode/_card.php b/themes/cp_admin/episode/_card.php new file mode 100644 index 00000000..a77f478b --- /dev/null +++ b/themes/cp_admin/episode/_card.php @@ -0,0 +1,50 @@ + \ No newline at end of file diff --git a/themes/cp_admin/episode/create.php b/themes/cp_admin/episode/create.php index d79993b1..d9755458 100644 --- a/themes/cp_admin/episode/create.php +++ b/themes/cp_admin/episode/create.php @@ -11,7 +11,7 @@ section('content') ?> - +
diff --git a/themes/cp_admin/episode/edit.php b/themes/cp_admin/episode/edit.php index 88022107..1f4d87f6 100644 --- a/themes/cp_admin/episode/edit.php +++ b/themes/cp_admin/episode/edit.php @@ -15,7 +15,7 @@ section('content') ?> - + diff --git a/themes/cp_admin/episode/list.php b/themes/cp_admin/episode/list.php index e035285f..9f571ef5 100644 --- a/themes/cp_admin/episode/list.php +++ b/themes/cp_admin/episode/list.php @@ -73,10 +73,15 @@ [ 'header' => lang('Episode.list.actions'), 'cell' => function ($episode, $podcast) { - return '' . - 'id . '-menu" labelledby="more-dropdown-' . $episode->id . '" offsetY="-24" items="' . esc(json_encode([ + [ + 'type' => 'link', + 'title' => lang('Episode.go_to_page'), + 'uri' => route_to('episode', $podcast->handle, $episode->slug), + ], [ 'type' => 'link', 'title' => lang('Episode.edit'), @@ -97,11 +102,6 @@ 'title' => lang('Episode.soundbites'), 'uri' => route_to('soundbites-edit', $podcast->id, $episode->id), ], - [ - 'type' => 'link', - 'title' => lang('Episode.go_to_page'), - 'uri' => route_to('episode', $podcast->handle, $episode->slug), - ], [ 'type' => 'separator', ], diff --git a/themes/cp_admin/episode/publish.php b/themes/cp_admin/episode/publish.php index 083e578e..a149e6f4 100644 --- a/themes/cp_admin/episode/publish.php +++ b/themes/cp_admin/episode/publish.php @@ -14,7 +14,7 @@ route_to('episode-view', $podcast->id, $episode->id), icon('arrow-left', 'mr-2 text-lg') . lang('Episode.publish_form.back_to_episode_dashboard'), [ - 'class' => 'inline-flex items-center font-semibold mr-4 text-sm', + 'class' => 'inline-flex items-center font-semibold mr-4 text-sm focus:ring-castopod', ], ) ?> diff --git a/themes/cp_admin/person/_card.php b/themes/cp_admin/person/_card.php new file mode 100644 index 00000000..c5049829 --- /dev/null +++ b/themes/cp_admin/person/_card.php @@ -0,0 +1,33 @@ + \ No newline at end of file diff --git a/themes/cp_admin/person/edit.php b/themes/cp_admin/person/edit.php index 3288332a..49c2ca48 100644 --- a/themes/cp_admin/person/edit.php +++ b/themes/cp_admin/person/edit.php @@ -11,11 +11,9 @@ section('content') ?> - + -<?= $person->full_name ?> - section('content') ?> -
- + +
- + $person, + ]) ?> - -

- -
+
+ +

+ endSection() ?> diff --git a/themes/cp_admin/podcast/_card.php b/themes/cp_admin/podcast/_card.php new file mode 100644 index 00000000..8db60308 --- /dev/null +++ b/themes/cp_admin/podcast/_card.php @@ -0,0 +1,27 @@ + diff --git a/themes/cp_admin/podcast/import.php b/themes/cp_admin/podcast/import.php index d01838c3..d9fad736 100644 --- a/themes/cp_admin/podcast/import.php +++ b/themes/cp_admin/podcast/import.php @@ -10,7 +10,7 @@ section('content') ?> - + diff --git a/themes/cp_admin/podcast/latest_episodes.php b/themes/cp_admin/podcast/latest_episodes.php index 53490112..756b0a70 100644 --- a/themes/cp_admin/podcast/latest_episodes.php +++ b/themes/cp_admin/podcast/latest_episodes.php @@ -4,90 +4,17 @@ +) ?>" class="inline-flex items-center text-sm underline hover:no-underline focus:ring-castopod"> -
+
- + $episode, + ]) ?>
diff --git a/themes/cp_admin/podcast/list.php b/themes/cp_admin/podcast/list.php index ff3e82a3..6736877e 100644 --- a/themes/cp_admin/podcast/list.php +++ b/themes/cp_admin/podcast/list.php @@ -16,49 +16,12 @@ section('content') ?> -
+
- + $podcast, + ]) ?>

diff --git a/themes/cp_app/_admin_navbar.php b/themes/cp_app/_admin_navbar.php index 1de584c5..69a32a1f 100644 --- a/themes/cp_app/_admin_navbar.php +++ b/themes/cp_app/_admin_navbar.php @@ -1,4 +1,4 @@ -
+
@@ -20,7 +20,7 @@ aria-expanded="false">
podcasts === [] ? '' : '' ?> + ->podcasts === [] ? '' : '' ?>
username ?> diff --git a/themes/cp_app/_layout.php b/themes/cp_app/_layout.php index ea885008..eda77ca6 100644 --- a/themes/cp_app/_layout.php +++ b/themes/cp_app/_layout.php @@ -24,9 +24,9 @@
-
+
@@ -42,7 +42,7 @@ - 'Castopod', + 'Castopod', ]) ?> diff --git a/themes/cp_app/_persons_modal.php b/themes/cp_app/_persons_modal.php index 0905909a..6822ed01 100644 --- a/themes/cp_app/_persons_modal.php +++ b/themes/cp_app/_persons_modal.php @@ -19,9 +19,9 @@
<?= $person->full_name ?>
-

+

information_url): ?> - full_name ?> + full_name ?> full_name ?> diff --git a/themes/cp_app/embed.php b/themes/cp_app/embed.php index 1fc63441..2817de36 100644 --- a/themes/cp_app/embed.php +++ b/themes/cp_app/embed.php @@ -19,7 +19,7 @@ <?= $episode->title ?>
-
diff --git a/themes/cp_app/episode/_layout.php b/themes/cp_app/episode/_layout.php index 8113ffb9..73018e1c 100644 --- a/themes/cp_app/episode/_layout.php +++ b/themes/cp_app/episode/_layout.php @@ -31,8 +31,8 @@
-

-
+
fundingPlatforms, 'is_visible'), true)): ?> @@ -75,7 +75,7 @@

title ?>

persons !== []): ?> - \ No newline at end of file diff --git a/themes/cp_app/home.php b/themes/cp_app/home.php index 61c03e3f..310f5053 100644 --- a/themes/cp_app/home.php +++ b/themes/cp_app/home.php @@ -32,16 +32,19 @@

()

-
+
- -
- <?= $podcast->title ?> -

title ?>

-

@handle ?>

+ +
+
+
+ <?= $podcast->title ?> +
+
+

title ?>

+

@handle ?>

+
@@ -54,7 +57,7 @@ - 'Castopod' . icon('social/castopod', 'ml-1 text-lg') . '', + 'Castopod' . icon('social/castopod', 'ml-1 text-lg') . '', ]) ?> diff --git a/themes/cp_app/map.php b/themes/cp_app/map.php index dc5ec1cb..e59fcd01 100644 --- a/themes/cp_app/map.php +++ b/themes/cp_app/map.php @@ -23,9 +23,9 @@
-
+
@@ -39,7 +39,7 @@ - 'Castopod' . icon('social/castopod', 'ml-1 text-lg') . '', + 'Castopod' . icon('social/castopod', 'ml-1 text-lg') . '', ]) ?> diff --git a/themes/cp_app/page.php b/themes/cp_app/page.php index 1cef9316..b8c0f8e7 100644 --- a/themes/cp_app/page.php +++ b/themes/cp_app/page.php @@ -20,9 +20,9 @@
-
+
@@ -38,7 +38,7 @@ - 'Castopod' . icon('social/castopod', 'ml-1 text-lg') . '', + 'Castopod' . icon('social/castopod', 'ml-1 text-lg') . '', ]) ?> diff --git a/themes/cp_app/podcast/_partials/navigation.php b/themes/cp_app/podcast/_partials/navigation.php index c26fa498..4bf09e8c 100644 --- a/themes/cp_app/podcast/_partials/navigation.php +++ b/themes/cp_app/podcast/_partials/navigation.php @@ -18,7 +18,7 @@ $navigationItems = [ \ No newline at end of file diff --git a/themes/cp_app/podcast/_partials/sidebar.php b/themes/cp_app/podcast/_partials/sidebar.php index 441148ce..9d35a766 100644 --- a/themes/cp_app/podcast/_partials/sidebar.php +++ b/themes/cp_app/podcast/_partials/sidebar.php @@ -1,7 +1,7 @@