⚡ Improved section and widget layout for Minimal view

src/components/MinimalView/MinimalHeading.vue

@@ -1,24 +1,33 @@
 <template>
   <div
-    @click="selectSection(index)"
+    @click="selectSection(index)" v-tooltip="tooltip()"
-    :class="`minimal-section-heading ${selected ? 'selected' : ''}`">
+    v-bind:class="{ selected: selected, 'minimal-section-heading': true, center: hideTitleText }">
-    <h3>{{ title }}</h3>
+    <Icon v-if="icon" :icon="icon" size="small" class="section-icon" />
+    <h3 class="section-title" v-if="!hideTitleText">{{ title }}</h3>
   </div>
 </template>
 
 <script>
+import Icon from '@/components/LinkItems/ItemIcon.vue';
 
 export default {
   name: 'MinimalHeadings',
+  components: { Icon },
   props: {
     index: Number,
     title: String,
+    icon: String,
     selected: Boolean,
+    hideTitleText: Boolean,
   },
   methods: {
     selectSection(index) {
       this.$emit('sectionSelected', index);
     },
+    tooltip() {
+      return this.hideTitleText
+        ? { content: this.title, trigger: 'hover focus', delay: 250 } : null;
+    },
   },
 };
 </script>
@@ -28,23 +37,33 @@ export default {
 @import '@/styles/style-helpers.scss';
 
 div.minimal-section-heading {
+  display: flex;
   cursor: pointer;
-  padding: 0.5rem 0.25rem;
   margin-bottom: 0;
+  padding: 0.5rem 0.25rem;
+  justify-content: flex-start;
+  align-items: center;
   background: var(--minimal-view-section-heading-background);
   border: 1px solid var(--minimal-view-section-heading-color);
   border-bottom: none;
   border-radius: var(--curve-factor) var(--curve-factor) 0 0;
-  h3 {
+  h3.section-title {
     margin: 0;
     color: var(--minimal-view-section-heading-color);
   }
+  .section-icon {
+    color: var(--minimal-view-section-heading-color);
+    margin-right: 0.2rem;
+  }
   &.selected {
     background: var(--minimal-view-section-heading-color);
-    h3 {
+    h3.section-title, .section-icon {
       color: var(--minimal-view-section-heading-background);
     }
   }
+  &.center {
+    justify-content: center;
+  }
 }
 
 </style>

src/components/MinimalView/MinimalSection.vue

@@ -22,7 +22,7 @@
         @triggerModal="triggerModal"
       />
     </div>
-    <div v-if="widgets && (selected || showAll)">
+    <div v-if="widgets && (selected && !showAll)" class="minimal-widget-wrap">
       <WidgetBase
         v-for="(widget, widgetIndx) in widgets"
         :key="widgetIndx"
@@ -125,6 +125,9 @@ export default {
     @include big-screen-up { --minimal-col-count: 6; }
     grid-template-columns: repeat(var(--minimal-col-count, 1), minmax(0, 1fr));
   }
+  .minimal-widget-wrap {
+    padding: 1rem;
+  }
   &.selected {
     border: 1px solid var(--minimal-view-group-color);
     grid-column-start: span var(--col-count, 3);

src/views/Minimal.vue

@@ -21,9 +21,11 @@
         :key="`heading-${index}`"
         :index="index"
         :title="section.name"
+        :icon="section.icon"
         :selected="selectedSection === index"
         @sectionSelected="sectionSelected"
         class="headings"
+        :hideTitleText="sections.length > 8"
       />
       <!-- Section item groups -->
       <MinimalSection