lot de modifs thème Nanterre (#86104) #501

Merged
tjund merged 11 commits from wip/86104-theme-nanterre into main 2024-01-30 17:28:04 +01:00
9 changed files with 146 additions and 23 deletions

View File

@ -14,6 +14,9 @@
margin-right: Min(calc(-1 * var(--edge-gutter)), calc(-50vw + var(--ref-width) / 2));
padding-right: Max(var(--edge-gutter), calc(50vw - var(--ref-width) / 2));
}
@if ($position == 'both') {
box-sizing: content-box;
}
}
//
@ -176,6 +179,14 @@ div#header {
// Header
//
$menu-item-desktop-size: 130px;
@media($min-desktop-viewport) {
[id] {
// move scroll position because header is sticky
scroll-margin-top: $menu-item-desktop-size+10;
}
}
.header-link {
display: flex;
align-items: center;
@ -377,18 +388,34 @@ div#main-content-wrapper {
.theme-page-header {
background-color: $red;
border-top: 1px solid transparent;
min-height: 15rem;
min-height: 5rem;
display: flex;
@include bg-to-the-edge('both');
@media ($min-desktop-viewport) {
min-height: 15rem;
background-color: $gray-light;
border-left-width: Max(#{$theme-edge-gutter)}, calc(50vw - var(--ref-width) / 2));
border-left-color: $red;
border-left-style: solid;
padding-left: 0;
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: Min(40%, calc(8 * #{$fz-1}));
background-image: var(--page-picture, var(--page-title-background, none));
background-repeat: no-repeat;
background-size: cover;
}
}
}
.theme-page-title {
padding-top: 1em;
padding-bottom: 1em;
background-color: $red;
color: white;
margin: 0;
@ -475,6 +502,7 @@ div#main-content-wrapper {
}
.menu-with-icons--link {
display: flex;
flex-wrap: nowrap;
background-color: white;
border-radius: 0;
align-items: center;
@ -535,7 +563,6 @@ div#main-content-wrapper {
}
@media ($max-mobile-viewport) {
@include bg-to-the-edge(both);
box-sizing: content-box;
}
a:not([class*="pk-button"]) {
color: currentColor;
@ -633,29 +660,41 @@ div#main-content-wrapper {
margin: 0 !important;
padding: 0 !important;
}
+ .cell:not(.rsu-frontoffice-app) {
clear: both;
}
}
}
.gru-content .rsu-frontoffice-app-title.cell {
display: none; // show via javascript in rsu-frontoffice-app.html
& + .rsu-frontoffice-app.grid-1-2 {
@media (min-width: $very-small-limit + 0.01) {
&.nb-of-app-is-1 {
width: 100%;
border-bottom-left-radius: $cell-border-radius;
border-right-width: #{extract-width($cell-border) / 2};
width: 50%;
border-bottom-right-radius: $cell-border-radius;
}
@media (max-width: $very-small-limit) {
margin-bottom: 0;
}
& + .rsu-frontoffice-app.grid-1-2 {
&.nb-of-app-is-2 {
@media (min-width: $very-small-limit + 0.01) {
border-bottom-right-radius: $cell-border-radius;
border-left-width: #{extract-width($cell-border) / 2};
border-bottom-left-radius: $cell-border-radius;
border-right-width: #{extract-width($cell-border) / 2};
width: 50%;
}
@media (max-width: $very-small-limit) {
border-radius: 0 0 $cell-border-radius $cell-border-radius;
margin-bottom: 0;
}
}
& + .rsu-frontoffice-app.grid-1-2 {
@media (min-width: $very-small-limit + 0.01) {
border-radius: 0;
border-bottom-right-radius: $cell-border-radius;
border-left-width: #{extract-width($cell-border) / 2};
}
@media (max-width: $very-small-limit) {
border-radius: 0 0 $cell-border-radius $cell-border-radius;
}
}
}
}
}
@ -752,6 +791,15 @@ div#rub_service {
@extend .button-with-left-arrow;
}
// timetable widget
div.timetable-widget div span.timetable-cell {
margin-bottom: 7px;
border: 1px solid transparent;
&:hover {
border-color: currentColor;
}
}
//
// Notif
//
@ -805,6 +853,40 @@ div#rub_service {
content: none;
}
}
.menucell {
li {
padding: 0 1em;
}
li a {
line-height: 1.2;
font-weight: bold;
padding: 0.1em;
box-shadow: inset 0 0 0 0 $red;
transition: all .3s ease-in-out;
&:hover, &:focus {
box-shadow: inset 0 -1.4em 0 0 $red;
color: white;
text-decoration: none;
}
.menu--label::after {
content: none;
}
}
&.full-viewport {
@include bg-to-the-edge(both);
padding-top: 2em;
padding-bottom: 2em;
background-color: white;
border-top: 1px solid #b5b5b5;
margin-bottom: -1.5rem;
&[class*=grid-] {
float: none;
clear: both;
width: auto;
}
}
}
}
//

