Skip to content

Commit 153aa5d

Browse files
mvincerxmvincerx
committed
WIP
Signed-off-by: michael vincerra <michael.vincerra@intel.com>
1 parent ec477b0 commit 153aa5d

2 files changed

Lines changed: 111 additions & 58 deletions

File tree

‎src/docs/_static/styles.css‎

Lines changed: 77 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -162,14 +162,14 @@ body {
162162
color:rgb(0,84,174);
163163
}
164164

165-
.filter-input-wrapper {
165+
/* .filter-input-wrapper {
166166
padding: 0.5rem;
167167
display: flex;
168168
flex-direction: column;
169169
flex-wrap: wrap;
170170
align-items: stretch;
171171
justify-content: center;
172-
}
172+
} */
173173

174174
/* Expandable Filter */
175175
div.filter-input-wrapper div{
@@ -431,7 +431,9 @@ input[type=button] > #nobutton {
431431

432432
.grid-row {
433433
display: flex;
434-
grid-template-columns: 25fr 16fr 18fr 16fr 25fr;
434+
/* grid-template-columns: 25fr 16fr 18fr 16fr 25fr; */
435+
grid-template-columns: 25fr 15fr 20fr 15fr 25fr;
436+
435437
/* grid-template-columns: minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px) minmax(20px, 25px); */
436438
/* See col-nav-grp padding*/
437439
background-color: rgb(0,84,174);
@@ -492,21 +494,19 @@ input[type=button] > #nobutton {
492494

493495
.search-container{
494496
background-color: transparent !important;
495-
justify-content: center;
497+
/* justify-content: center; */
496498
position: relative;
497499
}
498500

499501
.search-widget {
500502
display: flex;
501503
justify-content: center;
502504
padding-left: 0.25em; /* offset to right; treat searchbar + X as one*/
503-
/* padding-bottom: 2%; */
504-
padding-top: 0.5em;
505+
padding-top: 0.25em;
505506
padding-bottom: 0.25em;
506-
position: relative;
507507
background-color: #E9E9E9;
508508
outline: none;
509-
border-radius: 0 7px 0 0; /* */
509+
/* border-radius: 0 7px 0 0; */
510510
}
511511

512512

@@ -628,10 +628,13 @@ input::placeholder {
628628
/* font-family:var(--bs-header-font-family); */
629629
font-family: var(--bs-body-font-family);
630630
display: flex; /* inline-flex */
631-
flex: 1 1 350px;
631+
/* flex: 1 1 350px; */
632+
flex-grow: 0;
633+
flex-shrink: 0;
634+
flex-basis: 85%;
632635
overflow: hidden;
633636
min-height: 5%;
634-
width: 10%;
637+
/* width: 10%; */
635638
border-radius: 10px;
636639
outline: none;
637640
border: none;
@@ -656,11 +659,12 @@ input::placeholder {
656659
.search-widget .resetSearchButton {
657660
outline: none;
658661
border: none;
662+
/* border-radius: 0 7px 0 0; */
659663
width: 40px;
660-
height: 48px;
664+
height: 46px;
661665
background: transparent;
662-
color: rgba(255,255,255,100);
663-
z-index: 5;
666+
/* color: rgba(255,255,255,1.0);*/
667+
z-index: 5;
664668
}
665669

666670

@@ -684,7 +688,7 @@ input:focus {
684688
display: grid;
685689
grid-template-columns: minmax(360px, 480px) minmax(360px, 480px) minmax(360px, 480px);
686690
grid-gap: .5rem;
687-
/* margin-top: .5rem; */
691+
/* margin-top: 1.25rem; */
688692
margin-bottom: 2rem;
689693
padding-bottom: 100px;
690694
}
@@ -779,7 +783,8 @@ input:focus {
779783
.nav-page-row {
780784
display: flex;
781785
padding-top: 0.5em;
782-
grid-template-columns: 25fr 16fr 18fr 16fr 25fr;
786+
padding-bottom: 1.0em;
787+
grid-template-columns: 20fr 12fr 12fr 12fr 12fr 12fr 20fr;
783788
/* flex-direction: row; */
784789
justify-content: space-between;
785790
text-align: center;
@@ -803,17 +808,24 @@ input:focus {
803808
}
804809

805810
.pg-first-last {
806-
flex-grow: 1;
811+
/* flex-grow: 1; */
807812
line-height: 0.5em; /* adjust leading */
808813
vertical-align: middle;
809814
border: none;
810-
max-width: 50px;
811-
height: 40px;
812-
background: rgba(233,233,233,91);
813-
border-radius: 7px ;
815+
/* max-width: 50px;
816+
height: 40px; */
817+
background: transparent;
818+
outline: none;
819+
border-radius: 7px ;
814820
color: rgb(0,84,174);
815821
}
816822

823+
/* .pg-rng-box {
824+
background-color: rgba(180,240,255,0.25);
825+
opacity: 0.25;
826+
z-index: 20; */
827+
/* } */
828+
817829
.pg-rng {
818830
display : flex;
819831
align-items: center;
@@ -824,9 +836,11 @@ input:focus {
824836
border: none;
825837
max-width: 130px;
826838
height: 40px;
827-
background: rgba(233,233,233,91);
839+
/* background: aliceblue; */
828840
border-radius: 7px ;
829841
color: rgb(0,84,174);
842+
background-color: rgba(180,240,255,0.3);
843+
/* z-index: 100; */
830844
}
831845

832846
.arrow {
@@ -1157,7 +1171,7 @@ ul.help li {
11571171
min-width: 96px;
11581172
width: 100px;
11591173
color: rgb(0,84,174);
1160-
background-color: rgb(160,235,255);
1174+
background-color: rgba(180,240,255,0.3);
11611175
box-shadow: 0 0 0.10em rgba(233,233,233,91), 0 0 0 0.10em rgb(0,199,253) inset; /* blurred radius: 0.05em */
11621176
padding: 10px 8px 10px 6px;
11631177
margin-top: 2px;
@@ -1193,39 +1207,53 @@ a:hover {
11931207
}
11941208

11951209
.template-wrapper {
1210+
padding: 1.0em;
11961211
display: flex;
11971212
margin: 15px;
11981213
/* background-color: red; */
11991214
}
12001215

1201-
.template-wrapper .row {
1216+
/* .template-wrapper .row{
12021217
display: flex;
12031218
flex-direction: row;
12041219
flex-wrap: wrap;
1220+
justify-content: left;
12051221
width: 100%;
12061222
margin-left: -25px;
1207-
}
1223+
} */
12081224

1209-
.column {
1225+
/* .column {
12101226
display: flex;
12111227
flex-direction: column;
12121228
flex-basis: 100%;
12131229
flex: 1;
1230+
} */
1231+
1232+
.content-row{
1233+
display: flex;
1234+
flex-direction: row;
1235+
flex-wrap: nowrap;
12141236
}
12151237

12161238
.left-column {
1217-
height: 100vh;
1218-
flex: 18%;
1219-
margin-top: 1.5rem;
1220-
padding-left: 1.5em;
1221-
margin-right:-0.5em;
1239+
/* background-color: aliceblue; */
1240+
1241+
/* height: 100vh; */
1242+
/* width:fit-content !important; */
1243+
/* flex-shrink: 1; */
1244+
/* flex: 0 1 auto; */
1245+
/* flex-shrink: 0.5; */
1246+
/* margin-top: 0.20rem; */
1247+
/* padding-left: 1.5em; */
1248+
padding-right: 0.5em;
1249+
/* margin-right:-0.5em; */
12221250
}
12231251

12241252
.right-column {
12251253
background-color: transparent;
1226-
height: 100vh;
1227-
flex: 82%;
1228-
margin-top: -10px;
1254+
/* height: 100vh; */
1255+
/* flex: 0 1 auto; */
1256+
/* margin-top: 0.25rem; */
12291257
padding-bottom: 50px;
12301258
/* outline: dashed; */
12311259
/* outline-color: deeppink; */
@@ -1239,7 +1267,10 @@ a:hover {
12391267

12401268

12411269
.accordion-item { /* DROPDOWN */
1270+
/* margin-top: 0.20em; */
12421271
background-color: #E9E9E9;
1272+
/* border-radius: 7px; */
1273+
border-radius: 0 7px 0 0; /* */
12431274
}
12441275

12451276
.accordion-header{ /* seealso: search-widget*/
@@ -1248,6 +1279,7 @@ a:hover {
12481279

12491280
#headingOne {
12501281
background-color: #E9E9E9;
1282+
/* max-width: fit-content; */
12511283
}
12521284

12531285
.accordion-body {
@@ -1282,10 +1314,18 @@ a:hover {
12821314
outline-color: deepskyblue;
12831315
}
12841316

1285-
/* .accordion {
1317+
/* @media (min-width: 576px) {
1318+
.accordion {
1319+
float: none;
1320+
}
1321+
} */
1322+
1323+
1324+
.accordion {
12861325
color: transparent;
12871326
background-color: transparent;
1288-
} */
1327+
width:fit-content;
1328+
}
12891329

12901330

12911331
/* .collapse {
@@ -1304,3 +1344,5 @@ a:hover {
13041344
@include transition($transition-collapse-width);
13051345
}
13061346
} */
1347+
1348+

‎src/docs/_templates/index.html‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,10 @@
4040
</div>
4141

4242
<div class="col "> <!--#4-->
43-
<div id="results-container">
44-
<div id="qty-show-results" class="transparent"></div>
45-
</div>
4643
<!-- #4 -->
4744
</div>
4845

49-
50-
<div class="col "><!--#5-->
46+
<div class="col">
5147

5248
<div class="col-nav-grp">
5349
<!-- <div>5A</div> -->
@@ -61,36 +57,48 @@
6157
</figure>
6258
</div>
6359
</div>
60+
6461
</div>
6562

63+
6664
</div> <!--END GRID ROW-->
6765

6866
<div class="nav-page-row">
6967

70-
<div class="">
71-
<div id="total-records"></div>
68+
<div class="col">1
7269
</div>
7370

74-
<div class="">
75-
<!-- <div id="total-records"></div> -->
71+
<div class="col">2
72+
<div id="total-records"></div>
73+
</div>
74+
75+
<div class="col">
76+
<div class="nav-ctrls ">
77+
<button class='arrow left' onclick="previousPage()"></button>
78+
<button class='pg-first-last' onclick="firstPage()">First</button>
79+
<div class="pg-rng-box">
80+
<div>
81+
<snall class="pg-rng" id="paginator-state"></snall>
82+
</div>
83+
</div>
84+
<button class='pg-first-last' onclick="lastPage()">Last</button>
85+
<button class='arrow right' onclick="nextPage()"></button>
86+
</div>
7687
</div>
7788

78-
<div class="nav-ctrls ">
79-
<button class='arrow left' onclick="previousPage()"></button>
80-
<button class='pg-first-last' onclick="firstPage()">First</button>
81-
<div>
82-
<snall class="pg-rng" id="paginator-state"></snall>
83-
</div>
84-
<button class='pg-first-last' onclick="lastPage()">Last</button>
85-
<button class='arrow right' onclick="nextPage()"></button>
89+
<div>
90+
<div id="results-container">
91+
<div id="qty-show-results" class="transparent"></div>
92+
</div>
8693
</div>
8794

88-
<div class="">4</div>
89-
<div class="">5</div>
95+
<div class="col">
96+
97+
</div>
9098

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

93-
<!-- <div class='template-wrapper'> -->
101+
94102

95103
<div class='content-row'>
96104

@@ -253,6 +261,8 @@
253261

254262
<div class="toolkit-cards" data-toolkit-cards-container> </div>
255263

264+
<div class='template-wrapper'>
265+
256266
<template data-toolkit-template >
257267
<li class="card grid">
258268
<div class="card-title" data-header></div>
@@ -263,10 +273,11 @@
263273
<p class="badges-devices" data-targetDevice></p>
264274
<div url></div>
265275
</div>
266-
</div>
267-
</div>
268276
</li>
269-
</template>
277+
</template>
278+
279+
</div>
280+
270281
</div>
271282

272283

0 commit comments

Comments
 (0)