mirror of
https://github.com/ae-utbm/sith.git
synced 2025-01-03 13:41:15 +00:00
Refactor counter-click css
This commit is contained in:
parent
280d27343d
commit
43768f1691
@ -1249,63 +1249,6 @@ u,
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#bar-ui {
|
||||
padding: 0.4em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.quantity {
|
||||
display: inline-block;
|
||||
min-width: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.remove-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.basket-error-container {
|
||||
position: relative;
|
||||
display: block
|
||||
}
|
||||
|
||||
.basket-error {
|
||||
z-index: 10; // to get on top of tomselect
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
#products {
|
||||
flex-basis: 100%;
|
||||
margin: 0.2em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#click_form {
|
||||
flex: auto;
|
||||
margin: 0.2em;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#user_info {
|
||||
flex: auto;
|
||||
padding: 0.5em;
|
||||
margin: 0.2em;
|
||||
height: 100%;
|
||||
background: $secondary-neutral-light-color;
|
||||
|
||||
img {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
input {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*-----------------------------USER PROFILE----------------------------*/
|
||||
|
||||
.user_mini_profile {
|
||||
|
||||
@ -146,7 +146,7 @@ exportToHtml("loadCounter", (config: CounterConfig) => {
|
||||
$(() => {
|
||||
/* Accordion UI between basket and refills */
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
|
||||
($("#click_form") as any).accordion({
|
||||
($("#click-form") as any).accordion({
|
||||
heightStyle: "content",
|
||||
activate: () => $(".focus").focus(),
|
||||
});
|
||||
|
||||
62
counter/static/counter/css/counter-click.scss
Normal file
62
counter/static/counter/css/counter-click.scss
Normal file
@ -0,0 +1,62 @@
|
||||
@import "core/static/core/colors";
|
||||
|
||||
.quantity {
|
||||
display: inline-block;
|
||||
min-width: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.remove-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.basket-error-container {
|
||||
position: relative;
|
||||
display: block
|
||||
}
|
||||
|
||||
.basket-error {
|
||||
z-index: 10; // to get on top of tomselect
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
#bar-ui {
|
||||
padding: 0.4em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#products {
|
||||
flex-basis: 100%;
|
||||
margin: 0.2em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#click-form {
|
||||
flex: auto;
|
||||
margin: 0.2em;
|
||||
width: 20%;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
#user_info {
|
||||
flex: auto;
|
||||
padding: 0.5em;
|
||||
margin: 0.2em;
|
||||
height: 100%;
|
||||
background: $secondary-neutral-light-color;
|
||||
|
||||
img {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
input {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_css %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('counter/css/counter-click.scss') }}" 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" href="{{ static("core/components/card.scss") }}">
|
||||
@ -24,7 +25,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h4 id="click_interface">{{ counter }}</h4>
|
||||
<h4>{{ counter }}</h4>
|
||||
|
||||
<div id="bar-ui" x-data="counter">
|
||||
<noscript>
|
||||
@ -43,7 +44,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="click_form">
|
||||
<div id="click-form">
|
||||
<h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
|
||||
<div>
|
||||
{% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
|
||||
@ -92,28 +93,47 @@
|
||||
<div x-ref="basketManagementForm">
|
||||
{{ form.management_form }}
|
||||
</div>
|
||||
<ul x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</ul>
|
||||
<template x-for="(item, index) in Object.values(basket)">
|
||||
<ul>
|
||||
<template x-for="error in item.errors">
|
||||
<div class="alert alert-red" x-text="error">
|
||||
</div>
|
||||
</template>
|
||||
<ul>
|
||||
<li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
|
||||
<template x-for="(item, index) in Object.values(basket)">
|
||||
<li>
|
||||
<template x-for="error in item.errors">
|
||||
<div class="alert alert-red" x-text="error">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
|
||||
<span class="quantity" x-text="item.quantity"></span>
|
||||
<button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
|
||||
<button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
|
||||
<span class="quantity" x-text="item.quantity"></span>
|
||||
<button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
|
||||
|
||||
<span x-text="item.product.name"></span> :
|
||||
<span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
|
||||
<span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
|
||||
<span x-text="item.product.name"></span> :
|
||||
<span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
|
||||
<span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
|
||||
|
||||
<button class="remove-item" @click.prevent="removeFromBasket(item.product.id)"><i class="fa fa-trash-can delete-action"></i></button>
|
||||
<button
|
||||
class="remove-item"
|
||||
@click.prevent="removeFromBasket(item.product.id)"
|
||||
><i class="fa fa-trash-can delete-action"></i></button>
|
||||
|
||||
<input type="hidden" :value="item.quantity" :id="`id_form-${index}-quantity`" :name="`form-${index}-quantity`" required readonly>
|
||||
<input type="hidden" :value="item.product.id" :id="`id_form-${index}-id`" :name="`form-${index}-id`" required readonly>
|
||||
</ul>
|
||||
</template>
|
||||
<input
|
||||
type="hidden"
|
||||
:value="item.quantity"
|
||||
:id="`id_form-${index}-quantity`"
|
||||
:name="`form-${index}-quantity`"
|
||||
required
|
||||
readonly
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
:value="item.product.id"
|
||||
:id="`id_form-${index}-id`"
|
||||
:name="`form-${index}-id`"
|
||||
required
|
||||
readonly
|
||||
>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<p class="margin-bottom">
|
||||
<strong>Total: </strong>
|
||||
@ -122,8 +142,18 @@
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<input class="btn btn-blue" type="submit" @click.prevent="finish" :disabled="getBasketSize() == 0" value="{% trans %}Finish{% endtrans %}"/>
|
||||
<input class="btn btn-grey" type="submit" @click.prevent="cancel" value="{% trans %}Cancel{% endtrans %}"/>
|
||||
<input
|
||||
class="btn btn-blue"
|
||||
type="submit"
|
||||
@click.prevent="finish"
|
||||
:disabled="getBasketSize() === 0"
|
||||
value="{% trans %}Finish{% endtrans %}"
|
||||
/>
|
||||
<input
|
||||
class="btn btn-grey"
|
||||
type="submit" @click.prevent="cancel"
|
||||
value="{% trans %}Cancel{% endtrans %}"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user