refactor: update podcast card style + create partial for public navigation
This commit is contained in:
parent
2c0efc6563
commit
e3bd9df00e
|
@ -43,7 +43,7 @@ class DropdownMenu extends Component
|
||||||
return <<<HTML
|
return <<<HTML
|
||||||
<nav id="{$this->id}"
|
<nav id="{$this->id}"
|
||||||
class="absolute z-50 flex flex-col py-2 text-black whitespace-no-wrap bg-white border-black rounded-lg border-3"
|
class="absolute z-50 flex flex-col py-2 text-black whitespace-no-wrap bg-white border-black rounded-lg border-3"
|
||||||
aria-labelledby="{$this->labeledBy}"
|
aria-labelledby="{$this->labelledby}"
|
||||||
data-dropdown="menu"
|
data-dropdown="menu"
|
||||||
data-dropdown-placement="bottom-end">{$menuItems}</nav>
|
data-dropdown-placement="bottom-end">{$menuItems}</nav>
|
||||||
HTML;
|
HTML;
|
||||||
|
|
|
@ -10,16 +10,16 @@
|
||||||
"license": "AGPL-3.0-or-later",
|
"license": "AGPL-3.0-or-later",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@amcharts/amcharts4": "^4.10.22",
|
"@amcharts/amcharts4": "^4.10.22",
|
||||||
"@amcharts/amcharts4-geodata": "^4.1.21",
|
"@amcharts/amcharts4-geodata": "^4.1.22",
|
||||||
"@codemirror/basic-setup": "^0.19.0",
|
"@codemirror/basic-setup": "^0.19.0",
|
||||||
"@codemirror/commands": "^0.19.5",
|
"@codemirror/commands": "^0.19.5",
|
||||||
"@codemirror/lang-xml": "^0.19.1",
|
"@codemirror/lang-xml": "^0.19.2",
|
||||||
"@codemirror/state": "^0.19.2",
|
"@codemirror/state": "^0.19.2",
|
||||||
"@codemirror/view": "^0.19.7",
|
"@codemirror/view": "^0.19.8",
|
||||||
"@github/clipboard-copy-element": "^1.1.2",
|
"@github/clipboard-copy-element": "^1.1.2",
|
||||||
"@github/markdown-toolbar-element": "^1.5.1",
|
"@github/markdown-toolbar-element": "^1.5.1",
|
||||||
"@github/time-elements": "^3.1.2",
|
"@github/time-elements": "^3.1.2",
|
||||||
"@popperjs/core": "^2.10.1",
|
"@popperjs/core": "^2.10.2",
|
||||||
"@vime/core": "^5.0.33",
|
"@vime/core": "^5.0.33",
|
||||||
"choices.js": "^9.0.1",
|
"choices.js": "^9.0.1",
|
||||||
"flatpickr": "^4.6.9",
|
"flatpickr": "^4.6.9",
|
||||||
|
@ -30,19 +30,19 @@
|
||||||
"xml-formatter": "^2.4.1"
|
"xml-formatter": "^2.4.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^13.1.0",
|
"@commitlint/cli": "^13.2.0",
|
||||||
"@commitlint/config-conventional": "^13.1.0",
|
"@commitlint/config-conventional": "^13.2.0",
|
||||||
"@semantic-release/changelog": "^6.0.0",
|
"@semantic-release/changelog": "^6.0.0",
|
||||||
"@semantic-release/exec": "^6.0.1",
|
"@semantic-release/exec": "^6.0.1",
|
||||||
"@semantic-release/git": "^10.0.0",
|
"@semantic-release/git": "^10.0.0",
|
||||||
"@semantic-release/gitlab": "^7.0.3",
|
"@semantic-release/gitlab": "^7.0.3",
|
||||||
"@tailwindcss/forms": "^0.3.3",
|
"@tailwindcss/forms": "^0.3.4",
|
||||||
"@tailwindcss/line-clamp": "^0.2.1",
|
"@tailwindcss/line-clamp": "^0.2.1",
|
||||||
"@tailwindcss/typography": "^0.4.1",
|
"@tailwindcss/typography": "^0.4.1",
|
||||||
"@types/leaflet": "^1.7.5",
|
"@types/leaflet": "^1.7.5",
|
||||||
"@types/marked": "^3.0.1",
|
"@types/marked": "^3.0.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.31.2",
|
"@typescript-eslint/eslint-plugin": "^4.32.0",
|
||||||
"@typescript-eslint/parser": "^4.31.2",
|
"@typescript-eslint/parser": "^4.32.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"cssnano": "^5.0.8",
|
"cssnano": "^5.0.8",
|
||||||
"cz-conventional-changelog": "^3.3.0",
|
"cz-conventional-changelog": "^3.3.0",
|
||||||
|
@ -54,17 +54,17 @@
|
||||||
"lint-staged": "^11.1.2",
|
"lint-staged": "^11.1.2",
|
||||||
"postcss-import": "^14.0.2",
|
"postcss-import": "^14.0.2",
|
||||||
"postcss-preset-env": "^6.7.0",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"postcss-reporter": "^7.0.2",
|
"postcss-reporter": "^7.0.3",
|
||||||
"prettier": "2.4.1",
|
"prettier": "2.4.1",
|
||||||
"prettier-plugin-organize-imports": "^2.3.4",
|
"prettier-plugin-organize-imports": "^2.3.4",
|
||||||
"semantic-release": "^18.0.0",
|
"semantic-release": "^18.0.0",
|
||||||
"stylelint": "^13.13.1",
|
"stylelint": "^13.13.1",
|
||||||
"stylelint-config-standard": "^22.0.0",
|
"stylelint-config-standard": "^22.0.0",
|
||||||
"svgo": "^2.6.1",
|
"svgo": "^2.7.0",
|
||||||
"tailwindcss": "^2.2.15",
|
"tailwindcss": "^2.2.16",
|
||||||
"tailwindcss-scroll-snap": "^1.1.0",
|
"tailwindcss-scroll-snap": "^1.1.0",
|
||||||
"typescript": "^4.4.3",
|
"typescript": "^4.4.3",
|
||||||
"vite": "^2.5.10"
|
"vite": "^2.6.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@amcharts/amcharts4": {
|
"node_modules/@amcharts/amcharts4": {
|
||||||
|
@ -5947,6 +5947,20 @@
|
||||||
"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
|
||||||
"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
|
"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
|
||||||
},
|
},
|
||||||
|
"node_modules/fsevents": {
|
||||||
|
"version": "2.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||||
|
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||||
|
"dev": true,
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/function-bind": {
|
"node_modules/function-bind": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||||
|
@ -8191,6 +8205,12 @@
|
||||||
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
|
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/nanocolors": {
|
||||||
|
"version": "0.2.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.12.tgz",
|
||||||
|
"integrity": "sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.1.30",
|
"version": "3.1.30",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
|
||||||
|
@ -21907,6 +21927,13 @@
|
||||||
"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
|
||||||
"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
|
"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg=="
|
||||||
},
|
},
|
||||||
|
"fsevents": {
|
||||||
|
"version": "2.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||||
|
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"function-bind": {
|
"function-bind": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||||
|
@ -23619,6 +23646,12 @@
|
||||||
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
|
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"nanocolors": {
|
||||||
|
"version": "0.2.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.12.tgz",
|
||||||
|
"integrity": "sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"nanoid": {
|
"nanoid": {
|
||||||
"version": "3.1.30",
|
"version": "3.1.30",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
|
||||||
|
|
26
package.json
26
package.json
|
@ -27,17 +27,17 @@
|
||||||
"prepare": "is-ci || husky install"
|
"prepare": "is-ci || husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@amcharts/amcharts4-geodata": "^4.1.21",
|
"@amcharts/amcharts4-geodata": "^4.1.22",
|
||||||
"@amcharts/amcharts4": "^4.10.22",
|
"@amcharts/amcharts4": "^4.10.22",
|
||||||
"@codemirror/basic-setup": "^0.19.0",
|
"@codemirror/basic-setup": "^0.19.0",
|
||||||
"@codemirror/commands": "^0.19.5",
|
"@codemirror/commands": "^0.19.5",
|
||||||
"@codemirror/lang-xml": "^0.19.1",
|
"@codemirror/lang-xml": "^0.19.2",
|
||||||
"@codemirror/state": "^0.19.2",
|
"@codemirror/state": "^0.19.2",
|
||||||
"@codemirror/view": "^0.19.7",
|
"@codemirror/view": "^0.19.8",
|
||||||
"@github/clipboard-copy-element": "^1.1.2",
|
"@github/clipboard-copy-element": "^1.1.2",
|
||||||
"@github/markdown-toolbar-element": "^1.5.1",
|
"@github/markdown-toolbar-element": "^1.5.1",
|
||||||
"@github/time-elements": "^3.1.2",
|
"@github/time-elements": "^3.1.2",
|
||||||
"@popperjs/core": "^2.10.1",
|
"@popperjs/core": "^2.10.2",
|
||||||
"@vime/core": "^5.0.33",
|
"@vime/core": "^5.0.33",
|
||||||
"choices.js": "^9.0.1",
|
"choices.js": "^9.0.1",
|
||||||
"flatpickr": "^4.6.9",
|
"flatpickr": "^4.6.9",
|
||||||
|
@ -48,19 +48,19 @@
|
||||||
"xml-formatter": "^2.4.1"
|
"xml-formatter": "^2.4.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^13.1.0",
|
"@commitlint/cli": "^13.2.0",
|
||||||
"@commitlint/config-conventional": "^13.1.0",
|
"@commitlint/config-conventional": "^13.2.0",
|
||||||
"@semantic-release/changelog": "^6.0.0",
|
"@semantic-release/changelog": "^6.0.0",
|
||||||
"@semantic-release/exec": "^6.0.1",
|
"@semantic-release/exec": "^6.0.1",
|
||||||
"@semantic-release/git": "^10.0.0",
|
"@semantic-release/git": "^10.0.0",
|
||||||
"@semantic-release/gitlab": "^7.0.3",
|
"@semantic-release/gitlab": "^7.0.3",
|
||||||
"@tailwindcss/forms": "^0.3.3",
|
"@tailwindcss/forms": "^0.3.4",
|
||||||
"@tailwindcss/line-clamp": "^0.2.1",
|
"@tailwindcss/line-clamp": "^0.2.1",
|
||||||
"@tailwindcss/typography": "^0.4.1",
|
"@tailwindcss/typography": "^0.4.1",
|
||||||
"@types/leaflet": "^1.7.5",
|
"@types/leaflet": "^1.7.5",
|
||||||
"@types/marked": "^3.0.1",
|
"@types/marked": "^3.0.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.31.2",
|
"@typescript-eslint/eslint-plugin": "^4.32.0",
|
||||||
"@typescript-eslint/parser": "^4.31.2",
|
"@typescript-eslint/parser": "^4.32.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"cssnano": "^5.0.8",
|
"cssnano": "^5.0.8",
|
||||||
"cz-conventional-changelog": "^3.3.0",
|
"cz-conventional-changelog": "^3.3.0",
|
||||||
|
@ -72,17 +72,17 @@
|
||||||
"lint-staged": "^11.1.2",
|
"lint-staged": "^11.1.2",
|
||||||
"postcss-import": "^14.0.2",
|
"postcss-import": "^14.0.2",
|
||||||
"postcss-preset-env": "^6.7.0",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"postcss-reporter": "^7.0.2",
|
"postcss-reporter": "^7.0.3",
|
||||||
"prettier-plugin-organize-imports": "^2.3.4",
|
"prettier-plugin-organize-imports": "^2.3.4",
|
||||||
"prettier": "2.4.1",
|
"prettier": "2.4.1",
|
||||||
"semantic-release": "^18.0.0",
|
"semantic-release": "^18.0.0",
|
||||||
"stylelint-config-standard": "^22.0.0",
|
"stylelint-config-standard": "^22.0.0",
|
||||||
"stylelint": "^13.13.1",
|
"stylelint": "^13.13.1",
|
||||||
"svgo": "^2.6.1",
|
"svgo": "^2.7.0",
|
||||||
"tailwindcss-scroll-snap": "^1.1.0",
|
"tailwindcss-scroll-snap": "^1.1.0",
|
||||||
"tailwindcss": "^2.2.15",
|
"tailwindcss": "^2.2.16",
|
||||||
"typescript": "^4.4.3",
|
"typescript": "^4.4.3",
|
||||||
"vite": "^2.5.10"
|
"vite": "^2.6.1"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{js,ts,css,md,json}": "prettier --write",
|
"*.{js,ts,css,md,json}": "prettier --write",
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
data-dropdown-target="my-account-dropdown-menu"
|
data-dropdown-target="my-account-dropdown-menu"
|
||||||
aria-haspopup="true"
|
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>
|
aria-expanded="false"><?= icon('account-circle', 'text-2xl opacity-60 mr-2') . user()->username . icon('caret-down', 'ml-auto text-2xl') ?></button>
|
||||||
<DropdownMenu id="my-account-dropdown-menu" labeledBy="my-account-dropdown" items="<?= esc(json_encode([
|
<DropdownMenu id="my-account-dropdown-menu" labelledby="my-account-dropdown" items="<?= esc(json_encode([
|
||||||
[
|
[
|
||||||
'type' => 'link',
|
'type' => 'link',
|
||||||
'title' => lang('AdminNavigation.account.my-account'),
|
'title' => lang('AdminNavigation.account.my-account'),
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
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 outline-none focus:ring" data-dropdown="button" data-dropdown-target="more-dropdown-' . $episode->id . '-menu" aria-haspopup="true" aria-expanded="false">' .
|
||||||
icon('more') .
|
icon('more') .
|
||||||
'</button>' .
|
'</button>' .
|
||||||
'<DropdownMenu id="more-dropdown-' . $episode->id . '-menu" labeledBy="more-dropdown-' . $episode->id . '" items="' . esc(json_encode([
|
'<DropdownMenu id="more-dropdown-' . $episode->id . '-menu" labelledby="more-dropdown-' . $episode->id . '" items="' . esc(json_encode([
|
||||||
[
|
[
|
||||||
'type' => 'link',
|
'type' => 'link',
|
||||||
'title' => lang('Episode.edit'),
|
'title' => lang('Episode.edit'),
|
||||||
|
|
|
@ -52,7 +52,7 @@
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
><?= icon('more') ?></button>
|
><?= icon('more') ?></button>
|
||||||
<DropdownMenu id="more-dropdown-<?= $episode->id ?>-menu" labeledBy="more-dropdown-<?= $episode->id ?>" items="<?= esc(json_encode([
|
<DropdownMenu id="more-dropdown-<?= $episode->id ?>-menu" labelledby="more-dropdown-<?= $episode->id ?>" items="<?= esc(json_encode([
|
||||||
[
|
[
|
||||||
'type' => 'link',
|
'type' => 'link',
|
||||||
'title' => lang('Episode.edit'),
|
'title' => lang('Episode.edit'),
|
||||||
|
|
|
@ -19,32 +19,45 @@
|
||||||
<div class="grid gap-4 grid-cols-podcasts">
|
<div class="grid gap-4 grid-cols-podcasts">
|
||||||
<?php if ($podcasts !== null): ?>
|
<?php if ($podcasts !== null): ?>
|
||||||
<?php foreach ($podcasts as $podcast): ?>
|
<?php foreach ($podcasts as $podcast): ?>
|
||||||
<article class="h-full overflow-hidden bg-white border-2 border-pine-100 rounded-xl">
|
<article class="relative h-full overflow-hidden transition bg-white shadow border-3 border-pine-100 rounded-xl group hover:shadow-xl">
|
||||||
<img
|
<div class="w-full h-full overflow-hidden">
|
||||||
alt="<?= $podcast->title ?>"
|
<img
|
||||||
src="<?= $podcast->image
|
alt="<?= $podcast->title ?>"
|
||||||
->medium_url ?>" class="object-cover w-full h-48" />
|
src="<?= $podcast->image->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform group-hover:scale-105" />
|
||||||
<a href="<?= route_to(
|
</div>
|
||||||
'podcast-view',
|
<a href="<?= route_to(
|
||||||
$podcast->id,
|
'podcast-view',
|
||||||
) ?>" class="flex flex-col p-2 hover:underline">
|
$podcast->id,
|
||||||
<h2 class="font-semibold truncate"><?= $podcast->title ?></h2>
|
) ?>" class="absolute bottom-0 left-0 flex flex-col justify-end w-full h-full text-white" style="
|
||||||
<p class="text-gray-600">@<?= $podcast->handle ?></p>
|
background-image: linear-gradient(180deg,
|
||||||
</a>
|
hsla(0, 0%, 35.29%, 0) 0%,hsla(0, 0%, 34.53%, 0.034375) 16.36%,
|
||||||
<footer class="flex items-center justify-end p-2">
|
hsla(0, 0%, 32.42%, 0.125) 33.34%,
|
||||||
<a class="inline-flex p-2 mr-2 text-blue-700 bg-blue-100 rounded-full shadow-xs hover:bg-blue-200" href="<?= route_to(
|
hsla(0, 0%, 29.18%, 0.253125) 50.1%,
|
||||||
'podcast-edit',
|
hsla(0, 0%, 24.96%, 0.4) 65.75%,
|
||||||
$podcast->id,
|
hsla(0, 0%, 19.85%, 0.546875) 79.43%,
|
||||||
) ?>" data-toggle="tooltip" data-placement="bottom" title="<?= lang(
|
hsla(0, 0%, 13.95%, 0.675) 90.28%,
|
||||||
'Podcast.edit',
|
hsla(0, 0%, 7.32%, 0.765625) 97.43%,
|
||||||
) ?>"><?= icon('edit') ?></a>
|
hsla(0, 0%, 0%, 0.8) 100%
|
||||||
<a class="inline-flex p-2 text-gray-700 bg-gray-100 rounded-full shadow-xs hover:bg-gray-200" href="<?= route_to(
|
);
|
||||||
'podcast-view',
|
">
|
||||||
$podcast->id,
|
<div class="px-4 pb-4 transition duration-75 ease-out translate-y-6 group-hover:translate-y-0">
|
||||||
) ?>" data-toggle="tooltip" data-placement="bottom" title="<?= lang(
|
<h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>
|
||||||
'Podcast.view',
|
<p class="text-sm transition duration-150 opacity-0 group-hover:opacity-75">@<?= $podcast->handle ?></p>
|
||||||
) ?>"><?= icon('eye') ?></a>
|
</div>
|
||||||
</footer>
|
</a>
|
||||||
|
<button class="absolute top-0 right-0 p-2 mt-2 mr-2 text-white transition -translate-y-12 rounded-full opacity-0 group-hover:translate-y-0 bg-black/25 group-hover:opacity-100" id="more-dropdown-<?= $podcast->id ?>" data-dropdown="button" data-dropdown-target="more-dropdown-<?= $podcast->id ?>-menu" aria-haspopup="true" aria-expanded="false" title="<?= lang('Common.more') ?>"><?= icon('more') ?></button>
|
||||||
|
<DropdownMenu id="more-dropdown-<?= $podcast->id ?>-menu" labelledby="more-dropdown-<?= $podcast->id ?>" items="<?= esc(json_encode([
|
||||||
|
[
|
||||||
|
'type' => 'link',
|
||||||
|
'title' => lang('Podcast.view'),
|
||||||
|
'uri' => route_to('podcast-view', $podcast->id),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'type' => 'link',
|
||||||
|
'title' => lang('Podcast.edit'),
|
||||||
|
'uri' => route_to('podcast-edit', $podcast->id),
|
||||||
|
],
|
||||||
|
])) ?>" />
|
||||||
</article>
|
</article>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
|
|
|
@ -66,11 +66,25 @@
|
||||||
subtitle="<?= lang('Person.podcast_form.add_section_subtitle') ?>"
|
subtitle="<?= lang('Person.podcast_form.add_section_subtitle') ?>"
|
||||||
>
|
>
|
||||||
|
|
||||||
<Forms.Label for="persons" hint="<?= lang('Person.podcast_form.persons_hint') ?>"><?= lang('Person.podcast_form.persons') ?></Forms.Label>
|
<Forms.Field
|
||||||
<Forms.MultiSelect id="persons" name="persons[]" class="mb-4" required="required" options="<?= esc(json_encode($personOptions)) ?>" selected="<?= esc(json_encode(old('persons', []))) ?>"/>
|
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.Label for="roles" hint="<?= lang('Person.podcast_form.roles_hint') ?>" isOptional="true"><?= lang('Person.podcast_form.roles') ?></Forms.Label>
|
<Forms.Field
|
||||||
<Forms.MultiSelect id="roles" name="roles[]" class="mb-4" options="<?= esc(json_encode($taxonomyOptions)) ?>" selected="<?= esc(json_encode(old('roles', []))) ?>"/>
|
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>
|
<Button variant="primary" class="self-end" type="submit"><?= lang('Person.podcast_form.submit_add') ?></Button>
|
||||||
|
|
||||||
|
|
|
@ -55,11 +55,7 @@
|
||||||
) ?>
|
) ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav class="flex gap-4 px-8">
|
<?= $this->include('podcast/_navigation') ?>
|
||||||
<a href="<?= route_to('podcast-activity', $podcast->handle) ?>" class="px-4 py-1 font-semibold uppercase border-b-4 text-pine-500 border-pine-500"><?= lang('Podcast.activity') ?></a>
|
|
||||||
<a href="<?= route_to('podcast-episodes', $podcast->handle) ?>" class="px-4 py-1 font-semibold text-gray-500 uppercase hover:text-black"><?= lang('Podcast.episodes') ?></a>
|
|
||||||
<a href="<?= route_to('podcast-about', $podcast->handle) ?>" class="px-4 py-1 font-semibold text-gray-500 uppercase hover:text-black"><?= lang('Podcast.about') ?></a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="col-span-6">
|
<main class="col-span-6">
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
<?php declare(strict_types=1);
|
||||||
|
|
||||||
|
$navigationItems = [
|
||||||
|
[
|
||||||
|
'uri' => route_to('podcast-activity', $podcast->handle),
|
||||||
|
'label' => lang('Podcast.activity'),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'uri' => route_to('podcast-episodes', $podcast->handle),
|
||||||
|
'label' => lang('Podcast.episodes'),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'uri' => route_to('podcast-about', $podcast->handle),
|
||||||
|
'label' => lang('Podcast.about'),
|
||||||
|
],
|
||||||
|
]
|
||||||
|
?>
|
||||||
|
<nav class="flex gap-4 px-8">
|
||||||
|
<?php foreach ($navigationItems as $item): ?>
|
||||||
|
<?php $isActive = url_is($item['uri']); ?>
|
||||||
|
<a href="<?= $item['uri'] ?>" class="px-4 py-1 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; ?>
|
||||||
|
</nav>
|
|
@ -28,6 +28,7 @@
|
||||||
<?= $this->section('content') ?>
|
<?= $this->section('content') ?>
|
||||||
|
|
||||||
<section class="max-w-2xl mx-auto space-y-8">
|
<section class="max-w-2xl mx-auto space-y-8">
|
||||||
|
|
||||||
<?php foreach ($posts as $post): ?>
|
<?php foreach ($posts as $post): ?>
|
||||||
<?php if ($post->reblog_of_id !== null): ?>
|
<?php if ($post->reblog_of_id !== null): ?>
|
||||||
<?= view('podcast/_partials/reblog', [
|
<?= view('podcast/_partials/reblog', [
|
||||||
|
|
|
@ -27,20 +27,7 @@
|
||||||
|
|
||||||
<?= $this->section('content') ?>
|
<?= $this->section('content') ?>
|
||||||
|
|
||||||
<nav class="sticky z-20 flex justify-center pt-2 text-lg top-12 sm:top-0 bg-pine-50">
|
<?= $this->include('podcast/_navigation') ?>
|
||||||
<a href="<?= route_to(
|
|
||||||
'podcast-activity',
|
|
||||||
$podcast->handle,
|
|
||||||
) ?>" class="px-4 py-1 mr-8 font-semibold border-b-4 text-pine-800 border-pine-500"><?= lang(
|
|
||||||
'Podcast.activity',
|
|
||||||
) ?></a>
|
|
||||||
<a href="<?= route_to(
|
|
||||||
'podcast-episodes',
|
|
||||||
$podcast->handle,
|
|
||||||
) ?>" class="px-4 py-1 rounded-full hover:bg-pine-100"><?= lang(
|
|
||||||
'Podcast.episodes',
|
|
||||||
) ?></a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="max-w-2xl px-6 py-8 mx-auto">
|
<section class="max-w-2xl px-6 py-8 mx-auto">
|
||||||
<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-xl">
|
||||||
|
@ -51,7 +38,7 @@
|
||||||
<img src="<?= interact_as_actor()
|
<img src="<?= interact_as_actor()
|
||||||
->avatar_image_url ?>" alt="<?= interact_as_actor()
|
->avatar_image_url ?>" alt="<?= interact_as_actor()
|
||||||
->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
|
->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
|
||||||
<div class="flex flex-col flex-1 min-w-0">
|
<div class="flex flex-col flex-1 min-w-0 gap-y-2">
|
||||||
<Forms.Textarea
|
<Forms.Textarea
|
||||||
name="message"
|
name="message"
|
||||||
required="true"
|
required="true"
|
||||||
|
@ -61,7 +48,7 @@
|
||||||
name="episode_url"
|
name="episode_url"
|
||||||
type="url"
|
type="url"
|
||||||
placeholder="<?= lang('Post.form.episode_url_placeholder') . ' (' . lang('Common.optional') . ')' ?>" />
|
placeholder="<?= lang('Post.form.episode_url_placeholder') . ' (' . lang('Common.optional') . ')' ?>" />
|
||||||
<Button variant="primary" size="small" type="submit" class="self-end mt-2"><?= lang('Post.form.submit') ?></Button>
|
<Button variant="primary" size="small" type="submit" class="self-end"><?= lang('Post.form.submit') ?></Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<hr class="my-4 border-2 border-pine-100">
|
<hr class="my-4 border-2 border-pine-100">
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
<img src="<?= interact_as_actor()
|
<img src="<?= interact_as_actor()
|
||||||
->avatar_image_url ?>" alt="<?= interact_as_actor()
|
->avatar_image_url ?>" alt="<?= interact_as_actor()
|
||||||
->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
|
->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
|
||||||
<div class="flex flex-col flex-1 min-w-0">
|
<div class="flex flex-col flex-1 min-w-0 gap-y-2">
|
||||||
<Forms.Textarea
|
<Forms.Textarea
|
||||||
name="message"
|
name="message"
|
||||||
required="true"
|
required="true"
|
||||||
|
@ -121,7 +121,7 @@
|
||||||
<img src="<?= interact_as_actor()
|
<img src="<?= interact_as_actor()
|
||||||
->avatar_image_url ?>" alt="<?= interact_as_actor()
|
->avatar_image_url ?>" alt="<?= interact_as_actor()
|
||||||
->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
|
->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
|
||||||
<div class="flex flex-col flex-1 min-w-0">
|
<div class="flex flex-col flex-1 min-w-0 gap-y-2">
|
||||||
<input name="episode_url" value="<?= $episode->link ?>" type="hidden" />
|
<input name="episode_url" value="<?= $episode->link ?>" type="hidden" />
|
||||||
<Forms.Textarea
|
<Forms.Textarea
|
||||||
name="message"
|
name="message"
|
||||||
|
|
|
@ -26,46 +26,8 @@
|
||||||
<?= $this->endSection() ?>
|
<?= $this->endSection() ?>
|
||||||
|
|
||||||
<?= $this->section('content') ?>
|
<?= $this->section('content') ?>
|
||||||
<nav class="sticky z-20 flex items-center justify-center pt-2 text-lg top-12 sm:top-0 bg-pine-50">
|
|
||||||
<a href="<?= route_to(
|
<?= $this->include('podcast/_navigation') ?>
|
||||||
'podcast-activity',
|
|
||||||
$podcast->handle,
|
|
||||||
) ?>" class="px-4 py-1 mr-8 rounded-full hover:bg-pine-100"><?= lang(
|
|
||||||
'Podcast.activity',
|
|
||||||
) ?></a>
|
|
||||||
<a href="<?= route_to(
|
|
||||||
'podcast-episodes',
|
|
||||||
$podcast->handle,
|
|
||||||
) ?>" class="px-4 py-1 font-semibold border-b-4 text-pine-800 border-pine-500"><?= lang(
|
|
||||||
'Podcast.episodes',
|
|
||||||
) ?></a>
|
|
||||||
<?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'] .
|
|
||||||
' (' .
|
|
||||||
$activeQuery['number_of_episodes'] .
|
|
||||||
')' .
|
|
||||||
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'] . ')',
|
|
||||||
[
|
|
||||||
'class' =>
|
|
||||||
'px-2 py-1 whitespace-nowrap ' .
|
|
||||||
($link['is_active']
|
|
||||||
? 'font-semibold'
|
|
||||||
: 'text-gray-600 hover:text-gray-900'),
|
|
||||||
],
|
|
||||||
) ?>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</nav>
|
|
||||||
<?php endif; ?>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="flex flex-col max-w-2xl px-6 py-8 mx-auto">
|
<section class="flex flex-col max-w-2xl px-6 py-8 mx-auto">
|
||||||
|
|
||||||
|
@ -73,26 +35,26 @@
|
||||||
<h1 class="mb-4 text-xl font-semibold">
|
<h1 class="mb-4 text-xl font-semibold">
|
||||||
<?php if ($activeQuery['type'] === 'year') : ?>
|
<?php if ($activeQuery['type'] === 'year') : ?>
|
||||||
<?= lang('Podcast.list_of_episodes_year', [
|
<?= lang('Podcast.list_of_episodes_year', [
|
||||||
'year' => $activeQuery['value'],
|
'year' => $activeQuery['value'],
|
||||||
'episodeCount' => count($episodes),
|
'episodeCount' => count($episodes),
|
||||||
]) ?>
|
]) ?>
|
||||||
<?php elseif ($activeQuery['type'] === 'season') : ?>
|
<?php elseif ($activeQuery['type'] === 'season') : ?>
|
||||||
<?= lang('Podcast.list_of_episodes_season', [
|
<?= lang('Podcast.list_of_episodes_season', [
|
||||||
'seasonNumber' => $activeQuery['value'],
|
'seasonNumber' => $activeQuery['value'],
|
||||||
'episodeCount' => count($episodes),
|
'episodeCount' => count($episodes),
|
||||||
]) ?>
|
]) ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</h1>
|
</h1>
|
||||||
<?php foreach ($episodes as $episode) : ?>
|
<?php foreach ($episodes as $episode) : ?>
|
||||||
<?= view('podcast/_partials/episode_card', [
|
<?= view('podcast/_partials/episode_card', [
|
||||||
'episode' => $episode,
|
'episode' => $episode,
|
||||||
'podcast' => $podcast,
|
'podcast' => $podcast,
|
||||||
]) ?>
|
]) ?>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php else : ?>
|
<?php else : ?>
|
||||||
<h1 class="px-4 mb-2 text-xl text-center"><?= lang(
|
<h1 class="px-4 mb-2 text-xl text-center"><?= lang(
|
||||||
'Podcast.no_episode',
|
'Podcast.no_episode',
|
||||||
) ?></h1>
|
) ?></h1>
|
||||||
<p class="italic text-center"><?= lang('Podcast.no_episode_hint') ?></p>
|
<p class="italic text-center"><?= lang('Podcast.no_episode_hint') ?></p>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue