Skip to content

Commit

Permalink
WW13.5 redesign as dashboard with layout and interactive improvements.
Browse files Browse the repository at this point in the history 
Signed-off-by: michael vincerra <michael.vincerra@intel.com>
  • Loading branch information
@mvincerx
mvincerx committed Mar 30, 2024
1 parent b0b89c2 commit 7ba9b92
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 116 deletions.
74 changes: 31 additions & 43 deletions src/docs/_static/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,10 @@ input[type=checkbox] label{
font-weight: normal;
font-weight: 400;
color: rgba(255,255,255,100);
padding: 12px 0px 15px 20px;
padding: 0.25em 0.5em 0.25em 0.5em;
min-width: 2.5em;
display: block;
padding: 0.65em 1.5em 0.5em 1.5em;
}

input[type=button] > #nobutton {
Expand Down Expand Up @@ -461,16 +464,15 @@ input[type=button] > #nobutton {
.grid-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* grid-template-columns: 25fr 15fr 20fr 15fr 25fr; */

/* grid-template-columns: minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px); */
/* See col-nav-grp padding*/
background-color: rgb(0,84,174);
width: 100%;
min-height: fit-content;
text-align: center;
align-items: center;
padding-left: 1.25em;
padding-top: 0.5em;
padding-left: 0.5em;
padding-right: 0.75em;
}

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

/* dev only
/* outline: dotted; outline-color: orangered;*/

.col:nth-child(1) {
align-items: flex-start;
Expand Down Expand Up @@ -518,7 +518,8 @@ input[type=button] > #nobutton {
font-weight: 400;
display: flex;
direction: row;
overflow: hidden;
flex: 1;
/* overflow: hidden; */
/* padding: 12px 0px 15px 20px; */
}

Expand Down Expand Up @@ -559,6 +560,9 @@ input[type=button] > #nobutton {
}

