Skip to content

Commit

Permalink
feat(ui): Use a better grid system for the big layout.
Browse files Browse the repository at this point in the history 
Because I know use `content-grid`, I can easily re-use it in expandable
things and so on. It makes things much much cleaner and predictable.
  • Loading branch information
@Hywan
Hywan committed Mar 5, 2024
1 parent f3c7c53 commit 8c835e5
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 53 deletions.
18 changes: 9 additions & 9 deletions hub/ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ <h3 class="thing--frame-name"><slot name="name">(unnamed)</slot></h3>
</svg>
</div>
</div>
<div slot="long-thing">
<div slot="long-thing" class="content-grid">
<div class="things">
<div class="things--list">
<div class="thing--frame thing--text">
Expand Down Expand Up @@ -278,7 +278,7 @@ <h3 class="thing--frame-name"><slot name="name">(unnamed)</slot></h3>
</div>
</div>
</div>
<div slot="long-thing">
<div slot="long-thing" class="content-grid">
<h4>Données actuelles</h4>

<my-unlocated-things>
Expand Down Expand Up @@ -379,26 +379,26 @@ <h4>Prévisions météorologiques</h4>
<div class="thing--weather-one-forecast" data-bind-loop="forecast in forecasts" data-bind-attributes data-bind:data-temperature-category="forecast.temperature_category">
<h5 class="thing--weather-one-forecast--datetime"><span data-bind="forecast.date_hour">(?)</span>h<span data-bind="forecast.date_extra">(?)</span></h5>

<h6 class="thing--weather-one-forecast--title"><span>Ciel</span></h6>
<h6 class="thing--weather-one-forecast--title"><span><span>Ciel</span></span></h6>

<div class="thing--weather-one-forecast--condition-icon"><svg><use data-bind-attributes data-bind:href="forecast.condition_icon" /></svg></div>
<div class="thing--weather-one-forecast--condition" data-bind="forecast.condition">(?)</div>
<div class="thing--weather-one-forecast--cloudiness" data-bind="forecast.octas">(?)</div>
<div class="thing--weather-one-forecast--precipitations"><span data-bind="forecast.precipitations">(?)</span>mm</div>
<div class="thing--weather-one-forecast--uv-index"><span data-bind="forecast.uv_index">(?)</span>UV<sub>ix</sub></div>

<h6 class="thing--weather-one-forecast--title"><span>Températures</span></h6>
<h6 class="thing--weather-one-forecast--title"><span><span>Températures</span></span></h6>

<div class="thing--weather-one-forecast--temperature"><span data-bind="forecast.temperature">(?)</span>°C</div>
<div class="thing--weather-one-forecast--apparent-temperature">(<span data-bind="forecast.apparent_temperature">(?)</span>°C)</div>

<h6 class="thing--weather-one-forecast--title"><span>Air</span></h6>
<h6 class="thing--weather-one-forecast--title"><span><span>Air</span></span></h6>

<div class="thing--weather-one-forecast--humidity"><span data-bind="forecast.humidity">(?)</span>%H</div>
<div class="thing--weather-one-forecast--pressure"><span data-bind="forecast.pressure">(?)</span>hPa</div>
<div class="thing--weather-one-forecast--dew-point"><span data-bind="forecast.dew_point">(?)></span>°C</div>

<h6 class="thing--weather-one-forecast--title"><span>Vent</span></h6>
<h6 class="thing--weather-one-forecast--title"><span><span>Vent</span></span></h6>

<div class="thing--weather-one-forecast--wind-speed"><span data-bind="forecast.wind">(?)</span>m/s</div>
<div class="thing--weather-one-forecast--wind-gust">(<span data-bind="forecast.wind_gust">(?)</span>m/s)</div>
Expand Down Expand Up @@ -431,7 +431,7 @@ <h6 class="thing--weather-one-forecast--title"><span>Vent</span></h6>
<div slot="meter-gradient" class="gradient gradient--conic__yellow_to_green"></div>
</my-meter-thing>
</my-thing>
<div slot="long-thing">
<div slot="long-thing" class="content-grid">
<h4><span data-bind="vehicle_nickname">?</span> <small class="label" data-bind="vehicle_vin">?</small></h4>

<svg viewBox="0 0 340 150.4" class="thing--car--car">
Expand Down Expand Up @@ -710,8 +710,8 @@ <h3 class="thing--frame-name">
<script src="static/javascript/sunrise.js" defer></script>
<script src="static/javascript/main.js" defer></script>
</head>
<body>
<header class="header--container">
<body class="content-grid">
<header class="full-width content-grid header--container">
<div class="header">
<my-nav id="nav" role="nav">
<span slot="root">La Maison Vivante</span>
Expand Down
103 changes: 59 additions & 44 deletions hub/ui/static/style/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,37 +93,59 @@ html {
}

