From e5da1f532334a265e1b1c88d2a942e92654370d6 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sun, 13 Jun 2021 00:14:38 +0200
Subject: Replace the flex layout in favor of a grid layout

This commit replaces the initial CSS flexbox layout for forms of the
admin theme with a more elegant approach called "grid layout". :)

Some interesting information:
https://www.w3schools.com/css/css_grid.asp
https://blog.logrocket.com/flexbox-vs-css-grid/
---
 theme/admin/rsrc/css/main.css | 108 +++++++++++++++++-------------------------
 1 file changed, 44 insertions(+), 64 deletions(-)

(limited to 'theme/admin/rsrc/css/main.css')

diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index d440684..2677f19 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -476,79 +476,63 @@ table, td {
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Form flex-box
+# Grids
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
-form {
-  border: 0.05rem solid #AAA;
-}
-
-.flex {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.flex + .flex {
-  border-top: 0.05rem solid #AAA;
-}
-
-.flex > .flex-item {
-  border-right: 0.05rem solid #AAA;
-  display: flex;
-  width: 100%;
+.form-grid {
+  display: grid;
+  grid-template-columns: 8rem auto 8rem auto;
+  border-left: 0.05rem solid #AAA;
+  border-bottom: 0.05rem solid #AAA;
 }
-.flex > .flex-item:last-child {
-  border-right: none;
+.form-grid.two-columns {
+  grid-template-columns: auto auto;
 }
-.flex > .flex-item > div {
+.form-grid > label {
   display: flex;
   align-items: center;
-  padding: 0.5rem;
-  box-sizing: border-box;
+  background: #DDD;
 }
-.flex > .flex-item > div + div {
-  border-left: 0.05rem solid #AAA;
+.form-grid > label .fa {
+  margin-left: 0.5rem;
+  margin-right: 1rem;
 }
-
-.flex.flex-responsive > .flex-item {
-  width: 50%;
-}
-
-.form-icon-flex {
-  background: #DDD;
-  width: 10%;
-  justify-content: center;
+.form-grid-item,
+.form-grid > label {
+  padding: 0.5rem;
+  border-top: 0.05rem solid #AAA;
+  border-right: 0.05rem solid #AAA;
 }
 
-.form-label-flex {
-  background: #DDD;
-  width: 30%;
-  border-left: none !important;
+.form-border-box {
+  border: 0.05rem solid #AAA;
 }
-
-.form-field-flex {
-  width: 60%;
+.form-border-box.padding {
+  padding: 0.5rem;
 }
-
-.background {
+.form-border-box.background {
   background: #DDD;
 }
-
-.flex-padding {
-  padding: 0.5rem;
+.form-border-box.nobordertop {
+  border-top: none;
 }
-
-.flex-direction-column {
-  flex-direction: column;
+.form-border-box + .form-border-box {
+  border-top: none;
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form buttons
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+#emoticon-list-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
 #button-list-wrapper {
   border-bottom: 0.05rem solid #AAA;
   background: #EEE;
+  overflow: hidden;
 }
 
 .button-list {
@@ -585,6 +569,9 @@ form {
   border: none;
   margin: 0;
 }
+#content-editor-wrapper {
+  border-top: none;
+}
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Form elements
@@ -606,7 +593,7 @@ input:focus, select:focus, textarea:focus {
 textarea {
   font-family: "Kadwa", "sans-serif";
   box-sizing: border-box;
-  display: inline-block;
+  display: block;
   resize: vertical;
   min-height: 15rem;
   line-height: 1.2rem;
@@ -692,17 +679,6 @@ label:after {
 # Responsive Level #2
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 37.5em) {
-  .flex.flex-responsive {
-    display: block;
-    width: auto;
-  }
-  .flex.flex-responsive > .flex-item {
-    width: 100%;
-  }
-  .flex.flex-responsive > .flex-item + .flex-item {
-    border-top: 0.05rem solid #AAA;
-  }
-
   #main-navi {
     font-size: 1rem;
   }
@@ -716,10 +692,14 @@ label:after {
     padding: 0.5rem;
   }
 
-  .flex-emoticons {
+  #emoticon-list-wrapper {
     display: none;
   }
 
+  .form-grid {
+    grid-template-columns: auto auto;
+  }
+
   .actions {
     float: none;
     display: flex;
-- 
cgit v1.2.3