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

fix(layouts): replace holy-grail layout with tailwind config + widen public podcast layout 

- add rounded classes with conditional border-radius depending on screen width
- add ring-castopod
class to use on focus states
This commit is contained in:
Yassine Doghri 2021-10-18 16:44:07 +00:00
parent 932140077c
commit be5a28787f
60 changed files with 2434 additions and 6077 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Helpers/components_helper.php
View File

@ -26,7 +26,7 @@ if (! function_exists('hint_tooltip')) {
$tooltip =
'<span data-toggle="tooltip" data-placement="bottom" tabindex="0" title="' .
$hintText .
'" class="inline-block text-gray-500 align-middle outline-none focus:ring';
'" class="inline-block text-gray-500 align-middle focus:ring-castopod';
if ($class !== '') {
$tooltip .= ' ' . $class;

1
app/Language/en/Common.php
View File

@ -23,7 +23,6 @@ return [
'explicit' => 'Explicit',
'mediumDate' => '{0,date,medium}',
'powered_by' => 'Powered by {castopod}',
'actions' => 'Actions',
'pageInfo' => 'Page {currentPage} out of {pageCount}',
'go_back' => 'Go back',
'play_episode_button' => [

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

@ -19,7 +19,7 @@ return [
one {# person}
other {# persons}
}',
'persons_list' => 'Persons',
'persons_list' => 'Persons for {episodeTitle}',
'back_to_episodes' => 'Back to episodes of {podcast}',
'comments' => 'Comments',
'activity' => 'Activity',

2
app/Resources/js/modules/xml-editor.ts
View File

@ -56,7 +56,7 @@ export class XMLEditor extends LitElement {
}
static styles = css`
.cm-wrap {
.cm-editor {
border-radius: 0.5rem;
overflow: hidden;
border: 3px solid #000000;

4
app/Resources/styles/breadcrumb.css
View File

@ -13,6 +13,10 @@
&:hover {
@apply underline;
}
&:focus {
@apply ring-castopod;
}
}
.breadcrumb-item.active {

2
app/Resources/styles/choices.css
View File

@ -155,7 +155,7 @@
.is-focused .choices__inner,
.is-open .choices__inner {
@apply ring-inset ring-1 ring-blue-600;
@apply ring-castopod ring-inset;
}
.is-open .choices__inner {

20
app/Resources/styles/custom.css Normal file
View File

@ -0,0 +1,20 @@
@layer components {
.ring-castopod {
@apply outline-none ring-2 ring-pine-500 ring-offset-2 ring-offset-pine-100;
}
.rounded-conditional-b-xl {
border-bottom-right-radius: max(
0px,
min(0.75rem, calc((100vw - 0.75rem - 100%) * 9999))
);
border-bottom-left-radius: max(
0px,
min(0.75rem, calc((100vw - 0.75rem - 100%) * 9999))
);
}
.rounded-conditional-2xl {
border-radius: max(0px, min(1rem, calc((100vw - 1rem - 100%) * 9999)));
}
}

2
app/Resources/styles/index.css
View File

@ -1,6 +1,6 @@
@import "./tailwind.css";
@import "./custom.css";
@import "./fonts.css";
@import "./layout.css";
@import "./breadcrumb.css";
@import "./dropdown.css";
@import "./choices.css";

36
app/Resources/styles/layout.css
View File

@ -1,36 +0,0 @@
/* Admin layout */
@layer base {
.holy-grail-grid {
@apply grid min-h-screen overflow-y-auto;
grid-template: 40px 1fr / 300px 1fr;
& .holy-grail__header {
@apply h-10 col-start-1 col-end-4 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 col-start-1 col-end-3 row-start-3 row-end-3;
}
@screen md {
& .holy-grail__main {
@apply col-start-2;
}
& .holy-grail__footer {
@apply col-start-2;
}
}
}
}

14
app/Resources/styles/radioBtn.css
View File

@ -1,10 +1,14 @@
@layer components {
.form-radio-btn {
@apply absolute mt-3 ml-3 border-black border-3 text-pine-500 focus:ring-2 focus:ring-pine-800;
@apply absolute mt-3 ml-3 border-black border-3 text-pine-500 focus:ring-castopod;
}
.form-radio-btn:focus + label {
@apply ring ring-pine-100;
@apply ring-castopod;
}
.form-radio-btn:focus {
@apply ring-0;
}
.form-radio-btn + label {
@ -12,6 +16,10 @@
}
.form-radio-btn:checked + label {
@apply text-black border-pine-500;
@apply text-white bg-pine-500;
}
.form-radio-btn:checked {
@apply ring-2 ring-black;
}
}

2
app/Resources/styles/switch.css
View File

@ -7,7 +7,7 @@
}
&:focus + .form-switch-slider {
@apply ring ring-offset-2 ring-pine-500 ring-offset-pine-100;
@apply ring-castopod;
}
&:checked + .form-switch-slider::before {

2
app/Views/Components/Button.php
View File

@ -28,7 +28,7 @@ class Button extends Component
public function render(): string
{
$baseClass =
'flex-shrink-0 inline-flex items-center justify-center font-semibold shadow-xs rounded-full focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100';
'flex-shrink-0 inline-flex items-center justify-center font-semibold shadow-xs rounded-full focus:ring-castopod';
$variantClass = [
'default' => 'text-black bg-gray-300 hover:bg-gray-400',

2
app/Views/Components/DropdownMenu.php
View File

@ -29,7 +29,7 @@ class DropdownMenu extends Component
switch ($item['type']) {
case 'link':
$menuItems .= anchor($item['uri'], $item['title'], [
'class' => 'px-4 py-1 hover:bg-gray-100' . (array_key_exists('class', $item) ? ' ' . $item['class'] : ''),
'class' => 'px-4 py-1 hover:bg-gray-100 focus:ring-castopod focus:ring-inset' . (array_key_exists('class', $item) ? ' ' . $item['class'] : ''),
]);
break;
case 'html':

2
app/Views/Components/Forms/Checkbox.php
View File

@ -21,7 +21,7 @@ class Checkbox extends FormComponent
[
'id' => $this->value,
'name' => $this->name,
'class' => 'form-checkbox text-pine-500 border-black border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 w-6 h-6',
'class' => 'form-checkbox text-pine-500 border-black border-3 focus:ring-castopod w-6 h-6',
],
'yes',
old($this->name) ? old($this->name) === $this->value : $this->isChecked,

4
app/Views/Components/Forms/DatetimePicker.php
View File

@ -18,9 +18,9 @@ class DatetimePicker extends FormComponent
$closeIcon = icon('close');
return <<<HTML
<div class="flex border-3 rounded-lg border-black focus-within:ring-2 focus-within:ring-pine-500 focus-within:ring-offset-2 focus-within:ring-offset-pine-100 {$this->class}" data-picker="datetime">
<div class="flex border-3 rounded-lg border-black focus-within:ring-castopod {$this->class}" data-picker="datetime">
{$dateInput}
<button class="p-3 bg-white hover:bg-pine-100 focus:outline-none rounded-r-md focus:ring-inset focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100" type="button" aria-label="{$clearLabel}" title="{$clearLabel}" data-clear="">
<button class="p-3 bg-white hover:bg-pine-100 rounded-r-md focus:ring-inset focus:ring-castopod" type="button" aria-label="{$clearLabel}" title="{$clearLabel}" data-clear="">
{$closeIcon}
</button>
</div>

2
app/Views/Components/Forms/Input.php
View File

@ -10,7 +10,7 @@ class Input extends FormComponent
public function render(): string
{
$class = 'px-3 py-2 bg-white border-black rounded-lg focus:border-black border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 ' . $this->class;
$class = 'px-3 py-2 bg-white border-black rounded-lg focus:border-black border-3 focus:ring-castopod ' . $this->class;
$this->attributes['class'] = $class;

24
app/Views/Components/Forms/MarkdownEditor.php
View File

@ -8,9 +8,9 @@ class MarkdownEditor extends FormComponent
{
public function render(): string
{
$editorClass = 'w-full flex flex-col bg-white border-3 border-black rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-offset-2 focus-withing:ring-offset-pine-100 focus-within:ring-pine-500 ' . $this->class;
$editorClass = 'w-full flex flex-col bg-white border-3 border-black rounded-lg overflow-hidden focus-within:ring-castopod ' . $this->class;
$this->attributes['class'] = 'border-none outline-none focus:border-none focus:outline-none focus:ring-0 w-full h-full';
$this->attributes['class'] = 'border-none focus:border-none focus:outline-none focus:ring-0 w-full h-full';
$this->attributes['rows'] = 6;
$textarea = form_textarea($this->attributes, old($this->name, html_entity_decode($this->value), null));
@ -39,23 +39,23 @@ class MarkdownEditor extends FormComponent
<header class="px-2">
<div class="sticky top-0 z-20 flex flex-wrap justify-between bg-white border-b border-gray-300">
<markdown-write-preview for="{$this->id}" class="relative inline-flex h-8">
<button type="button" slot="write" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['write']}</button>
<button type="button" slot="preview" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">{$translations['preview']}</button>
<button type="button" slot="write" class="px-2 font-semibold focus:ring-inset focus:ring-castopod">{$translations['write']}</button>
<button type="button" slot="preview" class="px-2 font-semibold focus:ring-inset focus:ring-castopod">{$translations['preview']}</button>
</markdown-write-preview>
<markdown-toolbar for="{$this->id}" class="flex gap-4 px-2 py-1">
<div class="inline-flex text-2xl gap-x-1">
<md-header class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['heading']}</md-header>
<md-bold class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['bold']}</md-bold>
<md-italic class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['italic']}</md-italic>
<md-header class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['heading']}</md-header>
<md-bold class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['bold']}</md-bold>
<md-italic class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['italic']}</md-italic>
</div>
<div class="inline-flex text-2xl gap-x-1">
<md-unordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-unordered']}</md-unordered-list>
<md-ordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['list-ordered']}</md-ordered-list>
<md-unordered-list class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['list-unordered']}</md-unordered-list>
<md-ordered-list class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['list-ordered']}</md-ordered-list>
</div>
<div class="inline-flex text-2xl gap-x-1">
<md-quote class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['quote']}</md-quote>
<md-link class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['link']}</md-link>
<md-image class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">{$icons['image-add']}</md-image>
<md-quote class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['quote']}</md-quote>
<md-link class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['link']}</md-link>
<md-image class="opacity-50 hover:opacity-100 focus:ring-castopod focus:opacity-100">{$icons['image-add']}</md-image>
</div>
</markdown-toolbar>
</div>

1
app/Views/Components/Forms/MultiSelect.php
View File

@ -37,6 +37,7 @@ class MultiSelect extends FormComponent
'data-no-choices-text' => lang('Common.forms.multiSelect.noChoicesText'),
'data-max-item-text' => lang('Common.forms.multiSelect.maxItemText'),
];
$this->attributes['class'] .= ' border-3 border-black rounded-lg';
$extra = array_merge($defaultAttributes, $this->attributes);
return form_dropdown($this->name, $this->options, $this->selected, $extra);

2
app/Views/Components/Forms/Radio.php
View File

@ -19,7 +19,7 @@ class Radio extends FormComponent
[
'id' => $this->value,
'name' => $this->name,
'class' => 'text-pine-500 border-black border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 w-6 h-6',
'class' => 'text-pine-500 border-black border-3 focus:ring-castopod w-6 h-6',
],
$this->value,
old($this->name) ? old($this->name) === $this->value : $this->isChecked,

2
app/Views/Components/Forms/Select.php
View File

@ -21,7 +21,7 @@ class Select extends FormComponent
public function render(): string
{
$defaultAttributes = [
'class' => 'focus:border-black focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 border-3 rounded-lg border-black ' . $this->class,
'class' => 'focus:border-black focus:ring-castopod border-3 rounded-lg border-black ' . $this->class,
'data-class' => $this->class,
'data-select-text' => lang('Common.forms.multiSelect.selectText'),
'data-loading-text' => lang('Common.forms.multiSelect.loadingText'),

2
app/Views/Components/Forms/Textarea.php
View File

@ -17,7 +17,7 @@ class Textarea extends FormComponent
{
unset($this->attributes['value']);
$this->attributes['class'] = 'focus:border-black focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100 rounded-lg border-3 border-black ' . $this->class;
$this->attributes['class'] = 'focus:border-black focus:ring-castopod rounded-lg border-3 border-black ' . $this->class;
$textarea = form_textarea(
$this->attributes,

2
app/Views/errors/html/error_404.php
View File

@ -19,7 +19,7 @@
Sorry! Cannot seem to find the page you were looking for.
<?php endif; ?>
</p>
<button class="inline-flex items-center justify-center px-3 py-1 text-sm font-semibold text-white rounded-full shadow-xs focus:outline-none focus:ring md:px-4 md:py-2 md:text-base bg-pine-500 hover:bg-pine-800"><?= lang('Common.go_back') ?></button>
<button class="inline-flex items-center justify-center px-3 py-1 text-sm font-semibold text-white rounded-full shadow-xs focus:ring-castopod md:px-4 md:py-2 md:text-base bg-pine-500 hover:bg-pine-800"><?= lang('Common.go_back') ?></button>
</body>
</html>

7831
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@ -42,10 +42,10 @@
"choices.js": "^9.0.1",
"flatpickr": "^4.6.9",
"leaflet": "^1.7.1",
"leaflet.markercluster": "^1.5.1",
"leaflet.markercluster": "^1.5.3",
"lit": "^2.0.2",
"marked": "^3.0.7",
"xml-formatter": "^2.4.1"
"xml-formatter": "^2.5.0"
},
"devDependencies": {
"@commitlint/cli": "^13.2.1",
@ -60,12 +60,12 @@
"@tailwindcss/typography": "^0.4.1",
"@types/leaflet": "^1.7.5",
"@types/marked": "^3.0.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"cross-env": "^7.0.3",
"cssnano": "^5.0.8",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.32.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.2",
@ -73,17 +73,17 @@
"lint-staged": "^11.2.3",
"postcss-import": "^14.0.2",
"postcss-preset-env": "^6.7.0",
"postcss-reporter": "^7.0.3",
"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",
"svgo": "^2.7.0",
"tailwindcss": "^2.2.16",
"tailwindcss": "^2.2.17",
"tailwindcss-scroll-snap": "^1.1.0",
"typescript": "^4.4.3",
"vite": "^2.6.5"
"typescript": "^4.4.4",
"vite": "^2.6.9"
},
"lint-staged": {
"*.{js,ts,css,md,json}": "prettier --write",

7
tailwind.config.js
View File

@ -48,9 +48,14 @@ module.exports = {
112: "28rem",
},
gridTemplateColumns: {
podcastLayout: "1fr minmax(auto, 768px) 1fr",
admin: "300px calc(100% - 300px)",
podcast: "1fr minmax(auto, 960px) 1fr",
podcastMain: "1fr minmax(200px, 300px)",
podcasts: "repeat(auto-fill, minmax(14rem, 1fr))",
},
gridTemplateRows: {
admin: "40px 1fr",
},
zIndex: {
"-10": "-10",
},

27
themes/cp_admin/_layout.php
View File

@ -17,28 +17,13 @@
->asset('js/admin-audio-player.ts', 'js') ?>
</head>
<body class="relative bg-pine-50 holy-grail-grid">
<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') ?>
<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) && isset($episode)): ?>
<?= $this->include('episode/_sidebar') ?>
<?php elseif (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="inline-flex font-semibold hover:underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod' . icon('social/castopod', 'ml-1 text-lg') . '</a> ' .
CP_VERSION,
]) ?>
</footer>
</aside>
<main class="relative holy-grail__main">
<?= $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">
<header class="z-40 flex items-center px-4 bg-white border-b md:px-12 sticky-header-outer border-pine-100">
<div class="container flex flex-col justify-end mx-auto -mt-4 sticky-header-inner">
<div class="flex flex-col justify-end w-full -mt-4 sticky-header-inner">
<?= render_breadcrumb('text-gray-800 text-xs items-center flex') ?>
<div class="flex justify-between py-1">
<div class="flex flex-wrap items-center">
@ -49,7 +34,7 @@
</div>
</div>
</header>
<div class="container px-2 py-8 mx-auto md:px-12">
<div class="px-2 py-8 mx-auto md:px-12">
<?= view('_message_block') ?>
<?= $this->renderSection('content') ?>
</div>
@ -57,6 +42,6 @@
<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 focus:outline-none md:hidden hover:bg-gray-100 focus:ring"
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>

16
themes/cp_admin/_partials/_nav_aside.php Normal file
View File

@ -0,0 +1,16 @@
<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">
<?php if (isset($podcast) && isset($episode)): ?>
<?= $this->include('episode/_sidebar') ?>
<?php elseif (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="inline-flex font-semibold hover:underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod' . icon('social/castopod', 'ml-1 text-lg') . '</a> ' .
CP_VERSION,
]) ?>
</footer>
</aside>

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

@ -1,20 +1,20 @@
<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">
<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">
<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">
) ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900 focus:ring-inset focus:ring-castopod">
<?= (isset($podcast) ? icon('arrow-left', 'mr-2') : '') . svg('castopod-logo-base', '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">
) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold hover:underline focus:ring-inset focus:ring-castopod">
<?= 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-3 text-sm font-semibold outline-none focus:ring gap-x-2"
class="inline-flex items-center h-full px-3 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"

4
themes/cp_admin/_sidebar.php
View File

@ -27,7 +27,7 @@ $navigation = [
<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
<?php foreach ($navigation as $section => $data): ?>
<div>
<button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
<button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-castopod" type="button">
<?= icon($data['icon'], 'opacity-60 text-2xl mr-4') ?>
<?= lang('AdminNavigation.' . $section) ?>
</button>
@ -35,7 +35,7 @@ $navigation = [
<?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 outline-none hover:opacity-100 focus:ring<?= $isActive
<a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-castopod<?= $isActive
? ' font-semibold opacity-100 inline-flex items-center'
: ' opacity-75' ?>" href="<?= route_to($item) ?>"><?= ($isActive ? icon('chevron-right', 'mr-2') : '') . lang(
'AdminNavigation.' . $item,

8
themes/cp_admin/episode/_sidebar.php
View File

@ -7,7 +7,7 @@ $podcastNavigation = [
],
]; ?>
<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex items-center px-4 py-2 border-b border-pine-900 focus:ring">
<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex items-center px-4 py-2 border-b border-pine-900 focus:ring-castopod">
<?= icon('arrow-left', 'mr-2') ?>
<img
src="<?= $podcast->image->thumbnail_url ?>"
@ -28,7 +28,7 @@ $podcastNavigation = [
'episode',
$podcast->handle,
$episode->slug,
) ?>" class="inline-flex items-center text-xs outline-none hover:underline focus:ring"><?= lang(
) ?>" class="inline-flex items-center text-xs hover:underline focus:ring-castopod"><?= lang(
'EpisodeNavigation.go_to_page',
) ?>
<?= icon('external-link', 'ml-1 opacity-60') ?>
@ -38,7 +38,7 @@ $podcastNavigation = [
<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
<?php foreach ($podcastNavigation as $section => $data): ?>
<div>
<button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
<button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-castopod" type="button">
<?= icon($data['icon'], 'opacity-60 text-2xl mr-4') .
lang('EpisodeNavigation.' . $section) ?>
</button>
@ -46,7 +46,7 @@ $podcastNavigation = [
<?php foreach ($data['items'] as $item): ?>
<?php $isActive = url_is(route_to($item, $podcast->id, $episode->id)); ?>
<li class="inline-flex">
<a class="w-full py-1 pl-14 pr-2 text-sm outline-none hover:opacity-100 focus:ring <?= $isActive
<a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-castopod <?= $isActive
? 'font-semibold opacity-100 inline-flex items-center'
: 'opacity-75' ?>" href="<?= route_to(
$item,

11
themes/cp_admin/episode/list.php
View File

@ -36,20 +36,19 @@
'</time>' .
'<img loading="lazy" src="' . $episode->image->thumbnail_url . '" alt="' . $episode->title . '" class="object-cover w-20 h-20 rounded-lg" />' .
'</div>' .
'<a class="text-sm hover:underline" href="' . route_to(
'<a class="overflow-x-hidden text-sm hover:underline" href="' . route_to(
'episode-view',
$podcast->id,
$episode->id,
) . '">' .
'<h2 class="inline-flex w-full font-semibold leading-none group">' .
'<h2 class="inline-flex items-baseline w-full font-semibold leading-none gap-x-1 group">' .
episode_numbering(
$episode->number,
$episode->season_number,
'text-xs font-semibold text-gray-600',
'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500',
true,
) .
'<span class="mx-1">-</span>' .
'<span class="mr-1 group-hover:underline">' . $episode->title . '</span>' .
'<span class="mr-1 truncate group-hover:underline">' . $episode->title . '</span>' .
'</h2>' .
'<p class="max-w-sm text-xs text-gray-600 line-clamp-2">' . $episode->description . '</p>' .
'</a>' .
@ -74,7 +73,7 @@
[
'header' => lang('Episode.list.actions'),
'cell' => function ($episode, $podcast) {
return '<button id="more-dropdown-' . $episode->id . '" type="button" class="inline-flex items-center p-1 outline-none focus:ring" data-dropdown="button" data-dropdown-target="more-dropdown-' . $episode->id . '-menu" aria-haspopup="true" aria-expanded="false">' .
return '<button id="more-dropdown-' . $episode->id . '" type="button" class="inline-flex items-center p-1 focus:ring-castopod" data-dropdown="button" data-dropdown-target="more-dropdown-' . $episode->id . '-menu" aria-haspopup="true" aria-expanded="false">' .
icon('more') .
'</button>' .
'<DropdownMenu id="more-dropdown-' . $episode->id . '-menu" labelledby="more-dropdown-' . $episode->id . '" items="' . esc(json_encode([

74
themes/cp_admin/episode/persons.php
View File

@ -14,6 +14,42 @@
<?= $this->section('content') ?>
<form action="<?= route_to('episode-persons-manage', $podcast->id, $episode->id) ?>" method="POST">
<?= csrf_field() ?>
<Forms.Section
title="<?= lang('Person.episode_form.add_section_title') ?>"
subtitle="<?= lang('Person.episode_form.add_section_subtitle') ?>"
>
<Forms.Field
as="MultiSelect"
id="persons"
name="persons[]"
label="<?= lang('Person.episode_form.persons') ?>"
hint="<?= lang('Person.episode_form.persons_hint') ?>"
options="<?= htmlspecialchars(json_encode($personOptions)) ?>"
selected="<?= htmlspecialchars(json_encode(old('persons', []))) ?>"
required="true"
/>
<Forms.Field
as="MultiSelect"
id="roles"
name="roles[]"
label="<?= lang('Person.episode_form.roles') ?>"
hint="<?= lang('Person.episode_form.roles_hint') ?>"
options="<?= htmlspecialchars(json_encode($taxonomyOptions)) ?>"
selected="<?= htmlspecialchars(json_encode(old('roles', []))) ?>"
required="true"
/>
<Button variant="primary" type="submit" class="self-end"><?= lang('Person.episode_form.submit_add') ?></Button>
</Forms.Section>
</form>
<?= data_table(
[
[
@ -55,43 +91,7 @@
],
],
$episode->persons,
'max-w-xl'
'max-w-xl mt-6'
) ?>
<form action="<?= route_to('episode-persons-manage', $podcast->id, $episode->id) ?>" method="POST" class="mt-6">
<?= csrf_field() ?>
<Forms.Section
title="<?= lang('Person.episode_form.add_section_title') ?>"
subtitle="<?= lang('Person.episode_form.add_section_subtitle') ?>"
>
<Forms.Field
as="MultiSelect"
id="persons"
name="persons[]"
label="<?= lang('Person.episode_form.persons') ?>"
hint="<?= lang('Person.episode_form.persons_hint') ?>"
options="<?= htmlspecialchars(json_encode($personOptions)) ?>"
selected="<?= htmlspecialchars(json_encode(old('persons', []))) ?>"
required="true"
/>
<Forms.Field
as="MultiSelect"
id="roles"
name="roles[]"
label="<?= lang('Person.episode_form.roles') ?>"
hint="<?= lang('Person.episode_form.roles_hint') ?>"
options="<?= htmlspecialchars(json_encode($taxonomyOptions)) ?>"
selected="<?= htmlspecialchars(json_encode(old('roles', []))) ?>"
required="true"
/>
<Button variant="primary" type="submit" class="self-end"><?= lang('Person.episode_form.submit_add') ?></Button>
</Forms.Section>
</form>
<?= $this->endSection() ?>

4
themes/cp_admin/episode/publish.php
View File

@ -49,7 +49,7 @@
<?= episode_numbering(
$episode->number,
$episode->season_number,
'text-xs font-semibold text-gray-600',
'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500',
true,
) ?>
</div>
@ -76,7 +76,7 @@
<Forms.Radio value="now" name="publication_method" isChecked="<?= old('publication_method') ? old('publish') === 'now' : true ?>"><?= lang('Episode.publish_form.publication_method.now') ?></Forms.Radio>
<div class="inline-flex flex-wrap items-center radio-toggler">
<input
class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100"
class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-castopod"
type="radio" id="schedule" name="publication_method" value="schedule" <?= old('publication_method') && old('publication_method') === 'schedule' ? 'checked' : '' ?> />
<Label for="schedule" class="pl-2 leading-8"><?= lang('Episode.publish_form.publication_method.schedule') ?></label>
<div class="w-full mt-2 radio-toggler-element">

4
themes/cp_admin/episode/publish_edit.php
View File

@ -51,7 +51,7 @@
<?= episode_numbering(
$episode->number,
$episode->season_number,
'text-xs font-semibold text-gray-600',
'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500',
true,
) ?>
</div>
@ -80,7 +80,7 @@
<Forms.Radio value="now" name="publication_method" isChecked="<?= old('publication_method') && old('publish') === 'now' ?>"><?= lang('Episode.publish_form.publication_method.now') ?></Forms.Radio>
<div class="inline-flex flex-wrap items-center radio-toggler">
<input
class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100"
class="w-6 h-6 border-black text-pine-500 border-3 focus:ring-castopod"
type="radio" id="schedule" name="publication_method" value="schedule" <?= old('publication_method') ? old('publication_method') === 'schedule' : 'checked' ?> />
<Label for="schedule" class="pl-2 leading-8"><?= lang('Episode.publish_form.publication_method.schedule') ?></label>
<div class="w-full mt-2 radio-toggler-element">

6
themes/cp_admin/podcast/_sidebar.php
View File

@ -46,7 +46,7 @@ $podcastNavigation = [
<a href="<?= route_to(
'podcast-activity',
$podcast->handle,
) ?>" class="inline-flex items-center text-sm outline-none hover:underline focus:ring"
) ?>" class="inline-flex items-center text-sm hover:underline focus:ring-castopod"
data-toggle="tooltip" data-placement="bottom" title="<?= lang(
'PodcastNavigation.go_to_page',
) ?>">@<?= $podcast->handle ?>
@ -57,7 +57,7 @@ $podcastNavigation = [
<nav class="flex flex-col flex-1 py-4 overflow-y-auto gap-y-4">
<?php foreach ($podcastNavigation as $section => $data): ?>
<div>
<button class="inline-flex items-center w-full px-4 py-1 font-semibold outline-none focus:ring" type="button">
<button class="inline-flex items-center w-full px-4 py-1 font-semibold focus:ring-castopod" type="button">
<?= icon($data['icon'], 'opacity-60 text-2xl mr-4') .
lang('PodcastNavigation.' . $section) ?>
</button>
@ -65,7 +65,7 @@ $podcastNavigation = [
<?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 outline-none hover:opacity-100 focus:ring <?= $isActive
<a class="w-full py-1 pl-14 pr-2 text-sm hover:opacity-100 focus:ring-inset focus:ring-castopod <?= $isActive
? 'font-semibold opacity-100 inline-flex items-center'
: 'opacity-75' ?>" href="<?= route_to(
$item,

10
themes/cp_admin/podcast/latest_episodes.php
View File

@ -30,21 +30,19 @@
$podcast->id,
$episode->id,
) ?>"
class="text-sm font-semibold truncate hover:underline"
class="text-sm font-semibold truncate hover:underline focus:ring-castopod"
>
<?= episode_numbering(
$episode->number,
$episode->season_number,
'font-semibold text-gray-600',
'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500 mr-1',
true,
) ?>
<span class="mx-1">-</span>
<?= $episode->title ?>
) . $episode->title ?>
</a>
</div>
<button
type="button"
class="inline-flex items-center p-1 outline-none focus:ring"
class="inline-flex items-center p-1 focus:ring-castopod"
id="more-dropdown-<?= $episode->id ?>"
data-dropdown="button"
data-dropdown-target="more-dropdown-<?= $episode->id ?>-menu"

2
themes/cp_admin/podcast/list.php
View File

@ -19,7 +19,7 @@
<div class="grid gap-4 grid-cols-podcasts">
<?php if ($podcasts !== null): ?>
<?php foreach ($podcasts as $podcast): ?>
<article class="relative h-full overflow-hidden transition bg-white shadow border-3 border-pine-100 rounded-xl group hover:shadow-xl">
<article class="relative h-full overflow-hidden transition bg-white shadow border-3 border-pine-100 rounded-xl group hover:shadow-xl focus-within:ring-castopod">
<div class="w-full h-full overflow-hidden">
<img
alt="<?= $podcast->title ?>"

68
themes/cp_admin/podcast/persons.php
View File

@ -14,6 +14,39 @@
<?= $this->section('content') ?>
<form action="<?= route_to('podcast-persons-manage', $podcast->id) ?>" method="POST">
<?= csrf_field() ?>
<Forms.Section
title="<?= lang('Person.podcast_form.add_section_title') ?>"
subtitle="<?= lang('Person.podcast_form.add_section_subtitle') ?>"
>
<Forms.Field
as="MultiSelect"
id="persons"
name="persons[]"
label="<?= lang('Person.podcast_form.persons') ?>"
hint="<?= lang('Person.podcast_form.persons_hint') ?>"
options="<?= esc(json_encode($personOptions)) ?>"
selected="<?= esc(json_encode(old('persons', []))) ?>"
required="true" />
<Forms.Field
as="MultiSelect"
id="roles"
name="roles[]"
label="<?= lang('Person.podcast_form.roles') ?>"
hint="<?= lang('Person.podcast_form.roles_hint') ?>"
options="<?= esc(json_encode($taxonomyOptions)) ?>"
selected="<?= esc(json_encode(old('roles', []))) ?>"
required="true" />
<Button variant="primary" class="self-end" type="submit"><?= lang('Person.podcast_form.submit_add') ?></Button>
</Forms.Section>
</form>
<?= data_table(
[
[
@ -55,40 +88,7 @@
],
],
$podcast->persons,
'max-w-xl'
'max-w-xl mt-6'
) ?>
<form action="<?= route_to('podcast-persons-manage', $podcast->id) ?>" method="POST" class="mt-6">
<?= csrf_field() ?>
<Forms.Section
title="<?= lang('Person.podcast_form.add_section_title') ?>"
subtitle="<?= lang('Person.podcast_form.add_section_subtitle') ?>"
>
<Forms.Field
as="MultiSelect"
id="persons"
name="persons[]"
label="<?= lang('Person.podcast_form.persons') ?>"
hint="<?= lang('Person.podcast_form.persons_hint') ?>"
options="<?= esc(json_encode($personOptions)) ?>"
selected="<?= esc(json_encode(old('persons', []))) ?>"
required="true" />
<Forms.Field
as="MultiSelect"
id="roles"
name="roles[]"
label="<?= lang('Person.podcast_form.roles') ?>"
hint="<?= lang('Person.podcast_form.roles_hint') ?>"
options="<?= esc(json_encode($taxonomyOptions)) ?>"
selected="<?= esc(json_encode(old('roles', []))) ?>"
required="true" />
<Button variant="primary" class="self-end" type="submit"><?= lang('Person.podcast_form.submit_add') ?></Button>
</Forms.Section>
</form>
<?= $this->endSection() ?>

26
themes/cp_admin/user/list.php
View File

@ -47,9 +47,29 @@
[
'header' => lang('Common.actions'),
'cell' => function ($user) {
return '<Button uri="' . route_to('user-force_pass_reset', $user->id) . '" variant="secondary" size="small">' . lang('User.forcePassReset') . '</Button>' .
'<Button uri="' . route_to($user->isBanned() ? 'user-unban' : 'user-ban', $user->id) . '" variant="warning" size="small">' . lang('User.' . ($user->isBanned() ? 'unban' : 'ban')) . '</Button>' .
'<Button uri="' . route_to('user-delete', $user->id) . '" variant="danger" size="small">' . lang('User.delete') . '</Button>';
return '<button id="more-dropdown-' . $user->id . '" type="button" class="inline-flex items-center p-1 focus:ring-castopod" data-dropdown="button" data-dropdown-target="more-dropdown-' . $user->id . '-menu" aria-haspopup="true" aria-expanded="false">' . icon('more') . '</button>' .
'<DropdownMenu id="more-dropdown-' . $user->id . '-menu" labelledby="more-dropdown-' . $user->id . '" items="' . esc(json_encode([
[
'type' => 'link',
'title' => lang('User.forcePassReset'),
'uri' => route_to('user-force_pass_reset', $user->id),
],
[
'type' => 'link',
'title' => lang('User.' . ($user->isBanned() ? 'unban' : 'ban')),
'uri' => route_to($user->isBanned() ? 'user-unban' : 'user-ban', $user->id),
],
[
'type' => 'separator',
],
[
'type' => 'link',
'title' => lang('User.delete'),
'uri' => route_to('user-delete', $user->id),
'class' => 'font-semibold text-red-600',
],
])) . '" />';
},
],
],

6
themes/cp_app/_admin_navbar.php
View File

@ -1,9 +1,9 @@
<div class="sticky top-0 left-0 z-50 flex items-center justify-between w-full h-10 text-white border-b shadow bg-pine-800 border-pine-900">
<div class="inline-flex items-center h-full">
<a href="<?= route_to('home') ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900">
<a href="<?= route_to('home') ?>" class="inline-flex items-center h-full px-2 border-r border-pine-900 focus:ring-inset focus:ring-castopod">
<?= svg('castopod-logo-base', 'h-6') ?>
</a>
<a href="<?= route_to('admin', ) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold outline-none hover:underline focus:ring">
<a href="<?= route_to('admin', ) ?>" class="inline-flex items-center h-full px-6 text-sm font-semibold hover:underline focus:ring-inset focus:ring-castopod">
<?= lang('AdminNavigation.go_to_admin') ?>
<?= icon('external-link', 'ml-1 opacity-60') ?>
</a>
@ -12,7 +12,7 @@
<div class="inline-flex items-center h-full">
<button
type="button"
class="inline-flex items-center h-full px-3 text-sm font-semibold outline-none focus:ring gap-x-2"
class="inline-flex items-center h-full px-3 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"

2
themes/cp_app/_persons_modal.php
View File

@ -19,7 +19,7 @@
<div class="flex gap-x-2">
<img src="<?= $person->image->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-10 h-10 rounded-full" />
<div class="flex flex-col">
<h4 class="text-sm font-semibold hover:underline focus:ring">
<h4 class="text-sm font-semibold hover:underline focus:ring-castopod">
<?php if ($person->information_url): ?>
<a href="<?= $person->information_url ?>" target="_blank" rel="noopener noreferrer"><?= $person->full_name ?></a>
<?php else: ?>

9
themes/cp_app/embeddable_player.php
View File

@ -43,15 +43,14 @@
<a href="<?= $episode->link ?>" class="flex items-center mb-2" style="color: <?= $themeData[
'text'
] ?>;" target="_blank">
<h1 class="mr-2 text-lg font-semibold truncate opacity-100 hover:opacity-75">
<?= $episode->title ?>
</h1>
<?= episode_numbering(
$episode->number,
$episode->season_number,
'text-xs',
'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500 mr-1',
true,
) ?>
) ?><h1 class="mr-2 text-lg font-semibold truncate opacity-100 hover:opacity-75">
<?= $episode->title ?>
</h1>
</a>
<vm-player
id="castopod-vm-player"

8
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-podcastLayout bg-pine-50">
<body class="grid items-start mx-auto grid-cols-podcast bg-pine-50">
<?php if (can_user_interact()): ?>
<div class="col-span-full">
<?= $this->include('_admin_navbar') ?>
@ -60,7 +60,7 @@
'width' => 420,
'height' => 620,
'class' =>
'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:outline-none focus:ring bg-rose-600',
'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:ring-castopod bg-rose-600',
],
) ?>
</div>
@ -124,8 +124,8 @@
<?php endif; ?>
</div>
<?= $this->include('episode/_partials/navigation') ?>
<div class="relative grid items-start grid-cols-3 col-start-2 pt-6 pb-12 gap-x-6">
<main class="col-span-full sm:col-span-2">
<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">
<?= $this->renderSection('content') ?>
</main>
<?= $this->include('podcast/_partials/sidebar') ?>

48
themes/cp_app/episode/_partials/card.php
View File

@ -1,29 +1,27 @@
<article class="w-full bg-white shadow sm:rounded-lg">
<div class="flex p-4 gap-x-2">
<div class="relative">
<time class="absolute px-1 text-xs font-semibold text-white rounded bottom-2 right-2 bg-black/50" datetime="PT<?= $episode->audio_file_duration ?>S">
<?= format_duration($episode->audio_file_duration) ?>
</time>
<img loading="lazy" src="<?= $episode->image
->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 h-20 rounded-lg" />
</div>
<div class="flex items-center flex-1 gap-x-4">
<div class="flex flex-col flex-1">
<div class="inline-flex items-center">
<?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold text-gray-700 px-1 border mr-2 !no-underline', true) ?>
<?= relative_time($episode->published_at, 'text-xs whitespace-nowrap') ?>
</div>
<h2 class="flex-1 font-semibold line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
<article class="flex w-full p-4 bg-white shadow rounded-conditional-2xl gap-x-2">
<div class="relative">
<time class="absolute px-1 text-xs font-semibold text-white rounded bottom-2 right-2 bg-black/50" datetime="PT<?= $episode->audio_file_duration ?>S">
<?= format_duration($episode->audio_file_duration) ?>
</time>
<img loading="lazy" src="<?= $episode->image
->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 h-20 rounded-lg" />
</div>
<div class="flex items-center flex-1 gap-x-4">
<div class="flex flex-col flex-1">
<div class="inline-flex items-center">
<?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold text-gray-700 px-1 border mr-2 !no-underline', true) ?>
<?= relative_time($episode->published_at, 'text-xs whitespace-nowrap') ?>
</div>
<play-episode-button
id="<?= $episode->id ?>"
imageSrc="<?= $episode->image->thumbnail_url ?>"
title="<?= $episode->title ?>"
podcast="<?= $episode->podcast->title ?>"
src="<?= $episode->audio_file_web_url ?>"
mediaType="<?= $episode->audio_file_mimetype ?>"
playLabel="<?= lang('Common.play_episode_button.play') ?>"
playingLabel="<?= lang('Common.play_episode_button.playing') ?>"></play-episode-button>
<h2 class="flex-1 font-semibold line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
</div>
<play-episode-button
id="<?= $episode->id ?>"
imageSrc="<?= $episode->image->thumbnail_url ?>"
title="<?= $episode->title ?>"
podcast="<?= $episode->podcast->title ?>"
src="<?= $episode->audio_file_web_url ?>"
mediaType="<?= $episode->audio_file_mimetype ?>"
playLabel="<?= lang('Common.play_episode_button.play') ?>"
playingLabel="<?= lang('Common.play_episode_button.playing') ?>"></play-episode-button>
</div>
</article>

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

@ -1,4 +1,4 @@
<article class="relative z-10 flex w-full px-4 py-2 sm:rounded-2xl">
<article class="relative z-10 flex w-full px-4 py-2 rounded-conditional-2xl">
<img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
<div class="flex-1">
<header class="w-full mb-2 text-sm">

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

@ -1,4 +1,4 @@
<article class="relative z-10 flex w-full p-4 bg-white shadow sm:rounded-2xl">
<article class="relative z-10 flex w-full p-4 bg-white shadow rounded-conditional-2xl">
<img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
<div class="flex-1">
<header class="w-full mb-2 text-sm">

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

@ -15,7 +15,7 @@
'actorUsername' => $comment->actor->username,
]) ?>"
rows="1" />
<Button variant="primary" size="small" type="submit" name="action" value="reply" iconRight="send-plane"><?= lang('Comment.form.submit_reply') ?></Button>
<Button variant="primary" size="small" type="submit" name="action" value="reply" class="self-end" iconRight="send-plane"><?= lang('Comment.form.submit_reply') ?></Button>
</div>
</form>
<?php endif; ?>

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

@ -13,10 +13,10 @@ $navigationItems = [
],
]
?>
<nav class="sticky z-40 flex col-start-2 px-4 pt-4 bg-white shadow md:px-8 gap-x-2 md:gap-x-4 -top-4 md:rounded-b-xl">
<nav class="sticky z-40 flex col-start-2 px-4 pt-4 bg-white shadow md:px-8 gap-x-2 md:gap-x-4 -top-4 rounded-conditional-b-xl">
<?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 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 sm:hidden focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100" 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-toggle="podcast-sidebar" data-toggle-class="absolute sticky top-0 right-0 hidden bg-white top-12"><?= icon('menu') ?></button>
</nav>

15
themes/cp_app/episode/activity.php
View File

@ -34,9 +34,8 @@
<?= $this->section('content') ?>
<div class="flex flex-col gap-y-4">
<?php if (can_user_interact()): ?>
<form action="<?= route_to('post-attempt-create', $podcast->handle) ?>" method="POST" class="flex p-4 bg-white shadow sm:rounded-2xl">
<form action="<?= route_to('post-attempt-create', $podcast->handle) ?>" method="POST" class="flex p-4 bg-white shadow rounded-conditional-2xl">
<?= csrf_field() ?>
<?= view('_message_block') ?>
@ -54,15 +53,17 @@
<Button variant="primary" size="small" type="submit" class="self-end" iconRight="send-plane"><?= lang('Post.form.submit') ?></Button>
</div>
</form>
<hr class="my-4 border-2 border-pine-100">
<?php endif; ?>
<?php foreach ($episode->posts as $key => $post): ?>
<?= view('post/_partials/card', [
<div class="flex flex-col gap-y-4">
<?php foreach ($episode->posts as $key => $post): ?>
<?= view('post/_partials/card', [
'index' => $key,
'post' => $post,
'podcast' => $podcast,
'post' => $post,
'podcast' => $podcast,
]) ?>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<?= $this->endSection() ?>

10
themes/cp_app/episode/comments.php
View File

@ -36,8 +36,7 @@
<?= $this->section('content') ?>
<div class="flex flex-col gap-y-4">
<?php if (can_user_interact()): ?>
<?php if (can_user_interact()): ?>
<form action="<?= route_to('comment-attempt-create', $podcast->id, $episode->id) ?>" method="POST" class="flex p-4">
<?= csrf_field() ?>
@ -55,15 +54,14 @@
<Button class="self-end" variant="primary" size="small" type="submit" iconRight="send-plane"><?= lang('Comment.form.submit') ?></Button>
</div>
</form>
<?php endif; ?>
<?php endif; ?>
<?php foreach ($episode->comments as $comment): ?>
<?php foreach ($episode->comments as $comment): ?>
<?= view('episode/_partials/comment', [
'comment' => $comment,
'podcast' => $podcast,
]) ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
<?= $this->endSection()
?>

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

@ -24,7 +24,7 @@
->asset('js/audio-player.ts', 'js') ?>
</head>
<body class="grid items-start mx-auto grid-cols-podcastLayout bg-pine-50">
<body class="grid items-start mx-auto grid-cols-podcast bg-pine-50">
<?php if (can_user_interact()): ?>
<div class="col-span-full">
<?= $this->include('_admin_navbar') ?>
@ -55,14 +55,14 @@
'width' => 420,
'height' => 620,
'class' =>
'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:outline-none focus:ring bg-rose-600',
'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:ring-castopod bg-rose-600',
],
) ?>
</div>
</header>
<?= $this->include('podcast/_partials/navigation') ?>
<div class="grid items-start grid-cols-3 col-start-2 pb-12 mt-6 gap-x-6">
<main class="col-span-full sm:col-span-2">
<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">
<?= $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 md:rounded-b-xl md:pt-12 ">
<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 ">
<?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 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 sm:hidden focus:outline-none focus:ring-2 focus:ring-pine-500 focus:ring-offset-2 focus:ring-offset-pine-100"><?= icon('menu') ?></button>
<button type="button" class="p-2 ml-auto rotate-180 rounded-full md:hidden focus:ring-castopod"><?= icon('menu') ?></button>
</nav>

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

@ -1,4 +1,4 @@
<aside id="podcast-sidebar" class="sticky hidden col-span-1 sm:block top-12">
<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">
<a href="<?= route_to('podcast_feed', $podcast->handle) ?>" class="inline-flex items-center mb-6 text-sm font-semibold text-pine-800 group" target="_blank" rel="noopener noreferrer">

60
themes/cp_app/podcast/about.php
View File

@ -30,43 +30,43 @@
<?= $this->section('content') ?>
<div class="px-2 sm:px-4">
<div class="mb-2"><?= $podcast->description_html ?></div>
<div class="flex gap-x-4 gap-y-2">
<span class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border">
<?= lang(
'Podcast.category_options.' . $podcast->category->code,
) ?>
</span>
<?php foreach ($podcast->other_categories as $other_category): ?>
<div class="mb-2"><?= $podcast->description_html ?></div>
<div class="flex gap-x-4 gap-y-2">
<span class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border">
<?= lang(
'Podcast.category_options.' . $other_category->code,
'Podcast.category_options.' . $podcast->category->code,
) ?>
</span>
<?php endforeach; ?>
</div>
<?php foreach ($podcast->other_categories as $other_category): ?>
<span class="px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-100 border">
<?= lang(
'Podcast.category_options.' . $other_category->code,
) ?>
</span>
<?php endforeach; ?>
</div>
<div class="flex items-center mt-4 gap-x-8">
<?php if ($podcast->persons !== []): ?>
<button class="flex items-center text-xs font-semibold gap-x-2 hover:underline" data-toggle="persons-list" data-toggle-class="hidden">
<div class="inline-flex flex-row-reverse">
<?php $i = 0; ?>
<?php foreach ($podcast->persons as $person): ?>
<img src="<?= $person->image->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-5 border-2 rounded-full border-pine-100 last:ml-0" />
<?php $i++; if ($i === 3) {
<div class="flex items-center mt-4 gap-x-8">
<?php if ($podcast->persons !== []): ?>
<button class="flex items-center text-xs font-semibold gap-x-2 hover:underline" data-toggle="persons-list" data-toggle-class="hidden">
<div class="inline-flex flex-row-reverse">
<?php $i = 0; ?>
<?php foreach ($podcast->persons as $person): ?>
<img src="<?= $person->image->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-5 border-2 rounded-full border-pine-100 last:ml-0" />
<?php $i++; if ($i === 3) {
break;
}?>
<?php endforeach; ?>
</div>
<?= lang('Podcast.persons', [
'personsCount' => count($podcast->persons),
]) ?>
</button>
<?php endif; ?>
<?php if ($podcast->location): ?>
<?= location_link($podcast->location, 'text-xs font-semibold p-2') ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?= lang('Podcast.persons', [
'personsCount' => count($podcast->persons),
]) ?>
</button>
<?php endif; ?>
<?php if ($podcast->location): ?>
<?= location_link($podcast->location, 'text-xs font-semibold p-2') ?>
<?php endif; ?>
</div>
</div>

9
themes/cp_app/podcast/activity.php
View File

@ -27,11 +27,8 @@
<?= $this->section('content') ?>
<section class="w-full">
<?php if (can_user_interact()): ?>
<form action="<?= route_to('post-attempt-create', interact_as_actor()->username) ?>" method="POST" class="flex p-4 bg-white shadow rounded-xl">
<form action="<?= route_to('post-attempt-create', interact_as_actor()->username) ?>" method="POST" class="flex p-4 bg-white shadow rounded-conditional-2xl">
<?= csrf_field() ?>
<?= view('_message_block') ?>
@ -55,7 +52,7 @@
<hr class="my-4 border-2 border-pine-100">
<?php endif; ?>
<div class="flex flex-col gap-y-6">
<div class="flex flex-col gap-y-4">
<?php foreach ($posts as $key => $post): ?>
<?php if ($post->reblog_of_id !== null): ?>
<?= view('post/_partials/reblog', [
@ -73,6 +70,4 @@
<?php endforeach; ?>
</div>
</section>
<?= $this->endSection() ?>

56
themes/cp_app/podcast/episodes.php
View File

@ -27,29 +27,28 @@
<?= $this->section('content') ?>
<section class="flex flex-col max-w-2xl gap-y-4">
<?php if ($episodes): ?>
<div class="flex items-center justify-between">
<h1 class="font-semibold">
<?php if ($activeQuery['type'] === 'year'): ?>
<?= lang('Podcast.list_of_episodes_year', [
<?php if ($episodes): ?>
<div class="flex items-center justify-between px-2">
<h1 class="font-semibold">
<?php if ($activeQuery['type'] === 'year'): ?>
<?= lang('Podcast.list_of_episodes_year', [
'year' => $activeQuery['value'],
'episodeCount' => count($episodes),
'episodeCount' => count($episodes),
]) ?>
<?php elseif ($activeQuery['type'] === 'season'): ?>
<?= lang('Podcast.list_of_episodes_season', [
<?php elseif ($activeQuery['type'] === 'season'): ?>
<?= lang('Podcast.list_of_episodes_season', [
'seasonNumber' => $activeQuery['value'],
'episodeCount' => count($episodes),
'episodeCount' => count($episodes),
]) ?>
<?php endif; ?>
</h1>
<?php if ($activeQuery): ?>
<button id="episode-lists-dropdown" type="button" class="inline-flex items-center px-2 py-1 text-sm font-semibold outline-none focus:ring" data-dropdown="button" data-dropdown-target="episode-lists-dropdown-menu" aria-label="<?= lang('Common.more') ?>" aria-haspopup="true" aria-expanded="false">
<?= $activeQuery['label'] . icon('caret-down', 'ml-2 text-xl') ?>
</button>
<nav id="episode-lists-dropdown-menu" class="flex flex-col py-2 text-black bg-white border rounded shadow" aria-labelledby="episode-lists-dropdown" data-dropdown="menu" data-dropdown-placement="bottom-end">
<?php foreach ($episodesNav as $link): ?>
<?= anchor(
<?php endif; ?>
</h1>
<?php if ($activeQuery): ?>
<button id="episode-lists-dropdown" type="button" class="inline-flex items-center px-2 py-1 text-sm font-semibold focus:ring-castopod" data-dropdown="button" data-dropdown-target="episode-lists-dropdown-menu" aria-label="<?= lang('Common.more') ?>" aria-haspopup="true" aria-expanded="false">
<?= $activeQuery['label'] . icon('caret-down', 'ml-2 text-xl') ?>
</button>
<nav id="episode-lists-dropdown-menu" class="flex flex-col py-2 text-black bg-white border rounded shadow" aria-labelledby="episode-lists-dropdown" data-dropdown="menu" data-dropdown-placement="bottom-end">
<?php foreach ($episodesNav as $link): ?>
<?= anchor(
$link['route'],
$link['label'] . ' (' . $link['number_of_episodes'] . ')',
[
@ -60,23 +59,24 @@
: 'text-gray-600 hover:text-gray-900'),
],
) ?>
<?php endforeach; ?>
</nav>
<?php endif; ?>
</div>
<?php endforeach; ?>
</nav>
<?php endif; ?>
</div>
<div class="flex flex-col mt-4 gap-y-4">
<?php foreach ($episodes as $episode): ?>
<?= view('episode/_partials/card', [
'episode' => $episode,
'podcast' => $podcast,
]) ?>
<?php endforeach; ?>
<?php else: ?>
<h1 class="px-4 mb-2 text-xl text-center"><?= lang(
</div>
<?php else: ?>
<h1 class="px-4 mb-2 text-xl text-center"><?= lang(
'Podcast.no_episode',
) ?></h1>
<p class="italic text-center"><?= lang('Podcast.no_episode_hint') ?></p>
<?php endif; ?>
</section>
<p class="italic text-center"><?= lang('Podcast.no_episode_hint') ?></p>
<?php endif; ?>
<?= $this->endSection()
?>

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

@ -27,7 +27,7 @@
) ?>"><?= icon('heart', 'text-2xl mr-1 text-gray-400') .
$post->favourites_count ?></button>
<button id="<?= $post->id .
'-more-dropdown' ?>" type="button" class="px-2 py-1 text-2xl text-gray-500 outline-none focus:ring" data-dropdown="button" data-dropdown-target="<?= $post->id .
'-more-dropdown' ?>" type="button" class="px-2 py-1 text-2xl text-gray-500 focus:ring-castopod" data-dropdown="button" data-dropdown-target="<?= $post->id .
'-more-dropdown-menu' ?>" aria-label="<?= lang(
'Common.more',
) ?>" aria-haspopup="true" aria-expanded="false"><?= icon('more') ?>

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

@ -1,4 +1,4 @@
<article class="relative z-10 w-full bg-white shadow sm:rounded-2xl">
<article class="relative z-10 w-full bg-white shadow sm:rounded-conditional-2xl">
<header class="flex px-6 py-4">
<img src="<?= $post->actor
->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />

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

@ -1,4 +1,4 @@
<article class="relative z-10 w-full bg-white shadow sm:rounded-2xl">
<article class="relative z-10 w-full bg-white shadow rounded-conditional-2xl">
<p class="inline-flex px-6 pt-4 text-xs text-gray-700"><?= icon(
'repeat',
'text-lg mr-2 text-gray-400',

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

@ -27,7 +27,7 @@
) ?>"><?= icon('heart', 'text-xl mr-1 text-gray-400') .
$reply->favourites_count ?></button>
<button id="<?= $reply->id .
'-more-dropdown' ?>" type="button" class="text-xl text-gray-500 outline-none focus:ring" data-dropdown="button" data-dropdown-target="<?= $reply->id .
'-more-dropdown' ?>" type="button" class="text-xl text-gray-500 focus:ring-castopod" data-dropdown="button" data-dropdown-target="<?= $reply->id .
'-more-dropdown-menu' ?>" aria-label="<?= lang(
'Common.more',
) ?>" aria-haspopup="true" aria-expanded="false"><?= icon('more') ?>