Skip to content

Commit

Permalink
Add max width to PageBody (#775)
Browse files Browse the repository at this point in the history
Closes #447.

Also moving the variables for Bootstrap breakpoints to the main section of
_variables.scss.
  • Loading branch information
matthew-white authored May 25, 2023
1 parent 0d532a3 commit ab688c1
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 28 deletions.
5 changes: 3 additions & 2 deletions src/assets/scss/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
}

@mixin clearfix {
&::after {
clear: both;
&::before, &::after {
content: " ";
display: table;
}

&::after { clear: both; }
}
13 changes: 7 additions & 6 deletions src/assets/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
7 changes: 6 additions & 1 deletion src/assets/scss/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion src/components/form-attachment/popups.vue
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ export default {
</script>

<style lang="scss">
@use 'sass:math';
@import '../../assets/scss/variables';

$z-index-backdrop: 1;
Expand All @@ -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;

Expand Down
15 changes: 9 additions & 6 deletions src/components/home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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';
Expand Down
23 changes: 18 additions & 5 deletions src/components/page/body.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
29 changes: 22 additions & 7 deletions src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

/*
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -484,7 +494,8 @@ const routes = [
title: () => [
i18n.t('formHead.draftNav.tab.testing'),
form.nameOrId
]
],
fullWidth: true
}
})
]
Expand Down Expand Up @@ -529,7 +540,8 @@ const routes = [
title: () => [i18n.t('common.data'), dataset.name],
validateData: {
project: () => project.permits(['dataset.read', 'entity.list'])
}
},
fullWidth: true
}
}),
asyncRoute({
Expand Down Expand Up @@ -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({
Expand All @@ -640,7 +653,8 @@ const routes = [
title: () => [
i18n.t('systemHome.tab.analytics'),
i18n.t('systemHome.title')
]
],
fullWidth: true
},
beforeEnter: () => (config.showsAnalytics ? true : '/')
})
Expand Down Expand Up @@ -682,6 +696,7 @@ const routesByName = new Map();
requireLogin: true,
requireAnonymity: false,
preserveData: [],
fullWidth: false,
...meta,
validateData: meta == null || meta.validateData == null
? []
Expand Down
24 changes: 24 additions & 0 deletions test/components/page/body.spec.js
Original file line number Diff line number Diff line change
@@ -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();
});
});
});

0 comments on commit ab688c1

Please sign in to comment.