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

feat: toggle podcast sidebar on smaller screens 

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

app/Language/en/Comment.php

+1 −1
Original line number Diff line number Diff line
@@ -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

+53 −50
Original line number Diff line number Diff line 
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']"

  ) as HTMLElement;

    "div[data-sidebar-toggler='backdrop']"

  ) as HTMLDivElement;



  if (typeof sidebar.dataset.toggleClass !== "undefined") {

    console.log("zefzef");



    const setAriaExpanded = (isExpanded: "true" | "false") => {

      toggler.setAttribute("aria-expanded", isExpanded);
@@ -16,21 +19,20 @@ const SidebarToggler = (): void => { 


    const hideSidebar = () => {

      setAriaExpanded("false");

    sidebar.classList.add("-translate-x-full");

      sidebar.classList.add(sidebar.dataset.toggleClass as string);

      sidebarBackdrop.classList.add("hidden");

    toggler.style.transform = "translateX(0px)";

      toggler.classList.add(toggler.dataset.toggleClass as string);

    };



    const showSidebar = () => {

      setAriaExpanded("true");

    sidebar.classList.remove("-translate-x-full");

      sidebar.classList.remove(sidebar.dataset.toggleClass as string);

      sidebarBackdrop.classList.remove("hidden");

    toggler.style.transform =

      "translateX(" + sidebar.getBoundingClientRect().width + "px)";

      toggler.classList.remove(toggler.dataset.toggleClass as string);

    };



    toggler.addEventListener("click", () => {

    if (sidebar.classList.contains("-translate-x-full")) {

      if (sidebar.classList.contains(sidebar.dataset.hideClass as string)) {

        showSidebar();

      } else {

        hideSidebar();
@@ -38,14 +40,14 @@ const SidebarToggler = (): void => { 
    });



    sidebarBackdrop.addEventListener("click", () => {

    if (!sidebar.classList.contains("-translate-x-full")) {

      if (!sidebar.classList.contains(sidebar.dataset.hideClass as string)) {

        hideSidebar();

      }

    });



    const setAriaExpandedOnWindowEvent = () => {

      const isExpanded =

      !sidebar.classList.contains("-translate-x-full") ||

        !sidebar.classList.contains(sidebar.dataset.hideClass as string) ||

        window.innerWidth >= 768;

      const ariaExpanded = toggler.getAttribute("aria-expanded");

      if (isExpanded && (!ariaExpanded || ariaExpanded === "false")) {
@@ -57,6 +59,7 @@ const SidebarToggler = (): void => { 


    window.addEventListener("load", setAriaExpandedOnWindowEvent);

    window.addEventListener("resize", setAriaExpandedOnWindowEvent);

  }

};



export default SidebarToggler;

app/Resources/js/podcast.ts

+2 −0
Original line number Diff line number Diff line 
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-lock.json

+373 −2453

File changed.

Preview size limit exceeded, changes collapsed.

package.json

+10 −10
Original line number Diff line number Diff line
@@ -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.3.4",

    "@tailwindcss/forms": "^0.4.0-alpha.1",

    "@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-config-standard": "^22.0.0",

    "stylelint": "^14.0.0",

    "stylelint-config-standard": "^23.0.0",

    "svgo": "^2.7.0",

    "tailwindcss": "^2.2.17",

    "tailwindcss-scroll-snap": "^1.1.0",

    "tailwindcss": "^3.0.0-alpha.1",

    "typescript": "^4.4.4",

    "vite": "^2.6.9"

    "vite": "^2.6.10"

  },

  "lint-staged": {

    "*.{js,ts,css,md,json}": "prettier --write",