From d204405959b793f4e58893bc932f392489f9240d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= <aurelien.delobelle@gmail.com>
Date: Mon, 14 May 2018 15:34:22 +0200
Subject: [PATCH] Fix layout

---
 allauth_ens/scss/_base.scss               |   9 +-
 allauth_ens/static/allauth_ens/screen.css | 157 +++++++++++-----------
 allauth_ens/templates/account/login.html  |   3 +-
 3 files changed, 88 insertions(+), 81 deletions(-)

diff --git a/allauth_ens/scss/_base.scss b/allauth_ens/scss/_base.scss
index 62e26c4..fd4a340 100644
--- a/allauth_ens/scss/_base.scss
+++ b/allauth_ens/scss/_base.scss
@@ -57,7 +57,7 @@ $main-max-width: 500px;
 
 .content-wrapper {
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
     align-items: center;
 
     /* Blocks */
@@ -68,13 +68,17 @@ $main-max-width: 500px;
     }
 
     @media (min-width: 500px) {
+        & {
+            flex-flow: row nowrap;
+        }
+
         & > section {
             flex: 1 1 auto;
             min-width: 250px;
         }
     }
 
-    @media (min-width: 120px) {
+    @media (min-width: 1200px) {
         & > section {
             flex: 1 1 auto;
             min-width: 350px;
@@ -216,7 +220,6 @@ section {
 .method-list {
     display: flex;
     flex-flow: row wrap;
-    justify-content: space-between;
 
     & > .method-wrapper {
         flex: 1 100%;
diff --git a/allauth_ens/static/allauth_ens/screen.css b/allauth_ens/static/allauth_ens/screen.css
index 4bfa440..648dd92 100644
--- a/allauth_ens/static/allauth_ens/screen.css
+++ b/allauth_ens/static/allauth_ens/screen.css
@@ -160,7 +160,7 @@ b {
 /* line 58, ../../scss/_base.scss */
 .content-wrapper {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
   align-items: center;
   /* Blocks */
 }
@@ -171,20 +171,24 @@ b {
 }
 @media (min-width: 500px) {
   /* line 71, ../../scss/_base.scss */
+  .content-wrapper {
+    flex-flow: row nowrap;
+  }
+  /* line 75, ../../scss/_base.scss */
   .content-wrapper > section {
     flex: 1 1 auto;
     min-width: 250px;
   }
 }
-@media (min-width: 120px) {
-  /* line 78, ../../scss/_base.scss */
+@media (min-width: 1200px) {
+  /* line 82, ../../scss/_base.scss */
   .content-wrapper > section {
     flex: 1 1 auto;
     min-width: 350px;
   }
 }
 
-/* line 86, ../../scss/_base.scss */
+/* line 90, ../../scss/_base.scss */
 #providers {
   width: 150px;
   min-width: unset;
@@ -194,7 +198,7 @@ b {
 /**********
  * Header *
  **********/
-/* line 100, ../../scss/_base.scss */
+/* line 104, ../../scss/_base.scss */
 header {
   display: flex;
   align-items: stretch;
@@ -210,7 +214,7 @@ header::after {
   content: "";
   clear: both;
 }
-/* line 114, ../../scss/_base.scss */
+/* line 118, ../../scss/_base.scss */
 header a {
   color: #fff !important;
 }
@@ -219,7 +223,7 @@ header a:focus, header a:hover {
   background: #d43f3a;
   text-decoration: none;
 }
-/* line 123, ../../scss/_base.scss */
+/* line 127, ../../scss/_base.scss */
 header .right {
   display: flex;
   flex-flow: column;
@@ -230,25 +234,25 @@ header .right {
   font-size: 14px;
   text-align: center;
 }
-/* line 136, ../../scss/_base.scss */
+/* line 140, ../../scss/_base.scss */
 header .right > * {
   flex: 0 0 auto;
 }
-/* line 139, ../../scss/_base.scss */
+/* line 143, ../../scss/_base.scss */
 header .right > * > * {
   display: block;
   padding: 5px 10px;
 }
-/* line 145, ../../scss/_base.scss */
+/* line 149, ../../scss/_base.scss */
 header .right #connect-status {
   font-weight: normal;
   font-size: 12px;
 }
-/* line 149, ../../scss/_base.scss */
+/* line 153, ../../scss/_base.scss */
 header .right #connect-status .fa {
   margin-right: 5px;
 }
-/* line 155, ../../scss/_base.scss */
+/* line 159, ../../scss/_base.scss */
 header h1 {
   flex: 1 1 auto;
   padding: 15px 25px;
@@ -257,11 +261,11 @@ header h1 {
 /************
  * Messages *
  ************/
-/* line 168, ../../scss/_base.scss */
+/* line 172, ../../scss/_base.scss */
 .messages-container {
   padding: 0 15px;
 }
-/* line 171, ../../scss/_base.scss */
+/* line 175, ../../scss/_base.scss */
 .messages-container::after {
   display: block;
   content: "";
@@ -269,30 +273,30 @@ header h1 {
   height: 2px;
 }
 
-/* line 179, ../../scss/_base.scss */
+/* line 183, ../../scss/_base.scss */
 .messages-list {
   padding: 10px 0;
 }
 
-/* line 189, ../../scss/_base.scss */
+/* line 193, ../../scss/_base.scss */
 .message {
   padding: 5px;
   font-size: 14px;
   color: #292b2c;
 }
-/* line 184, ../../scss/_base.scss */
+/* line 188, ../../scss/_base.scss */
 .message.info {
   color: #28a1c5;
 }
-/* line 184, ../../scss/_base.scss */
+/* line 188, ../../scss/_base.scss */
 .message.success {
   color: #2d672d;
 }
-/* line 184, ../../scss/_base.scss */
+/* line 188, ../../scss/_base.scss */
 .message.warning {
   color: #b06d0f;
 }
-/* line 184, ../../scss/_base.scss */
+/* line 188, ../../scss/_base.scss */
 .message.error {
   color: #b52b27;
 }
@@ -300,24 +304,23 @@ header h1 {
 /***********
  * Content *
  ***********/
-/* line 208, ../../scss/_base.scss */
+/* line 212, ../../scss/_base.scss */
 section > * + * {
   margin-top: 15px;
 }
 
 /* Methods list */
-/* line 216, ../../scss/_base.scss */
+/* line 220, ../../scss/_base.scss */
 .method-list {
   display: flex;
   flex-flow: row wrap;
-  justify-content: space-between;
 }
-/* line 221, ../../scss/_base.scss */
+/* line 224, ../../scss/_base.scss */
 .method-list > .method-wrapper {
   flex: 1 100%;
   padding: 2px 0;
 }
-/* line 225, ../../scss/_base.scss */
+/* line 228, ../../scss/_base.scss */
 .method-list > .method-wrapper a {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   display: block;
@@ -347,11 +350,11 @@ section > * + * {
 }
 
 /* Connected accounts list */
-/* line 249, ../../scss/_base.scss */
+/* line 252, ../../scss/_base.scss */
 .connections-providers-list > * + * {
   margin-top: 2px;
 }
-/* line 253, ../../scss/_base.scss */
+/* line 256, ../../scss/_base.scss */
 .connections-providers-list > * > .heading {
   width: 100%;
   padding: 10px;
@@ -364,7 +367,7 @@ section > * + * {
   content: "";
   clear: both;
 }
-/* line 262, ../../scss/_base.scss */
+/* line 265, ../../scss/_base.scss */
 .connections-providers-list > * > .heading .connect {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   display: block;
@@ -395,29 +398,29 @@ section > * + * {
   color: #fff;
 }
 
-/* line 274, ../../scss/_base.scss */
+/* line 277, ../../scss/_base.scss */
 .connections-list {
   border-left: 5px solid #f7f7f9;
 }
-/* line 277, ../../scss/_base.scss */
+/* line 280, ../../scss/_base.scss */
 .connections-list > * {
   padding: 10px;
   font-size: 14px;
 }
-/* line 281, ../../scss/_base.scss */
+/* line 284, ../../scss/_base.scss */
 .connections-list > * + * {
   border-top: 1px dotted #eceeef;
 }
-/* line 285, ../../scss/_base.scss */
+/* line 288, ../../scss/_base.scss */
 .connections-list > * > .fa {
   margin-right: 5px;
 }
-/* line 289, ../../scss/_base.scss */
+/* line 292, ../../scss/_base.scss */
 .connections-list > * .delete {
   float: right;
   margin-top: -2px;
 }
-/* line 293, ../../scss/_base.scss */
+/* line 296, ../../scss/_base.scss */
 .connections-list > * .delete [type=submit] {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   display: block;
@@ -446,17 +449,17 @@ section > * + * {
   background: #b52b27;
   color: #fff;
 }
-/* line 302, ../../scss/_base.scss */
+/* line 305, ../../scss/_base.scss */
 .connections-list form {
   display: inline-block;
 }
 
 /* E-mail adresses list */
-/* line 311, ../../scss/_base.scss */
+/* line 314, ../../scss/_base.scss */
 .emailaddress-list .emailaddress {
   border-bottom: 1px dotted #464a4c;
 }
-/* line 315, ../../scss/_base.scss */
+/* line 318, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary {
   height: 45px;
 }
@@ -466,13 +469,13 @@ section > * + * {
   content: "";
   clear: both;
 }
-/* line 320, ../../scss/_base.scss */
+/* line 323, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary > * {
   float: left;
   height: 100%;
   padding: 12px;
 }
-/* line 326, ../../scss/_base.scss */
+/* line 329, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status {
   float: right;
   width: 45px;
@@ -480,25 +483,25 @@ section > * + * {
   text-align: center;
   font-size: 20px;
 }
-/* line 334, ../../scss/_base.scss */
+/* line 337, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary > .email {
   padding: 12px;
   font-weight: bold;
 }
-/* line 339, ../../scss/_base.scss */
+/* line 342, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary > .primary {
   color: #025aa5;
 }
-/* line 343, ../../scss/_base.scss */
+/* line 346, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary > .verified {
   color: #449d44;
 }
-/* line 347, ../../scss/_base.scss */
+/* line 350, ../../scss/_base.scss */
 .emailaddress-list .emailaddress .summary > .unverified {
   color: #ec971f;
 }
 
-/* line 356, ../../scss/_base.scss */
+/* line 359, ../../scss/_base.scss */
 .actions {
   margin-bottom: 10px;
 }
@@ -508,7 +511,7 @@ section > * + * {
   content: "";
   clear: both;
 }
-/* line 361, ../../scss/_base.scss */
+/* line 364, ../../scss/_base.scss */
 .actions > * {
   float: right;
   margin-right: 10px;
@@ -518,7 +521,7 @@ section > * + * {
 /*********
  * Forms *
  *********/
-/* line 393, ../../scss/_base.scss */
+/* line 396, ../../scss/_base.scss */
 .input-wrapper {
   position: relative;
   display: block;
@@ -531,13 +534,13 @@ section > * + * {
   content: "";
   clear: both;
 }
-/* line 401, ../../scss/_base.scss */
+/* line 404, ../../scss/_base.scss */
 .input-wrapper label {
   margin-right: 10px;
   color: rgba(0, 0, 0, 0.38);
   font-size: 16px;
 }
-/* line 408, ../../scss/_base.scss */
+/* line 411, ../../scss/_base.scss */
 .input-wrapper .transform-label label {
   padding-left: 0;
   width: 100%;
@@ -558,7 +561,7 @@ section > * + * {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* line 430, ../../scss/_base.scss */
+/* line 433, ../../scss/_base.scss */
 .input-wrapper input.field:not([type=checkbox]) {
   height: 30px;
   width: 100%;
@@ -568,80 +571,80 @@ section > * + * {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   font-size: 16px;
 }
-/* line 444, ../../scss/_base.scss */
+/* line 447, ../../scss/_base.scss */
 .input-wrapper input[type="checkbox"] {
   vertical-align: sub;
   width: 20px;
   height: 20px;
 }
-/* line 450, ../../scss/_base.scss */
+/* line 453, ../../scss/_base.scss */
 .input-wrapper select {
   height: 30px;
   background: #fff;
 }
-/* line 468, ../../scss/_base.scss */
+/* line 471, ../../scss/_base.scss */
 .input-wrapper.input-focused label, .input-wrapper.input-focused .messages {
   color: inherit;
 }
-/* line 474, ../../scss/_base.scss */
+/* line 477, ../../scss/_base.scss */
 .input-wrapper.input-focused .transform-label label, .input-wrapper.input-has-value .transform-label label {
   transform: translate3d(0, 6.5px, 0) scale(0.75);
 }
-/* line 456, ../../scss/_base.scss */
+/* line 459, ../../scss/_base.scss */
 .input-wrapper.input-has-value {
   color: #449d44;
 }
-/* line 460, ../../scss/_base.scss */
+/* line 463, ../../scss/_base.scss */
 .input-wrapper.input-has-value input.field {
   padding-bottom: 0px;
   border-width: 2px;
   border-color: #449d44;
 }
-/* line 456, ../../scss/_base.scss */
+/* line 459, ../../scss/_base.scss */
 .input-wrapper.input-error {
   color: #d9534f;
 }
-/* line 460, ../../scss/_base.scss */
+/* line 463, ../../scss/_base.scss */
 .input-wrapper.input-error input.field {
   padding-bottom: 0px;
   border-width: 2px;
   border-color: #d9534f;
 }
-/* line 456, ../../scss/_base.scss */
+/* line 459, ../../scss/_base.scss */
 .input-wrapper.input-focused {
   color: #025aa5;
 }
-/* line 460, ../../scss/_base.scss */
+/* line 463, ../../scss/_base.scss */
 .input-wrapper.input-focused input.field {
   padding-bottom: 0px;
   border-width: 2px;
   border-color: #025aa5;
 }
-/* line 483, ../../scss/_base.scss */
+/* line 486, ../../scss/_base.scss */
 .input-wrapper .messages-spacer {
   float: right;
   min-height: 10px;
   min-width: 1px;
 }
-/* line 489, ../../scss/_base.scss */
+/* line 492, ../../scss/_base.scss */
 .input-wrapper .messages {
   color: rgba(0, 0, 0, 0.38);
 }
-/* line 492, ../../scss/_base.scss */
+/* line 495, ../../scss/_base.scss */
 .input-wrapper .messages > * {
   padding-top: 5px;
   font-size: 12px;
 }
-/* line 499, ../../scss/_base.scss */
+/* line 502, ../../scss/_base.scss */
 .input-wrapper.input-checkbox > :first-child, .input-wrapper.input-radio > :first-child {
   display: block;
 }
 
-/* line 505, ../../scss/_base.scss */
+/* line 508, ../../scss/_base.scss */
 .buttons-choices {
   display: inline-flex;
 }
-/* line 508, ../../scss/_base.scss */
+/* line 511, ../../scss/_base.scss */
 .buttons-choices > button {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   flex: 0 1 auto;
@@ -650,28 +653,28 @@ section > * + * {
   background: #daeeff;
   color: #636c72;
 }
-/* line 517, ../../scss/_base.scss */
+/* line 520, ../../scss/_base.scss */
 .buttons-choices > button:first-child {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
-/* line 522, ../../scss/_base.scss */
+/* line 525, ../../scss/_base.scss */
 .buttons-choices > button:last-child {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-/* line 527, ../../scss/_base.scss */
+/* line 530, ../../scss/_base.scss */
 .buttons-choices > button:focus {
   background: #43a7fd;
   color: white;
 }
-/* line 532, ../../scss/_base.scss */
+/* line 535, ../../scss/_base.scss */
 .buttons-choices > button.selected {
   background: #025aa5;
   color: white;
 }
 
-/* line 538, ../../scss/_base.scss */
+/* line 541, ../../scss/_base.scss */
 [type=submit]:not(.link) {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   display: block;
@@ -698,7 +701,7 @@ section > * + * {
   color: #fff;
 }
 
-/* line 544, ../../scss/_base.scss */
+/* line 547, ../../scss/_base.scss */
 [type=submit].link {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   color: #025aa5;
@@ -715,23 +718,23 @@ section > * + * {
   cursor: pointer;
 }
 
-/* line 553, ../../scss/_base.scss */
+/* line 556, ../../scss/_base.scss */
 .form-inline {
   display: flex;
   align-items: center;
 }
-/* line 557, ../../scss/_base.scss */
+/* line 560, ../../scss/_base.scss */
 .form-inline > .input-wrapper {
   flex: 1 0 auto;
 }
-/* line 561, ../../scss/_base.scss */
+/* line 564, ../../scss/_base.scss */
 .form-inline [type=submit] {
   margin-top: -5px;
   margin-left: 8px;
   font-size: 14px;
 }
 
-/* line 568, ../../scss/_base.scss */
+/* line 571, ../../scss/_base.scss */
 .btn {
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   display: block;
@@ -751,7 +754,7 @@ section > * + * {
   cursor: pointer;
 }
 
-/* line 573, ../../scss/_base.scss */
+/* line 576, ../../scss/_base.scss */
 .btn-primary {
   background: #025aa5;
   color: #fff;
@@ -762,7 +765,7 @@ section > * + * {
   color: #fff;
 }
 
-/* line 574, ../../scss/_base.scss */
+/* line 577, ../../scss/_base.scss */
 .btn-success {
   background: #449d44;
   color: #fff;
diff --git a/allauth_ens/templates/account/login.html b/allauth_ens/templates/account/login.html
index 9c35064..99c4ab8 100644
--- a/allauth_ens/templates/account/login.html
+++ b/allauth_ens/templates/account/login.html
@@ -39,9 +39,10 @@
   <ul class="method-list">
     {% include "socialaccount/snippets/provider_list.html" with process="login" %}
   </ul>
-  {% include "socialaccount/snippets/login_extra.html" %}
 </section>
 
+{% include "socialaccount/snippets/login_extra.html" %}
+
 <div class="divider"></div>
 
 {% endif %}