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

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
parent 93214007
......@@ -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;
......
......@@ -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' => [
......
......@@ -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',
......
......@@ -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;
......
......@@ -13,6 +13,10 @@
&:hover {
@apply underline;
}
&:focus {
@apply ring-castopod;
}
}
.breadcrumb-item.active {
......
......@@ -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 {
......
@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)));
}
}
@import "./tailwind.css";
@import "./custom.css";
@import "./fonts.css";
@import "./layout.css";
@import "./breadcrumb.css";
@import "./dropdown.css";
@import "./choices.css";
......
/* 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;
}
}
}
}
@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;
}
}
......@@ -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 {
......
......@@ -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',
......
......@@ -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':
......
......@@ -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,
......
......@@ -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>
......
......@@ -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;
......
......@@ -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>
......
......@@ -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);
......
......@@ -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,
......
......@@ -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'),
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment