use css grid for wifi stations layout (better width equality)

This commit is contained in:
glaszig 2021-06-01 03:01:10 +01:00
parent d9212737e5
commit d711acb52d
4 changed files with 21 additions and 21 deletions

View file

@ -193,12 +193,12 @@ pre.unstyled {
width: 100%; width: 100%;
} }
.card-deck--wifi-stations { @media (min-width: 576px) {
justify-content: space-between; .card-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 50%;
grid-gap: 1rem;
} }
.card-deck--wifi-stations .card {
flex: 0 46%;
margin-bottom: .75rem;
} }
.sidebar.toggled .nav-item .nav-link span { .sidebar.toggled .nav-item .nav-link span {

View file

@ -225,12 +225,12 @@ pre.unstyled {
width: 100%; width: 100%;
} }
.card-deck--wifi-stations { @media (min-width: 576px) {
justify-content: space-between; .card-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 50%;
grid-gap: 1rem;
} }
.card-deck--wifi-stations .card {
flex: 0 46%;
margin-bottom: .75rem;
} }
.sidebar.toggled .nav-item .nav-link { .sidebar.toggled .nav-item .nav-link {

View file

@ -429,12 +429,12 @@ pre {
width: 100%; width: 100%;
} }
.card-deck--wifi-stations { @media (min-width: 576px) {
justify-content: space-between; .card-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 50%;
grid-gap: 1rem;
} }
.card-deck--wifi-stations .card {
flex: 0 46%;
margin-bottom: .75rem;
} }
.toggle-off.btn { .toggle-off.btn {

View file

@ -18,7 +18,7 @@
<?php if (!empty($connected)): ?> <?php if (!empty($connected)): ?>
<h4 class="h-underlined my-3"><?php echo _("Connected") ?></h4> <h4 class="h-underlined my-3"><?php echo _("Connected") ?></h4>
<div class="card-deck card-deck--wifi-stations"> <div class="card-grid">
<?php foreach ($connected as $network) : ?> <?php foreach ($connected as $network) : ?>
<?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?> <?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?>
<?php $index++; ?> <?php $index++; ?>
@ -28,7 +28,7 @@
<?php if (!empty($known)): ?> <?php if (!empty($known)): ?>
<h4 class="h-underlined my-3"><?php echo _("Known") ?></h4> <h4 class="h-underlined my-3"><?php echo _("Known") ?></h4>
<div class="card-deck card-deck--wifi-stations"> <div class="card-grid">
<?php foreach ($known as $network) : ?> <?php foreach ($known as $network) : ?>
<?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?> <?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?>
<?php $index++; ?> <?php $index++; ?>
@ -38,7 +38,7 @@
<?php if (!empty($nearby)): ?> <?php if (!empty($nearby)): ?>
<h4 class="h-underlined my-3"><?php echo _("Nearby") ?></h4> <h4 class="h-underlined my-3"><?php echo _("Nearby") ?></h4>
<div class="card-deck card-deck--wifi-stations"> <div class="card-grid">
<?php foreach ($nearby as $network) : ?> <?php foreach ($nearby as $network) : ?>
<?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?> <?php echo renderTemplate("wifi_stations/network", compact('network', 'index')) ?>
<?php $index++; ?> <?php $index++; ?>