Skip to content

Commit 0c86711

Browse files
TheElectronWillTheElectronWill
committed
Display search results in tabs on small screens
1 parent 9cabed4 commit 0c86711

File tree

2 files changed

+137
-146
lines changed

2 files changed

+137
-146
lines changed

‎doc-tool/resources/_layouts/search.html

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,40 @@
11
---
22
layout: main
33
title: Search
4-
extraCSS:
5-
- css/search.css
64
---
5+
<link rel="stylesheet" href="{{site.baseurl}}/css/search.css">
76
<div id="back-container">
8-
<span>
9-
<a id="back-anchor" href="">Back</a>
10-
</span>
7+
<a id="back-anchor" href=""><i class="fas fa-hand-point-left"></i> Back</a>
118
</div>
129

13-
<div id="search-container">
10+
<main id="search-container" class="container">
11+
<!-- Search terms -->
1412
<h1 id="searching-for"></h1>
15-
<div id="result-container">
16-
<div class="results">
17-
<h1>Entity Results</h1>
18-
<ul id="entity-results">
19-
</ul>
13+
<!-- Tabs for small screens -->
14+
<ul class="nav nav-tabs d-md-none" role="tablist">
15+
<li class="nav-item">
16+
<a class="nav-link active href="#entities" aria-controls="entities" data-toggle="tab">
17+
Entity Results
18+
</a>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link href="#members" aria-controls="members" data-toggle="tab">
22+
Member Results
23+
</a>
24+
</li>
25+
</ul>
26+
<!-- Content -->
27+
<div class="tab-content row">
28+
<div id="entities" class="tab-pane active col-12 col-md-6" role="tabpanel">
29+
<h2 class="d-none d-md-block">Entity Results</h2>
30+
<ul id="entity-results"></ul>
2031
</div>
21-
<div class="results">
22-
<h1>Member Results</h1>
23-
<ul id="member-results">
24-
</ul>
32+
<div id="members" class="tab-pane col-12 col-md-6" role="tabpanel">
33+
<h2 class="d-none d-md-block">Member Results</h2>
34+
<ul id="member-results"></ul>
2535
</div>
2636
</div>
27-
</div>
37+
</main>
2838

2939
<script>
3040
// Parse parameters from URL:

‎doc-tool/resources/css/search.css

Lines changed: 111 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,182 @@
1-
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600);
2-
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700);
3-
4-
div#back-container {
5-
height: 75px;
6-
width: 100%;
7-
padding-top: 25px;
1+
#back-container {
2+
height: 75px;
3+
width: 100%;
4+
padding-top: 25px;
85
}
96

10-
div#back-container > span {
11-
padding: 10px;
12-
border-left: 1px solid #fff;
13-
margin-left: 27px;
14-
font-family: "Titillium Web", sans-serif;
15-
font-weight: 200;
16-
text-transform: uppercase;
17-
font-size: 13px;
7+
#back-anchor {
8+
font-size: 2em;
9+
margin-left: 1em;
1810
}
19-
20-
div#back-container > span:hover {
21-
border-left: 1px solid #0fa00f;
11+
#back-anchor:hover,
12+
#back-anchor:focus,
13+
#back-anchor {
14+
color: #373a3c;
15+
text-decoration: none;
2216
}
2317

24-
div#back-container > span > a#back-anchor:hover,
25-
div#back-container > span > a#back-anchor:focus,
26-
div#back-container > span > a#back-anchor {
27-
color: #373a3c;
28-
text-decoration: none;
18+
#search-container {
19+
padding-top: 0;
2920
}
30-
31-
div#search-container {
32-
margin: 0 auto;
33-
width: 1000px;
21+
#search-container h2 {
22+
text-align: center;
3423
}
3524

36-
div#search-container > h1#searching-for {
37-
text-align: center;
38-
margin-bottom: 50px;
39-
font-family: "Source Sans Pro", sans-serif;
25+
#search-container h1 {
26+
text-align: center;
27+
margin-bottom: 50px;
4028
}
4129

42-
div#search-container > div#result-container {
43-
width: 100%;
30+
#search-container>div#result-container {
31+
width: 100%;
4432
}
4533

46-
div#result-container > div.results {
47-
float: left;
48-
width: 50%;
49-
padding-right: 20px;
50-
overflow: hidden;
51-
}
52-
53-
div.results > h1 {
54-
width: 100%;
55-
border-bottom: 1px solid black;
56-
font-family: "Titillium Web", sans-serif;
57-
font-weight: 300;
58-
font-size: 24px;
34+
div.results>h1 {
35+
width: 100%;
36+
border-bottom: 1px solid black;
37+
font-weight: 300;
38+
font-size: 24px;
5939
}
6040

6141
div.results ul {
62-
list-style-type: none;
63-
padding-left: 0;
42+
list-style-type: none;
43+
padding-left: 0;
6444
}
6545

66-
div.results > ul > li > h1.package-name {
67-
font-size: 13px;
68-
margin-top: 20px;
46+
div.results>ul>li>h1.package-name {
47+
font-size: 13px;
48+
margin-top: 20px;
6949
}
7050

71-
div.results > ul > li > h1.package-name > a {
72-
font-family: "Titillium Web", sans-serif;
73-
font-weight: 300;
74-
color: #ff4081;
51+
div.results>ul>li>h1.package-name>a {
52+
font-weight: 300;
53+
color: #ff4081;
7554
}
7655

77-
div.results > ul > li a:hover,
78-
div.results > ul > li a:focus,
79-
div.results > ul > li a {
80-
color: #373a3c;
81-
text-decoration: none;
56+
div.results>ul>li a:hover,
57+
div.results>ul>li a:focus,
58+
div.results>ul>li a {
59+
color: #373a3c;
60+
text-decoration: none;
8261
}
8362

84-
div.results > ul > li > ul {
85-
border-left: 2px solid gray;
86-
font-family: "Titillium Web", sans-serif;
87-
font-size: 13px;
88-
font-weight: 100;
63+
div.results>ul>li>ul {
64+
border-left: 2px solid gray;
65+
font-size: 13px;
66+
font-weight: 100;
8967
}
9068

91-
div.results > ul > li > ul > li {
92-
line-height: 40px;
93-
}
94-
95-
div.results li.entity-result-li {
69+
div.results>ul>li>ul>li {
70+
line-height: 40px;
9671
}
9772

9873
div.results ul.entity-ul {
99-
position: relative;
74+
position: relative;
10075
}
10176

10277
div.cover-block {
103-
position: absolute;
104-
background: #fff;
105-
border-right: 2px solid gray;
106-
width: 82px;
107-
height: 100%;
108-
left: -82px;
109-
top: 0;
78+
position: absolute;
79+
background: #fff;
80+
border-right: 2px solid gray;
81+
width: 82px;
82+
height: 100%;
83+
left: -82px;
84+
top: 0;
11085
}
11186

112-
div.results li.entity-result-li > a.entity-name {
113-
margin-left: 10px;
87+
div.results li.entity-result-li>a.entity-name {
88+
margin-left: 10px;
11489
}
11590

11691
div.results li.entity-result-li {
117-
transition: all 0.2s ease;
118-
margin-left: -42px;
92+
transition: all 0.2s ease;
93+
margin-left: -42px;
11994
}
12095

12196
div.results li.entity-result-li.with-companion {
122-
margin-left: -82px;
97+
margin-left: -82px;
12398
}
12499

125100
div.results li.entity-result-li:hover {
126-
margin-left: 0;
101+
margin-left: 0;
127102
}
128103

129-
div.results li.entity-result-li > div.member-result {
130-
overflow: hidden;
131-
padding-top: 3px;
132-
display: block;
133-
width: calc(100% - 105px);
134-
margin-bottom: 10px;
135-
transition: all 0.2s ease;
136-
margin-left: 105px;
104+
div.results li.entity-result-li>div.member-result {
105+
overflow: hidden;
106+
padding-top: 3px;
107+
display: block;
108+
width: calc(100% - 105px);
109+
margin-bottom: 10px;
110+
transition: all 0.2s ease;
111+
margin-left: 105px;
137112
}
138113

139-
div.results li.entity-result-li:hover > div.member-result {
140-
width: calc(100% - 65px);
114+
div.results li.entity-result-li:hover>div.member-result {
115+
width: calc(100% - 65px);
141116
}
142117

143-
div.results li.entity-result-li.with-companion:hover > div.member-result {
144-
width: calc(100% - 23px);
118+
div.results li.entity-result-li.with-companion:hover>div.member-result {
119+
width: calc(100% - 23px);
145120
}
146121

147-
div.results li.entity-result-li:not(.with-companion) > div.member-result {
148-
margin-left: 65px;
122+
div.results li.entity-result-li:not(.with-companion)>div.member-result {
123+
margin-left: 65px;
149124
}
150125

151-
div.results li.entity-result-li:hover > div.member-result {
152-
margin-left: 23px;
126+
div.results li.entity-result-li:hover>div.member-result {
127+
margin-left: 23px;
153128
}
154129

155-
div.results li.entity-result-li > div.member-result > div.member-kind {
156-
margin-right: 5px;
157-
font-weight: 400;
130+
div.results li.entity-result-li>div.member-result>div.member-kind {
131+
margin-right: 5px;
132+
font-weight: 400;
158133
}
159134

160-
div.results li.entity-result-li > div.member-result > div.member-param-lists {
161-
margin-right: 5px;
135+
div.results li.entity-result-li>div.member-result>div.member-param-lists {
136+
margin-right: 5px;
162137
}
163138

164-
div.results li.entity-result-li > div.member-result > div.member-return {
165-
font-weight: 400;
166-
white-space: nowrap;
139+
div.results li.entity-result-li>div.member-result>div.member-return {
140+
font-weight: 400;
141+
white-space: nowrap;
167142
}
168143

169-
div.results li.entity-result-li > div.member-result > div.member-kind,
170-
div.results li.entity-result-li > div.member-result > div.member-name,
171-
div.results li.entity-result-li > div.member-result > div.member-param-lists,
172-
div.results li.entity-result-li > div.member-result > div.member-return {
173-
float: left;
174-
line-height: 16px;
175-
display: inline;
144+
div.results li.entity-result-li>div.member-result>div.member-kind,
145+
div.results li.entity-result-li>div.member-result>div.member-name,
146+
div.results li.entity-result-li>div.member-result>div.member-param-lists,
147+
div.results li.entity-result-li>div.member-result>div.member-return {
148+
float: left;
149+
line-height: 16px;
150+
display: inline;
176151
}
177152

178-
div.results li.entity-result-li > div.entity-kinds {
179-
float: left;
153+
div.results li.entity-result-li>div.entity-kinds {
154+
float: left;
180155
}
181156

182-
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor {
183-
height: 40px;
184-
width: 40px;
185-
display: block;
186-
float: left;
187-
text-align: center;
188-
color: #fff;
157+
div.results li.entity-result-li>div.entity-kinds>a.letter-anchor {
158+
height: 40px;
159+
width: 40px;
160+
display: block;
161+
float: left;
162+
text-align: center;
163+
color: #fff;
189164
}
190165

191-
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor.object {
192-
background-color: rgb(44, 108, 141);
166+
div.results li.entity-result-li>div.entity-kinds>a.letter-anchor.object {
167+
background-color: rgb(44, 108, 141);
193168
}
194169

195-
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor.class {
196-
background-color: rgb(68, 173, 125);
170+
div.results li.entity-result-li>div.entity-kinds>a.letter-anchor.class {
171+
background-color: rgb(68, 173, 125);
197172
}
198173

199-
div.results li.entity-result-li > div.entity-kinds > a.letter-anchor.trait {
200-
background-color: rgb(25, 170, 207);
174+
div.results li.entity-result-li>div.entity-kinds>a.letter-anchor.trait {
175+
background-color: rgb(25, 170, 207);
176+
}
177+
178+
@media(min-width: 768px) {
179+
.tab-content > .tab-pane {
180+
display: block;
181+
}
201182
}

0 commit comments

Comments
 (0)