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

webapp: apply card-table class to info view cards

Browse Source 
the cards in all information views still used a div.card-body around the
table, which added a margin on all sides of the table. to achieve a
unified look, these cards and tables now look the same as the inverter
channel cards.
This commit is contained in:
Bernhard Kirchen 2024-10-26 21:29:38 +02:00
parent d5024436b7
commit 43f760aa24
14 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/src/components/CardElement.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="['card', addSpace ? 'mt-5' : '']">
<div :class="['card', table ? 'card-table' : '', addSpace ? 'mt-5' : '']">
<div :class="['card-header', textVariant]">{{ text }}</div>
<div :class="['card-body', 'card-text', centerContent ? 'text-center' : '']">
<slot />
@ -14,6 +14,7 @@ export default defineComponent({
props: {
text: String,
textVariant: String,
table: Boolean,
addSpace: Boolean,
centerContent: Boolean,
},

2
webapp/src/components/FirmwareInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary">
<CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

2
webapp/src/components/HardwareInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary">
<CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

2
webapp/src/components/HeapDetails.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary">
<CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

2
webapp/src/components/InterfaceApInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary">
<CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

1
webapp/src/components/InterfaceNetworkInfo.vue
View File

@ -2,6 +2,7 @@
<CardElement
:text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
textVariant="text-bg-primary"
table
>
<div class="table-responsive">
<table class="table table-hover table-condensed">

2
webapp/src/components/MemoryInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary">
<CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<thead>

2
webapp/src/components/PinInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary">
<CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<thead>

2
webapp/src/components/RadioInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary">
<CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

2
webapp/src/components/TaskDetails.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary">
<CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

2
webapp/src/components/WifiApInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary">
<CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

2
webapp/src/components/WifiStationInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary">
<CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

6
webapp/src/views/MqttInfoView.vue
View File

@ -5,7 +5,7 @@
:show-reload="true"
@reload="getMqttInfo"
>
<CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
<CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
@ -102,7 +102,7 @@
</div>
</CardElement>
<CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space>
<CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
@ -155,7 +155,7 @@
</div>
</CardElement>
<CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space>
<CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>

4
webapp/src/views/NtpInfoView.vue
View File

@ -1,6 +1,6 @@
<template>
<BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNtpInfo">
<CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
<CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
@ -21,7 +21,7 @@
</div>
</CardElement>
<CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space>
<CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space table>
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>