upload selector improvements
This commit is contained in:
@ -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;
|
||||
|
@ -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
@ -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 %}
|
||||
|
Reference in New Issue
Block a user