klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith3.git synced 2024-09-19 17:38:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

better download button style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/static/core/colors.scss
View File

@ -27,4 +27,6 @@ $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;

9
core/static/core/header.scss
View File

@ -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 {

34
core/static/core/style.scss
View File

@ -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;
} }

74
core/templates/core/user_pictures.jinja
View File

@ -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 %}

26
eboutic/static/eboutic/css/eboutic.css
View File

@ -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;
} }
} }

4
eboutic/templates/eboutic/eboutic_main.jinja
View File

@ -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>