Skip to content

Commit 77151da

Browse files
joncarlsonjoncarlson
authored
Merge pull request #15 from okbryant/GUUI-3620-var-picker-style-tweak
modify style and layout to reduce borders and combine var list and info panel in scroll management
2 parents f85e9b0 + af5c0c4 commit 77151da

2 files changed

Lines changed: 56 additions & 38 deletions

File tree

‎src/components/browse-variables/browse-variables.component.ts‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -469,37 +469,50 @@ export default class TerraBrowseVariables extends TerraElement {
469469
<section class="right-column">
470470
${this.activeIndex !== undefined
471471
? html`
472-
<h4>
473-
Science Name:<br />
474-
${variables[this.activeIndex].dataFieldLongName}
475-
</h4>
476-
<p>
477-
<label><strong>Spatial Resolution:</strong></label>
478-
${variables[this.activeIndex]
479-
.dataProductSpatialResolution}
480-
</p>
481-
<p>
482-
<label><strong>Temporal Coverage:</strong></label>
483-
${variables[this.activeIndex]
484-
.dataProductBeginDateTime}
485-
–
486-
${variables[this.activeIndex]
487-
.dataProductEndDateTime}
488-
</p>
489-
<p>
490-
<label><strong>Region Coverage:</strong></label>
491-
${variables[this.activeIndex].dataProductWest},
492-
${variables[this.activeIndex].dataProductSouth},
493-
${variables[this.activeIndex].dataProductEast},
494-
${variables[this.activeIndex].dataProductNorth}
495-
</p>
496-
<p>
497-
<label><strong>Dataset:</strong></label>
498-
${variables[this.activeIndex]
499-
.dataProductShortName}_${variables[
500-
this.activeIndex
501-
].dataProductVersion}
502-
</p>
472+
<div class="sticky-element">
473+
<p>
474+
<label
475+
><strong>Name in Data File:</strong></label
476+
>
477+
${variables[this.activeIndex]
478+
.dataFieldShortName}
479+
</p>
480+
<p>
481+
<label><strong>Units:</strong></label>
482+
${variables[this.activeIndex].dataFieldUnits}
483+
</p>
484+
<p>
485+
<label
486+
><strong>Temporal Coverage:</strong></label
487+
>
488+
${variables[this.activeIndex]
489+
.dataProductBeginDateTime}
490+
–
491+
${variables[this.activeIndex]
492+
.dataProductEndDateTime}
493+
</p>
494+
<p>
495+
<label><strong>Region Coverage:</strong></label>
496+
${variables[this.activeIndex].dataProductWest},
497+
${variables[this.activeIndex].dataProductSouth},
498+
${variables[this.activeIndex].dataProductEast},
499+
${variables[this.activeIndex].dataProductNorth}
500+
</p>
501+
<p>
502+
<label
503+
><strong>Spatial Resolution:</strong></label
504+
>
505+
${variables[this.activeIndex]
506+
.dataProductSpatialResolution}
507+
</p>
508+
<p>
509+
<label><strong>Dataset:</strong></label>
510+
${variables[this.activeIndex]
511+
.dataProductShortName}_${variables[
512+
this.activeIndex
513+
].dataProductVersion}
514+
</p>
515+
</div>
503516
`
504517
: html`<p class="placeholder">
505518
Hover over a variable to see details

‎src/components/browse-variables/browse-variables.styles.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ export default css`
174174
.variables-container aside {
175175
grid-area: aside;
176176
padding: 15px;
177+
overflow-y: auto;
177178
}
178179
179180
.variables-container aside details {
@@ -255,11 +256,11 @@ export default css`
255256
}
256257
257258
.variable-list-item {
258-
border: 0.0625em var(--terra-color-nasa-blue-tint) solid;
259+
/* border: 0.0625em var(--terra-color-nasa-blue-tint) solid; */
259260
border-radius: 0.25em;
260261
background-color: var(--terra-color-carbon-10);
261262
padding: 0.5em 1em;
262-
margin-bottom: 0.5em;
263+
margin-bottom: 0.15em;
263264
}
264265
265266
.variable-list-item:hover {
@@ -296,20 +297,17 @@ export default css`
296297
}
297298
298299
.left-column {
299-
overflow-y: auto;
300+
/* overflow-y: auto; */
300301
}
301302
302303
/* Right column (details panel) */
303304
.right-column {
304305
display: flex;
305306
flex-direction: column;
306307
background-color: var(--terra-color-blue-light);
307-
border: 0.0625em solid var(--terra-color-nasa-blue-tint);
308+
/* border: 0.0625em solid var(--terra-color-nasa-blue-tint); */
308309
border-radius: 0.25em;
309310
padding: 0.5em 1em;
310-
box-shadow: 0 0.125em 0.25em rgb(0 0 0 / 0.075);
311-
padding: 1rem;
312-
overflow-y: auto;
313311
}
314312
315313
.right-column h4 {
@@ -326,4 +324,11 @@ export default css`
326324
color: var(--terra-color-carbon-50);
327325
font-style: italic;
328326
}
327+
328+
.sticky-element {
329+
position: sticky;
330+
/* For older browsers, consider adding: */
331+
position: -webkit-sticky;
332+
top: 0; /* Sticks to the top of the viewport when scrolled to */
333+
}
329334
`

0 commit comments

Comments
 (0)