feat: toggle podcast sidebar on smaller screens

update tailwind to v3.0.0-alpha with its official plugins (forms, typography)

app/Language/en/Comment.php

@@ -10,7 +10,7 @@ declare(strict_types=1);
 
 return [
     'title' => "{actorDisplayName}'s comment for {episodeTitle}",
-    'back_to_episode' => 'Back to {episodeTitle}',
+    'back_to_comments' => 'Back to comments',
     'form' => [
         'episode_message_placeholder' => 'Write a comment...',
         'reply_to_placeholder' => 'Reply to @{actorUsername}',

app/Resources/js/modules/SidebarToggler.ts

@@ -1,62 +1,65 @@
 const SidebarToggler = (): void => {
   const sidebar = document.querySelector(
-    "aside[id='admin-sidebar']"
+    "aside[data-sidebar-toggler='sidebar']"
   ) as HTMLElement;
   const toggler = document.querySelector(
-    "button[id='sidebar-toggler']"
+    "button[data-sidebar-toggler='toggler']"
   ) as HTMLButtonElement;
   const sidebarBackdrop = document.querySelector(
-    "div[id='sidebar-backdrop']"
+    "div[data-sidebar-toggler='backdrop']"
-  ) as HTMLElement;
+  ) as HTMLDivElement;
 
-  const setAriaExpanded = (isExpanded: "true" | "false") => {
+  if (typeof sidebar.dataset.toggleClass !== "undefined") {
-    toggler.setAttribute("aria-expanded", isExpanded);
+    console.log("zefzef");
-    sidebarBackdrop.setAttribute("aria-expanded", isExpanded);
-  };
 
-  const hideSidebar = () => {
+    const setAriaExpanded = (isExpanded: "true" | "false") => {
-    setAriaExpanded("false");
+      toggler.setAttribute("aria-expanded", isExpanded);
-    sidebar.classList.add("-translate-x-full");
+      sidebarBackdrop.setAttribute("aria-expanded", isExpanded);
-    sidebarBackdrop.classList.add("hidden");
+    };
-    toggler.style.transform = "translateX(0px)";
-  };
 
-  const showSidebar = () => {
+    const hideSidebar = () => {
-    setAriaExpanded("true");
-    sidebar.classList.remove("-translate-x-full");
-    sidebarBackdrop.classList.remove("hidden");
-    toggler.style.transform =
-      "translateX(" + sidebar.getBoundingClientRect().width + "px)";
-  };
-
-  toggler.addEventListener("click", () => {
-    if (sidebar.classList.contains("-translate-x-full")) {
-      showSidebar();
-    } else {
-      hideSidebar();
-    }
-  });
-
-  sidebarBackdrop.addEventListener("click", () => {
-    if (!sidebar.classList.contains("-translate-x-full")) {
-      hideSidebar();
-    }
-  });
-
-  const setAriaExpandedOnWindowEvent = () => {
-    const isExpanded =
-      !sidebar.classList.contains("-translate-x-full") ||
-      window.innerWidth >= 768;
-    const ariaExpanded = toggler.getAttribute("aria-expanded");
-    if (isExpanded && (!ariaExpanded || ariaExpanded === "false")) {
-      setAriaExpanded("true");
-    } else if (!isExpanded && (!ariaExpanded || ariaExpanded === "true")) {
       setAriaExpanded("false");
-    }
+      sidebar.classList.add(sidebar.dataset.toggleClass as string);
-  };
+      sidebarBackdrop.classList.add("hidden");
+      toggler.classList.add(toggler.dataset.toggleClass as string);
+    };
 
-  window.addEventListener("load", setAriaExpandedOnWindowEvent);
+    const showSidebar = () => {
-  window.addEventListener("resize", setAriaExpandedOnWindowEvent);
+      setAriaExpanded("true");
+      sidebar.classList.remove(sidebar.dataset.toggleClass as string);
+      sidebarBackdrop.classList.remove("hidden");
+      toggler.classList.remove(toggler.dataset.toggleClass as string);
+    };
+
+    toggler.addEventListener("click", () => {
+      if (sidebar.classList.contains(sidebar.dataset.hideClass as string)) {
+        showSidebar();
+      } else {
+        hideSidebar();
+      }
+    });
+
+    sidebarBackdrop.addEventListener("click", () => {
+      if (!sidebar.classList.contains(sidebar.dataset.hideClass as string)) {
+        hideSidebar();
+      }
+    });
+
+    const setAriaExpandedOnWindowEvent = () => {
+      const isExpanded =
+        !sidebar.classList.contains(sidebar.dataset.hideClass as string) ||
+        window.innerWidth >= 768;
+      const ariaExpanded = toggler.getAttribute("aria-expanded");
+      if (isExpanded && (!ariaExpanded || ariaExpanded === "false")) {
+        setAriaExpanded("true");
+      } else if (!isExpanded && (!ariaExpanded || ariaExpanded === "true")) {
+        setAriaExpanded("false");
+      }
+    };
+
+    window.addEventListener("load", setAriaExpandedOnWindowEvent);
+    window.addEventListener("resize", setAriaExpandedOnWindowEvent);
+  }
 };
 
 export default SidebarToggler;

app/Resources/js/podcast.ts

@@ -1,4 +1,5 @@
 import "@github/time-elements";
+import SidebarToggler from "./modules/SidebarToggler";
 import Time from "./modules/Time";
 import Toggler from "./modules/Toggler";
 import Tooltip from "./modules/Tooltip";
@@ -6,3 +7,4 @@ import Tooltip from "./modules/Tooltip";
 Time();
 Toggler();
 Tooltip();
+SidebarToggler();

package.json

@@ -38,6 +38,7 @@
     "@github/markdown-toolbar-element": "^1.5.3",
     "@github/time-elements": "^3.1.2",
     "@popperjs/core": "^2.10.2",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@vime/core": "^5.0.34",
     "choices.js": "^9.0.1",
     "flatpickr": "^4.6.9",
@@ -45,7 +46,7 @@
     "leaflet.markercluster": "^1.5.3",
     "lit": "^2.0.2",
     "marked": "^3.0.7",
-    "xml-formatter": "^2.5.0"
+    "xml-formatter": "^2.5.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",
@@ -54,10 +55,9 @@
     "@semantic-release/exec": "^6.0.1",
     "@semantic-release/git": "^10.0.0",
     "@semantic-release/gitlab": "^7.0.3",
-    "@tailwindcss/aspect-ratio": "^0.3.0",
+    "@tailwindcss/forms": "^0.4.0-alpha.1",
-    "@tailwindcss/forms": "^0.3.4",
     "@tailwindcss/line-clamp": "^0.2.2",
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/typography": "^0.5.0-alpha.2",
     "@types/leaflet": "^1.7.5",
     "@types/marked": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
@@ -68,22 +68,22 @@
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.2",
+    "husky": "^7.0.4",
     "is-ci": "^3.0.0",
     "lint-staged": "^11.2.3",
     "postcss-import": "^14.0.2",
+    "postcss-nesting": "^8.0.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^7.0.4",
     "prettier": "2.4.1",
     "prettier-plugin-organize-imports": "^2.3.4",
     "semantic-release": "^18.0.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.0.0",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard": "^23.0.0",
     "svgo": "^2.7.0",
-    "tailwindcss": "^2.2.17",
+    "tailwindcss": "^3.0.0-alpha.1",
-    "tailwindcss-scroll-snap": "^1.1.0",
     "typescript": "^4.4.4",
-    "vite": "^2.6.9"
+    "vite": "^2.6.10"
   },
   "lint-staged": {
     "*.{js,ts,css,md,json}": "prettier --write",

postcss.config.js

@@ -4,8 +4,12 @@ module.exports = {
   plugins: [
     require("postcss-import"),
     require("postcss-reporter"),
+    require("tailwindcss/nesting")(require("postcss-nesting")),
     require("tailwindcss"),
-    require("postcss-preset-env")({ stage: 1 }),
+    require("postcss-preset-env")({
+      stage: 1,
+      features: { "nesting-rules": false },
+    }),
     ...(process.env.NODE_ENV === "production"
       ? [
           require("cssnano")({

tailwind.config.js

@@ -1,10 +1,8 @@
 /* eslint-disable */
 const defaultTheme = require("tailwindcss/defaultTheme");
-const colors = require("tailwindcss/colors");
 
 module.exports = {
-  mode: "jit",
+  content: [
-  purge: [
     "./app/Views/**/*.php",
     "./modules/**/Views/**/*.php",
     "./themes/**/*.php",
@@ -42,10 +40,6 @@ module.exports = {
           800: "#b21a39",
           900: "#8e162e",
         },
-        orange: colors.orange,
-      },
-      spacing: {
-        112: "28rem",
       },
       gridTemplateColumns: {
         admin: "300px calc(100% - 300px)",
@@ -67,7 +61,5 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/line-clamp"),
-    require("@tailwindcss/aspect-ratio"),
-    require("tailwindcss-scroll-snap"),
   ],
 };

themes/cp_admin/_layout.php

@@ -18,7 +18,6 @@
 </head>
 
 <body class="relative grid items-start min-h-screen bg-pine-50 grid-cols-admin grid-rows-admin">
-    <div id="sidebar-backdrop" role="button" tabIndex="0" aria-label="Close" class="fixed z-50 hidden w-full h-full bg-gray-900 bg-opacity-50 md:hidden"></div>
     <?= $this->include('_partials/_nav_header') ?>
     <?= $this->include('_partials/_nav_aside') ?>
     <main class="relative max-w-full col-start-1 row-start-2 col-span-full md:col-start-2 md:col-span-1">
@@ -39,9 +38,4 @@
             <?= $this->renderSection('content') ?>
         </div>
     </main>
-    <button
-        type="button"
-        id="sidebar-toggler"
-        class="fixed bottom-0 left-0 z-50 p-3 mb-3 ml-3 text-xl transition duration-300 ease-in-out bg-white border-2 rounded-full shadow-lg md:hidden hover:bg-gray-100 focus:ring-castopod"
-        style="transform: translateX(0px);"><?= icon('menu') ?></button>
 </body>

themes/cp_admin/_partials/_nav_aside.php

@@ -1,4 +1,5 @@
-<aside id="admin-sidebar" class="h-full max-h-[calc(100vh-40px)] sticky z-50 flex flex-col row-start-2 col-start-1 text-white transition duration-200 ease-in-out transform -translate-x-full border-r top-10 border-pine-900 bg-pine-800 md:translate-x-0">
+<div data-sidebar-toggler="backdrop" role="button" tabIndex="0" aria-label="Close" class="fixed z-50 hidden w-full h-full bg-gray-800/75 md:hidden"></div>
+<aside data-sidebar-toggler="sidebar" data-toggle-class="-translate-x-full" data-hide-class="-translate-x-full" class="h-full max-h-[calc(100vh-40px)] sticky z-50 flex flex-col row-start-2 col-start-1 text-white transition duration-200 ease-in-out transform -translate-x-full border-r top-10 border-pine-900 bg-pine-800 md:translate-x-0">
     <?php if (isset($podcast) && isset($episode)): ?>
         <?= $this->include('episode/_sidebar') ?>
     <?php elseif (isset($podcast)): ?>

themes/cp_admin/_partials/_nav_header.php

@@ -1,4 +1,7 @@
-<header class="sticky top-0 z-50 flex items-center justify-between h-10 text-white border-b col-span-full bg-pine-800 border-pine-900">
+<header class="sticky top-0 z-[60] flex items-center h-10 text-white border-b col-span-full bg-pine-800 border-pine-900">
+    <button type="button"
+        data-sidebar-toggler="toggler"
+        class="h-full pr-1 text-xl md:hidden focus:ring-castopod focus:ring-inset"><?= icon('menu') ?></button>
     <div class="inline-flex items-center h-full">
         <a href="<?= route_to(
     'admin',
@@ -14,7 +17,7 @@
     </div>
     <button
         type="button"
-        class="inline-flex items-center h-full px-3 text-sm font-semibold focus:ring-inset focus:ring-castopod gap-x-2"
+        class="inline-flex items-center h-full px-3 ml-auto text-sm font-semibold focus:ring-inset focus:ring-castopod gap-x-2"
         id="my-account-dropdown"
         data-dropdown="button"
         data-dropdown-target="my-account-dropdown-menu"

themes/cp_app/episode/_layout.php

@@ -24,7 +24,7 @@
         ->asset('js/audio-player.ts', 'js') ?>
 </head>
 
-<body class="grid items-start mx-auto grid-cols-podcast bg-pine-50">
+<body class="flex flex-col min-h-screen mx-auto md:min-h-full md:grid md:grid-cols-podcast bg-pine-50">
     <?php if (can_user_interact()): ?>
         <div class="col-span-full">
             <?= $this->include('_admin_navbar') ?>
@@ -124,10 +124,11 @@
         <?php endif; ?>
     </div>
     <?= $this->include('episode/_partials/navigation') ?>
-    <div class="relative grid items-start col-start-2 pt-6 pb-4 grid-cols-podcastMain gap-x-6">
+    <div class="relative grid items-start flex-1 col-start-2 grid-cols-podcastMain gap-x-6">
-        <main class="w-full col-span-full md:col-span-1">
+        <main class="w-full col-start-1 row-start-1 py-6 col-span-full md:col-span-1">
             <?= $this->renderSection('content') ?>
         </main>
+        <div data-sidebar-toggler="backdrop" class="absolute top-0 left-0 z-10 hidden w-full h-full bg-pine-800/75 md:hidden" role="button" tabIndex="0" aria-label="Close"></div>
         <?= $this->include('podcast/_partials/sidebar') ?>
     </div>
     <?= view('_persons_modal', [

themes/cp_app/episode/_partials/navigation.php

@@ -18,5 +18,5 @@ $navigationItems = [
         <?php $isActive = url_is($item['uri']); ?>
         <a href="<?= $item['uri'] ?>" class="px-4 py-1 text-sm font-semibold uppercase focus:ring-castopod border-b-4<?= $isActive ? ' border-b-4 text-pine-500 border-pine-500' : ' text-gray-500 hover:text-gray-900 hover:border-gray-200 border-transparent' ?>"><?= $item['label'] ?><span class="px-2 ml-1 font-semibold rounded-full <?= $isActive ? ' bg-pine-100' : ' bg-gray-100' ?>"><?= $item['labelInfo'] ?></span></a>
     <?php endforeach; ?>
-    <button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod" data-toggle="podcast-sidebar" data-toggle-class="absolute sticky top-0 right-0 hidden bg-white top-12"><?= icon('menu') ?></button>
+    <button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod" data-sidebar-toggler="toggler"><?= icon('menu') ?></button>
 </nav>

themes/cp_app/episode/comment.php

@@ -21,13 +21,10 @@
 <div class="max-w-2xl px-6 mx-auto">
     <nav class="py-3">
         <a href="<?= route_to('episode', $podcast->handle, $episode->slug) ?>"
-        class="inline-flex items-center px-4 py-2 text-sm"><?= icon(
+        class="inline-flex items-center px-4 py-2 text-sm focus:ring-castopod"><?= icon(
         'arrow-left',
         'mr-2 text-lg',
-    ) .
+    ) . lang('Comment.back_to_comments') ?></a>
-            lang('Comment.back_to_episode', [
-                'episodeTitle' => $episode->title,
-            ]) ?></a>
     </nav>
     <div class="pb-12">
         <?= $this->include('episode/_partials/comment_with_replies') ?>

themes/cp_app/podcast/_layout.php

@@ -24,14 +24,14 @@
         ->asset('js/audio-player.ts', 'js') ?>
 </head>
 
-<body class="grid items-start mx-auto grid-cols-podcast bg-pine-50">
+<body class="flex flex-col min-h-screen mx-auto md:min-h-full md:grid md:grid-cols-podcast bg-pine-50">
     <?php if (can_user_interact()): ?>
         <div class="col-span-full">
             <?= $this->include('_admin_navbar') ?>
         </div>
     <?php endif; ?>
 
-    <header class="z-50 flex flex-col-reverse justify-between w-full col-start-2 bg-top bg-no-repeat bg-cover sm:flex-row sm:items-end bg-pine-800" style="background-image: url('<?= $podcast->actor->cover_image_url ?>'); aspect-ratio: 3 / 1;">
+    <header class="z-50 flex flex-col-reverse justify-between w-full col-start-2 bg-top bg-no-repeat bg-cover sm:flex-row sm:items-end bg-pine-800 aspect-[3/1]" style="background-image: url('<?= $podcast->actor->cover_image_url ?>');">
         <div class="flex items-center pl-4 -mb-6 md:pl-8 md:-mb-8 gap-x-4">
             <img src="<?= $podcast->image->thumbnail_url ?>" alt="<?= $podcast->title ?>" loading="lazy" class="h-24 rounded-full md:h-28 ring-4 ring-white" />
             <div class="relative flex flex-col text-white -top-2">
@@ -61,8 +61,8 @@
         </div>
     </header>
     <?= $this->include('podcast/_partials/navigation') ?>
-    <div class="grid items-start col-start-2 pb-4 mt-6 grid-cols-podcastMain gap-x-6">
+    <div class="relative grid items-start flex-1 col-start-2 grid-cols-podcastMain gap-x-6">
-        <main class="w-full max-w-xl mx-auto col-span-full md:col-span-1">
+        <main class="w-full max-w-xl col-start-1 row-start-1 py-6 mx-auto col-span-full md:col-span-1">
             <?= $this->renderSection('content') ?>
         </main>
         <?= $this->include('podcast/_partials/sidebar') ?>

themes/cp_app/podcast/_partials/navigation.php

@@ -15,10 +15,10 @@ $navigationItems = [
     ],
 ]
 ?>
-<nav class="sticky z-40 flex col-start-2 px-4 pt-8 bg-white shadow gap-x-2 md:gap-x-4 md:px-8 -top-8 md:-top-12 rounded-conditional-b-xl md:pt-12 ">
+<nav class="sticky z-40 flex col-start-2 px-2 pt-8 bg-white shadow gap-x-2 md:gap-x-4 md:px-8 -top-6 md:-top-10 rounded-conditional-b-xl md:pt-12 ">
     <?php foreach ($navigationItems as $item): ?>
         <?php $isActive = url_is($item['uri']); ?>
         <a href="<?= $item['uri'] ?>" class="px-4 py-1 text-sm font-semibold uppercase focus:ring-castopod border-b-4<?= $isActive ? ' border-b-4 text-pine-500 border-pine-500' : ' text-gray-500 hover:text-gray-900 hover:border-gray-200 border-transparent' ?>"><?= $item['label'] ?></a>
     <?php endforeach; ?>
-    <button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod"><?= icon('menu') ?></button>
+    <button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod" data-sidebar-toggler="toggler"><?= icon('menu') ?></button>
 </nav>

themes/cp_app/podcast/_partials/sidebar.php

@@ -1,6 +1,6 @@
-<aside id="podcast-sidebar" class="sticky hidden col-span-1 md:block top-12">
+<div data-sidebar-toggler="backdrop" class="absolute top-0 left-0 z-10 hidden w-full h-full bg-pine-800/75 md:hidden" role="button" tabIndex="0" aria-label="Close"></div>
-    <div class="absolute z-0 w-full h-full sm:hidden bg-pine-800/50"></div>
+<aside id="podcast-sidebar" data-sidebar-toggler="sidebar" data-toggle-class="hidden" data-hide-class="hidden" class="p-4 py-6 z-20 shadow-2xl md:shadow-none hidden h-full col-span-1 col-start-2 row-start-1 md:block bg-pine-50 w-[300px]">
-    <div class="z-10 bg-pine-50">
+    <div class="sticky z-10 bg-pine-50 top-12">
         <a href="<?= route_to('podcast_feed', $podcast->handle) ?>" class="inline-flex items-center mb-6 text-sm font-semibold focus:ring-castopod text-pine-800 group" target="_blank" rel="noopener noreferrer">
             <?= icon('rss', ' mr-2 bg-orange-500 text-xl text-white group-hover:bg-orange-700 p-1 w-6 h-6 inline-flex items-center justify-center rounded-lg') . lang('Podcast.feed') ?>
         </a>

themes/cp_app/post/post.php

@@ -20,7 +20,7 @@
 <?= $this->section('content') ?>
 <nav class="py-2">
     <a href="<?= route_to('podcast-activity', $podcast->handle) ?>"
-    class="inline-flex items-center px-4 py-2 text-sm"><?= icon(
+    class="inline-flex items-center px-4 py-2 text-sm focus:ring-castopod"><?= icon(
         'arrow-left',
         'mr-2 text-lg',
     ) .