better download button style

This commit is contained in:
thomas girod 2024-07-30 19:57:56 +02:00
parent 91344741a5
commit 819e2b5f9f
6 changed files with 70 additions and 81 deletions

View File

@ -28,3 +28,5 @@ $twitblue: hsl(206, 82%, 63%);
$shadow-color: rgb(223, 223, 223);
$background-button-color: hsl(0, 0%, 95%);
$deepblue: #354a5f;

View File

@ -1,7 +1,8 @@
@import "colors";
$hovered-text-color: #c2c2c2;
$text-color: white;
$background-color: #354a5f;
$background-color-hovered: #283747;
$red-text-color: #eb2f06;
@ -9,7 +10,7 @@ $hovered-red-text-color: #ff4d4d;
.header {
box-sizing: border-box;
background-color: $background-color;
background-color: $deepblue;
box-shadow: 3px 3px 3px 0 #dfdfdf;
border-radius: 0;
width: 100%;
@ -98,7 +99,7 @@ $hovered-red-text-color: #ff4d4d;
border-radius: 0;
margin: 0;
box-sizing: border-box;
background-color: $background-color;
background-color: $deepblue;
width: 45px;
height: 25px;
padding: 0;
@ -213,7 +214,7 @@ $hovered-red-text-color: #ff4d4d;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: $background-color;
background-color: $deepblue;
}
>.options {

View File

@ -105,7 +105,7 @@ a:not(.button) {
.collapse-header {
color: white;
background-color: #354a5f;
background-color: $deepblue;
padding: 5px 10px;
display: flex;
align-items: center;
@ -206,34 +206,36 @@ a:not(.button) {
width: 90%;
margin: 20px auto 0;
/*---------------------------------NAV---------------------------------*/
.btn {
font-size: 15px;
font-weight: normal;
color: white;
min-width: 60px;
padding: 5px 10px;
padding: 9px 13px;
border: none;
text-decoration: none;
&.btn-blue {
background-color: #354a5f;
}
&.btn-blue:disabled {
background-color: rgba(70, 90, 126, 0.4);
}
&.btn-blue.clickable:not(:disabled):hover {
background-color: #2c3646;
background-color: $deepblue;
&:not(:disabled):hover {
background-color: darken($deepblue, 10%);
}
&:disabled {
background-color: rgba(70, 90, 126, 0.4);
}
}
&.btn-grey {
background-color: grey;
&:not(:disabled):hover {
background-color: darken(gray, 15%);
}
&:disabled {
background-color: lighten(gray, 15%);
}
}
&.btn-grey.clickable:not(:disabled):hover {
background-color: hsl(210, 5%, 30%);
i {
margin-right: 4px;
}
}
@ -977,7 +979,7 @@ thead td {
}
thead {
background-color: #354a5f;
background-color: $deepblue;
color: white;
}

View File

@ -19,12 +19,14 @@
{% block content %}
<main>
{% if can_edit(profile, user) %}
{% if user.id == object.id and albums|length > 0 %}
<div x-data="picture_download" x-cloak>
<button
:disabled="in_progress"
class="btn btn-blue"
@click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
>
<i class="fa fa-download"></i>
{% trans %}Download all my pictures{% endtrans %}
</button>
<progress x-ref="progress" x-show="in_progress"></progress>
@ -32,6 +34,7 @@
{% endif %}
{% for album, pictures in albums|items %}
<h4>{{ album }}</h4>
<br />
<div class="photos">
{% for picture in pictures %}
{% if picture.can_be_viewed_by(user) %}
@ -60,11 +63,13 @@
<br>
{% endfor %}
</main>
{% endblock %}
{% endblock content %}
{% block script %}
{{ super() }}
<script>
{% if user.id == object.id %}
<script>
/**
* @typedef Picture
* @property {number} id
@ -77,40 +82,41 @@
* @property {string} thumb_url
*/
document.addEventListener("alpine:init", () => {
Alpine.data("picture_download", () => ({
in_progress: false,
document.addEventListener("alpine:init", () => {
Alpine.data("picture_download", () => ({
in_progress: false,
async download(url) {
this.in_progress = true;
const bar = this.$refs.progress;
bar.value = 0;
async download(url) {
this.in_progress = true;
const bar = this.$refs.progress;
bar.value = 0;
/** @type Picture[] */
const pictures = await (await fetch(url)).json();
bar.max = pictures.length;
const pictures = await (await fetch(url)).json();
bar.max = pictures.length;
const fileHandle = await window.showSaveFilePicker({
_preferPolyfill: false,
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
types: {},
excludeAcceptAllOption: false,
})
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
const fileHandle = await window.showSaveFilePicker({
_preferPolyfill: false,
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
types: {},
excludeAcceptAllOption: false,
})
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
await Promise.all(pictures.map(p => {
const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
return zipWriter.add(
img_name,
new zip.HttpReader(p.full_size_url),
{level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
);
}))
await Promise.all(pictures.map(p => {
const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
return zipWriter.add(
img_name,
new zip.HttpReader(p.full_size_url),
{level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
);
}));
await zipWriter.close();
this.in_progress = false;
}
}))
});
</script>
{% endblock %}
await zipWriter.close();
this.in_progress = false;
}
}))
});
</script>
{% endif %}
{% endblock script %}

View File

@ -136,7 +136,7 @@
right: 5px;
padding: 5px;
border-radius: 50%;
box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 14%);
box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
background-color: white;
width: 20px;
height: 20px;
@ -186,29 +186,7 @@
}
#eboutic .catalog-buttons button {
font-size: 15px!important;
font-weight: normal;
color: white;
min-width: 60px;
padding: 10px 15px;
}
#eboutic .catalog-buttons .validate {
background-color: #354a5f;
}
#eboutic .catalog-buttons .clear {
background-color: gray;
}
#eboutic .catalog-buttons button i {
margin-right: 4px;
}
#eboutic .catalog-buttons button.validate:hover {
background-color: #2c3646;
}
#eboutic .catalog-buttons button.clear:hover {
background-color:hsl(210,5%,30%);
}
#eboutic .catalog-buttons form {
@ -252,7 +230,7 @@
}
#eboutic .product-image {
margin-bottom: 0px;
margin-bottom: 0;
max-width: 70px;
}
}

View File

@ -62,13 +62,13 @@
</li>
</ul>
<div class="catalog-buttons">
<button @click="clear_basket()" class="clear">
<button @click="clear_basket()" class="btn btn-grey">
<i class="fa fa-trash"></i>
{% trans %}Clear{% endtrans %}
</button>
<form method="get" action="{{ url('eboutic:command') }}">
{% csrf_token %}
<button class="validate">
<button class="btn btn-blue">
<i class="fa fa-check"></i>
<input type="submit" value="{% trans %}Validate{% endtrans %}"/>
</button>