add theme for braine-l’alleud (#51752)

This commit is contained in:
Frédéric Péters 2021-07-26 18:19:12 +02:00
parent 6ce1cff15a
commit d2b49644ed
12 changed files with 677 additions and 0 deletions

View File

@ -0,0 +1,351 @@
$logo-width: 110px;
%title {
@extend %title;
margin-bottom: 0;
}
#header {
position: relative;
h1 {
position: absolute;
top: 20px;
left: 20px;
a {
display: block;
text-indent: -10000px;
background: url(logo-mon-bla.png) top left no-repeat;
width: 110px;
height: 40px;
}
}
}
nav.site-nav {
@media screen and (max-width: $nav-mobile-limit) {
margin-top: 75px;
div.gru-nav .gru-nav-button {
border-radius: 1ex 1ex 1ex 0;
&.toggled {
border-radius: 1ex 1ex 0 0;
+ ul {
border: 2px solid $blue;
}
}
}
}
}
div#nav {
border-bottom: 5px solid #f8f8f8;
margin-bottom: 1em;
> ul {
margin-left: #{$logo-width + 40px};
@media screen and (max-width: $nav-mobile-limit) {
margin-left: 0;
}
}
li.has-submenu {
> a > span {
&::after {
font-family: FontAwesome;
padding-left: 3px;
content: "\f107"; // angle-down
}
}
}
}
div.gru-nav > ul > li a {
text-transform: uppercase;
font-weight: 600;
}
.cell, .block {
box-shadow: 0 0 5px #ccc;
}
#footer {
.cell {
box-shadow: none;
border: none;
}
}
.cell.dashboard-cell {
padding: 1em;
.cell {
margin: 0;
padding: 0;
box-shadow: none;
border: none;
}
.loading {
display: none;
}
}
.link-cell, .wcs-form-cell {
a {
display: block;
color: $darkgray;
padding: 1em;
font-weight: bold;
text-decoration: none;
span {
display: inline;
border-bottom: 2px solid $orange;
}
&:hover span {
border-bottom-width: 3px;
}
&::after {
margin-top: 0.5rem;
content: "";
display: block;
height: 1.5rem;
width: 1.5rem;
text-align: center;
color: white;
background: $orange;
border-radius: 100%;
}
}
p.description {
margin-left: 1em;
margin-right: 1em;
}
}
#footer a {
color: white;
text-decoration: underline;
}
div#rub_service.has-sidebox > h2 {
padding-left: 0.5rem;
}
#content div.profile-cell {
div.profile {
padding-top: 0;
padding-bottom: 0;
}
p.edit-link {
text-align: right;
margin-right: 1em;
}
}
.actualites-settings {
display: flex;
.actualites-meta {
flex: 1;
}
.actualites-switch {
margin-top: 1em;
input {
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
padding: 0;
position: relative;
border: 0;
outline: 0;
cursor: pointer;
overflow: initial;
$switch-width: 3.5em;
$switch-height: 1.5em;
$switch-slider-diameter: 1.75em;
&::after {
content: '';
width: $switch-width;
height: $switch-height;
display: inline-block;
background: rgba(196, 195, 195, .55);
border-radius: 1em;
clear: both;
transition: ease .3s;
}
&:checked::after {
background: $blue;
}
&::before {
content: '';
width: $switch-slider-diameter;
height: $switch-slider-diameter;
display: block;
position: absolute;
left: 0;
top: #{($switch-height - $switch-slider-diameter) / 2};
border-radius: 50%;
background: #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .6);
transition: ease .3s;
}
&:checked::before {
left: #{$switch-width - $switch-slider-diameter};
box-shadow: -1px 1px 3px rgba(0,0,0,.6)
}
}
}
}
.newsitem {
display: flex;
margin-bottom: 1ex;
img {
border-radius: $button-border-radius;
flex: 0;
width: 160px;
}
div {
flex: 1;
margin-left: 1em;
h3 {
margin-top: 1ex;
margin-bottom: 0;
a {
color: black;
border-bottom: 2px solid $orange;
&:hover {
border-bottom-width: 3px;
text-decoration: none;
}
}
}
h4 {
color: $darkgray;
margin: 0;
}
}
}
h1#logo.dashboard-change {
animation-name: favorite_pulse_animation;
animation-duration: 3000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes favorite_pulse_animation {
0% { transform: scale(1); }
20% { transform: scale(1.2); }
40% { transform: scale(1); }
60% { transform: scale(1); }
80% { transform: scale(1.2); }
100% { transform: scale(1); }
}
div.links-list ul > li > a {
color: $darkgray;
.form-title {
border-bottom: 2px solid $orange;
}
&::after {
content: "";
color: $orange;
display: inline-block;
height: 1.5rem;
width: 1.5rem;
text-align: center;
margin-left: 1rem;
}
&:hover::after {
color: white;
background: $orange;
border-radius: 100%;
}
}
div.link-cell.has-asset-picture {
border: none;
box-shadow: none;
picture img {
max-height: 100%;
max-width: 100%;
border-radius: 1ex 1ex 1ex 0;
}
picture {
overflow: hidden;
height: 130px;
position: relative;
display: block;
&::before {
border-radius: 1ex 1ex 1ex 0;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $orange;
opacity: 0;
transition: opacity linear 0.2s;
}
}
&:hover picture {
&::before {
opacity: 0.5;
}
&::after {
position: absolute;
top: calc(50% - 1.25rem);
left: calc(50% - 1.25rem);
content: "";
display: block;
height: 2.5rem;
line-height: 2.2rem;
width: 2.5rem;
text-align: center;
color: white;
border: 1px solid white;
border-radius: 100%;
}
}
a.asset-link {
padding: 0;
}
a {
padding-top: 0;
padding-left: 0;
&::after {
content: none;
}
}
}
div.gru-content .cell.no-borders {
border: none;
box-shadow: none;
div.page-title {
margin-top: -1em;
height: 260px;
background: none top right no-repeat;
display: flex;
justify-content: center;
flex-direction: column;
h1 {
font-size: 42px;
text-transform: uppercase;
max-width: 10em;
line-height: 1.1;
}
}
}
span.required {
color: $orange;
}
div#tracking-code h3 {
padding-left: 0.3rem;
}
.wcs-step.current {
border-radius: $cell-border-radius;
}
#evolution-log.section > h2,
#summary.section > h2 {
border-bottom: 2px solid $orange;
}

