Skip to content

Commit 90b69a5

Browse files
eblureblur
authored
Merge pull request #343 from MananAgarwal/new-theme
keyword categories added and view-more dropdown implemented
2 parents 69ede62 + a80bdca commit 90b69a5

File tree

2 files changed

+191
-116
lines changed

2 files changed

+191
-116
lines changed

‎tutorials/_static/astropy.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,15 @@ a.reference.internal.nav-header {
272272
background-color: #fa743b;
273273
}
274274

275+
.collapse.in{
276+
display: block !important;
277+
visibility: visible;
278+
}
279+
280+
[aria-expanded="false"] > #viewless,
281+
[aria-expanded="true"] > #viewmore {
282+
display: none;
283+
}
275284

276285
/* Responsivness */
277286
@media only screen and (max-width: 1150px) and (min-width: 992px) {

‎tutorials/themes/tutorials-theme/tutorialfilters.html‎

Lines changed: 182 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -49,126 +49,192 @@
4949
filterDiv[i].style.display = "none";
5050
}
5151
}
52+
53+
var toggleCollapse, viewButton, j;
54+
toggleCollapse = document.getElementsByClassName("collapse");
55+
viewButton = document.getElementsByClassName("view-button");
56+
for(j = 0; j < toggleCollapse.length; j++){
57+
toggleCollapse[j].className = "collapse in";
58+
viewButton[j].children[0].style.display = "none";
59+
viewButton[j].children[1].style.display = "none";
60+
}
61+
62+
if(filterQuery == ""){
63+
for(j = 0; j < toggleCollapse.length; j++){
64+
toggleCollapse[j].className = "collapse";
65+
viewButton[j].children[0].style.display = "";
66+
viewButton[j].children[1].style.display = "none";
67+
}
68+
}
69+
5270
}
5371
</script>
5472

5573
<form action="">
56-
<div class="form-group">
57-
<input type="text" name="q" id="filter-search" class="form-control" placeholder="Search for a filter" onkeyup="filterFunction()"/>
58-
</div>
59-
</form>
60-
61-
<form name="filterForm" class="form-group" style="padding-left: 20px; margin-bottom: 0;" action="">
62-
<div class="custom-control custom-checkbox">
63-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck1" value="filterastroquery" onClick="applyFilter()">
64-
<label class="custom-control-label" for="customCheck1">astroquery</label>
65-
</div>
66-
<div class="custom-control custom-checkbox">
67-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck2" value="filtercontourplots" onClick="applyFilter()">
68-
<label class="custom-control-label" for="customCheck2">contour plots</label>
69-
</div>
70-
<div class="custom-control custom-checkbox">
71-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck3" value="filtercoordinates" onClick="applyFilter()">
72-
<label class="custom-control-label" for="customCheck3">coordinates</label>
73-
</div>
74-
<div class="custom-control custom-checkbox">
75-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck4" value="filterdatacubes" onClick="applyFilter()">
76-
<label class="custom-control-label" for="customCheck4">data cubes</label>
77-
</div>
78-
<div class="custom-control custom-checkbox">
79-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck5" value="filterdynamics" onClick="applyFilter()">
80-
<label class="custom-control-label" for="customCheck5">dynamics</label>
81-
</div>
82-
<div class="custom-control custom-checkbox">
83-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck6" value="filtererrorbars" onClick="applyFilter()">
84-
<label class="custom-control-label" for="customCheck6">errorbars</label>
85-
</div>
86-
<div class="custom-control custom-checkbox">
87-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck7" value="filterfitsimage" onClick="applyFilter()">
88-
<label class="custom-control-label" for="customCheck7">fits image</label>
89-
</div>
90-
<div class="custom-control custom-checkbox">
91-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck8" value="filterfitstable" onClick="applyFilter()">
92-
<label class="custom-control-label" for="customCheck8">fits table</label>
93-
</div>
94-
<div class="custom-control custom-checkbox">
95-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck9" value="filterfitting" onClick="applyFilter()">
96-
<label class="custom-control-label" for="customCheck9">fitting</label>
97-
</div>
98-
<div class="custom-control custom-checkbox">
99-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck10" value="filterhistogram" onClick="applyFilter()">
100-
<label class="custom-control-label" for="customCheck10">histogram</label>
101-
</div>
102-
<div class="custom-control custom-checkbox">
103-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck11" value="filtermatplotlib" onClick="applyFilter()">
104-
<label class="custom-control-label" for="customCheck11">matplotlib</label>
105-
</div>
106-
<div class="custom-control custom-checkbox">
107-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck12" value="filternumpy" onClick="applyFilter()">
108-
<label class="custom-control-label" for="customCheck12">numpy</label>
109-
</div>
110-
<div class="custom-control custom-checkbox">
111-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck13" value="filterobsplan" onClick="applyFilter()">
112-
<label class="custom-control-label" for="customCheck13">obsplan</label>
113-
</div>
114-
<div class="custom-control custom-checkbox">
115-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck14" value="filterOOP" onClick="applyFilter()">
116-
<label class="custom-control-label" for="customCheck14">OOP</label>
117-
</div>
118-
<div class="custom-control custom-checkbox">
119-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck15" value="filterphotometry" onClick="applyFilter()">
120-
<label class="custom-control-label" for="customCheck15">photometry</label>
121-
</div>
122-
<div class="custom-control custom-checkbox">
123-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck16" value="filterphysics" onClick="applyFilter()">
124-
<label class="custom-control-label" for="customCheck16">physics</label>
74+
<div class="form-group">
75+
<input type="text" name="q" id="filter-search" class="form-control" placeholder="Search for a filter" onkeyup="filterFunction()"/>
12576
</div>
126-
<div class="custom-control custom-checkbox">
127-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck17" value="filterplots" onClick="applyFilter()">
128-
<label class="custom-control-label" for="customCheck17">plots</label>
129-
</div>
130-
<div class="custom-control custom-checkbox">
131-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck18" value="filterradio" onClick="applyFilter()">
132-
<label class="custom-control-label" for="customCheck18">radio</label>
133-
</div>
134-
<div class="custom-control custom-checkbox">
135-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck19" value="filterreproject" onClick="applyFilter()">
136-
<label class="custom-control-label" for="customCheck19">reproject</label>
137-
</div>
138-
<div class="custom-control custom-checkbox">
139-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck20" value="filterscipy" onClick="applyFilter()">
140-
<label class="custom-control-label" for="customCheck20">scipy</label>
141-
</div>
142-
<div class="custom-control custom-checkbox">
143-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck21" value="filterspectroscopy" onClick="applyFilter()">
144-
<label class="custom-control-label" for="customCheck21">spectroscopy</label>
145-
</div>
146-
<div class="custom-control custom-checkbox">
147-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck22" value="filterstatistics " onClick="applyFilter()">
148-
<label class="custom-control-label" for="customCheck22">statistics </label>
149-
</div>
150-
<div class="custom-control custom-checkbox">
151-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck23" value="filtertable" onClick="applyFilter()">
152-
<label class="custom-control-label" for="customCheck23">table</label>
153-
</div>
154-
<div class="custom-control custom-checkbox">
155-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck24" value="filtertheory" onClick="applyFilter()">
156-
<label class="custom-control-label" for="customCheck24">theory</label>
157-
</div>
158-
<div class="custom-control custom-checkbox">
159-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck25" value="filtertimeseries" onClick="applyFilter()">
160-
<label class="custom-control-label" for="customCheck25">time series</label>
161-
</div>
162-
<div class="custom-control custom-checkbox">
163-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck26" value="filterunits" onClick="applyFilter()">
164-
<label class="custom-control-label" for="customCheck26">units</label>
165-
</div>
166-
<div class="custom-control custom-checkbox">
167-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck27" value="filterVizier" onClick="applyFilter()">
168-
<label class="custom-control-label" for="customCheck27">Vizier</label>
77+
</form>
78+
79+
<!-- Astropy Packages -->
80+
<h3 style="font-size: 1rem; font-weight: 500; text-decoration: none;">Astropy packages</h3>
81+
<form name="filterForm" class="form-group" style="padding-left: 20px; margin-bottom: 0;" action="">
82+
<div class="custom-control custom-checkbox">
83+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck1" value="filterastroquery" onClick="applyFilter()">
84+
<label class="custom-control-label" for="customCheck1">Astroquery</label>
85+
</div>
86+
<div class="custom-control custom-checkbox">
87+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck2" value="filtercoordinates" onClick="applyFilter()">
88+
<label class="custom-control-label" for="customCheck2">Coordinates</label>
89+
</div>
90+
<div class="custom-control custom-checkbox">
91+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck3" value="filterobsplan" onClick="applyFilter()">
92+
<label class="custom-control-label" for="customCheck3">Obsplan</label>
93+
</div>
94+
<!-- Display 3 in compact view -->
95+
<div class="collapse" id="viewmore1">
96+
<!-- -->
97+
<div class="custom-control custom-checkbox">
98+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck4" value="filterreproject" onClick="applyFilter()">
99+
<label class="custom-control-label" for="customCheck4">Reproject</label>
100+
</div>
101+
<div class="custom-control custom-checkbox">
102+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck5" value="filtertable" onClick="applyFilter()">
103+
<label class="custom-control-label" for="customCheck5">Table</label>
104+
</div>
105+
<div class="custom-control custom-checkbox">
106+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck6" value="filterspectralcube" onClick="applyFilter()">
107+
<label class="custom-control-label" for="customCheck6">Spectral Cube</label>
108+
</div>
109+
<div class="custom-control custom-checkbox">
110+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck7" value="filteraplpy" onClick="applyFilter()">
111+
<label class="custom-control-label" for="customCheck7">Aplpy</label>
112+
</div>
113+
<div class="custom-control custom-checkbox">
114+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck8" value="filterimexamine" onClick="applyFilter()">
115+
<label class="custom-control-label" for="customCheck8">Imexamine</label>
116+
</div>
117+
<div class="custom-control custom-checkbox">
118+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck9" value="filterspecutils" onClick="applyFilter()">
119+
<label class="custom-control-label" for="customCheck9">Specutils</label>
120+
</div>
121+
<div class="custom-control custom-checkbox">
122+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck10" value="filterphotutils" onClick="applyFilter()">
123+
<label class="custom-control-label" for="customCheck10">Photutils</label>
124+
</div>
125+
169126
</div>
170-
<div class="custom-control custom-checkbox">
171-
<input type="checkbox" name="q" class="custom-control-input" id="customCheck28" value="filterxray" onClick="applyFilter()">
172-
<label class="custom-control-label" for="customCheck28">xray</label>
127+
128+
<a data-toggle="collapse" data-target="#viewmore1" aria-expanded="false" style="text-decoration: none !important" class="view-button">
129+
130+
<span id="viewmore" style="text-decoration: none !important; color: #ff6a22 !important; font-size: 0.8rem;">
131+
VIEW MORE
132+
</span>
133+
<span id="viewless" style="text-decoration: none !important; color: #ff6a22 !important; font-size: 0.8rem;">
134+
VIEW LESS
135+
</span>
136+
137+
</a>
138+
</form>
139+
140+
<!-- Python Packages -->
141+
<h3 style="font-size: 1rem; font-weight: 500; text-decoration: none; padding-top: 15px;">Python packages</h3>
142+
<form name="filterForm" class="form-group" style="padding-left: 20px; margin-bottom: 0;" action="">
143+
<div class="custom-control custom-checkbox">
144+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck11" value="filtermatplotlib" onClick="applyFilter()">
145+
<label class="custom-control-label" for="customCheck11">Matplotlib</label>
146+
</div>
147+
<div class="custom-control custom-checkbox">
148+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck12" value="filternumpy" onClick="applyFilter()">
149+
<label class="custom-control-label" for="customCheck12">Numpy</label>
150+
</div>
151+
<div class="custom-control custom-checkbox">
152+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck13" value="filterscipy" onClick="applyFilter()">
153+
<label class="custom-control-label" for="customCheck13">Scipy</label>
154+
</div>
155+
</form>
156+
157+
<!-- Task -->
158+
<h3 style="font-size: 1rem; font-weight: 500; text-decoration: none; padding-top: 15px;">Task</h3>
159+
<form name="filterForm" class="form-group" style="padding-left: 20px; margin-bottom: 0;" action="">
160+
<div class="custom-control custom-checkbox">
161+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck14" value="filtercontourplots" onClick="applyFilter()">
162+
<label class="custom-control-label" for="customCheck14">Contour Plots</label>
163+
</div>
164+
<div class="custom-control custom-checkbox">
165+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck15" value="filterdatacubes" onClick="applyFilter()">
166+
<label class="custom-control-label" for="customCheck15">Data Cubes</label>
167+
</div>
168+
<div class="custom-control custom-checkbox">
169+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck16" value="filterfitsheader" onClick="applyFilter()">
170+
<label class="custom-control-label" for="customCheck16">FITS Header</label>
171+
</div>
172+
<!-- -->
173+
<div class="collapse" id="viewmore2">
174+
<!-- -->
175+
<div class="custom-control custom-checkbox">
176+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck17" value="filterfitsimage" onClick="applyFilter()">
177+
<label class="custom-control-label" for="customCheck17">FITS Image</label>
178+
</div>
179+
<div class="custom-control custom-checkbox">
180+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck18" value="filterfitstable" onClick="applyFilter()">
181+
<label class="custom-control-label" for="customCheck18">FITS Table</label>
182+
</div>
183+
<div class="custom-control custom-checkbox">
184+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck19" value="filtermodelfitting" onClick="applyFilter()">
185+
<label class="custom-control-label" for="customCheck19">Model Fitting</label>
186+
</div>
187+
<div class="custom-control custom-checkbox">
188+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck20" value="filterfileinputoutput" onClick="applyFilter()">
189+
<label class="custom-control-label" for="customCheck20">File Input/Output</label>
190+
</div>
191+
<div class="custom-control custom-checkbox">
192+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck21" value="filterhistogram" onClick="applyFilter()">
193+
<label class="custom-control-label" for="customCheck21">Histogram</label>
194+
</div>
195+
<div class="custom-control custom-checkbox">
196+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck22" value="filtererrorbars " onClick="applyFilter()">
197+
<label class="custom-control-label" for="customCheck22">Errorbars</label>
198+
</div>
199+
<div class="custom-control custom-checkbox">
200+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck23" value="filteroop" onClick="applyFilter()">
201+
<label class="custom-control-label" for="customCheck23">OOP</label>
202+
</div>
203+
<div class="custom-control custom-checkbox">
204+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck24" value="filterplots" onClick="applyFilter()">
205+
<label class="custom-control-label" for="customCheck24">Plots</label>
206+
</div>
207+
<div class="custom-control custom-checkbox">
208+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck25" value="filterspectroscopy" onClick="applyFilter()">
209+
<label class="custom-control-label" for="customCheck25">Spectroscopy</label>
210+
</div>
211+
<div class="custom-control custom-checkbox">
212+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck26" value="filtertimeseries" onClick="applyFilter()">
213+
<label class="custom-control-label" for="customCheck26">Time Series</label>
214+
</div>
215+
<div class="custom-control custom-checkbox">
216+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck27" value="filterunits" onClick="applyFilter()">
217+
<label class="custom-control-label" for="customCheck27">Units</label>
218+
</div>
219+
<div class="custom-control custom-checkbox">
220+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck28" value="filtervizier" onClick="applyFilter()">
221+
<label class="custom-control-label" for="customCheck28">Vizier</label>
222+
</div>
223+
<div class="custom-control custom-checkbox">
224+
<input type="checkbox" name="q" class="custom-control-input" id="customCheck29" value="filterphotometry" onClick="applyFilter()">
225+
<label class="custom-control-label" for="customCheck29">Photometry</label>
226+
</div>
227+
173228
</div>
174-
</form>
229+
230+
<a data-toggle="collapse" data-target="#viewmore2" aria-expanded="false" style="text-decoration: none !important" class="view-button">
231+
232+
<span id="viewmore" style="text-decoration: none !important; color: #ff6a22 !important; font-size: 0.8rem;">
233+
VIEW MORE
234+
</span>
235+
<span id="viewless" style="text-decoration: none !important; color: #ff6a22 !important; font-size: 0.8rem;">
236+
VIEW LESS
237+
</span>
238+
239+
</a>
240+
</form>

0 commit comments

Comments
 (0)