From 1d34094084efe49b43d3da6c6ae133b1c1ffed06 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 13 Jan 2021 12:23:43 +0100
Subject: [PATCH] templates: introduce .column instead #left & #right (#48515)

---
 static/couvin/_responsive.scss         |  9 ++--
 static/huy/_responsive.scss            |  9 ++--
 static/imio/_responsive.scss           |  7 ++-
 static/liege-pwa-2019/_custom.scss     |  8 ++--
 static/liege-pwa-2019/_responsive.scss |  9 ++--
 static/liege/_custom.scss              | 63 ++++++++++++--------------
 static/liege/_responsive.scss          |  9 ++--
 static/olln/_custom.scss               |  3 +-
 8 files changed, 53 insertions(+), 64 deletions(-)

diff --git a/static/couvin/_responsive.scss b/static/couvin/_responsive.scss
index c1a017c..79fc644 100644
--- a/static/couvin/_responsive.scss
+++ b/static/couvin/_responsive.scss
@@ -7,8 +7,7 @@ div#nav #nav-button.toggled + ul{
 
 @media handheld, screen and (max-device-width: 480px), screen and (max-width: 480px){
    /*Homepage*/
-   .page-index #content #right,
-   .page-index #content #left {
+   .page-index #content .column {
       display: block;
       max-width: 100%;
    }
@@ -16,11 +15,11 @@ div#nav #nav-button.toggled + ul{
       display: block;
       width: 100%;
    }
-   .page-index #main-content > #content #left .cell:last-child {
+   .page-index #main-content > #content .column:first-child .cell:last-child {
       display: none;
    }
-   .page-index #main-content div#content div#right div#colleft,
-   .page-index #main-content div#content div#right div#colright{
+   .page-index #main-content div#content div.column:last-child div#colleft,
+   .page-index #main-content div#content div.column:last-child div#colright{
       float:none;
    }
    .page-index #main-content > #content #columns .nuagedetag {
diff --git a/static/huy/_responsive.scss b/static/huy/_responsive.scss
index 4eaeb37..04addc4 100644
--- a/static/huy/_responsive.scss
+++ b/static/huy/_responsive.scss
@@ -7,8 +7,7 @@ div#nav #nav-button.toggled + ul{
 
 @media handheld, screen and (max-device-width: 480px), screen and (max-width: 480px){
    /*Homepage*/
-   .page-index #content #right,
-   .page-index #content #left {
+   .page-index #content .column {
       display: block;
       max-width: 100%;
    }
@@ -16,11 +15,11 @@ div#nav #nav-button.toggled + ul{
       display: block;
       width: 100%;
    }
-   .page-index #main-content > #content #left .cell:last-child {
+   .page-index #main-content > #content .column:first-child .cell:last-child {
       display: none;
    }
-   .page-index #main-content div#content div#right div#colleft,
-   .page-index #main-content div#content div#right div#colright{
+   .page-index #main-content div#content div.column:last-child div#colleft,
+   .page-index #main-content div#content div.column:last-child div#colright{
       float:none;
    }
    .page-index #main-content > #content #columns .nuagedetag {
diff --git a/static/imio/_responsive.scss b/static/imio/_responsive.scss
index 65760a2..0c2d25c 100644
--- a/static/imio/_responsive.scss
+++ b/static/imio/_responsive.scss
@@ -25,8 +25,7 @@ div#nav #nav-button.toggled + ul{
        padding-top: 25px
    }
    /*Homepage*/
-   .page-index #content #right,
-   .page-index #content #left {
+   .page-index #content .column {
       display: block;
       max-width: 100%;
    }
@@ -34,8 +33,8 @@ div#nav #nav-button.toggled + ul{
       display: block;
       width: 100%;
    }
-   .page-index #main-content div#content div#right div#colleft,
-   .page-index #main-content div#content div#right div#colright{
+   .page-index #main-content div#content div.column:last-child div#colleft,
+   .page-index #main-content div#content div.column:last-child div#colright{
       float:none;
    }
    .page-index #main-content > #content #columns .nuagedetag {
diff --git a/static/liege-pwa-2019/_custom.scss b/static/liege-pwa-2019/_custom.scss
index 281e9b4..0d41db7 100644
--- a/static/liege-pwa-2019/_custom.scss
+++ b/static/liege-pwa-2019/_custom.scss
@@ -245,16 +245,16 @@ label {
     }
 
 .authentic-page.account-page #content {
-	#left {
+	.column:first-child {
 		float: right;
 		width: calc(100% - 350px);
 	}