View File

@ -0,0 +1,40 @@
@import '../includes/fonts/ptsans';
@import '../includes/fonts/opensans';
$blue: #008fd2;
$orange: #f9b300;
$darkgray: #383838;
$primary-color: $blue;
$font-family: "Open Sans", arial, sans-serif;
$title-font-family: "PT Sans", sans-serif;
$nav-color: $darkgray;
$nav-background: white;
$nav-item-selected-background: $nav-background;
$nav-item-selected-color: black;
$nav-item-hover-background: $nav-background;
$nav-item-hover-color: black;
$nav-submenu-background: $nav-background;
$nav-submenu-color: $nav-color;
$nav-button-background: $blue;
$nav-button-color: white;
$nav-border-color: transparent;
$nav-mobile-menu-background: white;
$title-background: transparent;
$title-font-size: 24px;
$cell-title-cover-border: false;
$cell-border-radius: 1ex 1ex 1ex 0;
$button-border-radius: $cell-border-radius;
$button-background: $blue;
$footer-background: #111111;
$widget-focus-border: 1px solid $blue;
$buttons-order: previous, cancel (grow), submit;
$wcs-step-current-background: $orange;
$wcs-step-current-color: white;

View File

@ -0,0 +1,63 @@
{
"label" : "Braine-lAlleud",
"settings" : {
"combo" : {
"COMBO_ASSET_SLOTS.update" : {
"header:background" : {
"label" : "Têtière : fond"
},
"header:logo" : {
"label" : "Têtière : logo"
}
},
"COMBO_CELL_ASSET_SLOTS.update" : {
"data_linkcell" : {
"picture" : {
"prefix" : "Image"
}
},
"data_textcell" : {
"picture" : {
"prefix" : "Image titre"
}
}
},
"COMBO_CELL_TEMPLATES.update" : {
"data_textcell" : {
"page-title" : {
"extra-css-classes" : "no-borders",
"label" : "Titre de page",
"template" : "combo/cells/page-title.html"
}
}
},
"JSON_CELL_TYPES.update" : {
"actualites" : {
"additional-data" : [
{
"cache_duration" : 60,
"key" : "actus",
"url" : "{{ json.data|get:slug|get:'href' }}"
}
],
"cache_duration" : 60,
"force_async" : false,
"form" : [
{
"label" : "Identifiant du type dactualités",
"type" : "string",
"varname" : "slug"
}
],
"name" : "Actualités",
"url" : "{{ braine_actualites_json_url }}"
}
}
}
},
"variables" : {
"cell_picture_size" : "400x220",
"include_top_links" : false,
"theme_color" : "#008fd2"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,95 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg2"
xml:space="preserve"
width="1020"
height="372.33334"
viewBox="0 0 1020 372.33334"
sodipodi:docname="logo-mon-bla.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
inkscape:export-filename="/home/fred/src/eo/publik-base-theme/static/braine-l-alleud/logo-mon-bla.png"
inkscape:export-xdpi="10.31"
inkscape:export-ydpi="10.31"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath20"><path
d="M 175.535,2493.4 V 856.289 C 342.926,763.27 696.41,718.238 1030.11,919.57 943.801,442.082 574.508,276 219.145,193.332 c 0,0 1018.265,-376.633 1390.635,576.309 1.36,0.109 2.61,0.281 4.03,0.339 l 637.21,1729.22 c -205.54,110.36 -523.95,154.99 -1020.2,154.99 -503.761,0 -848.437,-45.94 -1055.285,-160.79"
id="path18" /></clipPath><radialGradient
fx="0"
fy="0"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1257.06,1885.59,1885.59,-1257.06,432.565,720.65)"
spreadMethod="pad"
id="radialGradient30"><stop
style="stop-opacity:1;stop-color:#ffdb00"
offset="0"
id="stop22" /><stop
style="stop-opacity:1;stop-color:#ffdb00"
offset="0.33631388"
id="stop24" /><stop
style="stop-opacity:1;stop-color:#fab400"
offset="0.743178"
id="stop26" /><stop
style="stop-opacity:1;stop-color:#fab400"
offset="1"
id="stop28" /></radialGradient></defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="836"
id="namedview4"
showgrid="false"
inkscape:zoom="0.58081502"
inkscape:cx="522.14418"
inkscape:cy="118.40055"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="g10"
inkscape:document-rotation="0" /><g
id="g10"
inkscape:groupmode="layer"
inkscape:label="ink_ext_XXXXXX"
transform="matrix(1.3333333,0,0,-1.3333333,0,372.33333)"><g
id="g12"
transform="scale(0.1)"><g
id="g14"><g
id="g16"
clip-path="url(#clipPath20)"><path
d="M 175.535,2493.4 V 856.289 C 342.926,763.27 696.41,718.238 1030.11,919.57 943.801,442.082 574.508,276 219.145,193.332 c 0,0 1018.265,-376.633 1390.635,576.309 1.36,0.109 2.61,0.281 4.03,0.339 l 637.21,1729.22 c -205.54,110.36 -523.95,154.99 -1020.2,154.99 -503.761,0 -848.437,-45.94 -1055.285,-160.79"
style="fill:url(#radialGradient30);fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path32" /></g></g><path
d="m 714.066,1568.75 c 0,-148.16 -63.746,-268.26 -142.378,-268.26 -78.637,0 -142.383,120.1 -142.383,268.26 0,148.15 63.746,268.26 142.383,268.26 78.632,0 142.378,-120.11 142.378,-268.26"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path34" /></g><text
xml:space="preserve"
style="font-size:160px;line-height:125%;font-family:'PT Sans';-inkscape-font-specification:'PT Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;stroke:#000000;stroke-width:0.75px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="257.96021"
y="-100.34012"
id="text844"
transform="scale(1,-1)"><tspan
sodipodi:role="line"
id="tspan842"
x="257.96021"
y="-100.34012"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:160px;font-family:'PT Sans Narrow';-inkscape-font-specification:'PT Sans Narrow';fill:#000000;stroke-width:0.75px">Mon BLA</tspan></text></g></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@ -0,0 +1,5 @@
@charset "UTF-8";
@import 'vars';
@import '../includes/publik';
@import 'custom';

View File

@ -0,0 +1,5 @@
{% load assets %}
{% get_asset cell=cell type='picture' as asset %}
<div class="page-title" style="background-image: linear-gradient(to right, white 0%, white 20em, rgba(255, 255, 255, 0) 40em), url({% asset_url asset size="860x260" crop="right" upscale=False %})">
{{text}}
</div>

View File

@ -0,0 +1,78 @@
{% load dashboard thumbnail %}
{% if not in_dashboard %}
{% with actualites=json.data|get:slug %}
<div class="actualites-settings">
<div class="actualites-meta">
<h2>{{actualites.label}}</h2>
<div>{{actualites.description}}</p></div>
</div>
<div class="actualites-switch">
{% with tile=cell|as_dashboard_cell:request.user %}
<input type="checkbox" id="actualites-id-{{slug}}"
data-add-tile-url="{% url 'combo-dashboard-add-tile' cell_reference=cell.get_reference %}"
{% if tile %}
checked
data-remove-tile-url="{% url 'combo-dashboard-remove-tile' cell_reference=tile.cell.get_reference %}"
{% endif %}
>
{% endwith %}
<script>
$('#actualites-id-{{slug}}').on('change', function() {
if ($(this).is(':checked')) {
var $checkbox = $(this);
$.ajax({
url: $(this).data('add-tile-url'),
success: function(data) {
$checkbox.data('remove-tile-url', data.cell_data.remove_url);
$('h1#logo').addClass('dashboard-change').on('animationend', function() { $('h1#logo').removeClass('dashboard-change')});
}
});
} else {
$.ajax({
url: $(this).data('remove-tile-url'),
success: function(data) {}
});
}
});
</script>
</div>
</div>
{% endwith %}
{% else %}
{% with actualites=json.data|get:slug %}
{% for actu in actus.data %}
<div class="newsitem" data-date="{{ actu.date }}">
{% thumbnail actu.image "160x160" crop="50% 25%" as im %}
<img src="{{ im.url }}" alt="" />
{% endthumbnail %}
<div>
<h3><a href="{{actu.href}}">{{actu.title}}</a></h3>
<h4>{{actualites.label}} - {{ actu.date|parse_date|date:"d/m/Y" }}</h4>
<p>{{actu.description}}</p>
</div>
</div>
{% endfor %}
{% endwith %}
<script>
jQuery.fn.order = function(asc, fn) { // via https://jsfiddle.net/mindplay/H2mrp/
fn = fn || function (el) {
return $(el).text().replace(/^\s+|\s+$/g, '');
};
var T = asc !== false ? 1 : -1,
F = asc !== false ? -1 : 1;
this.sort(function (a, b) {
a = fn(a), b = fn(b);
if (a == b) return 0;
return a < b ? F : T;
});
this.each(function (i) {
this.parentNode.appendChild(this);
});
};
// move newsitems as ~direct children of the dashboard cell, and sort all of
// them (maybe from several categories on date
// (note it won't work anymore once we add a separate part for events)
$('.newsitem').detach().appendTo($('.dashboard-cell > div'));
$('.newsitem').order(false, function(el) { return $(el).data('date'); });
</script>
{% endif %}

View File

@ -0,0 +1,9 @@
{% load assets %}
{% get_asset cell=cell type='picture' as asset %}
{% block cell-content %}
{% if asset %}<a class="asset-link" href="{{url}}">{% include "combo/asset_picture_fragment.html" %}</a>{% endif %}
<a href="{{url}}"><span>{{title}}</span></a>
{% if description %}
<p class="description">{{ description }}</p>
{% endif %}
{% endblock %}

View File

@ -0,0 +1,18 @@
{% extends "combo/page_template.html" %}
{% load combo %}
{% block menu %}
{{ block.super }}
{# replace "mon-compte" menu item by user name #}
{% skeleton_extra_placeholder "user-script-infos" %}
<script>
var $last_menu_item = $('#nav > ul > li:last-child');
{% if user.is_authenticated %}
$last_menu_item.find('> a span').text("{{ user.first_name|escapejs }}");
{% else %}
$last_menu_item.find('ul').remove();
{% endif %}
$('#nav ul ul').parent('li').addClass('has-submenu');
</script>
{% end_skeleton_extra_placeholder %}
{% endblock %}

View File

@ -0,0 +1,6 @@
{% extends "combo/profile.html" %}
{% block cell-content %}
{{ block.super }}
<p class="edit-link"><a class="pk-button" href="{{idp_url}}accounts/edit/">Modifier mes infos</a></p>
{% endblock %}

View File

@ -0,0 +1,7 @@
{% block cell-content %}
{% include "combo/asset_picture_fragment.html" %}
<a href="{{url}}"><span>{{title}}</span></a>
{% if description %}
<p class="description">{{ description }}</p>
{% endif %}
{% endblock %}