Tune editor
This commit is contained in:
marc
@@ -1,5 +1,113 @@
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
/*
|
||||
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
@@ -32,9 +140,11 @@
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
7. Disable tap highlights on iOS
|
||||
*/
|
||||
|
||||
html {
|
||||
html,
|
||||
:host {
|
||||
line-height: 1.5;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
@@ -44,12 +154,14 @@ html {
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
/* 3 */
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
/* 4 */
|
||||
font-feature-settings: normal;
|
||||
/* 5 */
|
||||
font-variation-settings: normal;
|
||||
/* 6 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 7 */
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -121,8 +233,10 @@ strong {
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font family by default.
|
||||
2. Correct the odd `em` font sizing in all browsers.
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
@@ -131,8 +245,12 @@ samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
font-feature-settings: normal;
|
||||
/* 2 */
|
||||
font-variation-settings: normal;
|
||||
/* 3 */
|
||||
font-size: 1em;
|
||||
/* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -201,6 +319,8 @@ textarea {
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 1 */
|
||||
letter-spacing: inherit;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
@@ -224,9 +344,9 @@ select {
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
input:where([type='button']),
|
||||
input:where([type='reset']),
|
||||
input:where([type='submit']) {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
background-color: transparent;
|
||||
@@ -430,108 +550,16 @@ video {
|
||||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
|
||||
[hidden] {
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.static {
|
||||
@@ -574,10 +602,6 @@ video {
|
||||
margin: 0.75rem;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.m-6 {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
@@ -645,18 +669,18 @@ video {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h-4\/5 {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.h-80 {
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-px {
|
||||
height: 1px;
|
||||
}
|
||||
@@ -669,14 +693,14 @@ video {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.w-80 {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.min-w-full {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@@ -685,10 +709,6 @@ video {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.max-w-5xl {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.max-w-xl {
|
||||
max-width: 36rem;
|
||||
}
|
||||
@@ -815,6 +835,10 @@ video {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -839,8 +863,8 @@ video {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-none {
|
||||
@@ -849,27 +873,22 @@ video {
|
||||
|
||||
.border-beige {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(178 124 9 / var(--tw-border-opacity));
|
||||
border-color: rgb(178 124 9 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-yellow-50 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(254 252 232 / var(--tw-border-opacity));
|
||||
border-color: rgb(254 252 232 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-beige {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(178 124 9 / var(--tw-bg-opacity));
|
||||
background-color: rgb(178 124 9 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-brown {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(62 56 52 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-yellow-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
|
||||
background-color: rgb(62 56 52 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
@@ -972,22 +991,17 @@ video {
|
||||
|
||||
.text-beige {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(178 124 9 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-brown {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(62 56 52 / var(--tw-text-opacity));
|
||||
color: rgb(178 124 9 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-yellow-50 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 252 232 / var(--tw-text-opacity));
|
||||
color: rgb(254 252 232 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<li id="tema-link-{{ link.id }}">
|
||||
<form class="flex flex-row items-start">
|
||||
<form class="flex flex-row items-start"
|
||||
hx-encoding='multipart/form-data'>
|
||||
{% include "fragments/tema/link_icon.html" %}
|
||||
<div class="grow my-2">
|
||||
<p class="text-sm text-beige">
|
||||
<select id="tema-link-{{ link.id }}-content-type"
|
||||
name="content_type"
|
||||
<div class="flex flex-col grow my-2">
|
||||
<div class="text-sm text-beige">
|
||||
<select name="content_type"
|
||||
value="{{ link.content_type.value.capitalize() }}"
|
||||
class="border border-yellow-50 focus:outline-none
|
||||
rounded
|
||||
@@ -21,8 +21,8 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
</div>
|
||||
<div>
|
||||
<input name="title"
|
||||
placeholder="Títol de l'enllaç"
|
||||
value="{{ link.title }}"
|
||||
@@ -30,21 +30,8 @@
|
||||
rounded w-full
|
||||
bg-brown p-1 my-1"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<input name="url"
|
||||
placeholder="URL de l'enllaç"
|
||||
value="{{ link.url }}"
|
||||
class="border border-beige focus:outline-none
|
||||
rounded w-full
|
||||
bg-brown p-1 my-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/link/{{ link_id }}/icon"
|
||||
hx-trigger="keyup delay:500ms changed"
|
||||
hx-target="#link-icon-{{ link.id }}"
|
||||
hx-include="[name='content_type']"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
{% include "fragments/tema/editor/link_url.html" %}
|
||||
</div>
|
||||
<div class="m-2 text-sm text-beige">
|
||||
<button title="Desa els canvis"
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<div id="link-editor-{{ link_id }}-file"
|
||||
class="flex flex-row gap-2">
|
||||
<input type='file'
|
||||
class="border border-beige focus:outline-none
|
||||
rounded grow
|
||||
bg-brown p-1 my-1"
|
||||
name='upload_file'>
|
||||
<button title="Afegeix un enllaç"
|
||||
class="border border-beige rounded px-2 py-1 my-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link_id }}/url"
|
||||
hx-target="#link-editor-{{ link_id }}-file"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<i class="fa fa-link" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div id="link-editor-{{ link_id }}-url"
|
||||
class="flex flex-row gap-2">
|
||||
<input name="url"
|
||||
placeholder="URL de l'enllaç"
|
||||
value="{{ link.url }}"
|
||||
class="border border-beige focus:outline-none
|
||||
rounded grow
|
||||
bg-brown p-1 my-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/link/{{ link_id }}/icon"
|
||||
hx-trigger="keyup delay:500ms changed"
|
||||
hx-target="#link-icon-{{ link.id }}"
|
||||
hx-include="[name='content_type']"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
<button title="Puja un fitxer"
|
||||
class="border border-beige rounded py-1 px-2 my-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link_id }}/file"
|
||||
hx-target="#link-editor-{{ link_id }}-url"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<i class="fa fa-upload" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
<form id="tema-property-{{ property.id }}"
|
||||
class="flex flex-row items-center">
|
||||
<div class="px-2">
|
||||
<select name="field"
|
||||
value="{{ property.field.value.capitalize() }}"
|
||||
class="border border-yellow-50 focus:outline-none
|
||||
rounded
|
||||
text-yellow-50 text-center
|
||||
bg-brown p-1 m-0">
|
||||
<option value="{{ property.field.value }}">
|
||||
{{ property.field.value.capitalize() }}
|
||||
</option>
|
||||
{% for pf in PropertyField %}
|
||||
{% if pf != property.field %}
|
||||
<option value="{{ pf.value }}">
|
||||
{{ pf.value.capitalize() }}
|
||||
</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="grow mx-2">
|
||||
<input name="value"
|
||||
placeholder="Informació"
|
||||
value="{{ property.value }}"
|
||||
class="border border-beige focus:outline-none
|
||||
rounded w-full
|
||||
bg-brown px-2 py-1"
|
||||
/>
|
||||
</div>
|
||||
<button title="Desa els canvis"
|
||||
class="text-sm text-beige mx-1"
|
||||
hx-put="/api/tema/{{ tema.id }}/property/{{ property.id }}"
|
||||
hx-target="#tema-property-{{ property.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-check" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button title="Descarta els canvis"
|
||||
class="text-sm text-beige mx-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/property/{{ property.id }}"
|
||||
hx-target="#tema-property-{{ property.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</form>
|
||||
@@ -13,12 +13,14 @@
|
||||
<div class="grow"></div>
|
||||
<div class="m-2 text-sm text-beige">
|
||||
<button title="Modifica l'enllaç"
|
||||
class="mx-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link.id }}"
|
||||
hx-target="#tema-link-{{ link.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button title="Esborra l'enllaç"
|
||||
class="mx-1"
|
||||
hx-delete="/api/tema/{{ tema.id }}/link/{{ link.id }}"
|
||||
hx-target="#tema-link-{{ link.id }}"
|
||||
hx-swap="outerHTML">
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
{% if logged_in or tema.links %}
|
||||
<h4 class="text-xl text-beige">Enllaços</h4>
|
||||
<hr class="h-px mt-1 mb-3 bg-beige border-0">
|
||||
{% endif %}
|
||||
|
||||
{% if tema.links %}
|
||||
<h4 class="text-xl text-beige">Enllaços</h4>
|
||||
<hr class="h-px mt-1 mb-3 bg-beige border-0">
|
||||
<ul class="flex flex-col justify-center"
|
||||
id="new-link-target">
|
||||
{% for link in tema.links %}
|
||||
|
||||
@@ -4,19 +4,17 @@
|
||||
{% include "fragments/tema/title.html" %}
|
||||
<div class="text-left">
|
||||
|
||||
<div id="tema-{{ tema.id }}-score"
|
||||
hx-get="/api/tema/{{ tema.id }}/score"
|
||||
hx-trigger="load, reload-tema-{{ tema.id }}-score from:body"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
</div>
|
||||
|
||||
{% include "fragments/tema/lyrics.html" %}
|
||||
{% include "fragments/tema/links.html" %}
|
||||
{% include "fragments/tema/properties.html" %}
|
||||
|
||||
<!-- PROPERTIES -->
|
||||
{% if tema.properties %}
|
||||
<h4 class="text-xl mt-3 text-beige">Informació</h4>
|
||||
<hr class="h-px mt-1 mb-3 bg-beige border-0">
|
||||
{% for property in tema.properties %}
|
||||
<p>
|
||||
<i>{{ property.field.value.capitalize() }}</i>: {{ property.value }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
24
folkugat_web/assets/templates/fragments/tema/properties.html
Normal file
24
folkugat_web/assets/templates/fragments/tema/properties.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% if logged_in or tema.properties %}
|
||||
<h4 class="text-xl mt-3 text-beige">Informació</h4>
|
||||
<hr class="h-px mt-1 mb-3 bg-beige border-0">
|
||||
|
||||
<ul class="flex flex-col"
|
||||
id="new-property-target">
|
||||
{% for property in tema.properties %}
|
||||
{% include "fragments/tema/property.html" %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{% if logged_in %}
|
||||
<div class="flex flex-row my-2 justify-end">
|
||||
<button title="Afegeix informació"
|
||||
class="text-sm text-beige text-right"
|
||||
hx-post="/api/tema/{{ tema.id }}/property"
|
||||
hx-target="#new-property-target"
|
||||
hx-swap="beforeend transition:true">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
Afegeix informació
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
27
folkugat_web/assets/templates/fragments/tema/property.html
Normal file
27
folkugat_web/assets/templates/fragments/tema/property.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div id="tema-property-{{ property.id }}"
|
||||
class="flex flex-row">
|
||||
<div class="px-2">
|
||||
<i>{{ property.field.value.capitalize() }}:</i>
|
||||
</div>
|
||||
<div>
|
||||
{{ property.value }}
|
||||
</div>
|
||||
|
||||
{% if logged_in %}
|
||||
<div class="grow"></div>
|
||||
<button title="Modifica la informació"
|
||||
class="text-sm text-beige mx-1"
|
||||
hx-get="/api/tema/{{ tema.id }}/editor/property/{{ property.id }}"
|
||||
hx-target="#tema-property-{{ property.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button title="Esborra la informació"
|
||||
class="text-sm text-beige mx-1"
|
||||
hx-delete="/api/tema/{{ tema.id }}/property/{{ property.id }}"
|
||||
hx-target="#tema-property-{{ property.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
15
folkugat_web/assets/templates/fragments/tema/score.html
Normal file
15
folkugat_web/assets/templates/fragments/tema/score.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{% set score = tema.score() %}
|
||||
{% if score %}
|
||||
<h4 class="text-xl text-beige">Partitura</h4>
|
||||
<hr class="h-px mt-1 mb-3 bg-beige border-0">
|
||||
{% if score.link_type == LinkType.PDF %}
|
||||
{% set pdf_url = score.url %}
|
||||
{% include "fragments/pdf_viewer.html" %}
|
||||
{% elif score.link_type == LinkType.IMAGE %}
|
||||
<div class="flex justify-center">
|
||||
<img class="m-2"
|
||||
src="{{ score.url }}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@@ -3,11 +3,18 @@
|
||||
<h3 class="text-3xl p-4">{{ tema.title }}</h3>
|
||||
{% if logged_in %}
|
||||
<button title="Canvia el títol"
|
||||
class="text-beige text-2xl"
|
||||
class="text-beige text-2xl mx-2"
|
||||
hx-get="/api/tema/{{ tema.id }}/editor/title"
|
||||
hx-target="#tema-title"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% include "fragments/tema/visibility.html" %}
|
||||
<button title="Canvia el títol"
|
||||
class="text-beige text-2xl mx-2"
|
||||
hx-delete="/api/tema/{{ tema.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
15
folkugat_web/assets/templates/fragments/tema/visibility.html
Normal file
15
folkugat_web/assets/templates/fragments/tema/visibility.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{% if not tema.hidden %}
|
||||
<button title="Tema visible (amaga'l)"
|
||||
class="text-beige text-2xl mx-2"
|
||||
hx-put="/api/tema/{{ tema.id }}/invisible"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-eye" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button title="Tema invisible (mostra'l)"
|
||||
class="text-beige text-2xl mx-2"
|
||||
hx-put="/api/tema/{{ tema.id }}/visible"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa fa-eye-slash" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
@@ -1,12 +1,8 @@
|
||||
{% include "fragments/menu.html" %}
|
||||
<div class="p-12 text-center flex flex-col items-center justify-center">
|
||||
<h3 class="text-3xl text-beige p-4">Temes</h3>
|
||||
<button title="Afegeix un tema"
|
||||
class="text-beige m-2">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
Afegeix un tema
|
||||
</button>
|
||||
<input type="text" name="query" value=""
|
||||
<input id="query-input"
|
||||
type="text" name="query" value="{{ query }}"
|
||||
placeholder="Busca una tema..."
|
||||
class="rounded
|
||||
text-yellow-50 bg-brown
|
||||
@@ -15,10 +11,16 @@
|
||||
hx-get="/api/temes/busca"
|
||||
hx-trigger="revealed, keyup delay:500ms changed"
|
||||
hx-target="#search-results">
|
||||
<div class="flex justify-center">
|
||||
<div id="search-results"
|
||||
class="m-4 max-w-5xl
|
||||
flex flex-wrap items-center justify-center">
|
||||
</div>
|
||||
</div>
|
||||
{% if logged_in %}
|
||||
<button title="Afegeix un tema"
|
||||
class="text-beige m-2"
|
||||
hx-post="/api/tema"
|
||||
hx-include="[name=query]"
|
||||
hx-vals="js:{title: document.getElementById('query-input').value}"
|
||||
>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
Afegeix un tema
|
||||
</button>
|
||||
{% endif %}
|
||||
<div id="search-results" class="flex-col"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
<div class="flex-none px-4 py-2 w-80 h-80 m-2 border-solid border rounded-md bg-yellow-50 text-brown">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="text-xl text-beige">
|
||||
<a href="/tema/{{ tema.id }}">
|
||||
{{ tema.title }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="grow"></div>
|
||||
<div class="flex flex-row">
|
||||
</div>
|
||||
<ul class="flex flex-row items-center justify-center">
|
||||
{% if tema.links %}
|
||||
{% for link in tema.links %}
|
||||
<li class="p-2 m-2 text-beige border border-beige rounded-md">
|
||||
<a href="{{ link.url }}" target="_blank">
|
||||
{% if link.content_type == ContentType.AUDIO %}
|
||||
{% if link.link_type == LinkType.SPOTIFY %}
|
||||
{% include "icons/spotify.svg" %}
|
||||
{% elif link.link_type == LinkType.YOUTUBE %}
|
||||
{% include "icons/youtube.svg" %}
|
||||
{% else %}
|
||||
{% include "icons/notes.svg" %}
|
||||
{% endif %}
|
||||
{% elif link.content_type == ContentType.PARTITURA %}
|
||||
{% if link.link_type == LinkType.PDF %}
|
||||
{% include "icons/pdf.svg" %}
|
||||
{% else %}
|
||||
{% include "icons/link.svg" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "icons/link.svg" %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
<!-- {% if logged_in %} -->
|
||||
<!-- <div> -->
|
||||
<!-- Edita -->
|
||||
<!-- </div> -->
|
||||
<!-- {% endif %} -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<ul class="flex flex-row items-center">
|
||||
{% if tema.links %}
|
||||
{% for link in tema.links %}
|
||||
<li class="px-2 text-beige">
|
||||
<a href="{{ link.url }}" target="_blank">
|
||||
{% if link.content_type == ContentType.AUDIO %}
|
||||
{% if link.link_type == LinkType.SPOTIFY %}
|
||||
<i class="fa fa-music" aria-hidden="true"></i>
|
||||
{% elif link.link_type == LinkType.YOUTUBE %}
|
||||
<i class="fa fa-play" aria-hidden="true"></i>
|
||||
{% else %}
|
||||
<i class="fa fa-music" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
{% elif link.content_type == ContentType.PARTITURA %}
|
||||
{% if link.link_type == LinkType.PDF %}
|
||||
<i class="fa fa-file" aria-hidden="true"></i>
|
||||
{% else %}
|
||||
<i class="fa fa-link" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<i class="fa fa-link" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
19
folkugat_web/assets/templates/fragments/temes/results.html
Normal file
19
folkugat_web/assets/templates/fragments/temes/results.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<table id="search-results"
|
||||
class="text-left min-w-full w-full">
|
||||
<tr class="border-b border-beige">
|
||||
<td class="font-bold py-2 px-4">Nom</td>
|
||||
<td class="font-bold py-2 px-4">Enllaços</td>
|
||||
</tr>
|
||||
{% for tema in temes %}
|
||||
<tr class="border-b border-beige">
|
||||
<td class="py-2 px-4">
|
||||
<a href="/tema/{{ tema.id }}">
|
||||
{{ tema.title }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="py-2 px-4">
|
||||
{% include "fragments/temes/result_links.html" %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
Reference in New Issue
Block a user