-	#right {
+	.column:last-child {
 		float: left;
 		width: 300px;
 	}
 	@media screen and ($max-mobile-viewport) {
-		#left, #right {
+		.column {
 			float: none;
 			width: auto;
 		}
@@ -500,7 +500,7 @@ a.icone-porte-documents{
 /*END Mise en page "porte-doc..."*/
 
 /*Index page*/
-div#columns > div#left div.jq_txt_connexion > div > div > h2 {
+div#columns > div.column:first-child div.jq_txt_connexion > div > div > h2 {
     background-color:transparent!important;
     box-shadow:None!important;
 }
diff --git a/static/liege-pwa-2019/_responsive.scss b/static/liege-pwa-2019/_responsive.scss
index 5f8874a..327fab3 100644
--- a/static/liege-pwa-2019/_responsive.scss
+++ b/static/liege-pwa-2019/_responsive.scss
@@ -7,8 +7,7 @@ div#nav #nav-button.toggled + ul{
 
 @media handheld, screen and (max-device-width: 480px), screen and (max-width: 480px){
    /*Homepage*/
-   .page-index #content #right,
-   .page-index #content #left {
+   .page-index #content .column {
       display: block;
       max-width: 100%;
    }
@@ -16,11 +15,11 @@ div#nav #nav-button.toggled + ul{
       display: block;
       width: 100%;
    }
-   .page-index #main-content > #content #left .cell:last-child {
+   .page-index #main-content > #content .column:first-child .cell:last-child {
       display: none;
    }
-   .page-index #main-content div#content div#right div#colleft,
-   .page-index #main-content div#content div#right div#colright{
+   .page-index #main-content div#content div.column:last-child div#colleft,
+   .page-index #main-content div#content div.column:last-child div#colright{
       float:none;
    }
    .page-index #main-content > #content #columns .nuagedetag {
diff --git a/static/liege/_custom.scss b/static/liege/_custom.scss
index 8b9eac5..9f8d3ad 100644
--- a/static/liege/_custom.scss
+++ b/static/liege/_custom.scss
@@ -332,15 +332,15 @@ label {
     }
 
 .page-profil #content {
-    #left {
+    .column:first-child {
         float: right;
         width: 73%;
     }
-    #right {
+    .column:last-child {
         float: left;
         width: 25%;
     }
-    #left, #right {
+    .column {
         #a2-profile {
             background: linear-gradient(to bottom, #F6F6F6, #F6F6F6 30%, white);
             margin-right: 0;
@@ -491,8 +491,7 @@ div.a2-block .submit {
     width: 12em;
 }
 
-.page-index #right,
-.page-index #left{
+.page-index .column {
     border-collapse:separate;
     display:table;
     float:none;
@@ -558,44 +557,38 @@ div.a2-block .submit {
     /*background-image: url("images/ic_urbanisme.png");*/
 }
 
-.page-index div#content div#right div#colleft,
-.page-index div#content div#right div#colright,
-.page-index div#content div#left div#colleft,
-.page-index div#content div#left div#colright{
+.page-index div#content div.column div#colleft,
+.page-index div#content div.column div#colright {
     max-width:48%;
 }
 
-.page-index div#content div#right div#colleft h2,
-.page-index div#content div#right div#colright h2,
-.page-index div#content div#left div#colleft h2,
-.page-index div#content div#left div#colright h2{
+.page-index div#content div.column div#colleft h2,
+.page-index div#content div.column div#colright h2 {
    text-align:left;
 }
 
-.page-index div#content div#right div#colleft,
-.page-index div#content div#left div#colleft{
+.page-index div#content div.column div#colleft {
     float: left;
 }
 
-.page-index  div#content div#right div#colright,
-.page-index  div#content div#left div#colright{
+.page-index  div#content div.column div#colright{
     float: right;
     padding: 1em;
 }
 
-.page-index #content #right .cell.wcscurrentformscell,
-.page-index #content #right .cell.wcscurrentdraftscell {
+.page-index #content .column:last-child .cell.wcscurrentformscell,
+.page-index #content .column:last-child .cell.wcscurrentdraftscell {
     display: block;
     margin-bottom:0;
     width: 100%;
 }
 
-.page-index #content #right .cell.wcscurrentformscell {
+.page-index #content .column:last-child .cell.wcscurrentformscell {
     background: #f6f6f6 none repeat scroll 0 0;
     border-bottom: medium none;
     padding-bottom: 2em;
 }
-.page-index #content #right .cell.wcscurrentdraftscell  {
+.page-index #content .column:last-child .cell.wcscurrentdraftscell  {
     min-height:165px;
 }
 
@@ -666,12 +659,12 @@ div#gauche + div#rub_service {
 /* END correct a bug in first eId connexion with profile form */
 
 /* Skin page d'accueil */
-.page-index #main-content > #content #left .cell:nth-child(2){
+.page-index #main-content > #content .column:first-child .cell:nth-child(2){
     border:1px solid #BE0D67;
     border-radius: 10px;
 }
 
