use flexbox to put displays and settings side by side

This commit is contained in:
Matt Walsh
2026-04-14 16:58:17 -05:00
parent 62fbe1787f
commit 6298068f2a
5 changed files with 42 additions and 18 deletions

View File

@@ -32,6 +32,12 @@
display: inline-block;
}
}
.like {
display: none;
}
}
.temp {
@@ -58,7 +64,7 @@
.like {
left: 380px;
display: hidden;
display: block;
&.heat-index {
color: c.$heat-index;

View File

@@ -825,4 +825,19 @@ body.kiosk #loading .instructions {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 250px;
}
.lower-flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
gap: 8px;
column-gap: 64px;
.item {
display: inline-block;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -174,21 +174,25 @@
</div>
<div class="media"></div>
<div class='heading'>Selected displays</div>
<div id='enabledDisplays'>
<div class='lower-flex-container'>
<div class='item'>
<div class='heading'>Selected displays</div>
<div id='enabledDisplays'>
</div>
<div class='heading'>Settings</div>
<div id='settings'>
</div>
<div class='heading'>Sharing</div>
<div class='info'>
<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
<div id="share-link-instructions">
Copy this long URL:
<input type='text' id="share-link-url">
</div>
</div>
<div class='item'>
<div class='heading'>Settings</div>
<div id='settings'>
<div class='heading'>Sharing</div>
</div>
<div class='item'>
<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
<div id="share-link-instructions">
Copy this long URL:
<input type='text' id="share-link-url">
</div>
</div>
</div>
</div>
@@ -211,7 +215,6 @@
<div class="header">Ws4kp Version:</div>
<div class="header"><span><%- version %></span></div>
</div>
</div>
</body>