Skip to content

Commit e69e2db

Browse files
s3cur3s3cur3
committed
Add mobile support
This overhauls the page styles to support screens narrower than 768px. Prior to this patch, the UI was difficult or impossible to use on small screens. I've done my best to keep the tablet- and desktop-sized layouts the same.
1 parent a8569c9 commit e69e2db

File tree

8 files changed

+149
-78
lines changed

8 files changed

+149
-78
lines changed

‎lib/fun_with_flags/ui/templates/index.html.eex

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</nav>
1717

1818
<div class="container mt-3">
19-
<div class="row">
19+
<div class="row d-none d-md-flex">
2020
<div class="col">
2121
<table class="table table-hover">
2222
<thead class="thead-default">
@@ -49,5 +49,28 @@
4949
</div>
5050
</div>
5151
</div>
52+
<div class="container d-flex flex-column d-md-none">
53+
<%= for flag <- @flags do %>
54+
<div class="card mb-3">
55+
<div class="card-body">
56+
<h5 class="card-title">
57+
<a href="<%= path(@conn, "/flags/#{url_safe(flag.name)}") %>">
58+
<%= html_escape(flag.name) %>
59+
</a>
60+
</h5>
61+
<div class="d-flex flex-column gap-2">
62+
<div>
63+
<strong>Status:</strong>
64+
<%= html_smart_status_for(flag) %>
65+
</div>
66+
<div>
67+
<strong>Gates:</strong>
68+
<%= html_gate_list(flag) %>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
<% end %>
74+
</div>
5275
</body>
5376
</html>

‎lib/fun_with_flags/ui/templates/rows/_actor.html.eex

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
<div id="actor_<%= html_escape(@gate.for) %>" class="container fwf-I-hate-grids">
2-
<div class="row no-gutters">
3-
<div class="col-lg-8 col-md-7 col-sm-5 col-3 text-left">
2+
<div class="row no-gutters d-flex align-items-center flex-wrap-at-small-widths">
3+
<div class="flex-grow-1 flex-shrink-0 mr-auto w-100">
44
<code><%= html_escape(@gate.for) %></code>
55
</div>
6-
<div class="col-lg-2 col-md-2 col-sm-3 col-3 text-left">
7-
<%= html_status_for @gate.enabled %>
8-
</div>
9-
<div class="col-lg-1 col-md-2 col-sm-2 col-3 text-right">
10-
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/actors/#{url_safe(@gate.for)}") %>" method="post" class="fwf-inline-toggle">
11-
<input type="hidden" name="_method" value="PATCH">
12-
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">
6+
<div class="d-flex align-items-center w-100" style="gap: 8px;">
7+
<div class="flex-grow-1 mr-auto">
8+
<%= html_status_for @gate.enabled %>
9+
</div>
10+
<div class="flex-shrink-0 text-right d-flex" style="gap: 16px;">
11+
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/actors/#{url_safe(@gate.for)}") %>" method="post" class="fwf-inline-toggle">
12+
<input type="hidden" name="_method" value="PATCH">
13+
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">
1314

14-
<%= if @gate.enabled do %>
15-
<input type="hidden" name="enabled" value="false">
16-
<button type="submit" class="btn btn-sm btn-outline-danger">Disable</button>
17-
<% else %>
18-
<input type="hidden" name="enabled" value="true">
19-
<button type="submit" class="btn btn-sm btn-outline-success">Enable</button>
20-
<% end %>
21-
</form>
22-
</div>
23-
<div class="col-lg-1 col-md-1 col-sm-2 col-3 text-right">
24-
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/actors/#{url_safe(@gate.for)}") %>" method="post" class="float-right">
25-
<input type="hidden" name="_method" value="DELETE">
26-
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">
27-
<button type="submit" class="btn btn-sm btn-secondary" data-confirm="Are you sure you want to clear actor '<%= html_escape(@gate.for) %>'?">Clear</button>
28-
</form>
15+
<%= if @gate.enabled do %>
16+
<input type="hidden" name="enabled" value="false">
17+
<button type="submit" class="btn btn-sm btn-outline-danger">Disable</button>
18+
<% else %>
19+
<input type="hidden" name="enabled" value="true">
20+
<button type="submit" class="btn btn-sm btn-outline-success">Enable</button>
21+
<% end %>
22+
</form>
23+
24+
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/actors/#{url_safe(@gate.for)}") %>" method="post" class="float-right">
25+
<input type="hidden" name="_method" value="DELETE">
26+
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">
27+
<button type="submit" class="btn btn-sm btn-secondary" data-confirm="Are you sure you want to clear actor '<%= html_escape(@gate.for) %>'?">Clear</button>
28+
</form>
29+
</div>
2930
</div>
3031
</div>
3132
</div>

