removed grey section background and added fading thing seperator line for every section after the first

This commit is contained in:
Johann Hoffmann
2024-11-13 18:39:19 +01:00
parent a682d6e5ae
commit 160294bea4
3 changed files with 23 additions and 8 deletions
+16
View File
@@ -238,6 +238,22 @@ html {
background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
}
.fhc-seperator {
position: relative;
}
.fhc-seperator::before {
content: '';
position: absolute;
top: 0;
left: 0;
margin-left: 12.5%;
width: 75%; /* Full width of the parent element */
height: 1px; /* Height of the border */
background: linear-gradient(to right, #ffffff, var(--fhc-cis-primary), #ffffff);
opacity: 0.8; /* Adjust opacity for a subtle fade effect */
}
/* desktop */
@media (min-width: 992px) {
body {
+3 -2
View File
@@ -140,8 +140,9 @@ export default {
}
}).catch(err => console.error('ERROR:', err));
},
template: `<div class="core-dashboard">
<dashboard-section v-for="section in sections" :key="section.name" :name="section.name" :widgets="section.widgets" @widgetAdd="widgetAdd" @widgetUpdate="widgetUpdate" @widgetRemove="widgetRemove"></dashboard-section>
template: `
<div class="core-dashboard">
<dashboard-section v-for="(section, index) in sections" :key="section.name" :seperator="index" :name="section.name" :widgets="section.widgets" @widgetAdd="widgetAdd" @widgetUpdate="widgetUpdate" @widgetRemove="widgetRemove"></dashboard-section>
<dashboard-widget-picker ref="widgetpicker" :widgets="widgets"></dashboard-widget-picker>
</div>`
}
+4 -6
View File
@@ -16,7 +16,8 @@ export default {
},
props: [
"name",
"widgets"
"widgets",
"seperator"
],
emits: [
"widgetAdd",
@@ -32,11 +33,7 @@ export default {
},
computed: {
getSectionStyle() {
const bgString = `background:
linear-gradient(0deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.1) 50%, rgba(128, 128, 128, 0.05) 100%)`
return 'margin-bottom: 8px;' + bgString;
return 'margin-bottom: 8px;';
},
items() {
return this.widgets.map(item => {
@@ -177,6 +174,7 @@ export default {
});
},
template: `
<div v-if="seperator" class="fhc-seperator"/>
<div class="dashboard-section" ref="container" :style="getSectionStyle">
<h3>
<span >{{$p.t('ui/section' + name)}}</span>