patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webapp: device manager: optimize cards for tab nav

Browse Source 
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.
This commit is contained in:
Bernhard Kirchen 2024-10-27 20:30:51 +01:00 committed by Thomas Basler
parent 71f312d830
commit 3fa864ce52
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/src/scss/styles.scss
View File

@ -57,3 +57,10 @@ div.card.card-table table .value {
text-align: right; text-align: right;
padding-right: 0; 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
webapp/src/views/DeviceAdminView.vue
View File

@ -51,7 +51,7 @@
aria-labelledby="nav-pin-tab" aria-labelledby="nav-pin-tab"
tabindex="0" tabindex="0"
> >
<div class="card"> <div class="card card-tabbed">
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputPinProfile" class="col-sm-2 col-form-label">{{ <label for="inputPinProfile" class="col-sm-2 col-form-label">{{
@ -115,7 +115,7 @@
aria-labelledby="nav-display-tab" aria-labelledby="nav-display-tab"
tabindex="0" tabindex="0"
> >
<div class="card"> <div class="card card-tabbed">
<div class="card-body"> <div class="card-body">
<InputElement <InputElement
:label="$t('deviceadmin.PowerSafe')" :label="$t('deviceadmin.PowerSafe')"
@ -216,7 +216,7 @@
aria-labelledby="nav-leds-tab" aria-labelledby="nav-leds-tab"
tabindex="0" tabindex="0"
> >
<div class="card"> <div class="card card-tabbed">
<div class="card-body"> <div class="card-body">
<InputElement <InputElement
:label="$t('deviceadmin.EqualBrightness')" :label="$t('deviceadmin.EqualBrightness')"