‎lib/fun_with_flags/ui/templates/rows/_group.html.eex

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<div id="group_<%= html_escape(@gate.for) %>" class="container fwf-I-hate-grids">
2-
<div class="row no-gutters">
3-
<div class="col-lg-8 col-md-7 col-sm-5 col-3 text-left">
2+
<div class="row no-gutters d-flex align-items-center flex-wrap-at-small-widths">
3+
<div class="flex-grow-1 flex-shrink-0 mr-auto w-100">
44
<code><%= html_escape(@gate.for) %></code>
55
</div>
6-
<div class="col-lg-2 col-md-2 col-sm-3 col-3 text-left">
7-
<%= html_status_for @gate.enabled %>
8-
</div>
9-
<div class="col-lg-1 col-md-2 col-sm-2 col-3 text-right">
6+
<div class="d-flex align-items-center w-100" style="gap: 8px;">
7+
<div class="flex-grow-1 mr-auto">
8+
<%= html_status_for @gate.enabled %>
9+
</div>
10+
<div class="flex-shrink-0 text-right d-flex" style="gap: 16px;">
1011
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/groups/#{url_safe(@gate.for)}") %>" method="post" class="fwf-inline-toggle">
1112
<input type="hidden" name="_method" value="PATCH">
1213
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">
@@ -19,13 +20,14 @@
1920
<button type="submit" class="btn btn-sm btn-outline-success">Enable</button>
2021
<% end %>
2122
</form>
22-
</div>
23-
<div class="col-lg-1 col-md-1 col-sm-2 col-3 text-right">
24-
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/groups/#{url_safe(@gate.for)}") %>" method="post" class="fwf-inline-toggle">
25-
<input type="hidden" name="_method" value="DELETE">
23+
</div>
24+
<div class="flex-shrink-0 text-right d-flex" style="gap: 16px;">
25+
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/groups/#{url_safe(@gate.for)}") %>" method="post" class="fwf-inline-toggle">
26+
<input type="hidden" name="_method" value="DELETE">
2627
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">
27-
<button type="submit" class="btn btn-sm btn-secondary" data-confirm="Are you sure you want to clear group '<%= html_escape(@gate.for) %>'?">Clear</button>
28-
</form>
28+
<button type="submit" class="btn btn-sm btn-secondary" data-confirm="Are you sure you want to clear group '<%= html_escape(@gate.for) %>'?">Clear</button>
29+
</form>
30+
</div>
2931
</div>
3032
</div>
3133
</div>

‎lib/fun_with_flags/ui/templates/rows/_new_actor.html.eex

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,20 @@
1313
</div>
1414
<% end %>
1515

16-
<div class="form-check form-check-inline">
17-
<label class="form-check-label">
18-
<input class="form-check-input" type="radio" name="enabled" id="actor-enabled-true" value="true"> enabled
19-
</label>
20-
</div>
21-
<div class="form-check form-check-inline">
22-
<label class="form-check-label">
23-
<input class="form-check-input" type="radio" name="enabled" id="actor-enabled-false" value="false" checked> disabled
24-
</label>
25-
</div>
16+
<div class="d-flex align-items-center">
17+
<div class="form-check form-check-inline mb-0">
18+
<label class="form-check-label">
19+
<input class="form-check-input" type="radio" name="enabled" id="actor-enabled-true" value="true"> enabled
20+
</label>
21+
</div>
22+
<div class="form-check form-check-inline mb-0">
23+
<label class="form-check-label">
24+
<input class="form-check-input" type="radio" name="enabled" id="actor-enabled-false" value="false" checked> disabled
25+
</label>
26+
</div>
2627

27-
<button type="submit" class="btn btn-sm btn-primary ml-3">Add</button>
28+
<button type="submit" class="btn btn-sm btn-primary ml-3">Add</button>
29+
</div>
2830
<small class="form-text text-danger ml-3"><%= assigns[:error_message] %></small>
2931
</form>
3032
</span>

‎lib/fun_with_flags/ui/templates/rows/_new_group.html.eex

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,20 @@
1313
</div>
1414
<% end %>
1515

16-
<div class="form-check form-check-inline">
17-
<label class="form-check-label">
18-
<input class="form-check-input" type="radio" name="enabled" id="group-enabled-true" value="true"> enabled
19-
</label>
20-
</div>
21-
<div class="form-check form-check-inline">
22-
<label class="form-check-label">
23-
<input class="form-check-input" type="radio" name="enabled" id="group-enabled-false" value="false" checked> disabled
24-
</label>
25-
</div>
16+
<div class="d-flex align-items-center">
17+
<div class="form-check form-check-inline mb-0">
18+
<label class="form-check-label">
19+
<input class="form-check-input" type="radio" name="enabled" id="group-enabled-true" value="true"> enabled
20+
</label>
21+
</div>
22+
<div class="form-check form-check-inline mb-0">
23+
<label class="form-check-label">
24+
<input class="form-check-input" type="radio" name="enabled" id="group-enabled-false" value="false" checked> disabled
25+
</label>
26+
</div>
2627

27-
<button type="submit" class="btn btn-sm btn-primary ml-3">Add</button>
28+
<button type="submit" class="btn btn-sm btn-primary ml-3">Add</button>
29+
</div>
2830
<small class="form-text text-danger ml-3"><%= assigns[:error_message] %></small>
2931
</form>
3032
</span>

‎lib/fun_with_flags/ui/templates/rows/_percentage.html.eex

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,16 @@
66
end
77
%>
88
<div id="percentage_gate" class="container fwf-I-hate-grids">
9-
<div class="row no-gutters">
10-
<div class="col-lg-6 col-md-6 col-sm-5 col-4 text-left">
9+
<div class="row no-gutters d-flex flex-nowrap" style="gap: 8px;">
10+
<div class="flex-grow-1 w-100">
1111
<span class="badge badge-default">% of <%= gate_type %></span>
1212
-
1313
<%= html_status_for @gate.enabled %> for <%= Utils.as_percentage(@gate.for) %>% of the <%= gate_type %>
14-
</div>
1514

16-
<div class="col-lg-5 col-md-5 col-sm-5 col-5 text-left">
1715
raw value: <code><%= html_escape(@gate.for) %></code>
1816
</div>
1917

20-
<div class="col-lg-1 col-md-1 col-sm-2 col-3 text-right">
18+
<div class="flex-shrink-0 text-right">
2119
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/percentage") %>" method="post" class="float-right">
2220
<input type="hidden" name="_method" value="DELETE">
2321
<input type="hidden" name="_csrf_token" value="<%= @conn.assigns[:csrf_token] %>">

‎lib/fun_with_flags/ui/templates/rows/_percentage_form.html.eex

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,22 @@
1818
</div>
1919
<% end %>
2020

21-
<div class="form-check form-check-inline">
22-
<label class="form-check-label">
23-
<input class="form-check-input" type="radio" name="percent_type" id="radio-percent-type-time" value="time" checked>
24-
<span class="badge badge-default">% of time</span>
25-
</label>
26-
</div>
27-
<div class="form-check form-check-inline">
28-
<label class="form-check-label">
29-
<input class="form-check-input" type="radio" name="percent_type" id="radio-percent-type-actors" value="actors">
30-
<span class="badge badge-default">% of actors</span>
31-
</label>
32-
</div>
21+
<div class="d-flex align-items-center">
22+
<div class="form-check form-check-inline mb-0">
23+
<label class="form-check-label">
24+
<input class="form-check-input" type="radio" name="percent_type" id="radio-percent-type-time" value="time" checked>
25+
<span class="badge badge-default">% of time</span>
26+
</label>
27+
</div>
28+
<div class="form-check form-check-inline mb-0">
29+
<label class="form-check-label">
30+
<input class="form-check-input" type="radio" name="percent_type" id="radio-percent-type-actors" value="actors">
31+
<span class="badge badge-default">% of actors</span>
32+
</label>
33+
</div>
3334

34-
<button type="submit" class="btn btn-sm btn-primary ml-3"><%= action %></button>
35+
<button type="submit" class="btn btn-sm btn-primary ml-3"><%= action %></button>
36+
</div>
3537
<small class="form-text text-danger ml-3"><%= assigns[:error_message] %></small>
3638
</form>
3739
</span>

‎priv/static/style.css

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,29 @@ colors
88
#4e2a8e; elixir-lang link
99
*/
1010

11+
/* This is present in Bootstrap 4.0, but not the pre-release version we're using. */
12+
.card-body {
13+
-webkit-box-flex: 1;
14+
-ms-flex: 1 1 auto;
15+
flex: 1 1 auto;
16+
padding: 1.25rem;
17+
}
18+
1119
#fwf-top-bar {
1220
background-color: #714a94;
1321
}
1422

23+
.navbar-collapse {
24+
display: flex;
25+
flex-direction: row;
26+
flex-wrap: wrap;
27+
gap: 8px;
28+
justify-content: flex-end;
29+
}
30+
31+
.navbar-collapse > ul li {
32+
flex-shrink: 0;
33+
}
1534

1635
ul.fwf-gate-list > li:first-child {
1736
border-top: none;
@@ -32,10 +51,32 @@ div.container.fwf-I-hate-grids {
3251
width: 100%;
3352
}
3453

54+
.form-inline {
55+
row-gap: 8px;
56+
}
57+
3558
div.input-group.fwf-wide-input {
36-
width: 420px;
59+
width: 320px;
3760
}
3861

3962
button {
4063
cursor: pointer;
4164
}
65+
66+
.flex-wrap-at-small-widths {
67+
flex-wrap: wrap;
68+
row-gap: 8px;
69+
}
70+
71+
@media (min-width: 768px) {
72+
.flex-wrap-at-small-widths {
73+
flex-wrap: nowrap;
74+
}
75+
}
76+
77+
@media (min-width: 1024px) {
78+
div.input-group.fwf-wide-input {
79+
width: 420px;
80+
}
81+
}
82+

0 commit comments

Comments
 (0)