Number of small UI fixes

public/css/bootstrap-custom.css

@@ -6,7 +6,7 @@
 }
 
 .container-narrow {
-    width: 800px;
+    max-width: 800px;
 }
 
 .panel-heading-buttons h3 {
@@ -36,3 +36,257 @@ label.label-switch {
 form textarea {
   resize: vertical; /* user can resize vertically, but width is fixed */
 }
+
+/* Utilities from Bootstrap 4 alpha 2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css */
+
+.img-fluid { 
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.m-a-0 {
+  margin: 0 0 !important;
+}
+
+.m-t-0 {
+  margin-top: 0 !important;
+}
+
+.m-r-0 {
+  margin-right: 0 !important;
+}
+
+.m-b-0 {
+  margin-bottom: 0 !important;
+}
+
+.m-l-0 {
+  margin-left: 0 !important;
+}
+
+.m-x-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.m-y-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-a-1 {
+  margin: 1rem 1rem !important;
+}
+
+.m-t-1 {
+  margin-top: 1rem !important;
+}
+
+.m-r-1 {
+  margin-right: 1rem !important;
+}
+
+.m-b-1 {
+  margin-bottom: 1rem !important;
+}
+
+.m-l-1 {
+  margin-left: 1rem !important;
+}
+
+.m-x-1 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.m-y-1 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.m-a-2 {
+  margin: 1.5rem 1.5rem !important;
+}
+
+.m-t-2 {
+  margin-top: 1.5rem !important;
+}
+
+.m-r-2 {
+  margin-right: 1.5rem !important;
+}
+
+.m-b-2 {
+  margin-bottom: 1.5rem !important;
+}
+
+.m-l-2 {
+  margin-left: 1.5rem !important;
+}
+
+.m-x-2 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.m-y-2 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.m-a-3 {
+  margin: 3rem 3rem !important;
+}
+
+.m-t-3 {
+  margin-top: 3rem !important;
+}
+
+.m-r-3 {
+  margin-right: 3rem !important;
+}
+
+.m-b-3 {
+  margin-bottom: 3rem !important;
+}
+
+.m-l-3 {
+  margin-left: 3rem !important;
+}
+
+.m-x-3 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.m-y-3 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.p-a-0 {
+  padding: 0 0 !important;
+}
+
+.p-t-0 {
+  padding-top: 0 !important;
+}
+
+.p-r-0 {
+  padding-right: 0 !important;
+}
+
+.p-b-0 {
+  padding-bottom: 0 !important;
+}
+
+.p-l-0 {
+  padding-left: 0 !important;
+}
+
+.p-x-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.p-y-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-a-1 {
+  padding: 1rem 1rem !important;
+}
+
+.p-t-1 {
+  padding-top: 1rem !important;
+}
+
+.p-r-1 {
+  padding-right: 1rem !important;
+}
+
+.p-b-1 {
+  padding-bottom: 1rem !important;
+}
+
+.p-l-1 {
+  padding-left: 1rem !important;
+}
+
+.p-x-1 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.p-y-1 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.p-a-2 {
+  padding: 1.5rem 1.5rem !important;
+}
+
+.p-t-2 {
+  padding-top: 1.5rem !important;
+}
+
+.p-r-2 {
+  padding-right: 1.5rem !important;
+}
+
+.p-b-2 {
+  padding-bottom: 1.5rem !important;
+}
+
+.p-l-2 {
+  padding-left: 1.5rem !important;
+}
+
+.p-x-2 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.p-y-2 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.p-a-3 {
+  padding: 3rem 3rem !important;
+}
+
+.p-t-3 {
+  padding-top: 3rem !important;
+}
+
+.p-r-3 {
+  padding-right: 3rem !important;
+}
+
+.p-b-3 {
+  padding-bottom: 3rem !important;
+}
+
+.p-l-3 {
+  padding-left: 3rem !important;
+}
+
+.p-x-3 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+.p-y-3 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}

userfrosting/initialize.php

@@ -11,6 +11,7 @@
 
 // This if-block just checks that config-userfrosting.php exists
 if (!file_exists(__DIR__ . "/config-userfrosting.php")){
+	http_response_code(503);
     echo "<h2>We can't seem to find config-userfrosting.php!  You should rename the file config-userfrosting-example.php to config-userfrosting.php, and then fill in the configuration details for your database and server.  For more information, please see the <a href='http://www.userfrosting.com/installation/#install-userfrosting'>installation instructions</a>.</h2><br>";
     exit;
 }

userfrosting/templates/themes/default/config/site-settings.twig

@@ -25,10 +25,10 @@
                 {% for plugin_name, plugin in settings %}
                     {% for name, setting in plugin %} 
                         <div class="form-group">
-                            <label for="input_{{name}}" class="col-sm-2 control-label">{{setting.label}}</label>
-                            <div class="col-sm-10">
+                            <label for="input_{{name}}" class="col-xs-4 col-sm-3 col-lg-2 control-label">{{setting.label}}</label>
+                            <div class="col-xs-8 col-sm-9 col-lg-10">
                                 {% if (setting.type == 'text') %}
-                                    <input type='text' id="input_{{name}}" class="form-control" name="{{plugin_name}}[{{name}}]" value='{{setting.value}}' style="width: 50%;"/>
+                                    <input type='text' id="input_{{name}}" class="form-control" name="{{plugin_name}}[{{name}}]" value='{{setting.value}}'>
                                 {% elseif (setting.type == 'select') %}
                                     <select id="input_{{name}}" class='form-control select2' name="{{plugin_name}}[{{name}}]">
                                         {% for option, label in setting.options %}
@@ -56,10 +56,8 @@
                 </div>
                 <div class='panel-body'>
                     {% for name, value in info %}
-                        <p class="h6">{{name}}</p>                  
-                        <div class="well well-sm">
-                            {{value}}
-                        </div>
+                        <p class="h6">{{name}}</p>
+                            <pre><code>{{value}}</code></pre>
                     {% endfor %}
                 </div>
                 <div class="panel-footer">

userfrosting/templates/themes/default/errors/database.twig

@@ -13,7 +13,7 @@
 {% block content %}
     <div class="container text-center">
         <h1>We can't seem to connect to the database.</h1>
-        <img src="{{site.uri.image}}/database.png">
+        <img class="img-fluid" src="{{site.uri.image}}/database.png">
         <br><br>
         <p class="lead">Have you tried hacking into the mainframe?  Seriously though, check your PHP error log to figure out what's up.  You probably just need to enter your database credentials in <code>userfrosting/config-userfrosting.php</code>.  If you are sure that your credentials are fine, try simply reloading the page.</p>
     </div> <!-- /container -->

userfrosting/templates/themes/default/install/install-errors.twig

@@ -2,24 +2,24 @@
 
 {# Set page properties (page.*) here. #}
 {% block page %}
-    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template, 
-    but BEFORE the page itself is rendered. #}    
+    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template,
+    but BEFORE the page itself is rendered. #}
     {% set page = page | merge({
         "title"       : "Installation Error",
         "description" : "Installation page for UserFrosting"
     }) %}
     {{ parent() }}
 {% endblock %}
-                
+
 {% block content %}
     <div class="container">
         <h1 class = "text-center">Something's not right here.</h1>
         <br>
         <div class="row">
-            <div class="col-lg-6">
-                <img src="{{site.uri.image}}/stuck.jpg">
+            <div  class="col-xs-12 col-sm-4 col-md-6" >
+                <img class="img-fluid" src="{{site.uri.image}}/stuck.jpg">
             </div>
-            <div class="col-lg-6">
+            <div class="col-xs-12 col-sm-8 col-md-6">
                 <p class="h3 text-center">Please fix the following errors, then <a href="{{site.uri.public}}/install">reload</a>.</p>
                 {% for message in messages %}
                     <div class="list-group">