View File

@ -19,11 +19,11 @@ $fz-xsmall: 12em / $base-font;
$title-ff: Inter, sans-serif;
// Layout
$theme-edge-gutter: 2em;
$theme-edge-gutter: 2rem;
$central-content-top: 2rem;
// Core vars
$width: 1400em / $base-font;
$width: 1400px;
$sidebar-width: 22em;
$columns-gutter: 2.8em;
$sidebar-columns-gutter: $columns-gutter;
@ -99,6 +99,11 @@ $widget-focus-border: 1px solid black;
$widget-focus-color: black;
$widget-padding: 1rem 1.5rem;
$timetable-cell-background: $gray-light;
$timetable-cell-selected-background: $red;
$timetable-cell-selected-color: white;
$timetable-cell-hover-background: $timetable-cell-background;
$notification_error_color: #E61E50;
$notification_warning_color: #FFDCBD;
$notification_success_color: #C7F7D2;
@ -106,6 +111,7 @@ $notification_info_color: #F2F2F2;
$footer-background: white;
$footer-color: $font-color;
$footer-menucell-separator: 1px solid;
$nav-mobile-bottom-bar-height: 90px;

View File

@ -8,7 +8,8 @@
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"emails:logo": {"label": "Emails : logo"}
"emails:logo": {"label": "Emails : logo"},
"page-title:background": {"label": "Titre de la page : image d'arrière plan"}
},
"COMBO_CELL_TEMPLATES.update" : {
"data_menucell" : {

View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M4 8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H14C16.8284 2 18.2426 2 19.1213 2.87868C20 3.75736 20 5.17157 20 8V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8Z" stroke="#ffffff" stroke-width="1.5"/> <path d="M19.8978 16H7.89778C6.96781 16 6.50282 16 6.12132 16.1022C5.08604 16.3796 4.2774 17.1883 4 18.2235" stroke="#ffffff" stroke-width="1.5"/> <path d="M8 7H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M8 10.5H13" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z" stroke="#ffffff" stroke-width="1.5"/> <path d="M6.04779 10.849L6.28497 10.1375H6.28497L6.04779 10.849ZM8.22309 11.5741L7.98592 12.2856H7.98592L8.22309 11.5741ZM9.01682 13.256L8.31681 12.9868H8.31681L9.01682 13.256ZM7.77003 16.4977L8.47004 16.7669H8.47004L7.77003 16.4977ZM17.9522 10.849L17.715 10.1375H17.715L17.9522 10.849ZM15.7769 11.5741L16.0141 12.2856H16.0141L15.7769 11.5741ZM14.9832 13.256L15.6832 12.9868L14.9832 13.256ZM16.23 16.4977L15.53 16.7669L16.23 16.4977ZM10.4242 17.7574L11.0754 18.1295L10.4242 17.7574ZM12 14.9997L12.6512 14.6276C12.5177 14.394 12.2691 14.2497 12 14.2497C11.7309 14.2497 11.4823 14.394 11.3488 14.6276L12 14.9997ZM17.1465 7.8969L16.9894 7.16355L17.1465 7.8969ZM15.249 8.30353L15.4061 9.03688V9.03688L15.249 8.30353ZM8.75102 8.30353L8.90817 7.57018V7.57018L8.75102 8.30353ZM6.85345 7.89691L6.69631 8.63026L6.85345 7.89691ZM13.5758 17.7574L12.9246 18.1295V18.1295L13.5758 17.7574ZM15.0384 8.34826L14.8865 7.61381L14.8865 7.61381L15.0384 8.34826ZM8.96161 8.34826L8.80969 9.08272L8.80969 9.08272L8.96161 8.34826ZM15.2837 11.7666L15.6777 12.4048L15.2837 11.7666ZM14.8182 12.753L15.5613 12.6514V12.6514L14.8182 12.753ZM8.71625 11.7666L8.3223 12.4048H8.3223L8.71625 11.7666ZM9.18177 12.753L9.92485 12.8546V12.8546L9.18177 12.753ZM5.81062 11.5605L7.98592 12.2856L8.46026 10.8626L6.28497 10.1375L5.81062 11.5605ZM8.31681 12.9868L7.07002 16.2284L8.47004 16.7669L9.71683 13.5252L8.31681 12.9868ZM17.715 10.1375L15.5397 10.8626L16.0141 12.2856L18.1894 11.5605L17.715 10.1375ZM14.2832 13.5252L15.53 16.7669L16.93 16.2284L15.6832 12.9868L14.2832 13.5252ZM11.0754 18.1295L12.6512 15.3718L11.3488 14.6276L9.77299 17.3853L11.0754 18.1295ZM16.9894 7.16355L15.0918 7.57017L15.4061 9.03688L17.3037 8.63026L16.9894 7.16355ZM8.90817 7.57018L7.0106 7.16355L6.69631 8.63026L8.59387 9.03688L8.90817 7.57018ZM11.3488 15.3718L12.9246 18.1295L14.227 17.3853L12.6512 14.6276L11.3488 15.3718ZM15.0918 7.57017C14.9853 7.593 14.9356 7.60366 14.8865 7.61381L15.1903 9.08272C15.2458 9.07123 15.3016 9.05928 15.4061 9.03688L15.0918 7.57017ZM8.59387 9.03688C8.6984 9.05928 8.75416 9.07123 8.80969 9.08272L9.11353 7.61381C9.06443 7.60366 9.01468 7.593 8.90817 7.57018L8.59387 9.03688ZM14.8865 7.61381C12.9823 8.00768 11.0177 8.00768 9.11353 7.61381L8.80969 9.08272C10.9143 9.51805 13.0857 9.51805 15.1903 9.08272L14.8865 7.61381ZM9.14506 19.2497C9.94287 19.2497 10.6795 18.8222 11.0754 18.1295L9.77299 17.3853C9.64422 17.6107 9.40459 17.7497 9.14506 17.7497V19.2497ZM15.53 16.7669C15.7122 17.2406 15.3625 17.7497 14.8549 17.7497V19.2497C16.4152 19.2497 17.4901 17.6846 16.93 16.2284L15.53 16.7669ZM15.5397 10.8626C15.3178 10.9366 15.0816 11.01 14.8898 11.1283L15.6777 12.4048C15.6688 12.4102 15.6763 12.4037 15.7342 12.3818C15.795 12.3588 15.877 12.3313 16.0141 12.2856L15.5397 10.8626ZM15.6832 12.9868C15.6313 12.8519 15.6004 12.7711 15.5795 12.7095C15.5596 12.651 15.5599 12.6411 15.5613 12.6514L14.0751 12.8546C14.1057 13.0779 14.1992 13.3069 14.2832 13.5252L15.6832 12.9868ZM14.8898 11.1283C14.3007 11.492 13.9814 12.1687 14.0751 12.8546L15.5613 12.6514C15.5479 12.5534 15.5935 12.4567 15.6777 12.4048L14.8898 11.1283ZM18.25 9.39526C18.25 9.73202 18.0345 10.031 17.715 10.1375L18.1894 11.5605C19.1214 11.2499 19.75 10.3777 19.75 9.39526H18.25ZM7.07002 16.2284C6.50994 17.6846 7.58484 19.2497 9.14506 19.2497V17.7497C8.63751 17.7497 8.28784 17.2406 8.47004 16.7669L7.07002 16.2284ZM7.98592 12.2856C8.12301 12.3313 8.20501 12.3588 8.26583 12.3818C8.32371 12.4037 8.33115 12.4102 8.3223 12.4048L9.1102 11.1283C8.91842 11.01 8.68219 10.9366 8.46026 10.8626L7.98592 12.2856ZM9.71683 13.5252C9.80081 13.3069 9.89432 13.0779 9.92485 12.8546L8.43868 12.6514C8.44009 12.6411 8.4404 12.6509 8.42051 12.7095C8.3996 12.7711 8.36869 12.8519 8.31681 12.9868L9.71683 13.5252ZM8.3223 12.4048C8.40646 12.4567 8.45208 12.5534 8.43868 12.6514L9.92485 12.8546C10.0186 12.1687 9.69929 11.492 9.1102 11.1283L8.3223 12.4048ZM4.25 9.39526C4.25 10.3777 4.87863 11.2499 5.81062 11.5605L6.28497 10.1375C5.96549 10.031 5.75 9.73202 5.75 9.39526H4.25ZM5.75 9.39526C5.75 8.89717 6.20927 8.52589 6.69631 8.63026L7.0106 7.16355C5.58979 6.8591 4.25 7.9422 4.25 9.39526H5.75ZM12.9246 18.1295C13.3205 18.8222 14.0571 19.2497 14.8549 19.2497V17.7497C14.5954 17.7497 14.3558 17.6107 14.227 17.3853L12.9246 18.1295ZM19.75 9.39526C19.75 7.9422 18.4102 6.85909 16.9894 7.16355L17.3037 8.63026C17.7907 8.52589 18.25 8.89717 18.25 9.39526H19.75Z" fill="#ffffff"/> <path d="M19.4537 14.5C21.0372 15.2961 22 16.3475 22 17.5C22 19.9853 17.5228 22 12 22C6.47715 22 2 19.9853 2 17.5C2 16.3475 2.96285 15.2961 4.54631 14.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -6,12 +6,18 @@
<p class="rsu-frontoffice-app-{{ keyname }}">
<a class="menu-with-icons--link" href="{{ href }}">
<span class="menu-with-icons--icon">
<img alt="" src="{{site_base}}/static/{{css_variant}}/img/app_{{ keyname }}.png" />
<img alt="" src="{{site_base}}/static/{{css_variant}}/img/app_{{ keyname }}.svg" />
</span>
<span class="menu-with-icons--label">{{ text }}</span>
</a>
</p>
</div>
<script>$(function() { $('div.rsu-frontoffice-app-title').show(); });</script>
<script>
$(function() {
$('div.rsu-frontoffice-app-title').show();
var rsu_app_links = $('.rsu-frontoffice-app');
rsu_app_links.addClass("nb-of-app-is-" + rsu_app_links.length);
});
</script>
</div>
{% endif %}

View File

@ -100,8 +100,8 @@
{% if parameters.paiement_actif %}
<tr>
<td><input type="checkbox" id="checkall"></td>
<td class="amout">Montant total des factures sélectionnées</td>
<td class="amout"><strong><span id="totalamount">0,00</span> €</strong></td>
<td class="amount">Montant total des factures sélectionnées</td>
<td class="amount"><strong><span id="totalamount">0,00</span> €</strong></td>
</tr>
{% endif %}
</tbody>

View File

@ -57,7 +57,7 @@
<dd class="value"><strong>{{ qf.montant }}</strong></dd>
<dt class="label">Nature</dt>
<dd class="value"><strong>{{ qf|get:"nature-qf" }}</strong></dd>
<dd class="value">{{ qf|get:"nature-qf" }}</dd>
<dt class="label">Calculé le</dt>
<dd class="value">{{qf|get:"date-calcul"|parse_datetime|date:"d F Y"}}</dd>

View File

@ -1,4 +1,16 @@
{% extends "theme.html" %}
{% load assets %}
{% block extra_css %}
{% get_asset "page-title:background" as page_title_background %}
{% if page_title_background %}
<style>
html {
--page-title-background: url({% asset_url page_title_background %});
}
</style>
{% endif %}
{% endblock %}
{% block header-content %}
{% block nav %}{% endblock %}
@ -6,7 +18,7 @@
{% endblock %}
{% block after-header %}{% endblock %}
{% block content-pre %}
{% block content-messages %}
{% skeleton_extra_placeholder page_header %}
{% if custom_page_title != "None" %}
{% firstof custom_page_title page.title title as page_title %}
@ -19,4 +31,6 @@
{% endif %}
{% endif %}
{% end_skeleton_extra_placeholder %}
{{ block.super }}
{% endblock %}