From 97378f46ab1280143837c80e55e0eebd1fb98c03 Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Sun, 9 Apr 2023 23:30:41 -0400
Subject: [PATCH] Add max width to PageBody

Closes #447.
---
 src/assets/scss/_variables.scss           |  1 +
 src/assets/scss/app.scss                  |  7 ++++++-
 src/components/form-attachment/popups.vue |  3 ++-
 src/components/home.vue                   | 15 +++++++++------
 src/components/page/body.vue              | 15 ++++++++++++++-
 src/routes.js                             | 22 +++++++++++++++-------
 6 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 8ac8f0568..4596204d3 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -94,6 +94,7 @@ $padding-modal-body: 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);
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 84c6f1072..245005bed 100644
--- a/src/assets/scss/app.scss
+++ b/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 {
@@ -680,7 +680,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;
diff --git a/src/components/form-attachment/popups.vue b/src/components/form-attachment/popups.vue
index 145c200ac..b485089d0 100644
--- a/src/components/form-attachment/popups.vue
+++ b/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)}, 0));
   width: $popup-width;
   z-index: $z-index-main;
 
diff --git a/src/components/home.vue b/src/components/home.vue
index f1d0b7d4c..777b4baef 100644
--- a/src/components/home.vue
+++ b/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';
diff --git a/src/components/page/body.vue b/src/components/page/body.vue
index b94cc4b13..c8a24c81d 100644
--- a/src/components/page/body.vue
+++ b/src/components/page/body.vue
@@ -10,7 +10,7 @@ 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 id="page-body" :class="htmlClass">
     <div class="col-xs-12">
       <slot></slot>
     </div>
@@ -22,11 +22,24 @@ export default {
   name: 'PageBody'
 };
 </script>
+<script setup>
+import { computed, inject } from 'vue';
+
+const { router } = inject('container');
+const htmlClass = computed(() => ({
+  row: true,
+  // `router` may be `null` in testing.
+  'full-width': router != null && router.currentRoute.value.meta.fullWidth
+}));
+</script>
 
 <style lang="scss">
 @import '../../assets/scss/variables';
 
 #page-body {
   margin-top: $margin-top-page-body;
+
+  max-width: $max-width-page-body;
+  &.full-width { max-width: none; }
 }
 </style>
diff --git a/src/routes.js b/src/routes.js
index 047d5659d..b56bd45fa 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -310,7 +310,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 +363,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 +395,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 +487,8 @@ const routes = [
           title: () => [
             i18n.t('formHead.draftNav.tab.testing'),
             form.nameOrId
-          ]
+          ],
+          fullWidth: true
         }
       })
     ]
@@ -529,7 +533,8 @@ const routes = [
           title: () => [i18n.t('common.data'), dataset.name],
           validateData: {
             project: () => project.permits(['dataset.read', 'entity.list'])
-          }
+          },
+          fullWidth: true
         }
       })
     ]
@@ -595,7 +600,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({
@@ -613,7 +619,8 @@ const routes = [
           title: () => [
             i18n.t('systemHome.tab.analytics'),
             i18n.t('systemHome.title')
-          ]
+          ],
+          fullWidth: true
         },
         beforeEnter: () => (config.showsAnalytics ? true : '/')
       })
@@ -655,6 +662,7 @@ const routesByName = new Map();
     requireLogin: true,
     requireAnonymity: false,
     preserveData: [],
+    fullWidth: false,
     ...meta,
     validateData: meta == null || meta.validateData == null
       ? []