From 22237814346e50905b8c4bddeaa563f1b0267426 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Thu, 29 Jul 2021 21:05:45 +0200
Subject: [PATCH] beautify design page

---
 resources/views/pages/design.twig | 68 +++++++++++++++----------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index f9a87cf8..de8f2458 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -34,17 +34,19 @@
 {% block content %}
     <div class="col-12">
         <div class="container">
-        <h1>{{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small></h1>
+        <h1 class="mb-4">
+            {{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small>
+        </h1>
 
         <h2>Elements <small class="text-muted">small</small></h2>
         <div class="row">
-            <div class="col-md-2">
+            <div class="col-md-6 col-lg-2 mb-4">
                 <h3>Headings <small class="text-muted">small</small></h3>
                 <h4>H4 <small class="text-muted">small</small></h4>
                 <h5>H5 <small class="text-muted">small</small></h5>
                 <h6>H6 <small class="text-muted">small</small></h6>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-6 mb-4">
                 <h3>Lists</h3>
                 <p>
                     This page should be used when creating and testing new designs to find usability and/or design issues.
@@ -62,7 +64,7 @@
                 </ol>
                 <p>{{ linksum|raw }} {{ lipsum }}</p>
             </div>
-            <div class="col-md-4">
+            <div class="col-lg-4 mb-4">
                 <h3>Themes</h3>
                 <ul>
                     {% for id,theme in themes %}
@@ -76,7 +78,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-6 col-lg-4 mb-4">
                 <h3>Tables</h3>
                 <table class="table table-striped">
                     <tr>
@@ -96,7 +98,7 @@
                     </tr>
                 </table>
             </div>
-            <div class="col-md-3">
+            <div class="col-md-6 col-lg-4 mb-4">
                 <h3>Navigation Tabs</h3>
                 <ul class="nav nav-tabs">
                     <li class="nav-item">
@@ -110,7 +112,7 @@
                     </li>
                 </ul>
             </div>
-            <div class="col-md-3 settings-menu">
+            <div class="col-md-6 col-lg-4 mb-4">
                 <h3>Navigation Pills</h3>
                 <ul class="nav nav-pills flex-column">
                     <li class="nav-item">
@@ -127,16 +129,16 @@
         </div>
 
         <div class="row">
-            <div class="col-md-12">
+            <div class="col-6 col-md-12 mb-4">
                 <h3>Texts</h3>
                 <p>
                     {{ linksum|raw }}<br>
                     {{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
                 </p>
 
-                <div class="row">
+                <div class="row mb-4">
                     {% for color in types %}
-                        <div class="col-md-3">
+                        <div class="col-12 col-md-3">
                             <p class="text-{{ color }}">{{ color|capitalize }}: {{ linksum|raw }}</p>
                         </div>
                     {% endfor %}
@@ -145,7 +147,7 @@
         </div>
 
         <div class="row">
-            <div class="col">
+            <div class="col-6 col-md-12 mb-4">
                 <h3>Badges</h3>
                 <p>
                     {% for type in types_color %}
@@ -153,7 +155,7 @@
                     {% endfor %}
                 </p>
             </div>
-            <div class="col">
+            <div class="col-6 col-md-12 mb-4">
                 <h3>Buttons</h3>
                 <p>
                     {% for type in types_buttons %}
@@ -163,7 +165,7 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="row mb-4">
             <div class="col">
                 <h3>Alerts</h3>
 
@@ -178,13 +180,13 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-md-12 mb-3">
                 <h3>Cards</h3>
 
                 <div class="row">
                     {% for type in types %}
-                        <div class="col">
+                        <div class="col mb-3">
                             <div class="card border-{{ type }} {{ m.type_bg_class() }}">
                                 <h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
                                 <div class="card-body">
@@ -201,53 +203,53 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-md-12">
                 <h3>Forms</h3>
 
                 <div class="row">
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         <label class="form-label">Button</label>
                         <div>
                             {{ f.button('Button') }}
                         </div>
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         Submit button<br>
                         {{ f.submit() }}
                     </div>
-                    <div class="col">
+                    <div class="col-md-3 col-lg-2">
                         Checkbox<br>
                         {{ f.checkbox('form-input-checkbox', 'Checkbox', true) }}
                         {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
                     </div>
-                    <div class="col checkbox-inline">
+                    <div class="col-md-3 col-lg-2 checkbox-inline">
                         Radio<br>
                         <label>
                             <input type="radio" checked="checked" name="form-input-radio" value="1"> Yey
@@ -261,7 +263,7 @@
         </div>
 
         <h3>Other</h3>
-        <div class="row">
+        <div class="row mb-4">
             <div class="col">
                 <h4>Code</h4>
                 <p>
@@ -273,7 +275,7 @@
 
         <h2>Macros</h2>
         <h3>base.twig</h3>
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-md-3">
                 <h4><code>angel()</code></h4>
                 <p>{{ m.angel() }}</p>
@@ -290,8 +292,6 @@
                 <h4><code>user(user)</code></h4>
                 <p>{{ m.user(demo_user) }}<br>{{ m.user(demo_user_2) }}</p>
             </div>
-        </div>
-        <div class="row">
             <div class="col-md-3">
                 <h4><code>button(label, url, type, size)</code></h4>
                 <p>{{ m.button('Label', '#', 'info', 'sm') }}</p>
@@ -299,7 +299,7 @@
         </div>
 
         <h3>form.twig</h3>
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-md-3">
                 <h4><code>input(name, label, type, opt)</code></h4>
                 <p>{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}</p>
@@ -322,8 +322,6 @@
                     {{ f.checkbox('checkbox-name', 'Label', true, 'on') }}
                 </p>
             </div>
-        </div>
-        <div class="row">
             <div class="col-md-3">
                 <h4><code>hidden(name, value)</code></h4>
                 <p>