Re-layout form to make it more compact

Changes: * Move zero-config services to the left of php config * Databases & ES are all now on the same row * Remove the column offset to better use horizontal real estate * CSS tweaks for readability & re-alignment * Refactor php config notes to be more compact
mark-a-j-adriano · Feb 10, 2022 · 4a7de7a · 4a7de7a
1 parent 191b134
commit 4a7de7a
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 44 deletions.
diff --git a/public/css/base.css b/public/css/base.css
@@ -55,12 +55,17 @@ section {
     padding : 0.5em 0;
 }
 
+section#content {
+    padding : 1.5em !important;
+}
+
 /***** Header *****/
 section#header {
     border-radius    : 0;
     margin-bottom    : 0;
     padding-top      : 0.5em;
     padding-bottom   : 0.5em;
+    padding-left     : 1.5em;
     text-shadow      : 2px 2px 6px rgba(0, 0, 0, .7);
     background-color : rgba(0, 0, 0, 0.64);
     border-color     : transparent;
@@ -113,18 +118,18 @@ form input[type=submit] {
 }
 
 form .group {
-    border        : 2px #444 solid;
-    border-radius : 5px;
-    padding-bottom: 10px;
-    margin-bottom : 1em;
+    border         : 2px #444 solid;
+    border-radius  : 5px;
+    padding-bottom : 10px;
+    margin-bottom  : 1em;
 }
 
 form .group .note {
-    font-style  : italic;
-    font-size   : 0.8em;
-    display     : block;
-    clear       : both;
-    padding-left: 15px;
+    font-style   : italic;
+    font-size    : 0.8em;
+    display      : block;
+    clear        : both;
+    padding-left : 15px;
 }
 
 form .group h2 {

diff --git a/public/css/dark.css b/public/css/dark.css
@@ -34,7 +34,8 @@
     }
 
     body {
-        color : var(--brightest);
+        color            : var(--brightest);
+        background-color : var(--darkest);
     }
 
     section#content {

