Skip to content

Commit

Permalink
webapp: device manager: optimize cards for tab nav
Browse files Browse the repository at this point in the history
the top border of the card was breaking the design of the tabs, where
the active tab would be "visually connected" to the content. also, the
rounded border at the top did not blend in with the navbar's bottom
border.
  • Loading branch information
schlimmchen authored and tbnobody committed Nov 1, 2024
1 parent 71f312d commit 3fa864c
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 3 deletions.
7 changes: 7 additions & 0 deletions webapp/src/scss/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,10 @@ div.card.card-table table .value {
text-align: right;
padding-right: 0;
}

// blend cards into tabbed navigation (device admin view)
div.card-tabbed {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
6 changes: 3 additions & 3 deletions webapp/src/views/DeviceAdminView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
aria-labelledby="nav-pin-tab"
tabindex="0"
>
<div class="card">
<div class="card card-tabbed">
<div class="card-body">
<div class="row mb-3">
<label for="inputPinProfile" class="col-sm-2 col-form-label">{{
Expand Down Expand Up @@ -115,7 +115,7 @@
aria-labelledby="nav-display-tab"
tabindex="0"
>
<div class="card">
<div class="card card-tabbed">
<div class="card-body">
<InputElement
:label="$t('deviceadmin.PowerSafe')"
Expand Down Expand Up @@ -216,7 +216,7 @@
aria-labelledby="nav-leds-tab"
tabindex="0"
>
<div class="card">
<div class="card card-tabbed">
<div class="card-body">
<InputElement
:label="$t('deviceadmin.EqualBrightness')"
Expand Down

0 comments on commit 3fa864c

Please sign in to comment.