Skip to content

Commit 7ba9b92

Browse files
mvincerxmvincerx
committed
WW13.5 redesign as dashboard with layout and interactive improvements.
Signed-off-by: michael vincerra <michael.vincerra@intel.com>
1 parent b0b89c2 commit 7ba9b92

2 files changed

Lines changed: 51 additions & 116 deletions

File tree

‎src/docs/_static/styles.css‎

Lines changed: 31 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,10 @@ input[type=checkbox] label{
430430
font-weight: normal;
431431
font-weight: 400;
432432
color: rgba(255,255,255,100);
433-
padding: 12px 0px 15px 20px;
433+
padding: 0.25em 0.5em 0.25em 0.5em;
434+
min-width: 2.5em;
435+
display: block;
436+
padding: 0.65em 1.5em 0.5em 1.5em;
434437
}
435438

436439
input[type=button] > #nobutton {
@@ -461,16 +464,15 @@ input[type=button] > #nobutton {
461464
.grid-row {
462465
display: grid;
463466
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
464-
/* grid-template-columns: 25fr 15fr 20fr 15fr 25fr; */
465-
466-
/* grid-template-columns: minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px); */
467467
/* See col-nav-grp padding*/
468468
background-color: rgb(0,84,174);
469469
width: 100%;
470470
min-height: fit-content;
471471
text-align: center;
472472
align-items: center;
473-
padding-left: 1.25em;
473+
padding-top: 0.5em;
474+
padding-left: 0.5em;
475+
padding-right: 0.75em;
474476
}
475477

476478
.col {
@@ -483,8 +485,6 @@ input[type=button] > #nobutton {
483485
vertical-align: middle;
484486
}
485487

486-
/* dev only
487-
/* outline: dotted; outline-color: orangered;*/
488488

489489
.col:nth-child(1) {
490490
align-items: flex-start;
@@ -518,7 +518,8 @@ input[type=button] > #nobutton {
518518
font-weight: 400;
519519
display: flex;
520520
direction: row;
521-
overflow: hidden;
521+
flex: 1;
522+
/* overflow: hidden; */
522523
/* padding: 12px 0px 15px 20px; */
523524
}
524525

@@ -559,6 +560,9 @@ input[type=button] > #nobutton {
559560
}
560561

561562
.clear-filters {
563+
font-style: normal;
564+
font-weight: 400;
565+
font-size: 16px;
562566
display: flex;
563567
flex-direction: row;
564568
padding-left: 0.25em; /* offset to right; treat searchbar + X as one*/
@@ -730,7 +734,7 @@ input:focus {
730734
grid-template-columns: repeat(3, minmax(360px, 480px));
731735
grid-auto-rows: 1fr; /* Assure all rows are same height */
732736
align-items: self-start;
733-
grid-gap: 0.25rem;
737+
grid-gap: 0.5em;
734738
/* margin-top: 1.25rem; */
735739
margin-bottom: 2rem;
736740
padding-bottom: 100px;
@@ -740,7 +744,6 @@ input:focus {
740744
.card {
741745
display: flex;
742746
flex-direction: column;
743-
height:100%;
744747
font-family: var(--bs-body-font-family);
745748
font-style: normal;
746749
font-weight: 400;
@@ -749,6 +752,8 @@ input:focus {
749752
background-color: rgba(255,255,255,100);
750753
border-radius: 7px;
751754
box-shadow: 2px 2px 2px rgba(174,174,174,0.2);
755+
height:100%;
756+
width: auto;
752757
min-height: 22vh;
753758
text-align: left;
754759
padding: 1.0em;
@@ -841,8 +846,7 @@ input:focus {
841846

842847
.nav-page-row {
843848
display: grid;
844-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
845-
grid-template-rows: 1fr;
849+
grid-template-columns: 16% 12% 14% 32% 14% 12%;
846850
grid-gap: 0.5rem;
847851
padding-top: 0.5em;
848852
padding-bottom: 0.5em;
@@ -852,15 +856,16 @@ input:focus {
852856
vertical-align: middle;
853857
min-height: 92px;
854858
width: 100%;
855-
padding-left: 1.25em;
859+
padding-left: 1.5em;
860+
/* margin-left: 0.25em; */
856861
/* margin-right: 2.0em; */
857862
}
858863

859-
@media (max-width: 500px) {
864+
/* @media (max-width: 500px) {
860865
div {
861-
grid-template-columns: repeat(5, minmax(100px, 1fr));
866+
grid-template-columns: repeat(6, minmax(150px, 1fr));
862867
}
863-
}
868+
} */
864869

865870
.nav-ctrls {
866871
font-family: var(--bs-header-font-family);
@@ -870,10 +875,10 @@ input:focus {
870875
display: flex;
871876
flex-direction: row;
872877
/* vertical-align: middle; */
873-
justify-content: center;
874-
align-self: center;
878+
/* justify-content: center;
879+
align-self: center; */
875880
text-align: center;
876-
align-items: stretch;
881+
/* align-items: stretch; */
877882
/* column-gap: 0.875rem; */
878883
font-size: 20px;
879884
/* margin-left: 8.0em; */
@@ -1294,7 +1299,10 @@ a:hover {
12941299

12951300
#footer-container{
12961301
display: flex;
1302+
flex-direction: row;
12971303
justify-content: space-between;
1304+
/* flex-shrink: 1; */
1305+
max-height: 1.5em;
12981306
}
12991307

13001308
#footer-blk-2{
@@ -1338,14 +1346,14 @@ a:hover {
13381346
flex-direction: column;
13391347
height: 100%;
13401348
flex-basis: 12%;
1341-
flex-shrink: 3;
1349+
flex-shrink: 2;
13421350
max-width: auto;
13431351
/* width:fit-content !important; */
13441352
/* flex: 0 1 auto; */
13451353
margin-top: 0.20rem;
1346-
padding-left: 0.5em;
1354+
/* padding-left: 0.5em; */
13471355
padding-right: 0.25em;
1348-
/* margin-right:-0.5em; */
1356+
margin-right: 0.15em;
13491357
}
13501358

13511359
.right-column {
@@ -1450,27 +1458,7 @@ a:hover {
14501458
flex-direction: column;
14511459
justify-content: flex-start;
14521460
flex-grow: 1;
1453-
padding-left: 0.5em;
1461+
/* padding-left: 0.5em; */
14541462
/* flex-shrink: 0; */
14551463
/* width:fit-content; */
14561464
}
1457-
1458-
1459-
/* .collapse {
1460-
&:not(.show) {
1461-
display: none;
1462-
}
1463-
}
1464-
.collapsing {
1465-
height: 0;
1466-
overflow: hidden;
1467-
@include transition($transition-collapse);
1468-
1469-
&.collapse-horizontal {
1470-
width: 0;
1471-
height: auto;
1472-
@include transition($transition-collapse-width);
1473-
}
1474-
} */
1475-
1476-

‎src/docs/_templates/index.html‎

Lines changed: 20 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</div>
2121

2222
<div class="app-title">
23-
Samples Catalog
23+
Samples&nbsp;Catalog
2424
</div>
2525

2626
<div>
@@ -31,36 +31,23 @@
3131
</div>
3232
</div>
3333

34-
<div class="col "><!--#2-->
35-
<!-- #2 -->
36-
</div>
34+
<div class="col "> <!--#2--></div>
3735

38-
<div class="col "> <!--#3-->
39-
<!-- #3 -->
40-
</div>
36+
<div class="col "> <!--#3--></div>
4137

42-
<div class="col "> <!--#4-->
43-
<!-- #4 -->
44-
</div>
38+
<div class="col "> <!--#4--> </div>
4539

46-
<div class="col">
47-
48-
<div class="col-nav-grp">
49-
<!-- <div>5A</div> -->
50-
51-
<div>
52-
<figure>
53-
<a href="https://github.com/oneapi-src/oneAPI-samples">
54-
<img class=scaled src="_static/assets/github-mark-white.png" alt="oneAPI Samples Repository">
55-
</a>
56-
<figcaption>View on GitHub*</figcaption>
57-
</figure>
58-
</div>
59-
</div>
40+
<div class="col"> <!--#5--> </div>
6041

42+
<div class="col">
43+
<figure>
44+
<a href="https://github.com/oneapi-src/oneAPI-samples">
45+
<img class=scaled src="_static/assets/github-mark-white.png" alt="oneAPI Samples Repository">
46+
</a>
47+
<figcaption>View on GitHub*</figcaption>
48+
</figure>
6149
</div>
6250

63-
6451
</div> <!--END GRID ROW-->
6552

6653
<div class="nav-page-row">
@@ -72,11 +59,12 @@
7259
</a>
7360
</div>
7461
</div>
75-
62+
7663
<div class="col">
7764
<div id="total-records"></div>
7865
</div>
7966

67+
<div class="col"></div>
8068

8169
<div class="col">
8270
<div class="nav-ctrls ">
@@ -92,14 +80,12 @@
9280
</div>
9381
</div>
9482

95-
<div class="col">
96-
97-
</div>
98-
9983
<div id="results-container">
10084
<div id="qty-show-results" class="transparent"></div>
10185
</div>
102-
86+
87+
<div class="col"></div>
88+
10389
</div> <!--END NAV-PAGE-ROW-->
10490

10591

@@ -125,7 +111,6 @@
125111
>
126112
<button title="Reset Search" type="reset" onclick="resetSearcher()" class="resetSearchButton">
127113
<i class="fa fa-remove fa-xl"></i>
128-
<!-- fa fa-refresh -->
129114
</button>
130115
</div>
131116
</div>
@@ -154,8 +139,7 @@
154139

155140
<div id="stayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
156141

157-
<div class="accordion-body"><!--START-->
158-
142+
<div class="accordion-body">
159143

160144
<form id="filter-menu">
161145
<div class="filter-children expertise-checkboxes">
@@ -204,7 +188,6 @@
204188

205189
<div class="filter-children language-checkboxes">
206190
<span class="badge-col-head">
207-
<!-- <div class="circle badge1-circle"></div> -->
208191
Language
209192
</span>
210193
<div id="">
@@ -228,15 +211,13 @@
228211
</span>
229212
</div>
230213
</div>
231-
<!-- </h3> Target Device </h3> -->
232214

233215
<div class="filter-children device-checkboxes">
234216
<span class="badge-col-head">
235-
<!-- <div class="circle badge3-circle"></div> -->
236217
Target Device
237218
</span>
238219

239-
<div> <!--onclick="checkBoxClick(event)"-->
220+
<div>
240221
<span class="checkmark">
241222
<input type="checkbox" value="cpu" name="data-filter"/>
242223
<label class="container-filter">
@@ -258,9 +239,7 @@
258239
</div>
259240
</div>
260241
</form>
261-
262-
263-
</div> <!--END ACCORDION-BODY-->
242+
</div>
264243

265244
</div>
266245
</div> <!--end acordion-->
@@ -308,39 +287,7 @@
308287
<div class="rgt-col"></div>
309288
</div>
310289
</div>
311-
312290
</div> <!--END right column-->
313-
314-
315291
</div> <!--END content row-->
316-
317292
</div>
318293
{% endblock %}
319-
320-
<!-- <div class="col"> -->
321-
<!--#1 ORIGINAL 2ND ROW BELOW STICKY NAV -->
322-
<!-- <div class="col-nav-left"> for
323-
<a href="https://www.intel.com/content/www/us/en/developer/tools/oneapi/toolkits.html">&nbsp;Intel&reg;&nbsp;oneAPI&nbsp;Toolkits
324-
</a>
325-
</div>
326-
</div>
327-
328-
<div class="col"></div> -->
329-
<!--#2-->
330-
331-
<!-- <div class="col"> -->
332-
<!--#3-->
333-
<!-- Get started on oneAPI development with code samples
334-
</div>
335-
336-
<div class="col"></div> -->
337-
<!--#4-->
338-
339-
<!-- <div class="col"> -->
340-
<!--#5-->
341-
<!-- <div id="total-records"></div>
342-
</div> -->
343-
344-
<!-- FILTER INPUT WRAPPER - PREVIOUS CHECKBOXES -->
345-
<!-- <div class="filter-input-wrapper">
346-
</div> -->

0 commit comments

Comments
 (0)