arrow to the top

This commit is contained in:
ouidade 2024-03-05 22:56:25 +01:00
parent d5b0efa78b
commit 28a2b63940
7 changed files with 140 additions and 48 deletions

View File

@ -283,6 +283,26 @@ header {
header .open-block.opened > div > span:nth-child(3) { header .open-block.opened > div > span:nth-child(3) {
display: none; } display: none; }
footer span.totop {
display: inline-flex;
width: 100vw; }
footer span.totop #toTop {
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem; }
footer span.totop #toTop .fa-arrow-up {
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
width: 3rem;
height: 2rem;
display: inline-block;
text-align: top; }
footer span.totop #toTop .fa-arrow-up .fa {
color: #fff; }
.footer { .footer {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
@ -392,23 +412,6 @@ header {
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 { .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
order: 1; order: 1;
text-transform: uppercase; } text-transform: uppercase; }
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 {
order: 2;
border-top: 2px solid #0732c2;
padding-top: 0.3rem; }
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes {
display: flex;
flex-direction: row; }
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before {
content: url(../images/noun-arrow-download.svg);
padding-right: 00.3rem; }
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column;
font-size: 0.6rem;
font-weight: 800; }
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span {
font-weight: 400; }
/*pages*/ /*pages*/
#home { #home {
@ -620,6 +623,23 @@ header {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); } grid-template-columns: repeat(12, 1fr); }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 {
order: 2;
border-top: 2px solid #0732c2;
padding-top: 0.3rem; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes {
display: flex;
flex-direction: row; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before {
content: url(../images/noun-arrow-download.svg);
padding-right: 00.3rem; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column;
font-size: 0.6rem;
font-weight: 800; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span {
font-weight: 400; }
#presentation .layout-content { #presentation .layout-content {
grid-row: 1; grid-row: 1;
order: 2; order: 2;
@ -628,7 +648,8 @@ header {
#presentation .layout-content { #presentation .layout-content {
padding-top: 0; } } padding-top: 0; } }
#presentation .layout-content .content_container { #presentation .layout-content .content_container {
display: flex; } display: flex;
margin-bottom: 0; }
#presentation .layout-content .content_container #block-quartiers-de-demain-titredepage { #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: none; } display: none; }
#presentation .layout-content .content_container article.node-type-static { #presentation .layout-content .content_container article.node-type-static {
@ -761,6 +782,11 @@ header {
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-out; cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-out;
overflow-x: scroll; } overflow-x: scroll; }
.presentation footer span.totop {
display: inline-flex;
width: 100vw;
background: #e8ebf4; }
.node-type-static .layout-content { .node-type-static .layout-content {
grid-row: 1; } grid-row: 1; }
.node-type-static .layout-content .content_container { .node-type-static .layout-content .content_container {

View File

@ -5,6 +5,31 @@
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
// grid-gap: 10px; // grid-gap: 10px;
#block-quartiers-de-demain-views-block-statics-fields-block-1{
order: 2;
border-top: 2px solid $blue_QDD;
padding-top: 0.3rem;
.views-field-field-pieces-jointes{
display: flex;
flex-direction: row;
&::before{
content: url(../images/noun-arrow-download.svg);
padding-right: 00.3rem;
}
.field-content{
display: flex;
flex-direction: column;
font-size: 0.6rem;
font-weight: 800;
span{
font-weight: 400;
}
}
}
}
.layout-content{ .layout-content{
// grid-column: 3 / 11; // grid-column: 3 / 11;
grid-row: 1; grid-row: 1;
@ -16,6 +41,7 @@
} }
.content_container{ .content_container{
display: flex; display: flex;
margin-bottom: 0;
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
display: none; display: none;
} }
@ -198,8 +224,15 @@
} }
} }
} }
}
.presentation footer{
span.totop {
display: inline-flex;
width: 100vw;
background: $bleu_fond_header;
}
} }

View File

@ -34,30 +34,30 @@
order: 1; order: 1;
text-transform: uppercase; text-transform: uppercase;
} }
#block-quartiers-de-demain-views-block-statics-fields-block-1{ // #block-quartiers-de-demain-views-block-statics-fields-block-1{
order: 2; // order: 2;
border-top: 2px solid $blue_QDD; // border-top: 2px solid $blue_QDD;
padding-top: 0.3rem; // padding-top: 0.3rem;
.views-field-field-pieces-jointes{ // .views-field-field-pieces-jointes{
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
&::before{ // &::before{
content: url(../images/noun-arrow-download.svg); // content: url(../images/noun-arrow-download.svg);
padding-right: 00.3rem; // padding-right: 00.3rem;
} // }
.field-content{ // .field-content{
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
font-size: 0.6rem; // font-size: 0.6rem;
font-weight: 800; // font-weight: 800;
span{ // span{
font-weight: 400; // font-weight: 400;
} // }
} // }
} // }
} // }
} }

View File

@ -1,3 +1,31 @@
footer{
span.totop {
display: inline-flex;
width: 100vw;
// background: $bleu_fond_header;
#toTop{
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem;
.fa-arrow-up{
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
// background: $footer-bg;
width: 3rem;
height: 2rem;
display: inline-block;
text-align: top;
.fa{
color: #fff;
}
}
}
}
}
.footer{ .footer{
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
@ -17,7 +45,6 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
#footer-left{ #footer-left{
grid-column: 1 /span 5; grid-column: 1 /span 5;
grid-row: 1; grid-row: 1;

View File

@ -39,7 +39,7 @@
* @see html.html.twig * @see html.html.twig
*/ */
#} #}
<div class="layout-container" > <div class="layout-container presentation" >
<header role="banner"> <header role="banner">
{{ page.header_left }} {{ page.header_left }}
@ -79,7 +79,9 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #} {# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>

View File

@ -79,7 +79,9 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #} {# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>

View File

@ -79,7 +79,9 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #} {# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>