klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-22 07:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

create a card css component

Browse Source
This commit is contained in:
imperosol 2024-12-14 01:45:54 +01:00
parent aab093200b
commit 7af745087e
7 changed files with 123 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
core/static/core/components/card.scss Normal file
View File

@ -0,0 +1,96 @@
@import "core/static/core/colors";
@mixin row-layout {
min-height: 100px;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
.card-image {
max-width: 75px;
}
.card-content {
flex: 1;
text-align: left;
}
}
.card {
background-color: $primary-neutral-light-color;
border-radius: 5px;
position: relative;
box-sizing: border-box;
padding: 20px 10px;
height: fit-content;
width: 150px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
&:hover {
background-color: darken($primary-neutral-light-color, 5%);
}
&.selected {
animation: bg-in-out 1s ease;
background-color: rgb(216, 236, 255);
}
.card-image {
width: 100%;
height: 100%;
min-height: 70px;
max-height: 70px;
object-fit: contain;
border-radius: 4px;
line-height: 70px;
}
i.card-image {
color: black;
text-align: center;
background-color: rgba(173, 173, 173, 0.2);
width: 80%;
}
.card-content {
color: black;
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
p {
font-size: 13px;
margin: 0;
}
.card-title {
margin: 0;
font-size: 15px;
word-break: break-word;
}
}
@keyframes bg-in-out {
0% {
background-color: white;
}
100% {
background-color: rgb(216, 236, 255);
}
}
@media screen and (max-width: 765px) {
@include row-layout
}
// When combined with card, card-row display the card in a row layout,
// whatever the size of the screen.
&.card-row {
@include row-layout
}
}

4
core/static/user/user_detail.scss
View File

@ -1,3 +1,5 @@
@import "core/static/core/colors";
main {
box-sizing: border-box;
display: flex;
@ -69,7 +71,7 @@ main {
border-radius: 50%;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
background-color: $primary-neutral-light-color;
> span {
font-size: small;

86
eboutic/static/eboutic/css/eboutic.css
View File

@ -108,28 +108,8 @@
column-gap: 15px;
row-gap: 15px;
}
#eboutic .product-button {
position: relative;
box-sizing: border-box;
min-height: 180px;
height: fit-content;
width: 150px;
padding: 15px;
overflow: hidden;
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 5px;
justify-content: flex-start;
}
#eboutic .product-button.selected {
animation: bg-in-out 1s ease;
background-color: rgb(216, 236, 255);
}
#eboutic .product-button.selected::after {
#eboutic .card.selected::after {
content: "🛒";
position: absolute;
top: 5px;
@ -144,36 +124,6 @@
line-height: 20px;
}
#eboutic .product-button:active {
box-shadow: none;
}
#eboutic .product-image {
width: 100%;
height: 100%;
min-height: 70px;
max-height: 70px;
object-fit: contain;
border-radius: 4px;
line-height: 70px;
margin-bottom: 15px;
}
#eboutic i.product-image {
background-color: rgba(173, 173, 173, 0.2);
}
#eboutic .product-description h4 {
font-size: .75em;
word-break: break-word;
margin: 0 0 5px 0;
}
#eboutic .product-button p {
font-size: 13px;
margin: 0;
}
#eboutic .catalog-buttons {
display: flex;
justify-content: center;
@ -207,39 +157,5 @@
justify-content: space-around;
flex-direction: column;
}
#eboutic .product-group .product-button {
min-height: 100px;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
#eboutic .product-group .product-description {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
#eboutic .product-description h4 {
text-align: left;
max-width: 90%;
}
#eboutic .product-image {
margin-bottom: 0;
max-width: 70px;
}
}
@keyframes bg-in-out {
0% {
background-color: white;
}
100% {
background-color: rgb(216, 236, 255);
}
}

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

@ -15,7 +15,8 @@
{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{ static('eboutic/css/eboutic.css') }}">
<link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
{% endblock %}
{% block content %}
@ -104,18 +105,21 @@
{% for p in items %}
<button
id="{{ p.id }}"
class="product-button"
class="card product-button clickable shadow"
:class="{selected: items.some((i) => i.id === {{ p.id }})}"
@click='addFromCatalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'
>
{% if p.icon %}
<img class="product-image" src="{{ p.icon.url }}"
alt="image de {{ p.name }}">
<img
class="card-image"
src="{{ p.icon.url }}"
alt="image de {{ p.name }}"
>
{% else %}
<i class="fa-regular fa-image fa-2x product-image"></i>
<i class="fa-regular fa-image fa-2x card-image"></i>
{% endif %}
<div class="product-description">
<h4>{{ p.name }}</h4>
<div class="card-content">
<h4 class="card-title">{{ p.name }}</h4>
<p>{{ p.selling_price }} €</p>
</div>
</button>

9
election/static/election/css/election.scss
View File

@ -1,3 +1,5 @@
@import "core/static/core/colors";
$padding: 1.5rem;
$padding_smaller: .5rem;
$gap: .25rem;
@ -50,8 +52,7 @@ $min_col_width: 100px;
position: relative;
min-width: $min_col_width;
>a{
margin-left: $padding;
>a {
width: 20px;
height: 20px;
text-align: center;
@ -269,12 +270,12 @@ $min_col_width: 100px;
border: none;
color: black;
text-decoration: none;
background-color: #f2f2f2;
background-color: $primary-neutral-light-color;
padding: 0.4em;
margin: 0.1em;
font-size: 1.18em;
border-radius: 5px;
box-shadow: #dfdfdf 0px 0px 1px;
box-shadow: #dfdfdf 0 0 1px;
cursor: pointer;
&:hover {

6
sas/static/sas/css/album.scss
View File

@ -1,3 +1,5 @@
@import "core/static/core/colors";
main {
box-sizing: border-box;
padding: 10px;
@ -25,7 +27,7 @@ main {
font-size: 1.2em;
line-height: 1.2em;
color: black;
background-color: #f2f2f2;
background-color: $primary-neutral-light-color;
border-radius: 5px;
font-weight: bold;
@ -34,7 +36,7 @@ main {
}
&:disabled {
background-color: #f2f2f2;
background-color: $primary-neutral-light-color;
color: #d4d4d4;
}
}

4
sas/static/sas/css/picture.scss
View File

@ -1,3 +1,5 @@
@import "core/static/core/colors";
#content {
padding: 10px !important;
}
@ -241,7 +243,7 @@
>div {
>a.button {
box-sizing: border-box;
background-color: #f2f2f2;
background-color: $primary-neutral-light-color;
display: flex;
justify-content: center;
align-items: center;