rdelaage
/
castopod
mirror of https://code.castopod.org/adaures/castopod.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: toggle podcast sidebar on smaller screens 

update tailwind to v3.0.0-alpha with its official plugins (forms, typography)
This commit is contained in:
Yassine Doghri 2021-10-22 10:51:43 +00:00
parent c546be385b
commit f0205ec274
17 changed files with 320 additions and 2403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Language/en/Comment.php
View File

@ -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}',

99
app/Resources/js/modules/SidebarToggler.ts
View File

@ -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']"
) as HTMLElement;
"div[data-sidebar-toggler='backdrop']"
) as HTMLDivElement;
const setAriaExpanded = (isExpanded: "true" | "false") => {
toggler.setAttribute("aria-expanded", isExpanded);
sidebarBackdrop.setAttribute("aria-expanded", isExpanded);
};
if (typeof sidebar.dataset.toggleClass !== "undefined") {
console.log("zefzef");
const hideSidebar = () => {
setAriaExpanded("false");
sidebar.classList.add("-translate-x-full");
sidebarBackdrop.classList.add("hidden");
toggler.style.transform = "translateX(0px)";
};
const setAriaExpanded = (isExpanded: "true" | "false") => {
toggler.setAttribute("aria-expanded", isExpanded);
sidebarBackdrop.setAttribute("aria-expanded", isExpanded);
};
const showSidebar = () => {
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")) {
const hideSidebar = () => {
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);
window.addEventListener("resize", setAriaExpandedOnWindowEvent);
const showSidebar = () => {
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;

2
app/Resources/js/podcast.ts
View File

@ -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();

2532
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
package.json
View File

@ -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",

6
postcss.config.js
View File

@ -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")({

10
tailwind.config.js
View File

@ -1,10 +1,8 @@
/* eslint-disable */
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
module.exports = {
mode: "jit",
purge: [
content: [
"./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"),
],
};

6
themes/cp_admin/_layout.php
View File

@ -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>

3
themes/cp_admin/_partials/_nav_aside.php
View File

@ -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)): ?>

7
themes/cp_admin/_partials/_nav_header.php
View File

@ -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"

7
themes/cp_app/episode/_layout.php
View File

@ -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">
<main class="w-full col-span-full md:col-span-1">
<div class="relative grid items-start flex-1 col-start-2 grid-cols-podcastMain gap-x-6">
<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', [

2
themes/cp_app/episode/_partials/navigation.php
View File

@ -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>

7
themes/cp_app/episode/comment.php
View File

@ -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_episode', [
'episodeTitle' => $episode->title,
]) ?></a>
) . lang('Comment.back_to_comments') ?></a>
</nav>
<div class="pb-12">
<?= $this->include('episode/_partials/comment_with_replies') ?>

8
themes/cp_app/podcast/_layout.php
View File

@ -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">
<main class="w-full max-w-xl mx-auto col-span-full md:col-span-1">
<div class="relative grid items-start flex-1 col-start-2 grid-cols-podcastMain gap-x-6">
<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') ?>

4
themes/cp_app/podcast/_partials/navigation.php
View File

@ -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>

6
themes/cp_app/podcast/_partials/sidebar.php
View File

@ -1,6 +1,6 @@
<aside id="podcast-sidebar" class="sticky hidden col-span-1 md:block top-12">
<div class="absolute z-0 w-full h-full sm:hidden bg-pine-800/50"></div>
<div class="z-10 bg-pine-50">
<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>
<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="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>

2
themes/cp_app/post/post.php
View File

@ -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',
) .