mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-10 00:03:24 +00:00
better download button style
This commit is contained in:
parent
91344741a5
commit
819e2b5f9f
@ -28,3 +28,5 @@ $twitblue: hsl(206, 82%, 63%);
|
|||||||
$shadow-color: rgb(223, 223, 223);
|
$shadow-color: rgb(223, 223, 223);
|
||||||
|
|
||||||
$background-button-color: hsl(0, 0%, 95%);
|
$background-button-color: hsl(0, 0%, 95%);
|
||||||
|
|
||||||
|
$deepblue: #354a5f;
|
@ -1,7 +1,8 @@
|
|||||||
|
@import "colors";
|
||||||
|
|
||||||
$hovered-text-color: #c2c2c2;
|
$hovered-text-color: #c2c2c2;
|
||||||
$text-color: white;
|
$text-color: white;
|
||||||
|
|
||||||
$background-color: #354a5f;
|
|
||||||
$background-color-hovered: #283747;
|
$background-color-hovered: #283747;
|
||||||
|
|
||||||
$red-text-color: #eb2f06;
|
$red-text-color: #eb2f06;
|
||||||
@ -9,7 +10,7 @@ $hovered-red-text-color: #ff4d4d;
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: $background-color;
|
background-color: $deepblue;
|
||||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -98,7 +99,7 @@ $hovered-red-text-color: #ff4d4d;
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: $background-color;
|
background-color: $deepblue;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -213,7 +214,7 @@ $hovered-red-text-color: #ff4d4d;
|
|||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: $background-color;
|
background-color: $deepblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.options {
|
>.options {
|
||||||
|
@ -105,7 +105,7 @@ a:not(.button) {
|
|||||||
|
|
||||||
.collapse-header {
|
.collapse-header {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #354a5f;
|
background-color: $deepblue;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -206,34 +206,36 @@ a:not(.button) {
|
|||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 20px auto 0;
|
margin: 20px auto 0;
|
||||||
/*---------------------------------NAV---------------------------------*/
|
/*---------------------------------NAV---------------------------------*/
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: white;
|
color: white;
|
||||||
min-width: 60px;
|
padding: 9px 13px;
|
||||||
padding: 5px 10px;
|
|
||||||
border: none;
|
border: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&.btn-blue {
|
&.btn-blue {
|
||||||
background-color: #354a5f;
|
background-color: $deepblue;
|
||||||
}
|
&:not(:disabled):hover {
|
||||||
|
background-color: darken($deepblue, 10%);
|
||||||
&.btn-blue:disabled {
|
}
|
||||||
background-color: rgba(70, 90, 126, 0.4);
|
&:disabled {
|
||||||
}
|
background-color: rgba(70, 90, 126, 0.4);
|
||||||
|
}
|
||||||
&.btn-blue.clickable:not(:disabled):hover {
|
|
||||||
background-color: #2c3646;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-grey {
|
&.btn-grey {
|
||||||
background-color: grey;
|
background-color: grey;
|
||||||
|
&:not(:disabled):hover {
|
||||||
|
background-color: darken(gray, 15%);
|
||||||
|
}
|
||||||
|
&:disabled {
|
||||||
|
background-color: lighten(gray, 15%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-grey.clickable:not(:disabled):hover {
|
i {
|
||||||
background-color: hsl(210, 5%, 30%);
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -977,7 +979,7 @@ thead td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
background-color: #354a5f;
|
background-color: $deepblue;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,12 +19,14 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<main>
|
<main>
|
||||||
{% if can_edit(profile, user) %}
|
{% if user.id == object.id and albums|length > 0 %}
|
||||||
<div x-data="picture_download" x-cloak>
|
<div x-data="picture_download" x-cloak>
|
||||||
<button
|
<button
|
||||||
:disabled="in_progress"
|
:disabled="in_progress"
|
||||||
|
class="btn btn-blue"
|
||||||
@click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
|
@click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
|
||||||
>
|
>
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
{% trans %}Download all my pictures{% endtrans %}
|
{% trans %}Download all my pictures{% endtrans %}
|
||||||
</button>
|
</button>
|
||||||
<progress x-ref="progress" x-show="in_progress"></progress>
|
<progress x-ref="progress" x-show="in_progress"></progress>
|
||||||
@ -32,6 +34,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% for album, pictures in albums|items %}
|
{% for album, pictures in albums|items %}
|
||||||
<h4>{{ album }}</h4>
|
<h4>{{ album }}</h4>
|
||||||
|
<br />
|
||||||
<div class="photos">
|
<div class="photos">
|
||||||
{% for picture in pictures %}
|
{% for picture in pictures %}
|
||||||
{% if picture.can_be_viewed_by(user) %}
|
{% if picture.can_be_viewed_by(user) %}
|
||||||
@ -60,11 +63,13 @@
|
|||||||
<br>
|
<br>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock content %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
|
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script>
|
{% if user.id == object.id %}
|
||||||
|
<script>
|
||||||
/**
|
/**
|
||||||
* @typedef Picture
|
* @typedef Picture
|
||||||
* @property {number} id
|
* @property {number} id
|
||||||
@ -77,40 +82,41 @@
|
|||||||
* @property {string} thumb_url
|
* @property {string} thumb_url
|
||||||
*/
|
*/
|
||||||
|
|
||||||
document.addEventListener("alpine:init", () => {
|
document.addEventListener("alpine:init", () => {
|
||||||
Alpine.data("picture_download", () => ({
|
Alpine.data("picture_download", () => ({
|
||||||
in_progress: false,
|
in_progress: false,
|
||||||
|
|
||||||
async download(url) {
|
async download(url) {
|
||||||
this.in_progress = true;
|
this.in_progress = true;
|
||||||
const bar = this.$refs.progress;
|
const bar = this.$refs.progress;
|
||||||
bar.value = 0;
|
bar.value = 0;
|
||||||
|
|
||||||
/** @type Picture[] */
|
/** @type Picture[] */
|
||||||
const pictures = await (await fetch(url)).json();
|
const pictures = await (await fetch(url)).json();
|
||||||
bar.max = pictures.length;
|
bar.max = pictures.length;
|
||||||
|
|
||||||
const fileHandle = await window.showSaveFilePicker({
|
const fileHandle = await window.showSaveFilePicker({
|
||||||
_preferPolyfill: false,
|
_preferPolyfill: false,
|
||||||
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
|
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
|
||||||
types: {},
|
types: {},
|
||||||
excludeAcceptAllOption: false,
|
excludeAcceptAllOption: false,
|
||||||
})
|
})
|
||||||
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
|
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
|
||||||
|
|
||||||
await Promise.all(pictures.map(p => {
|
await Promise.all(pictures.map(p => {
|
||||||
const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
|
const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
|
||||||
return zipWriter.add(
|
return zipWriter.add(
|
||||||
img_name,
|
img_name,
|
||||||
new zip.HttpReader(p.full_size_url),
|
new zip.HttpReader(p.full_size_url),
|
||||||
{level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
|
{level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
|
||||||
);
|
);
|
||||||
}))
|
}));
|
||||||
|
|
||||||
await zipWriter.close();
|
await zipWriter.close();
|
||||||
this.in_progress = false;
|
this.in_progress = false;
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endif %}
|
||||||
|
{% endblock script %}
|
||||||
|
@ -136,7 +136,7 @@
|
|||||||
right: 5px;
|
right: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-radius: 50%;
|
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;
|
background-color: white;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@ -186,29 +186,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#eboutic .catalog-buttons button {
|
#eboutic .catalog-buttons button {
|
||||||
font-size: 15px!important;
|
|
||||||
font-weight: normal;
|
|
||||||
color: white;
|
|
||||||
min-width: 60px;
|
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 {
|
#eboutic .catalog-buttons form {
|
||||||
@ -252,7 +230,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#eboutic .product-image {
|
#eboutic .product-image {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0;
|
||||||
max-width: 70px;
|
max-width: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -62,13 +62,13 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="catalog-buttons">
|
<div class="catalog-buttons">
|
||||||
<button @click="clear_basket()" class="clear">
|
<button @click="clear_basket()" class="btn btn-grey">
|
||||||
<i class="fa fa-trash"></i>
|
<i class="fa fa-trash"></i>
|
||||||
{% trans %}Clear{% endtrans %}
|
{% trans %}Clear{% endtrans %}
|
||||||
</button>
|
</button>
|
||||||
<form method="get" action="{{ url('eboutic:command') }}">
|
<form method="get" action="{{ url('eboutic:command') }}">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<button class="validate">
|
<button class="btn btn-blue">
|
||||||
<i class="fa fa-check"></i>
|
<i class="fa fa-check"></i>
|
||||||
<input type="submit" value="{% trans %}Validate{% endtrans %}"/>
|
<input type="submit" value="{% trans %}Validate{% endtrans %}"/>
|
||||||
</button>
|
</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user