-.page-index #main-content > #content #left .cell:nth-child(2) h2 {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) h2 {
     /*background: #be0d67 none repeat scroll 0 0;*/
     border-radius: 0;
     /*box-shadow: 1px 0 5px rgba(0, 0, 0, 0.21);*/
@@ -683,7 +676,7 @@ div#gauche + div#rub_service {
     text-align: center;
 }
 
-.page-index #main-content > #content #left div.following_code_connected h2 {
+.page-index #main-content > #content .column:first-child div.following_code_connected h2 {
     color:#be0d67;
     background: transparent;
     display: inherit;
@@ -694,7 +687,7 @@ div#gauche + div#rub_service {
 }
 
 /*
-.page-index #main-content > #content #left .cell:nth-child(2) .wcs-tracking-code-input h2{
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) .wcs-tracking-code-input h2{
     background: transparent;
     display: inherit;
     text-transform: uppercase;
@@ -705,37 +698,37 @@ div#gauche + div#rub_service {
 
 
 
-.page-index #main-content > #content #left .cell:nth-child(2) .wcs-tracking-code-input p:nth-child(2n+1) {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) .wcs-tracking-code-input p:nth-child(2n+1) {
     margin: 2ex 0;
 }
-.page-index #main-content > #content #left .cell:nth-child(2) .wcs-tracking-code-input{
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) .wcs-tracking-code-input{
     border:none;
     border-radius: 0;
 }
-.page-index #main-content > #content #left .cell:nth-child(2) .wcs-tracking-code-input h2:hover {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) .wcs-tracking-code-input h2:hover {
     box-shadow: inherit;
 }
-.page-index #main-content > #content #left .cell:nth-child(2) h2:hover {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) h2:hover {
     box-shadow: 0px 0px 5px #777;
 }
-.page-index #main-content > #content #left .cell:nth-child(2) h2 a{
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) h2 a{
     color: #fff;
 }
-.page-index #main-content > #content #left .cell:nth-child(2) p:first-child {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) p:first-child {
     margin-bottom: 2ex;
 }
-.page-index #main-content > #content #left .cell:nth-child(2) p:nth-child(2n+2)::after {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) p:nth-child(2n+2)::after {
     content: "↳";
     display: block;
     font-size: 127%;
 }
 /*No ↳ in lists' last child */
-.page-index #main-content > #content #left .cell:nth-child(2) p:last-child::after {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) p:last-child::after {
         content: inherit;
 }
 /*END No ↳ in lists' last child */
 
-.page-index #main-content > #content #left .cell:nth-child(2) p:nth-child(2n+1) {
+.page-index #main-content > #content .column:first-child .cell:nth-child(2) p:nth-child(2n+1) {
     margin: -3ex 0ex 2ex 4ex;
 }
 
@@ -787,7 +780,7 @@ a.icone-porte-documents{
 
 
 /*Index page*/
-div#columns > div#left div.jq_txt_connexion > div > div > h2 {
+div#columns > div.column:first-child div.jq_txt_connexion > div > div > h2 {
     background-color:transparent!important;
     box-shadow:None!important;
 }
diff --git a/static/liege/_responsive.scss b/static/liege/_responsive.scss
index 61d2318..b66f51b 100644
--- a/static/liege/_responsive.scss
+++ b/static/liege/_responsive.scss
@@ -7,8 +7,7 @@ div#nav #nav-button.toggled + ul{
 
 @media handheld, screen and (max-device-width: 480px), screen and (max-width: 480px){
    /*Homepage*/
-   .page-index #content #right,
-   .page-index #content #left {
+   .page-index #content .column {
       display: block;
       max-width: 100%;
    }
@@ -16,11 +15,11 @@ div#nav #nav-button.toggled + ul{
       display: block;
       width: 100%;
    }
-   .page-index #main-content > #content #left .cell:last-child {
+   .page-index #main-content > #content .column:first-child .cell:last-child {
       display: none;
    }
-   .page-index #main-content div#content div#right div#colleft,
-   .page-index #main-content div#content div#right div#colright{
+   .page-index #main-content div#content div.column:last-child div#colleft,
+   .page-index #main-content div#content div.column:last-child div#colright{
       float:none;
    }
    .page-index #main-content > #content #columns .nuagedetag {
diff --git a/static/olln/_custom.scss b/static/olln/_custom.scss
index abab207..89f6b41 100644
--- a/static/olln/_custom.scss
+++ b/static/olln/_custom.scss
@@ -1,7 +1,8 @@
 @charset "UTF-8";
 
 /* SUP-9860 olln wantssolid border so it needs spacing*/
-div#services > ul > li, div#left div.a2-block, div#right div.a2-block, .gru-content div.cell, div.block {
+div#services > ul > li,
+div.column div.a2-block, .gru-content div.cell, div.block {
     padding: 15px;
     margin-bottom: 10px;	
 }
-- 
2.20.1

