From d4a360c7fb0229f549f1f5ed285db3067ac880f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 7 Nov 2020 12:40:34 +0100
Subject: [PATCH] Simplify main layout styles

We were using a "push" div in order to force the footer to the bottom,
and were using a wrapper with a minimum height and negative margins.

The same thing can be accomplished using flex and making the wrapper
fill the empty space, which in my humble opinion simplifies the code and
makes it easier to follow.

We could further simplify the code by removing the wrapper div or the
footer wrapper, although I'm not sure the benefits overcome potential
inconveniences caused to other institutions who might have custom styles
based on the existence of these wrappers.
---
 app/assets/stylesheets/layout.scss     | 25 ++++++++++---------------
 app/assets/stylesheets/mixins.scss     |  2 --
 app/views/layouts/application.html.erb |  2 --
 app/views/layouts/devise.html.erb      |  2 --
 4 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ffd8a9c96..61c438ef1 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -42,7 +42,13 @@ body {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
   font-size: $base-font-size;
+
+  > .wrapper {
+    flex: 1;
+  }
 }
 
 h1,
@@ -214,19 +220,6 @@ a {
   color: $check;
 }
 
-.wrapper {
-  min-height: 100%;
-  margin: 0 auto (-$line-height) * 12;
-  height: auto !important;
-  height: 100%;
-}
-
-.footer,
-.push {
-  clear: both;
-  min-height: $line-height * 12;
-}
-
 .ie-callout {
   position: absolute;
   top: 0;
@@ -932,7 +925,9 @@ footer {
 
 .footer {
   background: #f1f1f1;
+  clear: both;
   margin-top: $line-height * 2;
+  min-height: $line-height * 12;
   padding-top: $line-height;
 }
 
@@ -999,8 +994,8 @@ footer {
 
 .auth-page {
 
-  .wrapper {
-    margin: 0 auto (-$line-height) * 14;
+  .footer {
+    margin-top: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 2d5bfdb10..47ab61b2e 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -131,8 +131,6 @@
 // ----------------
 
 @mixin admin-layout {
-  display: flex;
-  flex-direction: column;
 
   > header {
     margin-bottom: 0;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 33f16faa3..21cddf561 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -44,8 +44,6 @@
       <%= render "layouts/flash" %>
 
       <%= yield %>
-
-      <div class="push"></div>
     </div>
     <div class="footer">
       <%= render "layouts/footer" %>
diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb
index edc987132..d5d6f902f 100644
--- a/app/views/layouts/devise.html.erb
+++ b/app/views/layouts/devise.html.erb
@@ -28,8 +28,6 @@
           </div>
         </div>
       </div>
-
-      <div class="push"></div>
     </div>
 
     <div class="footer">