Skip to content

Commit 3e8bb5b

Browse files
frostbittenNetrilix
frostbitten
authored and
Netrilix
committed
Number of small UI fixes (#573)
A few cases where col-xs-12 could be used. Some changes to settings page where certain text would not fit in label. Better to have extra space than overlapping text. Some `div.well` elements converted to `<pre><code>` to prevent text falling out of panels. This commit also adds a few bootstrap4 css utilities, the most important being `.img-fluid`.
1 parent f193c0c commit 3e8bb5b

7 files changed

Lines changed: 287 additions & 34 deletions

File tree

‎public/css/bootstrap-custom.css‎

Lines changed: 255 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
.container-narrow {
9-
width: 800px;
9+
max-width: 800px;
1010
}
1111

1212
.panel-heading-buttons h3 {
@@ -36,3 +36,257 @@ label.label-switch {
3636
form textarea {
3737
resize: vertical; /* user can resize vertically, but width is fixed */
3838
}
39+
40+
/* Utilities from Bootstrap 4 alpha 2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css */
41+
42+
.img-fluid {
43+
display: block;
44+
max-width: 100%;
45+
height: auto;
46+
}
47+
48+
49+
.m-x-auto {
50+
margin-right: auto !important;
51+
margin-left: auto !important;
52+
}
53+
54+
.m-a-0 {
55+
margin: 0 0 !important;
56+
}
57+
58+
.m-t-0 {
59+
margin-top: 0 !important;
60+
}
61+
62+
.m-r-0 {
63+
margin-right: 0 !important;
64+
}
65+
66+
.m-b-0 {
67+
margin-bottom: 0 !important;
68+
}
69+
70+
.m-l-0 {
71+
margin-left: 0 !important;
72+
}
73+
74+
.m-x-0 {
75+
margin-right: 0 !important;
76+
margin-left: 0 !important;
77+
}
78+
79+
.m-y-0 {
80+
margin-top: 0 !important;
81+
margin-bottom: 0 !important;
82+
}
83+
84+
.m-a-1 {
85+
margin: 1rem 1rem !important;
86+
}
87+
88+
.m-t-1 {
89+
margin-top: 1rem !important;
90+
}
91+
92+
.m-r-1 {
93+
margin-right: 1rem !important;
94+
}
95+
96+
.m-b-1 {
97+
margin-bottom: 1rem !important;
98+
}
99+
100+
.m-l-1 {
101+
margin-left: 1rem !important;
102+
}
103+
104+
.m-x-1 {
105+
margin-right: 1rem !important;
106+
margin-left: 1rem !important;
107+
}
108+
109+
.m-y-1 {
110+
margin-top: 1rem !important;
111+
margin-bottom: 1rem !important;
112+
}
113+
114+
.m-a-2 {
115+
margin: 1.5rem 1.5rem !important;
116+
}
117+
118+
.m-t-2 {
119+
margin-top: 1.5rem !important;
120+
}
121+
122+
.m-r-2 {
123+
margin-right: 1.5rem !important;
124+
}
125+
126+
.m-b-2 {
127+
margin-bottom: 1.5rem !important;
128+
}
129+
130+
.m-l-2 {
131+
margin-left: 1.5rem !important;
132+
}
133+
134+
.m-x-2 {
135+
margin-right: 1.5rem !important;
136+
margin-left: 1.5rem !important;
137+
}
138+
139+
.m-y-2 {
140+
margin-top: 1.5rem !important;
141+
margin-bottom: 1.5rem !important;
142+
}
143+
144+
.m-a-3 {
145+
margin: 3rem 3rem !important;
146+
}
147+
148+
.m-t-3 {
149+
margin-top: 3rem !important;
150+
}
151+
152+
.m-r-3 {
153+
margin-right: 3rem !important;
154+
}
155+
156+
.m-b-3 {
157+
margin-bottom: 3rem !important;
158+
}
159+
160+
.m-l-3 {
161+
margin-left: 3rem !important;
162+
}
163+
164+
.m-x-3 {
165+
margin-right: 3rem !important;
166+
margin-left: 3rem !important;
167+
}
168+
169+
.m-y-3 {
170+
margin-top: 3rem !important;
171+
margin-bottom: 3rem !important;
172+
}
173+
174+
.p-a-0 {
175+
padding: 0 0 !important;
176+
}
177+
178+
.p-t-0 {
179+
padding-top: 0 !important;
180+
}
181+
182+
.p-r-0 {
183+
padding-right: 0 !important;
184+
}
185+
186+
.p-b-0 {
187+
padding-bottom: 0 !important;
188+
}
189+
190+
.p-l-0 {
191+
padding-left: 0 !important;
192+
}
193+
194+
.p-x-0 {
195+
padding-right: 0 !important;
196+
padding-left: 0 !important;
197+
}
198+
199+
.p-y-0 {
200+
padding-top: 0 !important;
201+
padding-bottom: 0 !important;
202+
}
203+
204+
.p-a-1 {
205+
padding: 1rem 1rem !important;
206+
}
207+
208+
.p-t-1 {
209+
padding-top: 1rem !important;
210+
}
211+
212+
.p-r-1 {
213+
padding-right: 1rem !important;
214+
}
215+
216+
.p-b-1 {
217+
padding-bottom: 1rem !important;
218+
}
219+
220+
.p-l-1 {
221+
padding-left: 1rem !important;
222+
}
223+
224+
.p-x-1 {
225+
padding-right: 1rem !important;
226+
padding-left: 1rem !important;
227+
}
228+
229+
.p-y-1 {
230+
padding-top: 1rem !important;
231+
padding-bottom: 1rem !important;
232+
}
233+
234+
.p-a-2 {
235+
padding: 1.5rem 1.5rem !important;
236+
}
237+
238+
.p-t-2 {
239+
padding-top: 1.5rem !important;
240+
}
241+
242+
.p-r-2 {
243+
padding-right: 1.5rem !important;
244+
}
245+
246+
.p-b-2 {
247+
padding-bottom: 1.5rem !important;
248+
}
249+
250+
.p-l-2 {
251+
padding-left: 1.5rem !important;
252+
}
253+
254+
.p-x-2 {
255+
padding-right: 1.5rem !important;
256+
padding-left: 1.5rem !important;
257+
}
258+
259+
.p-y-2 {
260+
padding-top: 1.5rem !important;
261+
padding-bottom: 1.5rem !important;
262+
}
263+
264+
.p-a-3 {
265+
padding: 3rem 3rem !important;
266+
}
267+
268+
.p-t-3 {
269+
padding-top: 3rem !important;
270+
}
271+
272+
.p-r-3 {
273+
padding-right: 3rem !important;
274+
}
275+
276+
.p-b-3 {
277+
padding-bottom: 3rem !important;
278+
}
279+
280+
.p-l-3 {
281+
padding-left: 3rem !important;
282+
}
283+
284+
.p-x-3 {
285+
padding-right: 3rem !important;
286+
padding-left: 3rem !important;
287+
}
288+
289+
.p-y-3 {
290+
padding-top: 3rem !important;
291+
padding-bottom: 3rem !important;
292+
}

‎userfrosting/initialize.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
// This if-block just checks that config-userfrosting.php exists
1313
if (!file_exists(__DIR__ . "/config-userfrosting.php")){
14+
http_response_code(503);
1415
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>";
1516
exit;
1617
}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@
2525
{% for plugin_name, plugin in settings %}
2626
{% for name, setting in plugin %}
2727
<div class="form-group">
28-
<label for="input_{{name}}" class="col-sm-2 control-label">{{setting.label}}</label>
29-
<div class="col-sm-10">
28+
<label for="input_{{name}}" class="col-xs-4 col-sm-3 col-lg-2 control-label">{{setting.label}}</label>
29+
<div class="col-xs-8 col-sm-9 col-lg-10">
3030
{% if (setting.type == 'text') %}
31-
<input type='text' id="input_{{name}}" class="form-control" name="{{plugin_name}}[{{name}}]" value='{{setting.value}}' style="width: 50%;"/>
31+
<input type='text' id="input_{{name}}" class="form-control" name="{{plugin_name}}[{{name}}]" value='{{setting.value}}'>
3232
{% elseif (setting.type == 'select') %}
3333
<select id="input_{{name}}" class='form-control select2' name="{{plugin_name}}[{{name}}]">
3434
{% for option, label in setting.options %}
@@ -56,10 +56,8 @@
5656
</div>
5757
<div class='panel-body'>
5858
{% for name, value in info %}
59-
<p class="h6">{{name}}</p>
60-
<div class="well well-sm">
61-
{{value}}
62-
</div>
59+
<p class="h6">{{name}}</p>
60+
<pre><code>{{value}}</code></pre>
6361
{% endfor %}
6462
</div>
6563
<div class="panel-footer">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% block content %}
1414
<div class="container text-center">
1515
<h1>We can't seem to connect to the database.</h1>
16-
<img src="{{site.uri.image}}/database.png">
16+
<img class="img-fluid" src="{{site.uri.image}}/database.png">
1717
<br><br>
1818
<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>
1919
</div> <!-- /container -->

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22

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

0 commit comments

Comments
 (0)