basket: make templates extend mini-base.html (#85383)
gitea/lingo/pipeline/head This commit looks good
Details
gitea/lingo/pipeline/head This commit looks good
Details
This commit is contained in:
parent
e569e08a19
commit
6aa201e461
|
|
@ -4,7 +4,7 @@
|
|||
{% block title %}{% trans "Basket" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<div>
|
||||
<p>
|
||||
{% trans "My basket" %}
|
||||
</p>
|
||||
|
|
@ -21,5 +21,5 @@
|
|||
<a class="cancel" href="{% url 'lingo-basket-detail' %}">{% trans 'Keep basket' %}</a>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -8,67 +8,65 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<p>
|
||||
{% trans "My basket" %}
|
||||
</p>
|
||||
<ul class="basket">
|
||||
{% for line in basket.lines %}
|
||||
{% for slug, label, description, quantity, unit_amount, total_amount in line.formatted_items %}
|
||||
<li class="basket-item">
|
||||
<a class="basket-item--label" {% if line.form_url %}href="{{ line.form_url }}{% endif %}">{{ line.user_name }} - {{ label }}{% if description %} - {{ description }}{% endif %}</a>
|
||||
<span class="basket-item--total-amount">{% blocktrans with amount=total_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<p>
|
||||
{% trans "My basket" %}
|
||||
</p>
|
||||
<ul class="basket">
|
||||
{% for line in basket.lines %}
|
||||
{% for slug, label, description, quantity, unit_amount, total_amount in line.formatted_items %}
|
||||
<li class="basket-item">
|
||||
<a class="basket-item--label" {% if line.form_url %}href="{{ line.form_url }}{% endif %}">{{ line.user_name }} - {{ label }}{% if description %} - {{ description }}{% endif %}</a>
|
||||
<span class="basket-item--total-amount">{% blocktrans with amount=total_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if basket.lines %}
|
||||
<ul class="basket-amounts">
|
||||
<li class="basket-amounts--total">
|
||||
<span class="basket-amounts--total--label">{% trans "Basket amount:" %}</span>
|
||||
<span class="basket-amounts--total--amount">{% blocktrans with amount=basket.total_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
{% if basket.credit_amount %}
|
||||
<li class="basket-amounts--credit">
|
||||
<span class="basket-amounts--credit--label">{% trans "Credit:" %}</span>
|
||||
<span class="basket-amounts--credit--amount">{% blocktrans with amount=basket.credit_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="basket-amounts--remaining">
|
||||
<span class="basket-amounts--remaining--label">
|
||||
{% if basket.remaining_amount < 0 %}
|
||||
{% trans "New credit:" %}
|
||||
{% else %}
|
||||
{% trans "Amount to pay:" %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="basket-amounts--remaining--amount">{% blocktrans with amount=basket.remaining_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
</ul>
|
||||
{% if basket.lines %}
|
||||
<ul class="basket-amounts">
|
||||
<li class="basket-amounts--total">
|
||||
<span class="basket-amounts--total--label">{% trans "Basket amount:" %}</span>
|
||||
<span class="basket-amounts--total--amount">{% blocktrans with amount=basket.total_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
{% if basket.credit_amount %}
|
||||
<li class="basket-amounts--credit">
|
||||
<span class="basket-amounts--credit--label">{% trans "Credit:" %}</span>
|
||||
<span class="basket-amounts--credit--amount">{% blocktrans with amount=basket.credit_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="basket-amounts--remaining">
|
||||
<span class="basket-amounts--remaining--label">
|
||||
{% if basket.remaining_amount < 0 %}
|
||||
{% trans "New credit:" %}
|
||||
{% else %}
|
||||
{% trans "Amount to pay:" %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="basket-amounts--remaining--amount">{% blocktrans with amount=basket.remaining_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% if not basket.is_expired %}
|
||||
<div id="expiration">
|
||||
{% trans "Your basket expires in:" %}
|
||||
<span id="timer">
|
||||
<span id="days"></span>
|
||||
<span id="hours"></span>
|
||||
<span id="minutes"></span>
|
||||
<span id="seconds"></span>
|
||||
</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="expired">
|
||||
{% trans "Your basket has expired." %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a href="{% url 'lingo-basket-invoice-pdf' %}">{% trans "see invoice" %}</a>
|
||||
{% if basket.status == 'open' and not basket.is_expired %}
|
||||
<a id="validate-btn" class="pk-button" rel="popup" href="{% url 'lingo-basket-validate' %}">{% trans "Validate" %}</a>
|
||||
{% endif %}
|
||||
<a class="pk-button" rel="popup" href="{% url 'lingo-basket-cancel' %}">{% trans "Cancel" %}</a>
|
||||
{% if not basket.is_expired %}
|
||||
<div id="expiration">
|
||||
{% trans "Your basket expires in:" %}
|
||||
<span id="timer">
|
||||
<span id="days"></span>
|
||||
<span id="hours"></span>
|
||||
<span id="minutes"></span>
|
||||
<span id="seconds"></span>
|
||||
</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="expired">
|
||||
{% trans "Your basket has expired." %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
<a href="{% url 'lingo-basket-invoice-pdf' %}">{% trans "see invoice" %}</a>
|
||||
{% if basket.status == 'open' and not basket.is_expired %}
|
||||
<a id="validate-btn" class="pk-button" rel="popup" href="{% url 'lingo-basket-validate' %}">{% trans "Validate" %}</a>
|
||||
{% endif %}
|
||||
<a class="pk-button" rel="popup" href="{% url 'lingo-basket-cancel' %}">{% trans "Cancel" %}</a>
|
||||
{% endif %}
|
||||
<style>
|
||||
ul.basket, ul.basket-amounts {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{% block title %}{% trans "Basket" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<div>
|
||||
<p>
|
||||
{% trans "My basket" %}
|
||||
</p>
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
<a class="cancel" href="{% url 'lingo-basket-detail' %}">{% trans 'Cancel' %}</a>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{% block title %}{% trans "Processing payment" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main aria-live="polite">
|
||||
<div id="processing-payment" aria-live="polite">
|
||||
<h1>{% trans "Please wait" %}</h1>
|
||||
<div class="loader"></div>
|
||||
<p>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<br>
|
||||
{% trans "This will take at most 1 minute." %}
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
<template id="status-paid"> <!-- paid -->
|
||||
<h1>{% trans "Payment confirmed" %}</h1>
|
||||
<p>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
(function() {
|
||||
function update_page(tmpl_id) {
|
||||
const tmpl = document.getElementById(tmpl_id)
|
||||
document.getElementsByTagName('main')[0].innerHTML = tmpl.innerHTML
|
||||
document.getElementById('processing-payment').innerHTML = tmpl.innerHTML
|
||||
document.title = document.getElementsByTagName('h1')[0].textContent + document.getElementById('title').innerHTML
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,84 +1,51 @@
|
|||
{% load i18n %}<!DOCTYPE html>
|
||||
<html {% if LANGUAGE_CODE %}lang="{{ LANGUAGE_CODE }}"{% endif %} {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
|
||||
<head>
|
||||
<meta charset="UTF-8"><!-- 🔥 -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{% endblock %} | {% firstof global_title site_title "Compte Citoyen" %}</title>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, notranslate, noimageindex" />
|
||||
{% if theme_color %}
|
||||
<meta name="theme-color" content="{{ theme_color }}">
|
||||
<meta name="msapplication-navbutton-color" content="{{ theme_color }}">
|
||||
{% endif %}
|
||||
{% block extrascripts %}{% endblock %}
|
||||
<style>
|
||||
html {
|
||||
--primary-color: {{ theme_color|default:"#ccc" }}
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #F2F2F2;
|
||||
color: black;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
}
|
||||
main {
|
||||
background: white;
|
||||
max-width: 30em;
|
||||
margin: 4em auto;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
border-bottom: 5px solid var(--primary-color);
|
||||
}
|
||||
#continue {
|
||||
margin-top: 3em;
|
||||
}
|
||||
{% extends "mini-base.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
.loader {
|
||||
margin: 2em auto;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
aspect-ratio: 1;
|
||||
--c: linear-gradient(var(--primary-color) 0 0);
|
||||
--r1: radial-gradient(farthest-side at bottom, var(--primary-color) 93%, var(--primary-color));
|
||||
--r2: radial-gradient(farthest-side at top , var(--primary-color) 93%, var(--primary-color));
|
||||
background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
|
||||
background-repeat: no-repeat;
|
||||
animation: l2 1s infinite alternate;
|
||||
}
|
||||
@keyframes l2 {
|
||||
0%,25% {
|
||||
background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
|
||||
}
|
||||
50% {
|
||||
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
|
||||
}
|
||||
75% {
|
||||
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
|
||||
}
|
||||
95%,100% {
|
||||
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
|
||||
}
|
||||
}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
#continue {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
#expiration {
|
||||
transition: transform 2s ease-out;
|
||||
transform: scale(1);
|
||||
.loader {
|
||||
margin: 2em auto;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
aspect-ratio: 1;
|
||||
--c: linear-gradient(var(--primary-color) 0 0);
|
||||
--r1: radial-gradient(farthest-side at bottom, var(--primary-color) 93%, var(--primary-color));
|
||||
--r2: radial-gradient(farthest-side at top , var(--primary-color) 93%, var(--primary-color));
|
||||
background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
|
||||
background-repeat: no-repeat;
|
||||
animation: l2 1s infinite alternate;
|
||||
}
|
||||
@keyframes l2 {
|
||||
0%,25% {
|
||||
background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
|
||||
}
|
||||
#expiration.boom {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: scale(300);
|
||||
50% {
|
||||
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
75% {
|
||||
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
|
||||
}
|
||||
95%,100% {
|
||||
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
|
||||
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
|
||||
}
|
||||
}
|
||||
#expiration {
|
||||
transition: transform 2s ease-out;
|
||||
transform: scale(1);
|
||||
}
|
||||
#expiration.boom {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: scale(300);
|
||||
}
|
||||
</style>
|
||||
{% block extrascripts %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
{% load static %}<!DOCTYPE html>
|
||||
<html {% if LANGUAGE_CODE %}lang="{{ LANGUAGE_CODE }}"{% endif %} {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
|
||||
<head>
|
||||
<meta charset="UTF-8"><!-- 🔥 -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, notranslate, noimageindex" />
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue