Browse Source

header

v1
charly 3 years ago
parent
commit
43838371e6
9 changed files with 401 additions and 102 deletions
  1. +9
    -1
      assets/app/frontend/js/script.js
  2. +2
    -2
      assets/app/frontend/scss/base.scss
  3. +95
    -4
      assets/app/frontend/scss/header.scss
  4. +1
    -0
      assets/app/frontend/scss/vars.scss
  5. +145
    -71
      public/build/app-frontend.css
  6. +10
    -2
      public/build/app-frontend.js
  7. +3
    -1
      templates/frontend/base.html.twig
  8. +66
    -19
      templates/frontend/header.html.twig
  9. +70
    -2
      templates/frontend/home.html.twig

+ 9
- 1
assets/app/frontend/js/script.js View File

@@ -1,3 +1,11 @@
$(document).ready(function () {
console.log('test');
menuToggle();
});

function menuToggle() {
var box = $('.menu-content');
var button = $('.toggle');
button.on('click', function(){
box.toggle('slow');
});
}

+ 2
- 2
assets/app/frontend/scss/base.scss View File

@@ -1,3 +1,3 @@
h1 {
color: red;
#content-page {
margin-top: 150px;
}

+ 95
- 4
assets/app/frontend/scss/header.scss View File

@@ -1,9 +1,100 @@
#menu {
.navbar-toggler {
background-color: $yellow;
.menu-content {
background-color: #FFF;
display: none;
position: fixed;
height: 100%;
width: 100%;
z-index: 100;
top: 0;
left: 0;

.row-menu {
height: 100%;

.row-toggle {
height: 16%;
}

.row-list {
height: 84%;

nav {
ul {
height: 100%;
margin: 0;

li {
width: 100%;
padding-left: 20%;
padding-right: 15%;
margin-bottom: 8%;
display: inline-block;

a {
color: $green;
font-size: 50px;
font-family: dinbold;
font-weight: bold;
line-height: 50px;
}

&.contact {
margin-bottom: 5%;

a {
border: 2px solid $yellow;
padding: 10px 45px;
font-size: 25px;
}
}

.yellow-trait {
width: 20%;
height: 10px;
position: absolute;
top: 0;
right: 0;
background-color: $yellow;
}
}
}
}

.col-logo {
.logo {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
}
}
}
}

.space_colla {
color: $yellow;
.menu-fixed {
background-color: #FFF;
height: 150px;
z-index: 2;

.navbar-brand {
width: 50%;
}

.participate {
font-size: 30px;
color: #568b6f;
font-family: dinbold;
border: 2px solid #568b6f;
padding: 8px 10px;
font-weight: bold;
}

.space-collab {
color: $yellow;
font-size: 20px;
font-family: dinbold;
}
}
}

+ 1
- 0
assets/app/frontend/scss/vars.scss View File

@@ -5,6 +5,7 @@ $yellow: #fce767;
$red: #e73452;
$orange: #ffcc00;
$blue: #17428c;
$green: #568b6f;

@font-face {
font-family: 'dinregular';

+ 145
- 71
public/build/app-frontend.css
File diff suppressed because it is too large
View File


+ 10
- 2
public/build/app-frontend.js View File

@@ -47,9 +47,17 @@ __webpack_require__.r(__webpack_exports__);
/***/ (() => {

$(document).ready(function () {
console.log('test');
menuToggle();
});

function menuToggle() {
var box = $('.menu-content');
var button = $('.toggle');
button.on('click', function () {
box.toggle('slow');
});
}

/***/ }),

/***/ "./assets/app/frontend/app/app.scss":
@@ -74,4 +82,4 @@ __webpack_require__.r(__webpack_exports__);
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ }
]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsImNvbnNvbGUiLCJsb2ciXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUVBO0FBQ0E7Q0FHQTtBQUNBLHVCOzs7Ozs7Ozs7Ozs7Ozs7O0FDWkE7Ozs7Ozs7Ozs7O0FDQUFBLENBQUMsQ0FBQ0MsUUFBRCxDQUFELENBQVlDLEtBQVosQ0FBa0IsWUFBWTtBQUMxQkMsU0FBTyxDQUFDQyxHQUFSLENBQVksTUFBWjtBQUNILENBRkQsRTs7Ozs7Ozs7Ozs7O0FDQUEiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcbmltcG9ydCBcIi4uL2pzL3NjcmlwdFwiO1xuIiwiJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkge1xuICAgIGNvbnNvbGUubG9nKCd0ZXN0Jyk7XG59KTtcbiIsIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpblxuZXhwb3J0IHt9OyJdLCJzb3VyY2VSb290IjoiIn0=
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsIm1lbnVUb2dnbGUiLCJib3giLCJidXR0b24iLCJvbiIsInRvZ2dsZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtDQUdBO0FBQ0EsdUI7Ozs7Ozs7Ozs7Ozs7Ozs7QUNaQTs7Ozs7Ozs7Ozs7QUNBQUEsQ0FBQyxDQUFDQyxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFZO0FBQzFCQyxZQUFVO0FBQ2IsQ0FGRDs7QUFJQSxTQUFTQSxVQUFULEdBQXNCO0FBQ2xCLE1BQUlDLEdBQUcsR0FBR0osQ0FBQyxDQUFDLGVBQUQsQ0FBWDtBQUNBLE1BQUlLLE1BQU0sR0FBR0wsQ0FBQyxDQUFDLFNBQUQsQ0FBZDtBQUNBSyxRQUFNLENBQUNDLEVBQVAsQ0FBVSxPQUFWLEVBQW1CLFlBQVU7QUFDekJGLE9BQUcsQ0FBQ0csTUFBSixDQUFXLE1BQVg7QUFDSCxHQUZEO0FBR0gsQzs7Ozs7Ozs7Ozs7O0FDVkQiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcbmltcG9ydCBcIi4uL2pzL3NjcmlwdFwiO1xuIiwiJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkge1xuICAgIG1lbnVUb2dnbGUoKTtcbn0pO1xuXG5mdW5jdGlvbiBtZW51VG9nZ2xlKCkge1xuICAgIHZhciBib3ggPSAkKCcubWVudS1jb250ZW50Jyk7XG4gICAgdmFyIGJ1dHRvbiA9ICQoJy50b2dnbGUnKTtcbiAgICBidXR0b24ub24oJ2NsaWNrJywgZnVuY3Rpb24oKXtcbiAgICAgICAgYm94LnRvZ2dsZSgnc2xvdycpO1xuICAgIH0pO1xufSIsIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpblxuZXhwb3J0IHt9OyJdLCJzb3VyY2VSb290IjoiIn0=

+ 3
- 1
templates/frontend/base.html.twig View File

@@ -16,7 +16,9 @@
{% block header %}
{% include 'frontend/header.html.twig' %}
{% endblock %}
{% block body %}{% endblock %}
<div id="content-page">
{% block body %}{% endblock %}
</div>
{% block footer %}
{% include 'frontend/footer.html.twig' %}
{% endblock %}

+ 66
- 19
templates/frontend/header.html.twig View File

@@ -1,22 +1,69 @@
<div id="menu" class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
<div id="menu">
<div class="container-fluid menu-content">
<div class="row-menu">
<div class="row row-toggle">
<div class="col-12">
<button class="toggle" type="button">
CLOSE
</button>
</div>
</div>
<div class="row row-list">
<nav class="col-6">
<ul>
<li>
<span class="yellow-trait"></span>
<a href="" title="Accueil">
Accueil
</a>
</li>
<li>
<a href="" title="Cartographie rêvolutionnaire">
Cartographie rêvolutionnaire
</a>
</li>
<li>
<a href="" title="Planisphère des solutions">
Planisphère des solutions
</a>
</li>
<li>
<a href="" title="Ressourcerie">
Ressourcerie
</a>
</li>
<li>
<a href="" title="A propos">
A propos
</a>
</li>
<li class="contact">
<a href="" title="Contacts">
CONTACTS
</a>
</li>
</ul>
</nav>
<div class="col-6 col-logo">
<img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt="">
</div>
</div>
</div>
</div>
<nav class="navbar">
<a class="navbar-brand" href="#">
<img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt="">
</a>
<a class="participate" href="">
Participer
</a>
<a class="space_colla" href="">
Espace collaboratif
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="fixed-top menu-fixed">
<nav class="navbar">
<a class="navbar-brand" href="#">
<img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt="">
</a>
<a class="participate" href="">
PARTICIPER
</a>
<a class="space-collab" href="">
Espace collaboratif
</a>
<button class="toggle" type="button">
TOGGLE
</button>
</nav>
</div>
</div>

+ 70
- 2
templates/frontend/home.html.twig View File

@@ -4,12 +4,80 @@
{% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %}

{% block meta %}
<meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté" />
<meta name="description" content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !" />
<meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté"/>
<meta name="description"
content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !"/>
{% endblock %}

{% block body %}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis nibh non nisl ornare, ut fringilla tellus
iaculis. Maecenas in dignissim tellus, id consectetur metus. Integer et lorem vitae ante feugiat ultrices in ac
augue. Curabitur a ex id erat venenatis finibus. Pellentesque consequat imperdiet eleifend. Vivamus ornare,
mauris a lacinia consequat, mi turpis rhoncus lorem, ultricies fringilla leo metus eu enim. Vivamus maximus
justo nibh, nec ultrices tortor venenatis in. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nullam nec dui eu elit semper sodales quis ac sapien. Sed nibh mauris,
posuere non ultricies nec, malesuada quis nisl.

Sed aliquet quis risus non lobortis. Nulla dolor urna, egestas quis tempor ac, tristique non justo. Quisque non
nisi ut sapien porta dictum. Maecenas aliquam quis risus eget maximus. Etiam quis velit euismod, porttitor ex a,
molestie lectus. Donec viverra sapien quis metus vulputate, sed elementum enim suscipit. Donec semper, orci eget
dignissim convallis, purus elit hendrerit felis, eu interdum massa metus nec eros.

Vivamus maximus elementum dolor. Nulla vulputate orci id elit dignissim bibendum sodales ut nunc. Donec nec
risus varius, elementum felis vitae, facilisis arcu. Vestibulum faucibus a neque ac rhoncus. Morbi scelerisque
dignissim justo id hendrerit. Aenean ullamcorper euismod magna, in lobortis quam ornare non. Aliquam pulvinar,
quam ut posuere malesuada, nisi neque malesuada tellus, in ornare purus justo ut orci. Curabitur quis rutrum
metus.

Praesent venenatis libero nec lobortis iaculis. Etiam tortor velit, interdum sed massa commodo, vestibulum
ultrices nisl. Ut risus dui, suscipit vel eros ut, consectetur vestibulum eros. Quisque tempus rhoncus dolor
porta sagittis. Ut egestas erat quis molestie ultrices. Cras egestas ex eu velit semper efficitur. Praesent
consectetur lacinia lectus, vel efficitur mauris dignissim vel. Suspendisse pharetra elit egestas tincidunt
volutpat. In accumsan at felis nec eleifend. Suspendisse potenti. Nam mollis sodales vulputate. Cras odio justo,
congue ac turpis vitae, vulputate bibendum arcu. Cras vitae justo orci.

Sed pharetra in dolor quis vulputate. Morbi quis sapien lacinia, fermentum dui nec, fermentum ligula. Donec
rutrum, nibh vel laoreet fermentum, sapien sem cursus neque, vel elementum ex eros non lectus. Curabitur semper
egestas vehicula. Vivamus nunc mi, porttitor at fermentum sed, pretium nec tellus. Nunc dui dolor, mollis vel
felis in, vestibulum vulputate lectus. Etiam porttitor est sit amet est dictum, eget aliquam ligula suscipit.
Fusce gravida eros vel magna rutrum, vel consectetur eros consectetur. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Fusce nec porttitor felis, non condimentum ligula. Aliquam elementum auctor libero, vel
porttitor sem fermentum et. Nullam tempor faucibus tellus, in aliquet mi aliquet a.

Etiam velit orci, dictum ut risus egestas, lacinia finibus tellus. In condimentum velit id ex feugiat maximus.
Maecenas lorem purus, consequat eu luctus sit amet, rutrum at lectus. Etiam lobortis tellus et aliquam
consectetur. Morbi porta lacinia dapibus. Donec fermentum nisl vel blandit aliquam. Nullam rhoncus, lorem non
condimentum vulputate, dui est congue nisl, vel porta nulla metus id justo. Nam eu lectus tempor, viverra neque
vitae, congue quam. Mauris imperdiet libero ac odio suscipit, eget vestibulum nunc sagittis.

Fusce elit lectus, suscipit eu tortor eu, dictum tempus tellus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aliquam et eleifend odio. Suspendisse dapibus sem eget metus scelerisque ullamcorper. Sed in
eros posuere, finibus dui vulputate, tempus lacus. Sed erat est, condimentum et ex non, sollicitudin laoreet
lorem. Cras a feugiat est, a malesuada neque. Etiam fringilla risus dolor, sit amet mollis mi efficitur quis.
Etiam nec porta justo. Morbi felis libero, tempor ac congue sed, venenatis et erat. Vestibulum blandit lorem
vitae arcu dignissim rutrum.

Donec posuere placerat massa, viverra elementum quam convallis nec. Praesent quis lacus pellentesque, consequat
orci ac, convallis nisl. Vestibulum finibus ac lacus vel feugiat. Maecenas aliquet tristique augue, eu sodales
nulla pharetra nec. Nunc mauris lorem, ultrices nec consectetur id, venenatis et tortor. Proin ac condimentum
nisl, nec dictum nulla. Mauris pharetra tortor quam, at tincidunt velit molestie eu. Donec elementum elit
consequat enim mattis, id suscipit elit dignissim. Donec malesuada imperdiet augue, non euismod lectus. Mauris
pharetra elit urna, sed consequat ipsum euismod at. Etiam nec consequat augue, eget egestas turpis. Cras
interdum mauris mi, nec dapibus lorem congue vel. Pellentesque mollis risus vitae sem gravida dictum.

Donec rutrum ex at turpis auctor lacinia. Donec et massa est. Quisque erat mauris, ultricies non turpis quis,
hendrerit interdum ipsum. Curabitur mollis auctor lorem sit amet tristique. Cras tempus non lectus a egestas. Ut
a facilisis neque. Fusce sed lectus at diam auctor molestie vel ac velit. Fusce pulvinar dui vel felis lobortis
malesuada. Nulla placerat est risus, eu dictum libero sollicitudin id. Mauris dictum aliquet tortor id maximus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id dui sagittis,
semper odio vel, mattis dui. Nulla pharetra tincidunt diam, eget vulputate risus vehicula at. Phasellus
tincidunt blandit massa, maximus sollicitudin nulla sollicitudin vitae.

Nunc finibus sollicitudin aliquam. Nullam finibus velit sed arcu commodo, id tempor mi placerat. Nulla nec nunc
eleifend, lobortis lorem scelerisque, semper nisi. In sit amet metus vel urna eleifend maximus in eget ante.
Fusce hendrerit lectus libero, eget feugiat eros tincidunt dignissim. Praesent diam eros, tristique et elementum
vitae, accumsan eu erat. Phasellus urna leo, semper vitae ligula sit amet, tristique bibendum mi.
</div>
{% endblock %}

Loading…
Cancel
Save