mirror of
https://github.com/ae-utbm/sith.git
synced 2024-12-23 00:01:16 +00:00
Display nice product cards on counter click interface
This commit is contained in:
parent
ccf5767a01
commit
c37288c285
@ -208,6 +208,7 @@ body {
|
|||||||
a.btn {
|
a.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -431,12 +432,17 @@ body {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
$col-gap: 1rem;
|
$col-gap: 1rem;
|
||||||
|
$row-gap: 0.5rem;
|
||||||
|
|
||||||
&.gap {
|
&.gap {
|
||||||
column-gap: var($col-gap);
|
column-gap: var($col-gap);
|
||||||
|
row-gap: var($row-gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 2 through 5 {
|
@for $i from 2 through 5 {
|
||||||
&.gap-#{$i}x {
|
&.gap-#{$i}x {
|
||||||
column-gap: $i * $col-gap;
|
column-gap: $i * $col-gap;
|
||||||
|
row-gap: $i * $row-gap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
{% block additional_css %}
|
{% block additional_css %}
|
||||||
<link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
|
<link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
|
||||||
<link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
|
<link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
|
||||||
|
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block additional_js %}
|
{% block additional_js %}
|
||||||
@ -104,7 +105,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<p>
|
<p class="margin-bottom">
|
||||||
<strong>Total: </strong>
|
<strong>Total: </strong>
|
||||||
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
|
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
|
||||||
<strong> €</strong>
|
<strong> €</strong>
|
||||||
@ -153,18 +154,24 @@
|
|||||||
</ul>
|
</ul>
|
||||||
{% for category in categories.keys() -%}
|
{% for category in categories.keys() -%}
|
||||||
<div id="cat_{{ category|slugify }}">
|
<div id="cat_{{ category|slugify }}">
|
||||||
<h5>{{ category }}</h5>
|
<h5 class="margin-bottom">{{ category }}</h5>
|
||||||
{% for product in categories[category] -%}
|
<div class="row gap-2x">
|
||||||
<button @click="addToBasket('{{ product.id }}', 1)">
|
{% for product in categories[category] -%}
|
||||||
<strong>{{ product.name }}</strong>
|
<button class="card shadow" @click="addToBasket('{{ product.id }}', 1)">
|
||||||
{% if product.icon %}
|
<strong class="card-title">{{ product.name }}</strong>
|
||||||
<img src="{{ product.icon.url }}" alt="image de {{ product.name }}"/>
|
<img
|
||||||
{% else %}
|
class="card-image"
|
||||||
<img src="{{ static('core/img/na.gif') }}" alt="image de {{ product.name }}"/>
|
alt="image de {{ product.name }}"
|
||||||
{% endif %}
|
{% if product.icon %}
|
||||||
<span>{{ product.price }} €<br>{{ product.code }}</span>
|
src="{{ product.icon.url }}"
|
||||||
</button>
|
{% else %}
|
||||||
{%- endfor %}
|
src="{{ static('core/img/na.gif') }}"
|
||||||
|
{% endif %}
|
||||||
|
/>
|
||||||
|
<span class="card-content">{{ product.price }} €<br>{{ product.code }}</span>
|
||||||
|
</button>
|
||||||
|
{%- endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user