Add max width to PageBody (#775)

Closes #447.

Also moving the variables for Bootstrap breakpoints to the main section of
_variables.scss.

src/assets/scss/_mixins.scss

@@ -28,9 +28,10 @@
 }
 
 @mixin clearfix {
-  &::after {
-    clear: both;
+  &::before, &::after {
     content: " ";
     display: table;
   }
+
+  &::after { clear: both; }
 }

src/assets/scss/_variables.scss

@@ -15,6 +15,12 @@ $color-accent-primary: #bd006b;
 $color-accent-secondary: #8d0050;
 $color-page-background: #f7f7f7;
 
+// Media query breakpoints - copied from bootstrap
+$screen-xs-min: 480px;
+$screen-sm-min: 768px;
+$screen-md-min: 992px;
+$screen-lg-min: 1200px;
+
 // Text
 $color-text: #333;
 $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@@ -93,12 +99,7 @@ $padding-right-modal-header: 15px;
 
 // PageBody
 $margin-top-page-body: 20px;
+$max-width-page-body: 1280px;
 
 // Popover
 $box-shadow-popover: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-// Media query breakpoints - copied from bootstrap
-$screen-xs-min: 480px;
-$screen-sm-min: 768px;
-$screen-md-min: 992px;
-$screen-lg-min: 1200px;

src/assets/scss/app.scss

@@ -9,7 +9,7 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
-
+@use 'sass:math';
 @import './mixins';
 
 html {
@@ -682,7 +682,12 @@ becomes more complicated.
 
 .panel-main {
   box-shadow: $box-shadow-panel-main;
+  margin-left: auto;
+  margin-right: auto;
   margin-top: 70px;
+  // A .panel-main element is a child of a .col-sm-6 element. .col-sm-6 has
+  // left + right padding of 30px.
+  max-width: #{math.div($max-width-page-body, 2) - 30px};
 
   .panel-body {
     padding-bottom: 25px;

src/components/form-attachment/popups.vue

@@ -161,6 +161,7 @@ export default {
 </script>
 
 <style lang="scss">
+@use 'sass:math';
 @import '../../assets/scss/variables';
 
 $z-index-backdrop: 1;
@@ -176,7 +177,7 @@ $popup-width: 300px;
 #form-attachment-popups-main {
   bottom: $edge-offset;
   position: fixed;
-  right: $edge-offset;
+  right: calc($edge-offset + max(50% - #{math.div($max-width-page-body, 2)}, 0px));
   width: $popup-width;
   z-index: $z-index-main;
 

src/components/home.vue

@@ -13,12 +13,14 @@ except according to the terms contained in the LICENSE file.
   <div>
     <div id="home-heading">{{ $t('heading[0]') }}</div>
     <home-summary/>
-    <div id="home-news-container">
-      <home-news/>
-      <home-config-section v-if="config.home.title != null"
-        :title="config.home.title" :body="config.home.body"/>
-    </div>
-    <project-list/>
+    <page-body>
+      <div id="home-news-container">
+        <home-news/>
+        <home-config-section v-if="config.home.title != null"
+          :title="config.home.title" :body="config.home.body"/>
+      </div>
+      <project-list/>
+    </page-body>
   </div>
 </template>
 
@@ -32,6 +34,7 @@ import { defineAsyncComponent, inject } from 'vue';
 
 import HomeNews from './home/news.vue';
 import HomeSummary from './home/summary.vue';
+import PageBody from './page/body.vue';
 import ProjectList from './project/list.vue';
 
 import useProjects from '../request-data/projects';

src/components/page/body.vue

@@ -10,10 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div id="page-body" class="row">
-    <div class="col-xs-12">
-      <slot></slot>
-    </div>
+  <div id="page-body" :class="htmlClass">
+    <slot></slot>
   </div>
 </template>
 
@@ -22,11 +20,26 @@ export default {
   name: 'PageBody'
 };
 </script>
+<script setup>
+import { computed, inject } from 'vue';
+
+const { router } = inject('container');
+const htmlClass = computed(() => ({
+  // `router` may be `null` in testing.
+  'full-width': router != null && router.currentRoute.value.meta.fullWidth
+}));
+</script>
 
 <style lang="scss">
-@import '../../assets/scss/variables';
+@import '../../assets/scss/mixins';
 
 #page-body {
+  @include clearfix;
+  margin-left: auto;
+  margin-right: auto;
   margin-top: $margin-top-page-body;
+  max-width: $max-width-page-body;
+
+  &.full-width { max-width: none; }
 }
 </style>

src/routes.js

@@ -152,6 +152,13 @@ The following meta fields are supported for bottom-level routes:
       i18n.t('title.project.appUsers'),
       project.name // project.name may be `null`
     ]
+
+  Other
+  -----
+
+  - fullWidth (default: false). If fullWidth is `true`, and the route renders a
+    PageBody component, then the PageBody will use the full width of the page.
+    By default, PageBody has a max width.
 */
 
 /*
@@ -310,7 +317,8 @@ const routes = [
               'assignment.delete'
             ])
           },
-          title: () => [i18n.t('projectShow.tab.formAccess'), project.name]
+          title: () => [i18n.t('projectShow.tab.formAccess'), project.name],
+          fullWidth: true
         }
       }),
       asyncRoute({
@@ -362,7 +370,8 @@ const routes = [
             project: () => project.permits(['form.read', 'form.update', 'dataset.list']),
             form: () => form.publishedAt != null
           },
-          title: () => [form.nameOrId]
+          title: () => [form.nameOrId],
+          fullWidth: true
         }
       }),
       asyncRoute({
@@ -393,7 +402,8 @@ const routes = [
             ]),
             form: () => form.publishedAt != null
           },
-          title: () => [i18n.t('resource.submissions'), form.nameOrId]
+          title: () => [i18n.t('resource.submissions'), form.nameOrId],
+          fullWidth: true
         }
       }),
       asyncRoute({
@@ -484,7 +494,8 @@ const routes = [
           title: () => [
             i18n.t('formHead.draftNav.tab.testing'),
             form.nameOrId
-          ]
+          ],
+          fullWidth: true
         }
       })
     ]
@@ -529,7 +540,8 @@ const routes = [
           title: () => [i18n.t('common.data'), dataset.name],
           validateData: {
             project: () => project.permits(['dataset.read', 'entity.list'])
-          }
+          },
+          fullWidth: true
         }
       }),
       asyncRoute({
@@ -622,7 +634,8 @@ const routes = [
           validateData: {
             currentUser: () => currentUser.can('audit.read')
           },
-          title: () => [i18n.t('systemHome.tab.audits'), i18n.t('systemHome.title')]
+          title: () => [i18n.t('systemHome.tab.audits'), i18n.t('systemHome.title')],
+          fullWidth: true
         }
       }),
       asyncRoute({
@@ -640,7 +653,8 @@ const routes = [
           title: () => [
             i18n.t('systemHome.tab.analytics'),
             i18n.t('systemHome.title')
-          ]
+          ],
+          fullWidth: true
         },
         beforeEnter: () => (config.showsAnalytics ? true : '/')
       })
@@ -682,6 +696,7 @@ const routesByName = new Map();
     requireLogin: true,
     requireAnonymity: false,
     preserveData: [],
+    fullWidth: false,
     ...meta,
     validateData: meta == null || meta.validateData == null
       ? []

test/components/page/body.spec.js

@@ -0,0 +1,24 @@
+import PageBody from '../../../src/components/page/body.vue';
+
+import testData from '../../data';
+import { load } from '../../util/http';
+import { mockLogin } from '../../util/session';
+
+describe('PageBody', () => {
+  beforeEach(mockLogin);
+
+  describe('fullWidth route meta field', () => {
+    it('does not add full-width class if meta field is false', async () => {
+      const app = await load('/');
+      app.vm.$route.meta.fullWidth.should.be.false();
+      app.getComponent(PageBody).classes('full-width').should.be.false();
+    });
+
+    it('adds the full-width class if the meta field is true', async () => {
+      testData.extendedForms.createPast(1);
+      const app = await load('/projects/1/forms/f/submissions');
+      app.vm.$route.meta.fullWidth.should.be.true();
+      app.getComponent(PageBody).classes('full-width').should.be.true();
+    });
+  });
+});