body {
--body--gutter: var(--space);
font: 1.1em/1.4em text;
font-weight: 400;
}

.content-grid {
--padding-inline: var(--space);
--content-max-width: 45rem;
--breakout-max-width: 50rem;

--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

display: grid;
grid-template: "header"
"main";
grid-template-rows: auto 1fr;
margin: 0 auto;
padding: 0 var(--body--gutter);
min-height: 100%;
max-width: 50rem;
grid-template-columns:
[full-width-start]
minmax(var(--padding-inline), 1fr)
[breakout-start]
minmax(0, var(--breakout-size))
[content-start]
min(
100% - (var(--padding-inline) * 2),
var(--content-max-width)
)
[content-end]
minmax(0, var(--breakout-size))
[breakout-end]
minmax(var(--padding-inline), 1fr)
[full-width-end];
}

font: 1.1em/1.4em text;
font-weight: 400;
.content-grid > * {
grid-column: content;
}

.content-grid > .breakout {
grid-column: breakout;
}

.content-grid > .full-width {
grid-column: full-width;
}

.header--container {
position: sticky;
z-index: 20;
z-index: calc(infinity);
top: 0;
isolate: isolation;
margin-bottom: var(--space-large);
}

.header--container::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: calc(-1 * var(--body--gutter));
bottom: 0;
left: calc(-1 * var(--body--gutter));
inset: 0;
background: var(--color-light-000-transparent);
}

Expand All @@ -136,12 +158,9 @@ body {
}

.header {
grid-area: header;

display: grid;
grid-template: "header-title header-details";
grid-template: "title details";

max-width: 50rem;
font-weight: 600;
line-height: var(--space-very-large);
}
Expand All @@ -151,7 +170,7 @@ body {
}

.header--title {
grid-area: header-title;
grid-area: title;
font-size: 120%;
}

Expand All @@ -171,7 +190,7 @@ body {
}

.header--details {
grid-area: header-details;
grid-area: details;
text-align: end;
list-style: none;
}
Expand Down Expand Up @@ -200,10 +219,6 @@ body {
display: none;
}

main {
grid-area: main;
}

.things--location {
display: block;
margin-block-end: var(--space-large);
Expand Down Expand Up @@ -341,22 +356,15 @@ main {
}

.thing--expandable[aria-expanded = "true"] > .thing--expandable-long {
--thing--expandable-long--gutter: var(--space-large);

position: fixed;
z-index: 9;
top: var(--space-very-large);
right: 0;
bottom: 0;
left: 0;
inset: var(--space-very-large) 0 0;

visibility: visible;
opacity: 1;
transform: translateY(0);
overflow: auto;

padding: var(--space) var(--thing--expandable-long--gutter);

transition:
transform var(--transition-duration) var(--transition-bezier),
opacity var(--transition-duration) var(--transition-bezier);
Expand Down Expand Up @@ -611,13 +619,17 @@ main {

.thing--weather-forecast {
--thing--weather-forecast--gutter: var(--space-large);
--thing--weather-forecast--column-width: 6rem;

position: relative;

display: grid;
grid-auto-flow: column;
grid-auto-columns: 6rem;
grid-auto-columns: var(--thing--weather-forecast--column-width);
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
isolation: isolate;

margin: var(--space-very-large) 0;
border-radius: var(--space-small);
Expand Down Expand Up @@ -680,23 +692,26 @@ main {
.thing--weather-forecast > .thing--weather-one-forecast > .thing--weather-one-forecast--title {
flex: 2;
font-size: var(--font-size-secondary);
text-align: start;
margin: var(--space) 0 var(--space-very-small);
position: relative;
transform: translateX(-.5rem) translateY(-.5rem);
}

.thing--weather-forecast > .thing--weather-one-forecast:not(:first-child) > .thing--weather-one-forecast--title {
visibility: hidden;
}

.thing--weather-forecast > .thing--weather-one-forecast:first-child > .thing--weather-one-forecast--title > span {
visibility: visible;
position: fixed;
transform: translateY(-.5rem);
left: var(--thing--expandable-long--gutter);
right: var(--thing--expandable-long--gutter);

position: absolute;
left: 0;
width: calc(48 * var(--thing--weather-forecast--column-width));
padding: .2rem 0 .2rem .5rem;
text-align: start;
background: var(--color-light-000-transparent);
}

pointer-events: none;
.thing--weather-forecast > .thing--weather-one-forecast:first-child > .thing--weather-one-forecast--title > span > span {
position: sticky;
left: .5rem;
}

.thing--weather-forecast .thing--weather-one-forecast--datetime {
Expand Down

0 comments on commit 8c835e5

Please sign in to comment.