diff --git a/src/Form/Generator/PhpType.php b/src/Form/Generator/PhpType.php
@@ -62,7 +62,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 ],
             ])
             ->add('hasGit', CheckboxType::class, [
-                'label'    => 'Add git (eg for composer)',
+                'label'    => 'Add git (eg for composer) - Adds 75MB',
                 'required' => false,
             ])
             ->add('version', ChoiceType::class, [

diff --git a/templates/generator.html.twig b/templates/generator.html.twig
@@ -6,8 +6,8 @@
 
 {% set formGroupClass = 'group' %}
 
-{% set bigColumn = 'col col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-12 col-xs-12' %}
-{% set halfColumn = 'col col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1 col-sm-12 col-xs-12' %}
+{% set bigColumn = 'col col-lg-12 col-md-12 col-sm-12 col-xs-12' %}
+{% set quarterColumn = 'col col-lg-3 col-md-3 col-sm-12 col-xs-12' %}
 
 {% block body %}
     <form method="post" id="generator" action="{{ path('generator') }}">
@@ -24,15 +24,21 @@
                     {% endfor %}
                 </div>
                 <div class="row">
-                    <div class="col col-lg-4 col-md-4"><div class="note">Initial port for services exposed from docker to your machine</div></div>
-                    <div class="col col-lg-4 col-md-4"><div class="note">Location of your app's source code relative to docker-compose.yaml</div></div>
-                    <div class="col col-lg-4 col-md-4"><div class="note">Working directory for all containers</div></div>
+                    <div class="col col-lg-4 col-md-4">
+                        <div class="note">Initial port for services exposed from docker to your machine</div>
+                    </div>
+                    <div class="col col-lg-4 col-md-4">
+                        <div class="note">Location of your app's source code relative to docker-compose.yaml</div>
+                    </div>
+                    <div class="col col-lg-4 col-md-4">
+                        <div class="note">Working directory for all containers</div>
+                    </div>
                 </div>
             </div>
         </div>
 
         <div class="row">
-            <div class="{{ formGroupClass }} {{ bigColumn }}">
+            <div class="{{ formGroupClass }} col col-lg-9 col-md-9 col-sm-12 col-xs-12">
                 <h3>PHP configuration</h3>
 
                 <div class="col col-lg-6 col-md-6">
@@ -43,11 +49,10 @@
                     <div class="note">
                         <p>Please note:</p>
                         <ul>
-                            <li>The following extensions are already included on the base image: APC,
+                            <li>Extensions already included on base image: APC,
                                 cURL, JSON, Sodium, MBString, OPCache, Readline, XML and Zip.
                             </li>
                             <li>Each PHP version supports a different set of extensions to the others.</li>
-                            <li>Adding git to the container adds ~75MB to it.</li>
                         </ul>
                     </div>
                 </div>
@@ -60,10 +65,20 @@
                     {{ form_row(attribute(form.phpOptions, 'phpExtensions74')) }}
                 </div>
             </div>
+            <div class="{{ formGroupClass }} col col-lg-3 col-md-3 col-sm-12 col-xs-12">
+                <h3>Zero-config Services</h3>
+                <p class="note">The following services take no additional configuration parameters.</p>
+
+                {% for field in ['hasMemcached', 'hasRedis', 'hasMailhog', 'hasClickhouse'] %}
+                    {% if (attribute(form, field) is defined) %}
+                        <div class="form-group">{{ form_widget(attribute(form, field)) }}</div>
+                    {% endif %}
+                {% endfor %}
+            </div>
         </div>
 
         <div class="row">
-            <div class="{{ formGroupClass }} {{ halfColumn }}">
+            <div class="{{ formGroupClass }} {{ quarterColumn }}">
                 <h3>MySQL</h3>
                 {{ form_widget(attribute(form.mysqlOptions, 'hasMysql')) }}
 
@@ -76,7 +91,7 @@
                 </div>
             </div>
 
-            <div class="{{ formGroupClass }} col col-md-5 col-lg-5 col-sm-12 col-xs-12">
+            <div class="{{ formGroupClass }} {{ quarterColumn }}">
                 <h3>MariaDB</h3>
                 {{ form_widget(attribute(form.mariadbOptions, 'hasMariadb')) }}
 
@@ -88,9 +103,8 @@
                     {% endfor %}
                 </div>
             </div>
-        </div>
-        <div class="row">
-            <div class="{{ formGroupClass }} {{ halfColumn }}">
+
+            <div class="{{ formGroupClass }} {{ quarterColumn }}">
                 <h3>Postgres</h3>
                 {{ form_widget(attribute(form.postgresOptions, 'hasPostgres')) }}
 
@@ -102,7 +116,8 @@
                     {% endfor %}
                 </div>
             </div>
-            <div class="{{ formGroupClass }} col col-md-5 col-lg-5 col-sm-12 col-xs-12">
+
+            <div class="{{ formGroupClass }} {{ quarterColumn }}">
                 <h3>Elasticsearch</h3>
                 {{ form_widget(attribute(form.elasticsearchOptions, 'hasElasticsearch')) }}
                 <div id="elasticsearch-options">
@@ -111,19 +126,6 @@
             </div>
         </div>
 
-        <div class="row">
-            <div class="{{ formGroupClass }} col col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3 col-sm-12 col-xs-12">
-                <h3>Zero-config Services</h3>
-                <p class="note">The following services take no additional configuration parameters.</p>
-
-                {% for field in ['hasMemcached', 'hasRedis', 'hasMailhog', 'hasClickhouse'] %}
-                    {% if (attribute(form, field) is defined) %}
-                        <div class="form-group">{{ form_widget(attribute(form, field)) }}</div>
-                    {% endif %}
-                {% endfor %}
-            </div>
-        </div>
-
         {{ form_rest(form) }}
 
         <div class="row">

diff --git a/templates/layout.html.twig b/templates/layout.html.twig
@@ -30,12 +30,10 @@
 <div id="wrap">
     <!-- Header -->
     <section id="header" class="inner-shadow-bottom">
-        <div class="container">
-            <a href="{{ path('home') }}">
-                <h1> PHPDocker.io </h1>
-            </a>
-            <p>A PHP development environment generator built with Docker containers.</p>
-        </div>
+        <a href="{{ path('home') }}">
+            <h1> PHPDocker.io </h1>
+        </a>
+        <p>A PHP development environment generator built with Docker containers.</p>
     </section>
     <!-- End header -->