feat: Dashboard widths in simwrapper-config.yaml; width: [100%|70rem]…

… etc

Dashboard configuration in simwrapper-config.yaml now knows the

width: [...] parameter, where max width can be:

- A percentage of panel width such as 90%
- a hard value, such as 90rem

- Fixes simwrapper#120

src/store.ts

@@ -33,6 +33,7 @@ export default new Vuex.Store({
     authAttempts: 0,
     breadcrumbs: [] as BreadCrumb[],
     credentials: { fake: 'fake' } as { [url: string]: string },
+    dashboardWidth: '',
     isFullScreen: false,
     isFullWidth: false,
     isShowingLeftBar: false,
@@ -167,6 +168,9 @@ export default new Vuex.Store({
     toggleShowLeftBar(state) {
       state.isShowingLeftBar = !state.isShowingLeftBar
     },
+    setDashboardWidth(state, value: string) {
+      state.dashboardWidth = value
+    },
     setFullWidth(state, value: boolean) {
       state.isFullWidth = value
     },

src/views/DashBoard.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 #dashboard.dashboard(:class="{wiide}")
-  .dashboard-content(:class="{wiide}")
+  .dashboard-content(:class="{wiide}" :style="dashWidthCalculator")
     .dashboard-header(v-if="!fullScreenCardId" :class="{wiide}")
       h2 {{ title }}
       p {{ description }}
@@ -140,6 +140,13 @@ export default class VueComponent extends Vue {
     window.removeEventListener('resize', this.resizeAllCards)
   }
 
+  private get dashWidthCalculator() {
+    if (this.$store.state.dashboardWidth && this.$store.state.isFullWidth) {
+      return { maxWidth: this.$store.state.dashboardWidth }
+    }
+    return {}
+  }
+
   /**
    * This only gets triggered when a topsheet has some titles.
    * Remove the dashboard titles and use the ones from the topsheet.
@@ -355,7 +362,7 @@ export default class VueComponent extends Vue {
 }
 
 .dashboard.wiide {
-  padding-left: 1rem;
+  padding-left: 2rem;
 }
 
 .dashboard-header {
@@ -439,7 +446,7 @@ export default class VueComponent extends Vue {
 }
 
 .dash-card-frame.wiide {
-  margin-right: 1rem;
+  margin-right: 2rem;
 }
 
 .dash-card {

src/views/TabbedDashboardView.vue

@@ -1,25 +1,24 @@
 <template lang="pug">
 .tabbed-folder-view
 
-  .tabholder(v-show="!isZoomed" :class="{wiide}")
+  .tabholder(v-show="!isZoomed" :class="{wiide}" :style="dashWidthCalculator")
     .tabholdercontainer(:class="{wiide}")
       .project-header(v-if="header" v-html="header" :class="{wiide}")
       .breadcrumbs(v-else)
         h3 {{ pageHeader }}
         h4 {{ root }}: {{ xsubfolder && xsubfolder.startsWith('/') ? '' : '/' }}{{ xsubfolder }}
 
       .tabs.is-centered
-        b.up-link(:style="{marginLeft: wiide ? '0':'-0.75rem'}")
+        b.up-link(:style="{marginLeft: wiide ? '1rem':'-0.75rem'}")
           a(@click="goUpOneFolder()") ^ UP
 
-        ul(:style="{marginRight: wiide ? '2rem':'4rem'}")
+        ul(:style="{marginRight: wiide ? '4rem':'4rem'}")
           li(v-for="tab in Object.keys(dashboards)" :key="tab"
             :class="{'is-active': tab===activeTab, 'is-not-active': tab!==activeTab}"
             :style="{opacity: tab===activeTab ? 1.0 : 0.5}"
           )
             b: a(v-if="dashboards[tab].header" @click="switchTab(tab)") {{ dashboards[tab].header.tab }}
 
-
   dash-board(v-if="dashboardTabWithDelay && dashboardTabWithDelay !== 'FILE__BROWSER' && dashboards[dashboardTabWithDelay] && dashboards[dashboardTabWithDelay].header.tab !== '...'"
     :root="root"
     :xsubfolder="xsubfolder"
@@ -40,7 +39,7 @@
 
   p.load-error(v-show="loadErrorMessage" @click="authorizeAfterError"): b {{ loadErrorMessage }}
 
-  .tabholder(v-show="showFooter && !isZoomed" :class="{wiide}")
+  .tabholder(v-show="showFooter && !isZoomed" :class="{wiide}" :style="dashWidthCalculator")
     .tabholdercontainer(:class="{wiide}")
       .project-footer(v-if="footer" v-html="footer" :class="{wiide}")
 
@@ -94,6 +93,13 @@ export default class VueComponent extends Vue {
     return this.$store.state.isFullWidth
   }
 
+  private get dashWidthCalculator() {
+    if (this.$store.state.dashboardWidth && this.$store.state.isFullWidth) {
+      return { maxWidth: this.$store.state.dashboardWidth }
+    }
+    return {}
+  }
+
   private beforeDestroy() {
     if (this.dashboardDataManager) this.dashboardDataManager.clearCache()
     this.clearStyles()
@@ -198,7 +204,12 @@ export default class VueComponent extends Vue {
         this.$store.commit('setShowLeftBar', !!!yaml.hideLeftBar)
 
         // set margins wide if requested to do so
-        if (yaml.fullWidth !== undefined) this.$store.commit('setFullWidth', yaml.fullWidth)
+        this.$store.commit('setFullWidth', !!yaml.fullWidth)
+        this.$store.commit('setDashboardWidth', '')
+        if (yaml.width !== undefined) {
+          this.$store.commit('setDashboardWidth', '' + yaml.width)
+          this.$store.commit('setFullWidth', true)
+        }
 
         try {
           if (yaml.css) {
@@ -468,7 +479,7 @@ li.is-not-active b a {
 }
 
 .project-header.wiide {
-  padding: 1rem 1rem;
+  padding: 1rem 2rem;
 }
 
 .project-footer {
@@ -503,7 +514,7 @@ li.is-not-active b a {
 
 .project-footer.wiide {
   margin: 3rem 0rem 1rem 0rem;
-  padding: 1rem 1rem;
+  padding: 1rem 2rem;
   border-top: none;
   background-color: #88888815;
   color: var(--text);