diff --git a/app/Helpers/components_helper.php b/app/Helpers/components_helper.php
index a15db5112d1e28acd63d3931418a418b430903ab..45d12a157795d74470c7e04b2a488d088bba8fb2 100644
--- a/app/Helpers/components_helper.php
+++ b/app/Helpers/components_helper.php
@@ -41,7 +41,7 @@ if (! function_exists('button')) {
$variantClass = [
'default' => 'text-black bg-gray-300 hover:bg-gray-400',
- 'primary' => 'text-white bg-pine-700 hover:bg-pine-800',
+ 'primary' => 'text-white bg-pine-500 hover:bg-pine-800',
'secondary' => 'text-white bg-gray-700 hover:bg-gray-800',
'accent' => 'text-white bg-rose-600 hover:bg-rose-800',
'success' => 'text-white bg-green-600 hover:bg-green-700',
diff --git a/app/Resources/icons/account-circle.svg b/app/Resources/icons/account-circle.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c825dc5ae8dec3f2ebfc4d9011f44f53af27cb12
--- /dev/null
+++ b/app/Resources/icons/account-circle.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <g>
+ <path fill="none" d="M0 0h24v24H0z"/>
+ <path d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zM6.023 15.416C7.491 17.606 9.695 19 12.16 19c2.464 0 4.669-1.393 6.136-3.584A8.968 8.968 0 0 0 12.16 13a8.968 8.968 0 0 0-6.137 2.416zM12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+ </g>
+</svg>
diff --git a/app/Resources/icons/user.svg b/app/Resources/icons/user.svg
deleted file mode 100755
index f6566c8e4a53ac30fcaac7265eea7b389612ad67..0000000000000000000000000000000000000000
--- a/app/Resources/icons/user.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- <g>
- <path fill="none" d="M0 0h24v24H0z"/>
- <path d="M4 22a8 8 0 1 1 16 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z"/>
- </g>
-</svg>
diff --git a/app/Resources/styles/layout.css b/app/Resources/styles/layout.css
index e5535241b59e31606c60077b819a57ad58381ba5..8faf449dc082f2246960d518d7756a54a27bd13e 100644
--- a/app/Resources/styles/layout.css
+++ b/app/Resources/styles/layout.css
@@ -1,26 +1,33 @@
/* Admin layout */
.holy-grail-grid {
@apply grid min-h-screen overflow-y-auto;
- grid-template: 1fr auto / auto 1fr;
+ grid-template: auto 1fr auto / auto 1fr;
- & .holy-grail-sidebar {
- @apply col-start-1 col-end-2 row-start-1 row-end-3 w-80;
+ & .holy-grail__header {
+ @apply h-10 col-start-1 col-end-4 row-start-1 row-end-2;
}
- & .holy-grail-main {
- @apply w-full col-start-1 col-end-3 row-start-1 row-end-2;
+ & .holy-grail__sidebar {
+ @apply col-start-1 col-end-2 row-start-2 row-end-4;
+
+ width: 300px;
+ max-height: calc(100vh - 2.5rem);
+ }
+
+ & .holy-grail__main {
+ @apply col-start-1 col-end-3 row-start-2 row-end-3;
}
- & .holy-grail-footer {
- @apply w-full col-start-1 col-end-3 row-start-2 row-end-3;
+ & .holy-grail__footer {
+ @apply col-start-1 col-end-3 row-start-3 row-end-4;
}
@screen md {
- & .holy-grail-main {
+ & .holy-grail__main {
@apply col-start-2;
}
- & .holy-grail-footer {
+ & .holy-grail__footer {
@apply col-start-2;
}
}
diff --git a/app/Views/Components/Button.php b/app/Views/Components/Button.php
index 3ba713fde4987e7d73371e5bdd3b8c8d3146f3c4..3c29a3a3f5f84c319934d4401e5dda4d4f95727c 100644
--- a/app/Views/Components/Button.php
+++ b/app/Views/Components/Button.php
@@ -29,7 +29,7 @@ class Button extends Component
$variantClass = [
'default' => 'text-black bg-gray-300 hover:bg-gray-400',
- 'primary' => 'text-white bg-pine-700 hover:bg-pine-800',
+ 'primary' => 'text-white bg-pine-500 hover:bg-pine-800',
'secondary' => 'text-white bg-gray-700 hover:bg-gray-800',
'accent' => 'text-white bg-rose-600 hover:bg-rose-800',
'success' => 'text-white bg-green-600 hover:bg-green-700',
diff --git a/modules/Admin/Controllers/MyAccountController.php b/modules/Admin/Controllers/MyAccountController.php
index 9314724970c7a235abfc8dc9714921ac808ffe19..696f5bff76c46f26efe5e4d2424dc5b720811456 100644
--- a/modules/Admin/Controllers/MyAccountController.php
+++ b/modules/Admin/Controllers/MyAccountController.php
@@ -18,14 +18,14 @@ class MyAccountController extends BaseController
{
public function index(): string
{
- return view('my_account\view');
+ return view('my_account/view');
}
public function changePassword(): string
{
helper('form');
- return view('my_account\change_password');
+ return view('my_account/change_password');
}
public function attemptChange(): RedirectResponse
diff --git a/modules/Admin/Language/en/AdminNavigation.php b/modules/Admin/Language/en/AdminNavigation.php
index f5ca5aeab3253f21a462d861ec527a2b80847a8f..92a5f59b676bb571ea162dcbdf4a5ebbb12e98f2 100644
--- a/modules/Admin/Language/en/AdminNavigation.php
+++ b/modules/Admin/Language/en/AdminNavigation.php
@@ -9,7 +9,7 @@ declare(strict_types=1);
*/
return [
- 'go_to_website' => 'Go to website',
+ 'go_to_website' => 'View site',
'dashboard' => 'Dashboard',
'admin' => 'Home',
'podcasts' => 'Podcasts',
diff --git a/modules/Admin/Language/en/Navigation.php b/modules/Admin/Language/en/Navigation.php
index f5ca5aeab3253f21a462d861ec527a2b80847a8f..92a5f59b676bb571ea162dcbdf4a5ebbb12e98f2 100644
--- a/modules/Admin/Language/en/Navigation.php
+++ b/modules/Admin/Language/en/Navigation.php
@@ -9,7 +9,7 @@ declare(strict_types=1);
*/
return [
- 'go_to_website' => 'Go to website',
+ 'go_to_website' => 'View site',
'dashboard' => 'Dashboard',
'admin' => 'Home',
'podcasts' => 'Podcasts',
diff --git a/package-lock.json b/package-lock.json
index 5a2084d7690da53133ad310f58d4199b3d4e7f4f..92ed51a492acab5463a87fda9fd176fdec681886 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
"lit": "^2.0.0-rc.2",
"postcss-import": "^14.0.2",
"postcss-preset-env": "^6.7.0",
+ "postcss-reporter": "^7.0.2",
"prettier": "2.3.2",
"prettier-plugin-organize-imports": "^2.3.3",
"semantic-release": "^17.4.4",
@@ -62,6 +63,7 @@
"stylelint-config-standard": "^22.0.0",
"svgo": "^2.3.1",
"tailwindcss": "^2.2.7",
+ "tailwindcss-scroll-snap": "^1.1.0",
"typescript": "^4.3.5",
"vite": "^2.4.4"
}
@@ -13724,6 +13726,26 @@
"node": ">=0.10.0"
}
},
+ "node_modules/postcss-reporter": {
+ "version": "7.0.5",
+ "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz",
+ "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==",
+ "dev": true,
+ "dependencies": {
+ "picocolors": "^1.0.0",
+ "thenby": "^1.3.4"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
"node_modules/postcss-resolve-nested-selector": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -16172,6 +16194,16 @@
"postcss": "^8.0.9"
}
},
+ "node_modules/tailwindcss-scroll-snap": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/tailwindcss-scroll-snap/-/tailwindcss-scroll-snap-1.1.0.tgz",
+ "integrity": "sha512-qmV7PJMqQrdzf2uKjaIrgIW9fpz8SNdD6hhVtbUbRGjz95CsZvsVozHRCz3NrPphro+tbRMbUhDYmTNKP6qPSw==",
+ "dev": true,
+ "dependencies": {
+ "lodash": "^4.17.15",
+ "reduce-css-calc": "^2.1.7"
+ }
+ },
"node_modules/tailwindcss/node_modules/fs-extra": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
@@ -16308,6 +16340,12 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
+ "node_modules/thenby": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+ "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+ "dev": true
+ },
"node_modules/through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -27630,6 +27668,16 @@
}
}
},
+ "postcss-reporter": {
+ "version": "7.0.5",
+ "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz",
+ "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==",
+ "dev": true,
+ "requires": {
+ "picocolors": "^1.0.0",
+ "thenby": "^1.3.4"
+ }
+ },
"postcss-resolve-nested-selector": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -29621,6 +29669,16 @@
}
}
},
+ "tailwindcss-scroll-snap": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/tailwindcss-scroll-snap/-/tailwindcss-scroll-snap-1.1.0.tgz",
+ "integrity": "sha512-qmV7PJMqQrdzf2uKjaIrgIW9fpz8SNdD6hhVtbUbRGjz95CsZvsVozHRCz3NrPphro+tbRMbUhDYmTNKP6qPSw==",
+ "dev": true,
+ "requires": {
+ "lodash": "^4.17.15",
+ "reduce-css-calc": "^2.1.7"
+ }
+ },
"temp-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -29660,6 +29718,12 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
+ "thenby": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+ "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+ "dev": true
+ },
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index fa95bf3835c18ceb3b3ee49714d415d0dcab03e6..fbc32ce7d33f6d7af9c57a35637027d8823850f7 100644
--- a/package.json
+++ b/package.json
@@ -73,12 +73,14 @@
"lit": "^2.0.0-rc.2",
"postcss-import": "^14.0.2",
"postcss-preset-env": "^6.7.0",
+ "postcss-reporter": "^7.0.2",
"prettier-plugin-organize-imports": "^2.3.3",
"prettier": "2.3.2",
"semantic-release": "^17.4.4",
"stylelint-config-standard": "^22.0.0",
"stylelint": "^13.13.1",
"svgo": "^2.3.1",
+ "tailwindcss-scroll-snap": "^1.1.0",
"tailwindcss": "^2.2.7",
"typescript": "^4.3.5",
"vite": "^2.4.4"
diff --git a/postcss.config.js b/postcss.config.js
index f2f8cb17660ab4d7f46d43464888b0aca6f3a822..aec4a6746d5fd309a70d30ccf9b5ef6e3102c638 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,6 +3,7 @@
module.exports = {
plugins: [
require("postcss-import"),
+ require("postcss-reporter"),
require("tailwindcss"),
require("postcss-preset-env")({ stage: 1 }),
...(process.env.NODE_ENV === "production"
diff --git a/tailwind.config.js b/tailwind.config.js
index ce028e812bdb543beff8ac99f7913023b604c84b..c9a7ffabeb14787df6c19e45e697e84d026b6411 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,16 +19,16 @@ module.exports = {
},
colors: {
pine: {
- 50: "#ebf8f8",
- 100: "#cff7f3",
- 200: "#9df2e4",
- 300: "#5ee8d4",
- 400: "#1cd7ba",
- 500: "#08c09a",
- 600: "#07a57d",
- 700: "#009486",
- 800: "#006D60",
- 900: "#00564A",
+ 50: "#F2FAF9",
+ 100: "#E7F9E4",
+ 200: "#bfe4e1",
+ 300: "#99d4cf",
+ 400: "#4db4aa",
+ 500: "#009486",
+ 600: "#008579",
+ 700: "#006D60",
+ 800: "#00564A",
+ 900: "#003D0B",
},
rose: {
50: "#fcf9f8",
@@ -56,5 +56,6 @@ module.exports = {
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("@tailwindcss/line-clamp"),
+ require("tailwindcss-scroll-snap"),
],
};
diff --git a/themes/cp_admin/_layout.php b/themes/cp_admin/_layout.php
index 9ecdaa3f5787876ec780c7d277721b9ee35f5105..174f9cc06ed9ad201a2c6e741454a2c9e2019e0d 100644
--- a/themes/cp_admin/_layout.php
+++ b/themes/cp_admin/_layout.php
@@ -13,20 +13,70 @@
<?= service('vite')->asset('js/audio-player.ts', 'js') ?>
</head>
-<body class="relative bg-gray-100 holy-grail-grid">
+<body class="relative bg-pine-50 holy-grail-grid">
<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>
- <aside id="admin-sidebar" class="sticky top-0 z-50 flex flex-col max-h-screen transition duration-200 ease-in-out transform -translate-x-full bg-white border-r w-80 holy-grail-sidebar md:translate-x-0">
+ <header class="sticky top-0 z-50 flex items-center justify-between h-10 text-white border-b holy-grail__header bg-pine-800 border-pine-900">
+ <div class="inline-flex items-center h-full">
+ <a href="<?= route_to(
+ 'admin',
+ ) ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900">
+ <?= (isset($podcast) ? icon('arrow-left', 'mr-2') : '') . svg('castopod-logo', 'h-6') ?>
+ </a>
+ <a href="<?= route_to(
+ 'home',
+ ) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold outline-none hover:underline focus:ring">
+ <?= lang('AdminNavigation.go_to_website') ?>
+ <?= icon('external-link', 'ml-1 opacity-60') ?>
+ </a>
+ </div>
+ <button
+ type="button"
+ class="inline-flex items-center h-full px-6 mt-auto font-semibold outline-none focus:ring"
+ id="my-account-dropdown"
+ data-dropdown="button"
+ data-dropdown-target="my-account-dropdown-menu"
+ aria-haspopup="true"
+ aria-expanded="false">
+ <?= icon('account-circle', 'text-2xl opacity-60 mr-2') ?>
+ <?= user()->username ?>
+ <?= icon('caret-down', 'ml-auto text-2xl') ?>
+ </button>
+ <nav
+ id="my-account-dropdown-menu"
+ class="absolute z-50 flex flex-col py-2 text-black whitespace-no-wrap bg-white border-black rounded border-[3px]"
+ aria-labelledby="my-accountDropdown"
+ data-dropdown="menu"
+ data-dropdown-placement="bottom-end">
+ <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
+ 'my-account',
+ ) ?>"><?= lang('AdminNavigation.account.my-account') ?></a>
+ <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
+ 'change-password',
+ ) ?>"><?= lang('AdminNavigation.account.change-password') ?></a>
+ <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
+ 'logout',
+ ) ?>"><?= lang('AdminNavigation.account.logout') ?></a>
+ </nav>
+ </header>
+ <aside id="admin-sidebar" class="sticky z-50 flex flex-col text-white transition duration-200 ease-in-out transform -translate-x-full border-r top-10 border-pine-900 bg-pine-800 holy-grail__sidebar md:translate-x-0">
<?php if (isset($podcast)): ?>
<?= $this->include('podcast/_sidebar') ?>
<?php else: ?>
<?= $this->include('_sidebar') ?>
<?php endif; ?>
+ <footer class="px-2 py-2 mx-auto text-xs text-right">
+ <?= lang('Common.powered_by', [
+ 'castopod' =>
+ '<a class="underline hover:no-underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod</a> ' .
+ CP_VERSION,
+ ]) ?>
+ </footer>
</aside>
- <main class="holy-grail-main">
- <header class="text-white bg-pine-900">
+ <main class="holy-grail__main">
+ <header class="bg-white">
<div class="container flex flex-wrap items-end justify-between px-2 py-10 mx-auto md:px-12 gap-y-6 gap-x-6">
<div class="flex flex-col">
- <?= render_breadcrumb('text-gray-300') ?>
+ <?= render_breadcrumb('text-gray-800 text-xs') ?>
<div class="flex flex-wrap items-center">
<h1 class="text-3xl font-bold font-display"><?= $this->renderSection(
'pageTitle',
@@ -44,13 +94,6 @@
<?= $this->renderSection('content') ?>
</div>
</main>
- <footer class="px-2 py-2 mx-auto text-xs text-right holy-grail-footer">
- <?= lang('Common.powered_by', [
- 'castopod' =>
- '<a class="underline hover:no-underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod</a> ' .
- CP_VERSION,
- ]) ?>
- </footer>
<button
type="button"
id="sidebar-toggler"
diff --git a/themes/cp_admin/_sidebar.php b/themes/cp_admin/_sidebar.php
index 65785a67714680cb980d6a11863ce4b45f7351b0..fd92ec3cf08ac267994a43636678a138a69a5280 100644
--- a/themes/cp_admin/_sidebar.php
+++ b/themes/cp_admin/_sidebar.php
@@ -16,64 +16,25 @@ $navigation = [
'pages' => ['icon' => 'pages', 'items' => ['page-list', 'page-create']],
]; ?>
-<a href="<?= route_to(
- 'admin',
-) ?>" class="inline-flex items-baseline px-6 py-2 mb-2 text-2xl font-semibold font-display text-pine-700">
- <?= 'castopod' . svg('castopod-logo', 'h-5 ml-1') ?>
-</a>
-<a href="<?= route_to(
- 'home',
-) ?>" class="inline-flex items-center px-6 py-2 mb-2 text-sm underline outline-none hover:no-underline focus:ring">
- <?= lang('AdminNavigation.go_to_website') ?>
- <?= icon('external-link', 'ml-2 text-gray-500') ?>
-</a>
-<nav class="flex flex-col flex-1 overflow-y-auto">
+<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
<?php foreach ($navigation as $section => $data): ?>
- <div class="mb-4">
- <button class="inline-flex items-center w-full px-6 py-1 font-semibold text-gray-600 outline-none focus:ring" type="button">
- <?= icon($data['icon'], 'text-gray-400 text-xl mr-3') ?>
+ <div>
+ <button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
+ <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') ?>
<?= lang('AdminNavigation.' . $section) ?>
</button>
<ul class="flex flex-col">
<?php foreach ($data['items'] as $item): ?>
<?php $isActive = url_is(route_to($item)); ?>
<li class="inline-flex">
- <a class="w-full py-1 pl-14 pr-2 text-sm text-gray-600 outline-none hover:text-gray-900 focus:ring <?= $isActive
- ? 'font-semibold text-gray-900'
- : '' ?>" href="<?= route_to($item) ?>"><?= lang(
- 'AdminNavigation.' . $item,
-) ?></a>
+ <a class="w-full py-1 pl-14 pr-2 text-sm outline-none hover:opacity-100 focus:ring<?= $isActive
+ ? ' font-semibold opacity-100 inline-flex items-center'
+ : ' opacity-75' ?>" href="<?= route_to($item) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') .lang(
+ 'AdminNavigation.' . $item,
+ ) ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</nav>
-<button
-type="button"
-class="inline-flex items-center w-full px-6 py-2 mt-auto border-t outline-none focus:ring"
-id="my-account-dropdown"
-data-dropdown="button"
-data-dropdown-target="my-account-dropdown-menu"
-aria-haspopup="true"
-aria-expanded="false">
- <?= icon('user', 'text-gray-500 mr-2') ?>
- <?= user()->username ?>
- <?= icon('caret-right', 'ml-auto') ?>
-</button>
-<nav
-id="my-account-dropdown-menu"
-class="absolute z-50 flex flex-col py-2 text-black whitespace-no-wrap bg-white border rounded shadow"
-aria-labelledby="my-accountDropdown"
-data-dropdown="menu"
-data-dropdown-placement="right-end">
- <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
- 'my-account',
- ) ?>"><?= lang('AdminNavigation.account.my-account') ?></a>
- <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
- 'change-password',
- ) ?>"><?= lang('AdminNavigation.account.change-password') ?></a>
- <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
- 'logout',
- ) ?>"><?= lang('AdminNavigation.account.logout') ?></a>
-</nav>
diff --git a/themes/cp_admin/podcast/_sidebar.php b/themes/cp_admin/podcast/_sidebar.php
index c0d95bc2abbe59b50f4e6b4606d0e2048d0f974a..c59afc43b1156f3c7b7acf9badfbcdcc0924c6c4 100644
--- a/themes/cp_admin/podcast/_sidebar.php
+++ b/themes/cp_admin/podcast/_sidebar.php
@@ -2,16 +2,12 @@
$podcastNavigation = [
'dashboard' => [
'icon' => 'dashboard',
- 'items' => ['podcast-view', 'podcast-edit'],
+ 'items' => ['podcast-view', 'podcast-edit', 'podcast-person-manage'],
],
'episodes' => [
'icon' => 'mic',
'items' => ['episode-list', 'episode-create'],
],
- 'persons' => [
- 'icon' => 'folder-user',
- 'items' => ['podcast-person-manage'],
- ],
'analytics' => [
'icon' => 'line-chart',
'items' => [
@@ -38,82 +34,45 @@ $podcastNavigation = [
],
]; ?>
-<a href="<?= route_to(
- 'admin',
-) ?>" class="inline-flex items-center px-4 py-2 border-b">
- <?= icon('arrow-left', 'mr-4 text-xl') ?>
- <span class="inline-flex items-baseline text-2xl font-semibold font-display text-pine-700"> <?= 'castopod' .
- svg('castopod-logo', 'h-5 ml-1') ?></span>
-
-</a>
-<div class="flex items-center border-b">
+<div class="flex items-center px-4 py-2 border-b border-pine-900">
<img
src="<?= $podcast->image->thumbnail_url ?>"
alt="<?= $podcast->title ?>"
- class="object-cover w-16 h-16"
+ class="object-cover w-16 h-16 rounded"
/>
<div class="flex flex-col items-start flex-1 w-48 px-2">
- <span class="w-40 text-sm font-semibold truncate" title="<?= $podcast->title ?>"><?= $podcast->title ?></span>
+ <span class="w-full font-semibold truncate" title="<?= $podcast->title ?>"><?= $podcast->title ?></span>
<a href="<?= route_to(
'podcast-activity',
$podcast->handle,
- ) ?>" class="inline-flex items-center text-xs underline outline-none hover:no-underline focus:ring"
+ ) ?>" class="inline-flex items-center text-sm outline-none hover:underline focus:ring"
data-toggle="tooltip" data-placement="bottom" title="<?= lang(
'PodcastNavigation.go_to_page',
) ?>">@<?= $podcast->handle ?>
- <?= icon('external-link', 'ml-1 text-gray-500') ?>
+ <?= icon('external-link', 'ml-1 opacity-60') ?>
</a>
</div>
</div>
-<nav class="flex flex-col flex-1 py-6 overflow-y-auto">
+<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
<?php foreach ($podcastNavigation as $section => $data): ?>
- <div class="mb-4">
- <button class="inline-flex items-center w-full px-6 py-1 outline-none focus:ring" type="button">
- <?= icon($data['icon'], 'text-gray-400 text-xl mr-3') .
+ <div>
+ <button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
+ <?= icon($data['icon'], 'opacity-60 text-2xl mr-4') .
lang('PodcastNavigation.' . $section) ?>
</button>
<ul class="flex flex-col">
<?php foreach ($data['items'] as $item): ?>
<?php $isActive = url_is(route_to($item, $podcast->id)); ?>
<li class="inline-flex">
- <a class="w-full py-1 pl-14 pr-2 text-sm text-gray-600 outline-none hover:text-gray-900 focus:ring <?= $isActive
- ? 'font-semibold text-gray-900'
- : '' ?>" href="<?= route_to(
- $item,
- $podcast->id,
-) ?>"><?= lang('PodcastNavigation.' . $item) ?></a>
+ <a class="w-full py-1 pl-14 pr-2 text-sm outline-none hover:opacity-100 focus:ring <?= $isActive
+ ? 'font-semibold opacity-100 inline-flex items-center'
+ : 'opacity-75' ?>" href="<?= route_to(
+ $item,
+ $podcast->id,
+ ) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') .lang('PodcastNavigation.' . $item) ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</nav>
- <button
- type="button"
- class="inline-flex items-center w-full px-6 py-2 mt-auto border-t outline-none focus:ring"
- id="my-account-dropdown"
- data-dropdown="button"
- data-dropdown-target="my-account-dropdown-menu"
- aria-haspopup="true"
- aria-expanded="false">
- <?= icon('user', 'text-gray-500 mr-2') ?>
- <?= user()->username ?>
- <?= icon('caret-right', 'ml-auto') ?>
- </button>
- <nav
- id="my-account-dropdown-menu"
- class="flex flex-col py-2 text-black whitespace-no-wrap bg-white border rounded shadow"
- aria-labelledby="my-account-dropdown"
- data-dropdown="menu"
- data-dropdown-placement="right-end">
- <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
- 'my-account',
- ) ?>"><?= lang('AdminNavigation.account.my-account') ?></a>
- <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
- 'change-password',
- ) ?>"><?= lang('AdminNavigation.account.change-password') ?></a>
- <a class="px-4 py-1 hover:bg-gray-100" href="<?= route_to(
- 'logout',
- ) ?>"><?= lang('AdminNavigation.account.logout') ?></a>
- </nav>
-</div>
diff --git a/themes/cp_admin/podcast/latest_episodes.php b/themes/cp_admin/podcast/latest_episodes.php
index 5b367b788ba418da264591d684c7b09cca602fd3..b1861cbfbd6a3800fd50c8f3a54563aae9372421 100644
--- a/themes/cp_admin/podcast/latest_episodes.php
+++ b/themes/cp_admin/podcast/latest_episodes.php
@@ -10,9 +10,9 @@
</a>
</header>
<?php if ($episodes): ?>
- <div class="flex p-2 overflow-x-auto gap-x-6">
+ <div class="flex p-2 overflow-x-auto gap-x-6 snap snap-x snap-proximity">
<?php foreach ($episodes as $episode): ?>
- <article class="flex flex-col flex-shrink-0 flex-1 w-full min-w-[12rem] overflow-hidden bg-white border shadow rounded-xl">
+ <article class="snap-center flex flex-col flex-shrink-0 flex-1 w-full min-w-[12rem] max-w-[17rem] overflow-hidden bg-white border-2 border-pine-100 rounded-xl">
<div class="relative">
<div class=""></div>
<?= publication_pill(
diff --git a/themes/cp_admin/podcast/list.php b/themes/cp_admin/podcast/list.php
index 728eca1cc20d768fdd4ecfedcfa867e223d8d3b5..075b2c451a03cc7d43732f95e836ccdd20777822 100644
--- a/themes/cp_admin/podcast/list.php
+++ b/themes/cp_admin/podcast/list.php
@@ -27,7 +27,7 @@
<div class="grid gap-4 grid-cols-podcasts">
<?php if ($podcasts !== null): ?>
<?php foreach ($podcasts as $podcast): ?>
- <article class="h-full overflow-hidden bg-white border shadow rounded-xl">
+ <article class="h-full overflow-hidden bg-white border-2 border-pine-100 rounded-xl">
<img
alt="<?= $podcast->title ?>"
src="<?= $podcast->image
diff --git a/themes/cp_admin/podcast/view.php b/themes/cp_admin/podcast/view.php
index c8d9da56cabafa464d121a48a46a2780c5438da7..9658af4899af6dc48e0d8d64f02bd194769f71ad 100644
--- a/themes/cp_admin/podcast/view.php
+++ b/themes/cp_admin/podcast/view.php
@@ -8,10 +8,6 @@
<?= $podcast->title ?>
<?= $this->endSection() ?>
-<?= $this->section('headerLeft') ?>
-<?= location_link($podcast->location, 'ml-4 text-sm') ?>
-<?= $this->endSection() ?>
-
<?= $this->section('headerRight') ?>
<?= button(
lang('Podcast.edit'),