mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-08 12:15:18 +00:00
Remove jquery-ui accordions
This commit is contained in:
parent
ad91c8ed4f
commit
c10b488080
GPG Key ID:
E7245548C53F904B
39
core/static/core/accordion.scss
Normal file
39
core/static/core/accordion.scss
Normal file
@ -0,0 +1,39 @@
|
||||
details.accordion summary {
|
||||
margin: 2px 0 0 0;
|
||||
padding: .5em .5em .5em .7em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
|
||||
}
|
||||
|
||||
details[open].accordion summary {
|
||||
border: 1px solid #003eff;
|
||||
background: #007fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
details:not([open]).accordion summary {
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
|
||||
border: 1px solid #c5c5c5;
|
||||
background: #f6f6f6;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
|
||||
// ::details-content isn't available on firefox yet
|
||||
// we use .accordion-content as a workaround
|
||||
details.accordion>.accordion-content {
|
||||
background: #ffffff;
|
||||
color: #333333;
|
||||
padding: 1em 2.2em;
|
||||
overflow: auto;
|
||||
border: 1px solid #dddddd;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
<link rel="stylesheet" href="{{ static('core/header.scss') }}">
|
||||
<link rel="stylesheet" href="{{ static('core/navbar.scss') }}">
|
||||
<link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
|
||||
<link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
|
||||
|
||||
{% block jquery_css %}
|
||||
{# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% macro monthly(objects) %}
|
||||
<div>
|
||||
<div class="accordion-content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -37,22 +37,28 @@
|
||||
{% if customer %}
|
||||
<h3>{% trans %}User account{% endtrans %}</h3>
|
||||
<p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
|
||||
<div id="drop">
|
||||
{% if buyings_month %}
|
||||
<h5>{% trans %}Account purchases{% endtrans %}</h5>
|
||||
{% if buyings_month %}
|
||||
<details class="accordion" name="account" open>
|
||||
<summary>{% trans %}Account purchases{% endtrans %}</summary>
|
||||
{{ monthly(buyings_month) }}
|
||||
{% endif %}
|
||||
{% if refilling_month %}
|
||||
<h5>{% trans %}Reloads{% endtrans %}</h5>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% if refilling_month %}
|
||||
<details class="accordion" name="account">
|
||||
<summary>{% trans %}Reloads{% endtrans %}</summary>
|
||||
{{ monthly(refilling_month) }}
|
||||
{% endif %}
|
||||
{% if invoices_month %}
|
||||
<h5>{% trans %}Eboutic invoices{% endtrans %}</h5>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% if invoices_month %}
|
||||
<details class="accordion" name="account">
|
||||
<summary>{% trans %}Eboutic invoices{% endtrans %}</summary>
|
||||
{{ monthly(invoices_month) }}
|
||||
{% endif %}
|
||||
{% if etickets %}
|
||||
<h4>{% trans %}Etickets{% endtrans %}</h4>
|
||||
<div>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% if etickets %}
|
||||
<details class="accordion" name="account">
|
||||
<summary>{% trans %}Etickets{% endtrans %}</summary>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
{% for s in etickets %}
|
||||
<li>
|
||||
@ -63,22 +69,9 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p>{% trans %}User has no account{% endtrans %}</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
$(function(){
|
||||
$("#drop").accordion({
|
||||
heightStyle: "content"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
@ -254,13 +254,5 @@
|
||||
keys.shift();
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$("#drop_gifts").accordion({
|
||||
heightStyle: "content",
|
||||
collapsible: true,
|
||||
active: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -103,7 +103,7 @@ document.addEventListener("alpine:init", () => {
|
||||
this.customerBalance += Number.parseFloat(
|
||||
(event.detail.target.querySelector("#id_amount") as HTMLInputElement).value,
|
||||
);
|
||||
document.getElementById("selling-accordion").click();
|
||||
document.getElementById("selling-accordion").setAttribute("open", "");
|
||||
this.codeField.widget.focus();
|
||||
},
|
||||
|
||||
@ -139,12 +139,6 @@ document.addEventListener("alpine:init", () => {
|
||||
});
|
||||
|
||||
$(() => {
|
||||
/* Accordion UI between basket and refills */
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
|
||||
($("#click-form") as any).accordion({
|
||||
heightStyle: "content",
|
||||
activate: () => $(".focus").focus(),
|
||||
});
|
||||
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
|
||||
($("#products") as any).tabs();
|
||||
});
|
||||
|
||||
@ -51,185 +51,192 @@
|
||||
</div>
|
||||
|
||||
<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) %}
|
||||
<details class="accordion" id="selling-accordion" name="selling" open>
|
||||
<summary>{% trans %}Selling{% endtrans %}</summary>
|
||||
<div class="accordion-content">
|
||||
{% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
|
||||
|
||||
<form method="post" action=""
|
||||
class="code_form" @submit.prevent="handleCode">
|
||||
<form method="post" action=""
|
||||
class="code_form" @submit.prevent="handleCode">
|
||||
|
||||
<counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
|
||||
<option value=""></option>
|
||||
<optgroup label="{% trans %}Operations{% endtrans %}">
|
||||
<option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
|
||||
<option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
|
||||
</optgroup>
|
||||
{% for category in categories.keys() %}
|
||||
<optgroup label="{{ category }}">
|
||||
{% for product in categories[category] %}
|
||||
<option value="{{ product.id }}">{{ product }}</option>
|
||||
{% endfor %}
|
||||
<counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
|
||||
<option value=""></option>
|
||||
<optgroup label="{% trans %}Operations{% endtrans %}">
|
||||
<option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
|
||||
<option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</counter-product-select>
|
||||
{% for category in categories.keys() %}
|
||||
<optgroup label="{{ category }}">
|
||||
{% for product in categories[category] %}
|
||||
<option value="{{ product.id }}">{{ product }}</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</counter-product-select>
|
||||
|
||||
<input type="submit" value="{% trans %}Go{% endtrans %}"/>
|
||||
</form>
|
||||
<input type="submit" value="{% trans %}Go{% endtrans %}"/>
|
||||
</form>
|
||||
|
||||
{% for error in form.non_form_errors() %}
|
||||
<div class="alert alert-red">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<p>{% trans %}Basket: {% endtrans %}</p>
|
||||
{% for error in form.non_form_errors() %}
|
||||
<div class="alert alert-red">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<p>{% trans %}Basket: {% endtrans %}</p>
|
||||
|
||||
<form x-cloak method="post" action="" x-ref="basketForm">
|
||||
<form x-cloak method="post" action="" x-ref="basketForm">
|
||||
|
||||
<div class="basket-error-container">
|
||||
<div class="basket-error-container">
|
||||
<div
|
||||
x-cloak
|
||||
class="alert alert-red basket-error"
|
||||
x-show="alertMessage.show"
|
||||
x-transition.duration.500ms
|
||||
x-text="alertMessage.content"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{% csrf_token %}
|
||||
<div x-ref="basketManagementForm">
|
||||
{{ form.management_form }}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
|
||||
<strong> €</strong>
|
||||
</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 %}"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
<details class="accordion" name="selling">
|
||||
<summary>{% trans %}Refilling{% endtrans %}</summary>
|
||||
{% if object.type == "BAR" %}
|
||||
{% if refilling_fragment %}
|
||||
<div
|
||||
x-cloak
|
||||
class="alert alert-red basket-error"
|
||||
x-show="alertMessage.show"
|
||||
x-transition.duration.500ms
|
||||
x-text="alertMessage.content"
|
||||
></div>
|
||||
</div>
|
||||
class="accordion-content"
|
||||
@htmx:after-request="onRefillingSuccess"
|
||||
>
|
||||
{{ refilling_fragment }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="accordion-content">
|
||||
<p class="alert alert-yellow">
|
||||
{% trans trimmed %}
|
||||
As a barman, you are not able to refill any account on your own.
|
||||
An admin should be connected on this counter for that.
|
||||
The customer can refill by using the eboutic.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</details>
|
||||
{% if student_card_fragment %}
|
||||
<details class="accordion" name="selling">
|
||||
<summary>{% trans %}Student card{% endtrans %}</summary>
|
||||
<div class="accordion-content">
|
||||
{{ student_card_fragment }}
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
{% csrf_token %}
|
||||
<div x-ref="basketManagementForm">
|
||||
{{ form.management_form }}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
|
||||
<strong> €</strong>
|
||||
</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 %}"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if object.type == "BAR" %}
|
||||
<h5>{% trans %}Refilling{% endtrans %}</h5>
|
||||
{% if refilling_fragment %}
|
||||
<div
|
||||
@htmx:after-request="onRefillingSuccess"
|
||||
>
|
||||
{{ refilling_fragment }}
|
||||
|
||||
<div id="products">
|
||||
{% if not products %}
|
||||
<div class="alert alert-red">
|
||||
{% trans %}No products available on this counter for this user{% endtrans %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div>
|
||||
<p class="alert alert-yellow">
|
||||
{% trans trimmed %}
|
||||
As a barman, you are not able to refill any account on your own.
|
||||
An admin should be connected on this counter for that.
|
||||
The customer can refill by using the eboutic.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if student_card_fragment %}
|
||||
<h5>{% trans %}Student card{% endtrans %}</h3>
|
||||
<div>
|
||||
{{ student_card_fragment }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="products">
|
||||
{% if not products %}
|
||||
<div class="alert alert-red">
|
||||
{% trans %}No products available on this counter for this user{% endtrans %}
|
||||
</div>
|
||||
{% else %}
|
||||
<ul>
|
||||
<ul>
|
||||
{% for category in categories.keys() -%}
|
||||
<li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{% for category in categories.keys() -%}
|
||||
<li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{% for category in categories.keys() -%}
|
||||
<div id="cat_{{ category|slugify }}">
|
||||
<h5 class="margin-bottom">{{ category }}</h5>
|
||||
<div class="row gap-2x">
|
||||
{% for product in categories[category] -%}
|
||||
<button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="image de {{ product.name }}"
|
||||
{% if product.icon %}
|
||||
src="{{ product.icon.url }}"
|
||||
{% else %}
|
||||
src="{{ static('core/img/na.gif') }}"
|
||||
{% endif %}
|
||||
/>
|
||||
<span class="card-content">
|
||||
<strong class="card-title">{{ product.name }}</strong>
|
||||
<p>{{ product.price }} €<br>{{ product.code }}</p>
|
||||
</span>
|
||||
</button>
|
||||
{%- endfor %}
|
||||
<div id="cat_{{ category|slugify }}">
|
||||
<h5 class="margin-bottom">{{ category }}</h5>
|
||||
<div class="row gap-2x">
|
||||
{% for product in categories[category] -%}
|
||||
<button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
|
||||
<img
|
||||
class="card-image"
|
||||
alt="image de {{ product.name }}"
|
||||
{% if product.icon %}
|
||||
src="{{ product.icon.url }}"
|
||||
{% else %}
|
||||
src="{{ static('core/img/na.gif') }}"
|
||||
{% endif %}
|
||||
/>
|
||||
<span class="card-content">
|
||||
<strong class="card-title">{{ product.name }}</strong>
|
||||
<p>{{ product.price }} €<br>{{ product.code }}</p>
|
||||
</span>
|
||||
</button>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor %}
|
||||
{% endif %}
|
||||
{%- endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block script %}
|
||||
|
||||
@ -17,6 +17,7 @@ $large-devices: 992px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.star-checked {
|
||||
color: $pedagogy-orange;
|
||||
margin-bottom: 0;
|
||||
@ -32,6 +33,7 @@ $large-devices: 992px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.star-checked {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
@ -42,6 +44,7 @@ $large-devices: 992px;
|
||||
&.grade-without-star {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.grade-with-star {
|
||||
display: none;
|
||||
}
|
||||
@ -51,10 +54,12 @@ $large-devices: 992px;
|
||||
font-size: 1.1em;
|
||||
|
||||
overflow-wrap: break-word;
|
||||
|
||||
.closed td.title {
|
||||
color: lighten($black-color, 10%);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
border: none;
|
||||
@ -131,10 +136,12 @@ $large-devices: 992px;
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-guide {
|
||||
margin-top: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.radio-guide label {
|
||||
display: inline-block;
|
||||
background-color: $pedagogy-blue;
|
||||
@ -143,12 +150,15 @@ $large-devices: 992px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.radio-guide input[type="radio"]:checked + label {
|
||||
|
||||
.radio-guide input[type="radio"]:checked+label {
|
||||
background-color: $pedagogy-orange;
|
||||
}
|
||||
.radio-guide input[type="checkbox"]:checked + label {
|
||||
|
||||
.radio-guide input[type="checkbox"]:checked+label {
|
||||
background-color: $pedagogy-orange;
|
||||
}
|
||||
|
||||
.radio-guide label:hover {
|
||||
background-color: $pedagogy-hover-blue;
|
||||
}
|
||||
@ -219,12 +229,7 @@ $large-devices: 992px;
|
||||
"stars"
|
||||
"comment";
|
||||
}
|
||||
}
|
||||
|
||||
.ui-accordion-content {
|
||||
background-color: $white-color;
|
||||
border-color: $pedagogy-orange;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.form-stars {
|
||||
@ -235,16 +240,6 @@ $large-devices: 992px;
|
||||
grid-area: comment;
|
||||
}
|
||||
|
||||
.ui-accordion-header {
|
||||
background-color: $pedagogy-orange;
|
||||
color: $pedagogy-white-text;
|
||||
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
|
||||
|
||||
@media screen and (max-width: $large-devices) {
|
||||
clip-path: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-accordion-header-icon {
|
||||
color: $pedagogy-white-text;
|
||||
margin-right: 10px;
|
||||
@ -282,7 +277,7 @@ $large-devices: 992px;
|
||||
background-color: $pedagogy-blue;
|
||||
padding-right: 10px;
|
||||
|
||||
> p {
|
||||
>p {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -356,7 +351,7 @@ $large-devices: 992px;
|
||||
.grade-type {
|
||||
grid-area: grade-type;
|
||||
|
||||
> p {
|
||||
>p {
|
||||
color: $pedagogy-white-text;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
@ -512,3 +507,20 @@ $large-devices: 992px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details.accordion summary {
|
||||
|
||||
background: $pedagogy-orange !important;
|
||||
color: $pedagogy-white-text !important;
|
||||
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
|
||||
|
||||
@media screen and (max-width: $large-devices) {
|
||||
clip-path: none;
|
||||
}
|
||||
}
|
||||
|
||||
details.accordion>.accordion-content {
|
||||
background-color: $white-color;
|
||||
border-color: $pedagogy-orange;
|
||||
border-right: none;
|
||||
}
|
||||
@ -90,9 +90,9 @@
|
||||
<p>{% trans %}You already posted a comment on this UV. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
|
||||
</div>
|
||||
{% elif user.has_perm("pedagogy.add_uvcomment") %}
|
||||
<div id="leave_comment">
|
||||
<h2>{% trans %}Leave comment{% endtrans %}</h2>
|
||||
<div>
|
||||
<details class="accordion" id="leave_comment">
|
||||
<summary>{% trans %}Leave comment{% endtrans %}</summary>
|
||||
<div class="accordion-content">
|
||||
<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="leave-comment-grid-container">
|
||||
@ -142,7 +142,7 @@
|
||||
<p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
<br>
|
||||
|
||||
@ -221,21 +221,5 @@
|
||||
<script type="text/javascript">
|
||||
$("#return_noscript").hide();
|
||||
$("#return_js").show();
|
||||
const icons = {
|
||||
header: "fa fa-toggle-right",
|
||||
activeHeader: "fa fa-toggle-down"
|
||||
};
|
||||
$(function(){
|
||||
$("#leave_comment").accordion({
|
||||
icons: icons,
|
||||
heightStyle: "content",
|
||||
active: false,
|
||||
collapsible: true
|
||||
});
|
||||
});
|
||||
// Remove jquery-ui icons to make fontawesome work
|
||||
$(document).ready(function(){
|
||||
$(".ui-accordion-header-icon").first().removeClass("ui-icon");
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user