metz-metropole: add custom page for "portail elus" (#40773)
This commit is contained in:
parent
9b41ed1967
commit
36310ce0bf
|
|
@ -0,0 +1,225 @@
|
|||
.page-template-homepage_elus {
|
||||
#banner-wrapper {
|
||||
border-bottom: 5px solid $aquamarine;
|
||||
margin-bottom: 0;
|
||||
background: #1b4e61 url(/assets/header:background-elus) top center no-repeat;
|
||||
height: 270px;
|
||||
#banner .title {
|
||||
height: 270px;
|
||||
background: url(img/portail-elus.png) top 40px left 0 no-repeat;
|
||||
h1, span {
|
||||
@include sr-only();
|
||||
}
|
||||
}
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
height: 110px;
|
||||
#banner .title {
|
||||
height: 110px;
|
||||
background-position: top 10px left 20px;
|
||||
background-size: auto 80px;
|
||||
}
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
#content-top-wrapper {
|
||||
background: white;
|
||||
}
|
||||
#idea { // from footer
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#carrousel {
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: $aquamarine;
|
||||
}
|
||||
}
|
||||
div.carrousel-content {
|
||||
input + div div.carrousel-item {
|
||||
background-color: $aquamarine !important;
|
||||
}
|
||||
}
|
||||
|
||||
div#up a {
|
||||
background: url(img/FLECHE-elus.svg);
|
||||
}
|
||||
|
||||
.link-cell.metropole a.big-image-link {
|
||||
background-color: #46acc3;
|
||||
border-color: #46acc3;
|
||||
}
|
||||
.link-cell.commune a.big-image-link {
|
||||
background-color: #1b4e61;
|
||||
border-color: #1b4e61;
|
||||
}
|
||||
.link-cell.favori a.big-image-link {
|
||||
background-color: #7a46d9;
|
||||
border-color: #7a46d9;
|
||||
}
|
||||
.link-cell a.big-image-link {
|
||||
background-position : bottom 60px left 50%;
|
||||
div strong {
|
||||
top: 180px;
|
||||
color: white;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
top: 120px;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
outline: 4px solid $blue;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
.link-cell {
|
||||
position: relative;
|
||||
button {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.2rem 0.5rem;
|
||||
&::before {
|
||||
content: "\f006"; // star-o
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
box-shadow: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
&::before {
|
||||
content: "\f005"; // star
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.favori button::before {
|
||||
content: "\f005"; // star
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#filter-view {
|
||||
position: relative;
|
||||
width: $width;
|
||||
max-width: 100vw;
|
||||
margin: 0px auto 20px auto;
|
||||
#filters {
|
||||
display: flex;
|
||||
}
|
||||
button {
|
||||
background: white;
|
||||
padding: 0 30px 0 0.5em;
|
||||
border: none;
|
||||
width: 20%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
margin-right: 1em;
|
||||
line-height: 110%;
|
||||
background: url(img/bouton-plus.png) right 0.5em top 50% no-repeat;
|
||||
background-size: 30px;
|
||||
cursor: pointer;
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
&:hover {
|
||||
outline: 4px solid $blue;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
&.filtrer {
|
||||
background: white url(img/filtrer.png) left 0.5em top 50% no-repeat;
|
||||
background-size: 40px;
|
||||
padding: 0 0.5em 0 60px;
|
||||
color: $darkblue;
|
||||
}
|
||||
&.metropole {
|
||||
background-color: #46acc3;
|
||||
color: white;
|
||||
}
|
||||
&.commune {
|
||||
background-color: #1b4e61;
|
||||
color: white;
|
||||
}
|
||||
&.favoris {
|
||||
background-color: #7a46d9;
|
||||
color: white;
|
||||
span::before {
|
||||
content: "\f005"; // star
|
||||
font-family: FontAwesome;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
&.tout {
|
||||
color: #1b4e61;
|
||||
background: url(img/reload.png) left 0.5em top 50% no-repeat;
|
||||
padding-left: 60px;
|
||||
background-size: 40px;
|
||||
}
|
||||
}
|
||||
&.with-filters button.filtrer {
|
||||
background: $aquamarine url(img/filtrer-active.png) left 0.5em top 50% no-repeat;
|
||||
background-size: 40px;
|
||||
color: white;
|
||||
}
|
||||
div.search {
|
||||
display: flex;
|
||||
input, button {
|
||||
height: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 1em 1em;
|
||||
}
|
||||
input {
|
||||
background: #ebebeb;
|
||||
}
|
||||
button {
|
||||
background: #c9c9c9 url(img/recherche.png) center center no-repeat;
|
||||
background-size: 50%;
|
||||
}
|
||||
}
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
border-bottom: 2px solid $darkblue;
|
||||
button {
|
||||
height: 4em;
|
||||
margin: 0;
|
||||
}
|
||||
button.search {
|
||||
width: 4em;
|
||||
max-width: 4em;
|
||||
}
|
||||
#filters {
|
||||
justify-content: space-between;
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
#mobile-filters {
|
||||
display: none;
|
||||
button {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
}
|
||||
}
|
||||
&.with-filters #mobile-filters {
|
||||
display: block;
|
||||
}
|
||||
&.with-search {
|
||||
div.search {
|
||||
flex: 1;
|
||||
height: 4em;
|
||||
}
|
||||
#filters input {
|
||||
display: block;
|
||||
flex: 2;
|
||||
}
|
||||
#filters > button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ $blue: #45abc2;
|
|||
$darkblue: #1b4e61;
|
||||
$yellow: #fcc14b;
|
||||
$green: #37bd9c;
|
||||
|
||||
$aquamarine: #66dca8;
|
||||
|
||||
$border-radius: 3px;
|
||||
$font-family: "Now Alt", sans-serif;
|
||||
|
|
@ -71,4 +71,4 @@ $wcs-step-border-bottom: 1px solid #ccc;
|
|||
$wcs-step-current-border-bottom: 1px solid $yellow;
|
||||
$wcs-step-current-color: #fff;
|
||||
$wcs-step-background: #fff;
|
||||
$wcs-step-current-background: $yellow;
|
||||
$wcs-step-current-background: $yellow;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,19 @@
|
|||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:background": { "label": "Têtière : fond" }
|
||||
"header:background": { "label": "Têtière : fond" },
|
||||
"header:background-elus": { "label": "Têtière : fond (portail élus)" }
|
||||
},
|
||||
"COMBO_CELL_ASSET_SLOTS.update": {
|
||||
"data_linkcell": {
|
||||
"picture": {"prefix": "Image"}
|
||||
}
|
||||
},
|
||||
"COMBO_PUBLIC_TEMPLATES.update": {
|
||||
"homepage_elus": {
|
||||
"name": "Page portail élus",
|
||||
"template": "combo/page_template_homepage_elus.html"
|
||||
}
|
||||
},
|
||||
"WCS_FORM_ASSET_SLOTS": {
|
||||
"logo": {
|
||||
|
|
@ -17,6 +29,23 @@
|
|||
"COMBO_MAP_DEFAULT_POSITION": {
|
||||
"lat": "49.1049",
|
||||
"lng": "6.1534"
|
||||
},
|
||||
"JSON_CELL_TYPES.update": {
|
||||
"elus-favorites": {
|
||||
"url": "{{ favoris_elus_url }}data/?name_id={{ user_nameid}}",
|
||||
"name": "Favoris sur le portail élus",
|
||||
"cache_duration": 0,
|
||||
"actions": {
|
||||
"create": {
|
||||
"url": "{{ favoris_elus_url }}data/create?name_id={{ user_nameid}}",
|
||||
"response": "raw"
|
||||
},
|
||||
"delete": {
|
||||
"url": "{{ favoris_elus_url }}data/{{ id }}/delete?name_id={{ user_nameid}}",
|
||||
"response": "raw"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,93 @@
|
|||
// from django/contrib/admin/static/admin/js/urlify.js
|
||||
var LATIN_MAP = {
|
||||
'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE',
|
||||
'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I',
|
||||
'Î': 'I', 'Ï': 'I', 'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O',
|
||||
'Õ': 'O', 'Ö': 'O', 'Ő': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U',
|
||||
'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', 'Ÿ': 'Y', 'ß': 'ss', 'à': 'a',
|
||||
'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c',
|
||||
'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i',
|
||||
'ï': 'i', 'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o',
|
||||
'ö': 'o', 'ő': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u',
|
||||
'ű': 'u', 'ý': 'y', 'þ': 'th', 'ÿ': 'y'
|
||||
};
|
||||
|
||||
function downcode(string) {
|
||||
return string.toLowerCase().replace(/[^A-Za-z0-9\[\] ]/g,function(a){ return LATIN_MAP[a]||a })
|
||||
};
|
||||
|
||||
$(function() {
|
||||
if (navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.indexOf("Trident") > 0) {
|
||||
$('.page-signalements .gru-content a.big-image-link').css('background-position', 'bottom 40px left 50%');
|
||||
$('.page-index .gru-content a.big-image-link').css('background-position', 'top -20px left 50%');
|
||||
}
|
||||
|
||||
// elus page
|
||||
$('button.metropole').on('click', function() {
|
||||
$('#columns').removeClass();
|
||||
$('#filter-view input').val('');
|
||||
$('#mobile-filters').hide();
|
||||
$('#columns .cell').hide();
|
||||
$('#columns .cell.metropole').show();
|
||||
});
|
||||
$('button.commune').on('click', function() {
|
||||
$('#columns').removeClass();
|
||||
$('#filter-view input').val('');
|
||||
$('#mobile-filters').hide();
|
||||
$('#columns .cell').hide();
|
||||
$('#columns .cell.commune').show();
|
||||
});
|
||||
$('button.favoris').on('click', function() {
|
||||
$('#columns').removeClass().addClass('display-favoris');
|
||||
$('#filter-view input').val('');
|
||||
$('#mobile-filters').hide();
|
||||
$('#columns .cell').hide();
|
||||
$('#columns .cell.favori').show();
|
||||
});
|
||||
$('button.tout').on('click', function() {
|
||||
$('#columns').removeClass();
|
||||
$('#filter-view input').val('');
|
||||
$('#columns .cell').show();
|
||||
});
|
||||
$('button.search').on('click', function() {
|
||||
$('#filter-view').removeClass('with-filters');
|
||||
$('#filter-view').toggleClass('with-search');
|
||||
$('#filter-view input').focus();
|
||||
});
|
||||
|
||||
var mql = window.matchMedia("screen and (max-width: 800px)");
|
||||
if (mql.matches) { /* on mobile */
|
||||
/* split content top and move carrousel to the bottom */
|
||||
var $carrousel = $('.content-top #carrousel').detach();
|
||||
$('<div class="content-top"></div>').prependTo($('#footer'));
|
||||
$('#footer .content-top').append($carrousel);
|
||||
/* elus filter */
|
||||
var $elus_filters = $('<div id="mobile-filters"></div>');
|
||||
$('#filter-view button.desktop-only').detach().removeClass('desktop-only').appendTo($elus_filters);
|
||||
$elus_filters.appendTo($('#filter-view'));
|
||||
$('button.filtrer').on('click', function() {
|
||||
$('#filter-view').toggleClass('with-filters');
|
||||
});
|
||||
}
|
||||
|
||||
$('#filter-view input').on('change keyup paste', function(e) {
|
||||
if (e.keyCode == 13) { // enter
|
||||
$(this).blur();
|
||||
return false;
|
||||
}
|
||||
var q = downcode($(this).val());
|
||||
if (q) {
|
||||
$('#columns .cell').each(function() {
|
||||
var cell_text = downcode($(this).text());
|
||||
if (cell_text.search(q) == -1) {
|
||||
$(this).hide();
|
||||
} else {
|
||||
$(this).show();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('#columns .link-cell').show();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 76.42 78.95" style="enable-background:new 0 0 76.42 78.95;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#66dca8;}
|
||||
.st1{fill:none;stroke:#1D4B5D;stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<polygon class="st0" points="0,44.32 55.39,78.95 76.42,42.19 41.02,0 "/>
|
||||
<line class="st1" x1="41.08" y1="51.88" x2="41.08" y2="26.35"/>
|
||||
<polyline class="st1" points="54.12,35.44 41.42,25.47 28.72,35.44 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 746 B |
Binary file not shown.
|
After Width: | Height: | Size: 874 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -3,3 +3,4 @@
|
|||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
@import 'elus';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
{% if cell.link_page and cell.link_page.picture %}
|
||||
{% load assets %}
|
||||
{% get_asset cell=cell type='picture' as asset %}
|
||||
{% if asset.asset.url %}
|
||||
<a class="big-image-link" href="{{url}}" style="background-image: url({{asset.asset.url}})">
|
||||
<div>
|
||||
<strong>{{ title }}</strong>
|
||||
{% if cell.link_page.description %}<p>{{ cell.link_page.description }}</p>{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% elif cell.link_page and cell.link_page.picture %}
|
||||
<a class="big-image-link" href="{{url}}" style="background-image: url({{cell.link_page.picture.url}})">
|
||||
<div>
|
||||
<strong>{{ title }}</strong>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@
|
|||
<div id="banner-wrapper">
|
||||
<div id="banner">
|
||||
<div class="title">
|
||||
{% block title-content %}
|
||||
<h1><a href="{{portal_url}}">Connect Metz</a></h1>
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block topside %}
|
||||
{% skeleton_extra_placeholder topside %}
|
||||
|
|
@ -29,4 +31,3 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load combo i18n %}
|
||||
|
||||
{% block title-content %}
|
||||
<h1>Portail élus</h1>
|
||||
<span>Metz Métropole et ses communes</span>
|
||||
{% endblock %}
|
||||
|
||||
{% block topside %}
|
||||
{% endblock %}
|
||||
|
||||
{% block before-main-content %}
|
||||
{{ block.super }}
|
||||
<div id="content-top-wrapper">
|
||||
<div class="content-top">
|
||||
{% placeholder "top" name="Haut" %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="filter-view">
|
||||
<div id="filters">
|
||||
<button class="filtrer mobile-only"><span>Filtrer</span></button>
|
||||
<button class="metropole desktop-only"><span>Les applications métropolitaines</span></button>
|
||||
<button class="commune desktop-only"><span>Les applications communales</span></button>
|
||||
<button class="favoris desktop-only"><span>Mes favoris</span></button>
|
||||
<button class="tout"><span>Tout <br>afficher</span></button>
|
||||
<div class="search"><input placeholder="Rechercher" type="search"><button class="search"><span class="sr-only">Valider</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue