Skip to content

Commit 8468133

Browse files
tompavetompave
authored
Merge pull request #44 from s3cur3/ty/mobile-css
Add mobile support
2 parents b762907 + 235490f commit 8468133

File tree

8 files changed

+157
-82
lines changed

8 files changed

+157
-82
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: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@
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">
11-
<span class="badge badge-default">% of <%= gate_type %></span>
12-
-
13-
<%= html_status_for @gate.enabled %> for <%= Utils.as_percentage(@gate.for) %>% of the <%= gate_type %>
14-
</div>
9+
<div class="row no-gutters d-flex flex-nowrap" style="gap: 8px;">
10+
<div class="d-md-flex flex-grow-1 w-100 justify-content-between">
11+
<div>
12+
<span class="badge badge-default">% of <%= gate_type %></span>
13+
-
14+
<%= html_status_for @gate.enabled %> for <%= Utils.as_percentage(@gate.for) %>% of the <%= gate_type %>
15+
</div>
1516

16-
<div class="col-lg-5 col-md-5 col-sm-5 col-5 text-left">
17-
raw value: <code><%= html_escape(@gate.for) %></code>
17+
<div class="text-left">
18+
raw value: <code><%= html_escape(@gate.for) %></code>
19+
</div>
1820
</div>
1921

20-
<div class="col-lg-1 col-md-1 col-sm-2 col-3 text-right">
22+
<div class="flex-shrink-0 text-right">
2123
<form action="<%= path(@conn, "/flags/#{url_safe(@flag.name)}/percentage") %>" method="post" class="float-right">
2224
<input type="hidden" name="_method" value="DELETE">
2325
<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)