Skip to content

Commit 1e0ed3e

Browse files
GuillaumeGomezGuillaumeGomez
committed
Remove one DOM level for filters menu
1 parent d7064dc commit 1e0ed3e

File tree

2 files changed

+112
-114
lines changed

2 files changed

+112
-114
lines changed

‎util/gh-pages/index_template.html‎

Lines changed: 99 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -57,119 +57,117 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
5757
</noscript> {# #}
5858

5959
<div id="menu-filters"> {# #}
60-
<div class="panel-body row"> {# #}
61-
<div id="upper-filters"> {# #}
62-
<div class="dropdown" data-filter="levels" tabindex="-1"> {# #}
63-
<button type="button" class="btn-default dropdown-toggle"> {# #}
64-
Lint levels <span id="levels-count" class="badge">4</span> <span class="caret"></span> {# #}
65-
</button> {# #}
66-
<ul class="dropdown-menu"> {# #}
67-
<li class="checkbox"> {# #}
68-
<button class="reset-all">All</button> {# #}
69-
</li> {# #}
70-
<li class="checkbox"> {# #}
71-
<button class="reset-none">None</button> {# #}
72-
</li> {# #}
73-
<li role="separator" class="divider"></li> {# #}
74-
{% for level in ["allow", "warn", "deny", "none"] %}
75-
<li class="checkbox"> {# #}
76-
<label> {# #}
77-
<input type="checkbox" name="{{ level }}" checked />
78-
{{ level | capitalize }}
79-
</label> {# #}
80-
</li> {# #}
81-
{% endfor %}
82-
</ul> {# #}
83-
</div> {# #}
84-
<div class="dropdown" data-filter="groups" tabindex="-1"> {# #}
85-
<button type="button" class="btn-default dropdown-toggle"> {# #}
86-
Lint groups <span id="groups-count" class="badge">9</span> <span class="caret"></span> {# #}
87-
</button> {# #}
88-
<ul class="dropdown-menu"> {# #}
89-
<li class="checkbox"> {# #}
90-
<button class="reset-all">All</button> {# #}
91-
</li> {# #}
92-
<li class="checkbox"> {# #}
93-
<button class="reset-default">Default</button> {# #}
94-
</li> {# #}
60+
<div id="upper-filters"> {# #}
61+
<div class="dropdown" data-filter="levels" tabindex="-1"> {# #}
62+
<button type="button" class="btn-default dropdown-toggle"> {# #}
63+
Lint levels <span id="levels-count" class="badge">4</span> <span class="caret"></span> {# #}
64+
</button> {# #}
65+
<ul class="dropdown-menu"> {# #}
66+
<li class="checkbox"> {# #}
67+
<button class="reset-all">All</button> {# #}
68+
</li> {# #}
69+
<li class="checkbox"> {# #}
70+
<button class="reset-none">None</button> {# #}
71+
</li> {# #}
72+
<li role="separator" class="divider"></li> {# #}
73+
{% for level in ["allow", "warn", "deny", "none"] %}
9574
<li class="checkbox"> {# #}
96-
<button class="reset-none">None</button> {# #}
75+
<label> {# #}
76+
<input type="checkbox" name="{{ level }}" checked />
77+
{{ level | capitalize }}
78+
</label> {# #}
9779
</li> {# #}
98-
<li role="separator" class="divider"></li> {# #}
99-
{% for group in ["cargo", "complexity", "correctness", "nursery", "pedantic", "perf", "restriction", "style", "suspicious", "deprecated"] %}
100-
<li class="checkbox"> {# #}
101-
<label> {# #}
102-
<input type="checkbox" name="{{ group }}" {% if *group != "deprecated" +%} checked {% endif %} />
103-
{{ group | capitalize }}
104-
</label> {# #}
105-
</li> {# #}
106-
{% endfor %}
107-
</ul> {# #}
108-
</div> {# #}
109-
<div id="version-filter" class="dropdown" tabindex="-1"> {# #}
110-
<button type="button" class="btn-default dropdown-toggle"> {# #}
111-
Version {#+ #}
112-
<span id="versions-count" class="badge">0</span> {#+ #}
113-
<span class="caret"></span> {# #}
114-
</button> {# #}
115-
<ul class="dropdown-menu"> {# #}
80+
{% endfor %}
81+
</ul> {# #}
82+
</div> {# #}
83+
<div class="dropdown" data-filter="groups" tabindex="-1"> {# #}
84+
<button type="button" class="btn-default dropdown-toggle"> {# #}
85+
Lint groups <span id="groups-count" class="badge">9</span> <span class="caret"></span> {# #}
86+
</button> {# #}
87+
<ul class="dropdown-menu"> {# #}
88+
<li class="checkbox"> {# #}
89+
<button class="reset-all">All</button> {# #}
90+
</li> {# #}
91+
<li class="checkbox"> {# #}
92+
<button class="reset-default">Default</button> {# #}
93+
</li> {# #}
94+
<li class="checkbox"> {# #}
95+
<button class="reset-none">None</button> {# #}
96+
</li> {# #}
97+
<li role="separator" class="divider"></li> {# #}
98+
{% for group in ["cargo", "complexity", "correctness", "nursery", "pedantic", "perf", "restriction", "style", "suspicious", "deprecated"] %}
11699
<li class="checkbox"> {# #}
117-
<button id="reset-versions">Clear filters</button> {# #}
100+
<label> {# #}
101+
<input type="checkbox" name="{{ group }}" {% if *group != "deprecated" +%} checked {% endif %} />
102+
{{ group | capitalize }}
103+
</label> {# #}
118104
</li> {# #}
119-
<li role="separator" class="divider"></li> {# #}
120-
{% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
121-
<li class="checkbox"> {# #}
122-
<label>{{ sym }}</label> {#+ #}
123-
<span>1.</span> {# #}
124-
<input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
125-
<span>.0</span> {# #}
126-
</li> {# #}
127-
{% endfor %}
128-
</ul> {# #}
129-
</div> {# #}
130-
<div class="dropdown" data-filter="applicabilities" tabindex="-1"> {# #}
131-
<button type="button" class="btn-default dropdown-toggle"> {# #}
132-
Applicability {#+ #}
133-
<span id="applicabilities-count" class="badge">4</span> {#+ #}
134-
<span class="caret"></span> {# #}
135-
</button> {# #}
136-
<ul class="dropdown-menu"> {# #}
105+
{% endfor %}
106+
</ul> {# #}
107+
</div> {# #}
108+
<div id="version-filter" class="dropdown" tabindex="-1"> {# #}
109+
<button type="button" class="btn-default dropdown-toggle"> {# #}
110+
Version {#+ #}
111+
<span id="versions-count" class="badge">0</span> {#+ #}
112+
<span class="caret"></span> {# #}
113+
</button> {# #}
114+
<ul class="dropdown-menu"> {# #}
115+
<li class="checkbox"> {# #}
116+
<button id="reset-versions">Clear filters</button> {# #}
117+
</li> {# #}
118+
<li role="separator" class="divider"></li> {# #}
119+
{% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
137120
<li class="checkbox"> {# #}
138-
<button class="reset-all">All</button> {# #}
121+
<label>{{ sym }}</label> {#+ #}
122+
<span>1.</span> {# #}
123+
<input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
124+
<span>.0</span> {# #}
139125
</li> {# #}
126+
{% endfor %}
127+
</ul> {# #}
128+
</div> {# #}
129+
<div class="dropdown" data-filter="applicabilities" tabindex="-1"> {# #}
130+
<button type="button" class="btn-default dropdown-toggle"> {# #}
131+
Applicability {#+ #}
132+
<span id="applicabilities-count" class="badge">4</span> {#+ #}
133+
<span class="caret"></span> {# #}
134+
</button> {# #}
135+
<ul class="dropdown-menu"> {# #}
136+
<li class="checkbox"> {# #}
137+
<button class="reset-all">All</button> {# #}
138+
</li> {# #}
139+
<li class="checkbox"> {# #}
140+
<button class="reset-none">None</button> {# #}
141+
</li> {# #}
142+
<li role="separator" class="divider"></li> {# #}
143+
{% for applicability in ["Unspecified", "MachineApplicable", "MaybeIncorrect", "HasPlaceholders"] %}
140144
<li class="checkbox"> {# #}
141-
<button class="reset-none">None</button> {# #}
145+
<label> {# #}
146+
<input type="checkbox" name="{{ applicability }}" checked />
147+
{{ applicability }}
148+
</label> {# #}
142149
</li> {# #}
143-
<li role="separator" class="divider"></li> {# #}
144-
{% for applicability in ["Unspecified", "MachineApplicable", "MaybeIncorrect", "HasPlaceholders"] %}
145-
<li class="checkbox"> {# #}
146-
<label> {# #}
147-
<input type="checkbox" name="{{ applicability }}" checked />
148-
{{ applicability }}
149-
</label> {# #}
150-
</li> {# #}
151-
{% endfor %}
152-
</ul> {# #}
153-
</div> {# #}
154-
</div> {# #}
155-
<div class="search-control"> {# #}
156-
<div class="input-group"> {# #}
157-
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
158-
<input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
159-
<button id="filter-clear" type="button"> {# #}
160-
Clear {# #}
161-
</button> {# #}
162-
</div> {# #}
150+
{% endfor %}
151+
</ul> {# #}
163152
</div> {# #}
164-
<div class="btn-group expansion-group"> {# #}
165-
<button title="Collapse All" class="btn-default expansion-control" type="button" id="collapse-all"> {# #}
166-
<span class="glyphicon glyphicon-collapse-up"></span> {# #}
167-
</button> {# #}
168-
<button title="Expand All" class="btn-default expansion-control" type="button" id="expand-all"> {# #}
169-
<span class="glyphicon glyphicon-collapse-down"></span> {# #}
153+
</div> {# #}
154+
<div class="search-control"> {# #}
155+
<div class="input-group"> {# #}
156+
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
157+
<input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
158+
<button id="filter-clear" type="button"> {# #}
159+
Clear {# #}
170160
</button> {# #}
171161
</div> {# #}
172162
</div> {# #}
163+
<div class="btn-group expansion-group"> {# #}
164+
<button title="Collapse All" class="btn-default expansion-control" type="button" id="collapse-all"> {# #}
165+
<span class="glyphicon glyphicon-collapse-up"></span> {# #}
166+
</button> {# #}
167+
<button title="Expand All" class="btn-default expansion-control" type="button" id="expand-all"> {# #}
168+
<span class="glyphicon glyphicon-collapse-down"></span> {# #}
169+
</button> {# #}
170+
</div> {# #}
173171
</div>
174172
{% for lint in lints %}
175173
<article id="{{lint.id}}"> {# #}

‎util/gh-pages/style.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -116,27 +116,23 @@ label {
116116
display: block;
117117
}
118118

119-
div.panel-body {
120-
padding: 15px;
121-
}
122-
div.panel-body::before, div.panel-body::after {
123-
display: table;
124-
content: " ";
125-
}
126-
div.panel-body::after {
127-
clear: both;
119+
#menu-filters {
120+
padding: 15px 0;
121+
display: flex;
122+
flex-direction: column;
128123
}
129-
div.panel-body button {
124+
125+
#menu-filters button {
130126
background: var(--searchbar-bg);
131127
border-color: var(--theme-popup-border);
132128
color: var(--searchbar-fg);
133129
}
134130

135-
div.panel-body button:hover {
131+
#menu-filters button:hover {
136132
box-shadow: 0 0 3px var(--searchbar-shadow-color);
137133
}
138134

139-
div.panel-body button.open {
135+
#menu-filters button.open {
140136
filter: brightness(90%);
141137
}
142138

@@ -358,6 +354,10 @@ article:hover .panel-title-name .anchor { display: inline;}
358354
margin-top: 0;
359355
padding: 0px 15px;
360356
width: 16.66666667%;
357+
align-self: flex-start;
358+
}
359+
#menu-filters {
360+
flex-direction: row;
361361
}
362362
}
363363

@@ -377,7 +377,7 @@ article:hover .panel-title-name .anchor { display: inline;}
377377

378378
@media (max-width: 412px) {
379379
#upper-filters,
380-
.panel-body .search-control {
380+
#menu-filters .search-control {
381381
padding-right: 8px;
382382
padding-left: 8px;
383383
}

0 commit comments

Comments
 (0)