.clear-filters {
font-style: normal;
font-weight: 400;
font-size: 16px;
display: flex;
flex-direction: row;
padding-left: 0.25em; /* offset to right; treat searchbar + X as one*/
Expand Down Expand Up @@ -730,7 +734,7 @@ input:focus {
grid-template-columns: repeat(3, minmax(360px, 480px));
grid-auto-rows: 1fr; /* Assure all rows are same height */
align-items: self-start;
grid-gap: 0.25rem;
grid-gap: 0.5em;
/* margin-top: 1.25rem; */
margin-bottom: 2rem;
padding-bottom: 100px;
Expand All @@ -740,7 +744,6 @@ input:focus {
.card {
display: flex;
flex-direction: column;
height:100%;
font-family: var(--bs-body-font-family);
font-style: normal;
font-weight: 400;
Expand All @@ -749,6 +752,8 @@ input:focus {
background-color: rgba(255,255,255,100);
border-radius: 7px;
box-shadow: 2px 2px 2px rgba(174,174,174,0.2);
height:100%;
width: auto;
min-height: 22vh;
text-align: left;
padding: 1.0em;
Expand Down Expand Up @@ -841,8 +846,7 @@ input:focus {

.nav-page-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: 1fr;
grid-template-columns: 16% 12% 14% 32% 14% 12%;
grid-gap: 0.5rem;
padding-top: 0.5em;
padding-bottom: 0.5em;
Expand All @@ -852,15 +856,16 @@ input:focus {
vertical-align: middle;
min-height: 92px;
width: 100%;
padding-left: 1.25em;
padding-left: 1.5em;
/* margin-left: 0.25em; */
/* margin-right: 2.0em; */
}

@media (max-width: 500px) {
/* @media (max-width: 500px) {
div {
grid-template-columns: repeat(5, minmax(100px, 1fr));
grid-template-columns: repeat(6, minmax(150px, 1fr));
}
}
} */

.nav-ctrls {
font-family: var(--bs-header-font-family);
Expand All @@ -870,10 +875,10 @@ input:focus {
display: flex;
flex-direction: row;
/* vertical-align: middle; */
justify-content: center;
align-self: center;
/* justify-content: center;
align-self: center; */
text-align: center;
align-items: stretch;
/* align-items: stretch; */
/* column-gap: 0.875rem; */
font-size: 20px;
/* margin-left: 8.0em; */
Expand Down Expand Up @@ -1294,7 +1299,10 @@ a:hover {

#footer-container{
display: flex;
flex-direction: row;
justify-content: space-between;
/* flex-shrink: 1; */
max-height: 1.5em;
}

#footer-blk-2{
Expand Down Expand Up @@ -1338,14 +1346,14 @@ a:hover {
flex-direction: column;
height: 100%;
flex-basis: 12%;
flex-shrink: 3;
flex-shrink: 2;
max-width: auto;
/* width:fit-content !important; */
/* flex: 0 1 auto; */
margin-top: 0.20rem;
padding-left: 0.5em;
/* padding-left: 0.5em; */
padding-right: 0.25em;
/* margin-right:-0.5em; */
margin-right: 0.15em;
}

.right-column {
Expand Down Expand Up @@ -1450,27 +1458,7 @@ a:hover {
flex-direction: column;
justify-content: flex-start;
flex-grow: 1;
padding-left: 0.5em;
/* padding-left: 0.5em; */
/* flex-shrink: 0; */
/* width:fit-content; */
}


/* .collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
} */


93 changes: 20 additions & 73 deletions src/docs/_templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</div>

<div class="app-title">
Samples Catalog
Samples&nbsp;Catalog
</div>

<div>
Expand All @@ -31,36 +31,23 @@
</div>
</div>

<div class="col "><!--#2-->
<!-- #2 -->
</div>
<div class="col "> <!--#2--></div>

<div class="col "> <!--#3-->
<!-- #3 -->
</div>
<div class="col "> <!--#3--></div>

<div class="col "> <!--#4-->
<!-- #4 -->
</div>
<div class="col "> <!--#4--> </div>

<div class="col">

<div class="col-nav-grp">
<!-- <div>5A</div> -->

<div>
<figure>
<a href="https://github.com/oneapi-src/oneAPI-samples">
<img class=scaled src="_static/assets/github-mark-white.png" alt="oneAPI Samples Repository">
</a>
<figcaption>View on GitHub*</figcaption>
</figure>
</div>
</div>
<div class="col"> <!--#5--> </div>

<div class="col">
<figure>
<a href="https://github.com/oneapi-src/oneAPI-samples">
<img class=scaled src="_static/assets/github-mark-white.png" alt="oneAPI Samples Repository">
</a>
<figcaption>View on GitHub*</figcaption>
</figure>
</div>


</div> <!--END GRID ROW-->

<div class="nav-page-row">
Expand All @@ -72,11 +59,12 @@
</a>
</div>
</div>

<div class="col">
<div id="total-records"></div>
</div>

<div class="col"></div>

<div class="col">
<div class="nav-ctrls ">
Expand All @@ -92,14 +80,12 @@
</div>
</div>

<div class="col">

</div>

<div id="results-container">
<div id="qty-show-results" class="transparent"></div>
</div>


<div class="col"></div>

</div> <!--END NAV-PAGE-ROW-->


Expand All @@ -125,7 +111,6 @@
>
<button title="Reset Search" type="reset" onclick="resetSearcher()" class="resetSearchButton">
<i class="fa fa-remove fa-xl"></i>
<!-- fa fa-refresh -->
</button>
</div>
</div>
Expand Down Expand Up @@ -154,8 +139,7 @@

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

<div class="accordion-body"><!--START-->

<div class="accordion-body">

<form id="filter-menu">
<div class="filter-children expertise-checkboxes">
Expand Down Expand Up @@ -204,7 +188,6 @@

<div class="filter-children language-checkboxes">
<span class="badge-col-head">
<!-- <div class="circle badge1-circle"></div> -->
Language
</span>
<div id="">
Expand All @@ -228,15 +211,13 @@
</span>
</div>
</div>
<!-- </h3> Target Device </h3> -->

<div class="filter-children device-checkboxes">
<span class="badge-col-head">
<!-- <div class="circle badge3-circle"></div> -->
Target Device
</span>

<div> <!--onclick="checkBoxClick(event)"-->
<div>
<span class="checkmark">
<input type="checkbox" value="cpu" name="data-filter"/>
<label class="container-filter">
Expand All @@ -258,9 +239,7 @@
</div>
</div>
</form>


</div> <!--END ACCORDION-BODY-->
</div>

</div>
</div> <!--end acordion-->
Expand Down Expand Up @@ -308,39 +287,7 @@
<div class="rgt-col"></div>
</div>
</div>

</div> <!--END right column-->


</div> <!--END content row-->

</div>
{% endblock %}

<!-- <div class="col"> -->
<!--#1 ORIGINAL 2ND ROW BELOW STICKY NAV -->
<!-- <div class="col-nav-left"> for
<a href="https://www.intel.com/content/www/us/en/developer/tools/oneapi/toolkits.html">&nbsp;Intel&reg;&nbsp;oneAPI&nbsp;Toolkits
</a>
</div>
</div>
<div class="col"></div> -->
<!--#2-->

<!-- <div class="col"> -->
<!--#3-->
<!-- Get started on oneAPI development with code samples
</div>
<div class="col"></div> -->
<!--#4-->

<!-- <div class="col"> -->
<!--#5-->
<!-- <div id="total-records"></div>
</div> -->

<!-- FILTER INPUT WRAPPER - PREVIOUS CHECKBOXES -->
<!-- <div class="filter-input-wrapper">
</div> -->

0 comments on commit 7ba9b92

Please sign in to comment.