upload selector improvements

This commit is contained in:
bkfox
2024-03-17 21:00:07 +01:00
parent de858f45e8
commit 024db5f307
9 changed files with 226 additions and 77 deletions

View File

@ -2777,7 +2777,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
#player .button, #player a.button, #player button.button, .ax .button, .ax a.button, .ax button.button {
font-size: 1rem;
display: inline-block;
padding: 0.4rem;
padding: 0.4em;
border: none;
justify-content: center;
text-align: center;
@ -2786,8 +2786,14 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
color: var(--button-fg);
background-color: var(--button-bg);
}
#player .button.smaller, #player a.button.smaller, #player button.button.smaller, .ax .button.smaller, .ax a.button.smaller, .ax button.button.smaller {
font-size: 0.8rem;
}
#player .button.small, #player a.button.small, #player button.button.small, .ax .button.small, .ax a.button.small, .ax button.button.small {
font-size: 0.6rem;
}
#player .button.square, #player a.button.square, #player button.button.square, .ax .button.square, .ax a.button.square, .ax button.button.square {
min-width: 2.5rem;
min-width: 2.5em;
}
#player .button.secondary, #player a.button.secondary, #player button.button.secondary, .ax .button.secondary, .ax a.button.secondary, .ax button.button.secondary {
background-color: var(--button-sec-bg);
@ -2799,10 +2805,10 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
vertical-align: middle;
}
#player .button .icon:not(:only-child):first-child, #player a.button .icon:not(:only-child):first-child, #player button.button .icon:not(:only-child):first-child, .ax .button .icon:not(:only-child):first-child, .ax a.button .icon:not(:only-child):first-child, .ax button.button .icon:not(:only-child):first-child {
margin: 0 0.6rem 0 0.2rem;
margin: 0 0.6em 0 0.2em;
}
#player .button .icon:not(:only-child):last-child, #player a.button .icon:not(:only-child):last-child, #player button.button .icon:not(:only-child):last-child, .ax .button .icon:not(:only-child):last-child, .ax a.button .icon:not(:only-child):last-child, .ax button.button .icon:not(:only-child):last-child {
margin: 0 0.6rem 0 0.2rem;
margin: 0 0.6em 0 0.2em;
}
#player .button:hover, #player a.button:hover, #player button.button:hover, .ax .button:hover, .ax a.button:hover, .ax button.button:hover {
color: var(--button-hv-fg);
@ -9553,6 +9559,22 @@ a.tag:hover {
color: var(--text-color-light);
}
.bigger {
font-size: 1.6rem !important;
}
.big {
font-size: 2rem !important;
}
.smaller {
font-size: 0.8rem !important;
}
.small {
font-size: 0.6rem !important;
}
.align-left {
text-align: left;
justify-content: left;
@ -9621,6 +9643,58 @@ a.tag:hover {
white-space: nowrap;
}
.height-1 {
height: 1em;
}
.height-2 {
height: 2em;
}
.height-3 {
height: 3em;
}
.height-4 {
height: 4em;
}
.height-5 {
height: 5em;
}
.height-6 {
height: 6em;
}
.height-7 {
height: 7em;
}
.height-8 {
height: 8em;
}
.height-9 {
height: 9em;
}
.height-10 {
height: 10em;
}
.height-15 {
height: 15em;
}
.height-20 {
height: 20em;
}
.height-25 {
height: 25em;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;

View File

@ -621,7 +621,7 @@
.button, a.button, button.button {
font-size: 1rem;
display: inline-block;
padding: 0.4rem;
padding: 0.4em;
border: none;
justify-content: center;
text-align: center;
@ -630,8 +630,14 @@
color: var(--button-fg);
background-color: var(--button-bg);
}
.button.smaller, a.button.smaller, button.button.smaller {
font-size: 0.8rem;
}
.button.small, a.button.small, button.button.small {
font-size: 0.6rem;
}
.button.square, a.button.square, button.button.square {
min-width: 2.5rem;
min-width: 2.5em;
}
.button.secondary, a.button.secondary, button.button.secondary {
background-color: var(--button-sec-bg);
@ -643,10 +649,10 @@
vertical-align: middle;
}
.button .icon:not(:only-child):first-child, a.button .icon:not(:only-child):first-child, button.button .icon:not(:only-child):first-child {
margin: 0 0.6rem 0 0.2rem;
margin: 0 0.6em 0 0.2em;
}
.button .icon:not(:only-child):last-child, a.button .icon:not(:only-child):last-child, button.button .icon:not(:only-child):last-child {
margin: 0 0.6rem 0 0.2rem;
margin: 0 0.6em 0 0.2em;
}
.button:hover, a.button:hover, button.button:hover {
color: var(--button-hv-fg);

File diff suppressed because one or more lines are too long

View File

@ -24,17 +24,25 @@
next-label="{% translate "Show next" %}"
ref="cover-select"
>
<template #upload-preview="{item}">
<template v-if="item">
<img :src="item.src" class="upload-preview"/>
</template>
<template #upload-preview="{upload}">
<img :src="upload.fileURL" class="upload-preview blink"/>
</template>
<template #default="{item}">
<div class="flex-column">
<div class="flex-grow-1">
<template #default="{item, load, lastUrl}">
<div class="flex-column is-fullheight" v-if="item">
<figure class="flex-grow-1">
<img :src="item.file"/>
</figure>
<div>
<label class="label small">[[ item.name || item.original_filename ]]</label>
<a-action-button
class="has-text-danger small float-right"
icon="fa fa-trash"
confirm="{% translate "Are you sure you want to remove this item from server?" %}"
method="DELETE"
:url="'{% url "api:image-detail" pk="123" %}'.replace('123', item.id)"q
@done="load(lastUrl)">
</a-action-button>
</div>
<label class="label">[[ item.name || item.original_filename ]]</label>
</div>
</template>
</a-select-file>
@ -62,7 +70,7 @@
<input type="datetime-local" name="{{ field.name }}"
value="{{ field.value|date:"Y-m-d" }}T{{ field.value|date:"H:i" }}"/>
{% elif field.name == "content" %}
<textarea name="{{ field.name }}" class="is-fullwidth">{{ field.value|striptags|safe }}</textarea>
<textarea name="{{ field.name }}" class="is-fullwidth height-25">{{ field.value|striptags|safe }}</textarea>
{% else %}
{{ field }}
{% endif %}