add initial draft of lille
This commit is contained in:
parent
388db66517
commit
2e758655a5
|
|
@ -0,0 +1,340 @@
|
|||
$header-height: 180px;
|
||||
$logo-width: 390px;
|
||||
|
||||
header {
|
||||
z-index: 200;
|
||||
background: white;
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 250;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: $header-height;
|
||||
#top a {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-top: 1rem;
|
||||
height: $header-height;
|
||||
width: $logo-width;
|
||||
text-align: center;
|
||||
background: $primary-color url(img/lille-logo.png) bottom 1rem left 50% no-repeat;
|
||||
background-size: 150px;
|
||||
color: white;
|
||||
&::after {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: transparent;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
right: 60px;
|
||||
bottom: -60px;
|
||||
border: 30px solid $primary-color;
|
||||
border-color: $primary-color $primary-color transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#lille-user-info {
|
||||
background: url(img/comptepersonnel-lille.png) 0 5px no-repeat;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 120px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
min-height: 50px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.gru-nav-wrapper {
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
div.gru-nav {
|
||||
.gru-nav-button .icon-bar {
|
||||
border-width: 3px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
&.toggled .gru-nav-button .icon-bar {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.gru-nav .gru-nav-button {
|
||||
top: -90px;
|
||||
+ ul {
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
width: $width;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $mobile-limit - 1px) {
|
||||
#pwa-navigation {
|
||||
display: block;
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
height: auto;
|
||||
> div {
|
||||
width: $width - $logo-width;
|
||||
background: $nav-mobile-bottom-bar-background;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: #{0px - $nav-mobile-bottom-bar-height};
|
||||
}
|
||||
ul li {
|
||||
max-width: 170px;
|
||||
margin: 0;
|
||||
a {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
background-position: 15px 50%;
|
||||
padding-top: 15px;
|
||||
span {
|
||||
line-height: 120%;
|
||||
text-align: left;
|
||||
padding-left: 35px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
height: 40px;
|
||||
}
|
||||
span.badge {
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pwa-navigation ~ footer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#content-top {
|
||||
> div.cell {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
width: 100%;
|
||||
margin-top: -1px;
|
||||
div.carrousel-nav {
|
||||
top: 120px;
|
||||
left: 55px;
|
||||
text-align: left;
|
||||
}
|
||||
div.carrousel-content input + div div.carrousel-item div.carrousel-item-content {
|
||||
bottom: auto;
|
||||
top: 180px;
|
||||
left: 60px;
|
||||
max-width: 50%;
|
||||
line-height: 120%;
|
||||
strong {
|
||||
font-size: 40px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
div.trackingcodeinputcell {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
margin: -40px 50px 0 50px;
|
||||
background: white url(img/codebarre.png) 50px 25px no-repeat;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
margin: -40px 10px 0 10px;
|
||||
}
|
||||
form {
|
||||
width: 30%;
|
||||
margin-left: 140px;
|
||||
float: left;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
h2 {
|
||||
padding: 0;
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
input {
|
||||
width: 12rem;
|
||||
border-width: 0 0 1px 0;
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
margin-right: 9px;
|
||||
}
|
||||
button {
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
border: 0;
|
||||
top: 25px;
|
||||
bottom: 25px;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
font-size: 35px;
|
||||
&::after {
|
||||
content: "\f054"; // chevron-right
|
||||
font-family: FontAwesome;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
width: 50%;
|
||||
float: right;
|
||||
margin-right: 50px;
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
div.textcell {
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
letter-spacing: 4px;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
}
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
padding-bottom: 30px;
|
||||
background: url(img/fleches-bas.png) bottom center no-repeat;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#columns {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-template-homepage {
|
||||
#columns {
|
||||
margin-top: 0rem;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
#left, #middle, #right {
|
||||
float: left;
|
||||
width: 33%;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
.cell {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
div.menucell {
|
||||
margin-top: -2rem;
|
||||
background: red;
|
||||
a {
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#content div.wcsformsofcategorycell {
|
||||
position: relative;
|
||||
h2 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: transparent;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
padding-top: 40px;
|
||||
height: 130px;
|
||||
&::after {
|
||||
content: "";
|
||||
height: 3px;
|
||||
width: 45px;
|
||||
margin-top: 10px;
|
||||
background: white;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
div.intro, div.description {
|
||||
display: none;
|
||||
}
|
||||
ul > li a {
|
||||
padding-left: 70px;
|
||||
text-transform: uppercase;
|
||||
color: #454545;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul > li.more-items a {
|
||||
padding-left: 0;
|
||||
}
|
||||
background: transparent;
|
||||
border: none;
|
||||
& > div > div {
|
||||
position: relative;
|
||||
margin: -10px 1rem 0 1rem;
|
||||
li {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#page div#main-content-wrapper {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@import '../includes/font-lato';
|
||||
|
||||
$primary-color: #ff0000;
|
||||
$font-size: 20px;
|
||||
$font-family: Lato, sans-serif;
|
||||
$link-color: $primary-color;
|
||||
|
||||
$body-background: #e5e5e5;
|
||||
$width: 1200px;
|
||||
$footer-background: white;
|
||||
$footer-color: black;
|
||||
$nav-mobile-limit: 50000px;
|
||||
$nav-border-color: white;
|
||||
$nav-after-image: false;
|
||||
|
||||
$nav-button-background: white;
|
||||
$nav-button-color: #464646;
|
||||
$nav-active-color: $primary-color;
|
||||
|
||||
$nav-mobile-bottom-bar-background: #464646;
|
||||
$nav-mobile-bottom-bar-color: #eaeaea;
|
||||
$nav-mobile-bottom-bar-height: 60px;
|
||||
|
||||
$cell-title-cover-border: false;
|
||||
|
||||
$carrousel-height: 440px;
|
||||
$carrousel-text-position: bottom-left;
|
||||
$carrousel-arrows: none;
|
||||
$carrousel-navigation-bullet-color: $primary-color;
|
||||
$carrousel-navigation-bullet-size: 10px;
|
||||
$carrousel-navigation-bullet-border: 4px solid white;
|
||||
|
||||
$button-background: $primary-color;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Lille",
|
||||
"variables": {
|
||||
"include_top_links": false,
|
||||
"pwa_display": "standalone",
|
||||
"theme_color": "#ff0000"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{% extends "../../combo/page_template.html" %}
|
||||
{% load combo %}
|
||||
|
||||
{% block header-top %}
|
||||
<div id="lille-user-info">
|
||||
{% skeleton_extra_placeholder lille-user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
<a class="logout" href="{% url 'auth_logout' %}">{{ user.first_name }}<br>{{user.last_name }}</a>
|
||||
{% else %}
|
||||
<a class="login" href="{% url 'auth_login' %}">Compte<br>personnel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% end_skeleton_extra_placeholder %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load combo i18n %}
|
||||
|
||||
{% block content-pre %}
|
||||
<div id="content-top">
|
||||
{% placeholder "top" name="Haut" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block combo-content %}
|
||||
<div id="columns">
|
||||
<div id="left">
|
||||
{% trans "Left column" as name %}
|
||||
{% placeholder "content" name=name %}
|
||||
</div>
|
||||
<div id="middle">
|
||||
{% trans "Middle column" as name %}
|
||||
{% placeholder "middle" name=name %}
|
||||
</div>
|
||||
<div id="right">
|
||||
{% trans "Right column" as name %}
|
||||
{% placeholder "right" name=name %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{% load i18n %}
|
||||
{% block cell-content %}
|
||||
<div class="wcs-tracking-code-input">
|
||||
<form data-wcs-url="{{ url }}" method="post" action="{{ site_base }}{% url 'wcs-tracking-code' %}">
|
||||
<h2>Code de suivi</h2>
|
||||
<input id="_cell_url_{{ cell.id }}" name="url" value="" type="hidden"/>
|
||||
<input name="cell" value="{{ cell.id }}" type="hidden"/>
|
||||
<div id="_cell_error_{{ cell.id }}" class="errornotice" style="display: none">
|
||||
{% trans "The tracking code could not been found." %}
|
||||
</div>
|
||||
<input required id="tracking-code" name="code" placeholder="{% trans 'ex: CNPHNTFB' %}"/>
|
||||
<button></button>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#_cell_url_{{ cell.id }}').val(window.location);
|
||||
if (window.location.search.indexOf('unknown-tracking-code') != -1) {
|
||||
$('#_cell_error_{{ cell.id }}').show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</form>
|
||||
<p>
|
||||
Un code de suivi est associé à vos demandes pour suivre leur traitement et
|
||||
faciliter les échanges avec les services de la ville.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue