Skip to content

Commit 08a12e3

Browse files
mvincerxmvincerx
committed
WIP
Signed-off-by: michael vincerra <michael.vincerra@intel.com>
1 parent 90485bf commit 08a12e3

2 files changed

Lines changed: 148 additions & 99 deletions

File tree

‎src/docs/_static/styles.css‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -253,14 +253,14 @@ input[type=checkbox] label{
253253
max-width: 350px;
254254
max-height: 300px;
255255
padding: 10px;
256-
background: -webkit-linear-gradient(rgba(252,252,252,99),rgba(224,224,224,88));
256+
/* background: -webkit-linear-gradient(rgba(252,252,252,99),rgba(224,224,224,88));
257257
background: -moz-linear-gradient(rgba(252,252,252,99),rgba(224,224,224,88));
258258
background: -o-linear-gradient(rgba(252,252,252,99),rgba(224,224,224,88));
259259
background: linear-gradient(rgba(252,252,252,99),rgba(224,224,224,88));
260260
-webkit-transition: background 2s ease-out;
261261
-moz-transition: background 2s ease-out;
262262
-o-transition: background 2s ease-out;
263-
transition: background 2s ease-out;
263+
transition: background 2s ease-out; */
264264
}
265265

266266
.filter-children label{
@@ -502,10 +502,9 @@ input[type=button] > #nobutton {
502502

503503
.search-widget .fa-search {
504504
position: relative;
505-
top: 8px; /* Set vert pos from top of search icon */
506-
left: 6px; /* Set horiz pos from left of search icon*/
505+
top: 1.5em; /* Set vert pos from top of search icon */
506+
left: 0.5em; /* Set horiz pos from left of search icon*/
507507
z-index: 20;
508-
509508
}
510509

511510
.search-widget .fa-remove {
@@ -615,19 +614,21 @@ input::placeholder {
615614

616615
.search-widget .searchBox {
617616
font-family:var(--bs-header-font-family);
618-
font-style:normal;
619-
font-weight: 400;
620-
height: 48px;
621-
min-height: 48px;
622-
width: 396px;
623-
max-width: 100%;
617+
/* font-style:normal;
618+
font-weight: 400; */
619+
display: inline-flex;
620+
flex: 1 1 350px;
621+
/* height: 8%;
622+
min-height: 5%;
623+
width: 10%; */
624624
background-color: rgba(233,233,233,91);
625-
border-radius: 9px;
625+
border-radius: 10px;
626626
outline: none;
627627
border: none;
628-
padding-left: 48px; /* left-indent the input text */
629-
margin-right: -2px; /* pull to left .fa-remove button closer to searchBox */
630-
/* margin-top: 8px; */
628+
padding-left: 1.25em; /* left-indent the input text */
629+
/*margin-right: -2px; pull to left .fa-remove button closer to searchBox */
630+
margin-top: 0.5em;
631+
margin-bottom: 0.5em;
631632
z-index: 10;
632633
}
633634

@@ -874,17 +875,20 @@ figcaption:hover{
874875

875876
/* FILTER INPUT CHECKBOXES */
876877
.container-filter {
878+
white-space: nowrap;
879+
overflow: hidden;
877880
color: rgb(0, 0, 0);
878881
display: block;
879882
position: relative;
880-
padding-left: 35px;
883+
padding-left: 10px;
881884
margin-top: 10px;
882885
margin-bottom: 10px;
883886
cursor: pointer;
884887
-webkit-user-select: none;
885888
-moz-user-select: none;
886889
-ms-user-select: none;
887890
user-select: none;
891+
font-size: 16px;
888892
}
889893

890894
label{
@@ -923,8 +927,8 @@ label{
923927
input[type=checkbox] {
924928
appearance: none;
925929
background-color: rgba(255,255,255,100);
926-
width: 25px;
927-
height: 25px;
930+
width: 15px;
931+
height: 15px;
928932
border-radius: 25%;
929933
border: 2px solid rgba(204,204,204,80);
930934
place-content: center;
@@ -1179,19 +1183,26 @@ a:hover {
11791183
.left-column {
11801184
background-color: #E9E9E9;
11811185
height: 100vh;
1182-
flex: 15%;
1186+
flex: 20%;
11831187
}
11841188

11851189
.right-column {
11861190
background-color: transparent;
11871191
height: 100vh;
1188-
flex: 85%;
1192+
flex: 80%;
11891193
outline: dotted;
11901194
outline-color: blue;
11911195
}
11921196

11931197
/* Add bootstrap 5.1 classes for collapse */
11941198

1199+
.accordion-body {
1200+
height: 100vh;
1201+
width:fit-content;
1202+
}
1203+
1204+
1205+
11951206
/* .accordion {
11961207
color: transparent;
11971208
background-color: transparent;

‎src/docs/_templates/index.html‎

Lines changed: 117 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
<div class="col"> <!--#3-->
3737

38-
<div class="search-container">
38+
<!-- <div class="search-container">
3939
4040
<div class="search-widget">
4141
@@ -49,13 +49,13 @@
4949
data-search >
5050
5151
<button title="Reset Search" type="reset" onclick="resetSearcher()" class="resetSearchButton">
52-
<i class="fa fa-remove fa-xl"></i> <!--fa fa-refresh-->
53-
</button>
52+
<i class="fa fa-remove fa-xl"></i> <fa fa-refresh>
53+
</button> -->
5454

55-
<div class="error-container center">
55+
<!-- <div class="error-container center">
5656
<div class="middle transparent" id="errormsg">
5757
</div>
58-
</div>
58+
</div> -->
5959

6060
</div>
6161
</div>
@@ -256,96 +256,132 @@
256256
<div class='row'>
257257

258258
<div class='left-column'>
259-
Search
260-
Filters
261259

262260
<div class="accordion accordion-flush" id="accordionExample">
263261

264262
<div class="accordion-item">
263+
264+
<div class="search-container">
265+
<div class="search-widget">
266+
<i class="fa fa-search fa-1x"></i>
267+
<input type="text"
268+
id="textInput"
269+
class="searchBox"
270+
name="searchInput"
271+
placeholder="Search..."
272+
onkeypress=onlyAlphaNumInput(event)
273+
data-search
274+
>
275+
<button title="Reset Search" type="reset" onclick="resetSearcher()" class="resetSearchButton">
276+
<i class="fa fa-remove fa-xl"></i> <!--fa fa-refresh-->
277+
</button>
278+
</div>
279+
</div>
280+
281+
282+
283+
284+
285+
286+
287+
288+
289+
290+
265291
<h2 class="accordion-header" id="headingOne">
266-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
292+
<button
293+
class="accordion-button collapsed"
294+
type="button"
295+
data-bs-toggle="collapse"
296+
data-bs-target="#stayOpen-collapseOne"
297+
aria-expanded="true"
298+
aria-controls="stayOpen-collapseOne"
299+
>
267300
Filters
268301
</button>
269302
</h2>
270-
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
303+
<div id="stayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
271304
<div class="accordion-body">
272305
<!--TEST-->
273-
</h3> Expertise </h3>
274-
<form id="filter-menu">
275-
<div class="filter-children expertise-checkboxes">
276-
277-
<span class="badge-col-head">
278-
<div class="circle badge1-circle">
279-
</div> Expertise
306+
<!-- </h3> Expertise </h3> -->
307+
<form id="filter-menu">
308+
<div class="filter-children expertise-checkboxes">
309+
310+
<span class="badge-col-head">
311+
<!-- <div class="circle badge1-circle"> </div> -->
312+
Expertise
313+
</span>
314+
315+
<div id="expertise-col">
316+
<span class="checkmark">
317+
<input type="checkbox" class="checkoption" value="getStart" name="data-filter"/>
318+
<label class="container-filter">
319+
Getting Started
320+
</label>
321+
</span>
322+
<span class="checkmark">
323+
<input type="checkbox" class="checkoption" value="tutorial" name="data-filter"/>
324+
<label class="container-filter">
325+
Tutorial
326+
</label>
327+
</span>
328+
329+
<span class="checkmark">
330+
<input type="checkbox" class="checkoption" value="conFunc" name="data-filter"/>
331+
<label class="container-filter">
332+
Concepts and Functionality
333+
</label>
334+
</span>
335+
336+
<span class="checkmark">
337+
<input type="checkbox" class="checkoption" value="refDesEnd2End" name="data-filter"/>
338+
<label class="container-filter">
339+
Reference Designs and End to End
340+
</label>
341+
</span>
342+
343+
<span class="checkmark">
344+
<input type="checkbox" class="checkoption" value="codeOpt" name="data-filter"/>
345+
<label class="container-filter">
346+
Code Optimization
347+
</label>
280348
</span>
281-
282-
<div id="expertise-col">
283-
<span class="checkmark">
284-
<input type="checkbox" class="checkoption" value="getStart" name="data-filter"/>
285-
<label class="container-filter">
286-
Getting Started
287-
</label>
288-
</span>
289-
<span class="checkmark">
290-
<input type="checkbox" class="checkoption" value="tutorial" name="data-filter"/>
291-
<label class="container-filter">
292-
Tutorial
293-
</label>
294-
</span>
295-
296-
<span class="checkmark">
297-
<input type="checkbox" class="checkoption" value="conFunc" name="data-filter"/>
298-
<label class="container-filter">
299-
Concepts and Functionality
300-
</label>
301-
</span>
302-
303-
<span class="checkmark">
304-
<input type="checkbox" class="checkoption" value="refDesEnd2End" name="data-filter"/>
305-
<label class="container-filter">
306-
Reference Designs and End to End
307-
</label>
308-
</span>
309-
310-
<span class="checkmark">
311-
<input type="checkbox" class="checkoption" value="codeOpt" name="data-filter"/>
312-
<label class="container-filter">
313-
Code Optimization
314-
</label>
315-
</span>
316-
</div>
317349
</div>
318-
</form>
350+
</div>
351+
319352

320-
<div class="filter-children language-checkboxes">
321-
</h3> Language </h3>
322-
<div id="">
323-
<span class="checkmark">
324-
<input type="checkbox" value="cpp" name="data-filter"/>
325-
<label class="container-filter">
326-
CPP
327-
</label>
353+
<div class="filter-children language-checkboxes">
354+
<!-- </h3> Language </h3> -->
355+
<span class="badge-col-head">
356+
<!-- <div class="circle badge1-circle"></div> -->
357+
Language
328358
</span>
329-
<span class="checkmark">
330-
<input type="checkbox" value="fortran" name="data-filter"/>
331-
<label class="container-filter">
332-
Fortran
333-
</label>
334-
</span>
335-
<span class="checkmark">
336-
<input type="checkbox" value="python" name="data-filter"/>
337-
<label class="container-filter">
338-
Python
339-
</label>
340-
</span>
341-
</div>
342-
</div>
343-
</h3> Target Device </h3>
359+
<div id="">
360+
<span class="checkmark">
361+
<input type="checkbox" value="cpp" name="data-filter"/>
362+
<label class="container-filter">
363+
CPP
364+
</label>
365+
</span>
366+
<span class="checkmark">
367+
<input type="checkbox" value="fortran" name="data-filter"/>
368+
<label class="container-filter">
369+
Fortran
370+
</label>
371+
</span>
372+
<span class="checkmark">
373+
<input type="checkbox" value="python" name="data-filter"/>
374+
<label class="container-filter">
375+
Python
376+
</label>
377+
</span>
378+
</div>
379+
</div>
380+
<!-- </h3> Target Device </h3> -->
344381

345-
<div class="filter-children device-checkboxes">
346-
382+
<div class="filter-children device-checkboxes">
347383
<span class="badge-col-head">
348-
<div class="circle badge3-circle"></div>
384+
<!-- <div class="circle badge3-circle"></div> -->
349385
Target Device
350386
</span>
351387

@@ -370,6 +406,8 @@ <h2 class="accordion-header" id="headingOne">
370406
</span>
371407
</div>
372408
</div>
409+
</form>
410+
373411

374412
</div>
375413
</div>

0 commit comments

Comments
 (0)