From 3c6c5ff845a9ab0b341f20e98b5c5e64ad54d2f2 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 3 Jul 2020 19:37:20 +0200
Subject: [PATCH] Make task list, teams and settings pages max width of
 $desktop and centered

---
 src/styles/components/list-backgrounds.scss | 4 ++--
 src/styles/components/tasks.scss            | 2 --
 src/styles/theme/theme.scss                 | 6 ++++++
 src/views/list/EditList.vue                 | 2 +-
 src/views/list/views/List.vue               | 2 +-
 src/views/namespaces/EditNamespace.vue      | 2 +-
 src/views/tasks/ShowTasks.vue               | 2 +-
 src/views/teams/EditTeam.vue                | 2 +-
 src/views/teams/ListTeams.vue               | 2 +-
 src/views/user/Settings.vue                 | 2 +-
 10 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
index b7b68108..31dd497e 100644
--- a/src/styles/components/list-backgrounds.scss
+++ b/src/styles/components/list-backgrounds.scss
@@ -15,7 +15,7 @@
     flex-flow: row wrap;
 
     .image {
-      width: calc(100% / 6 - 1em);
+      width: calc(100% / 5 - 1em);
       height: 120px;
       margin: .5em;
       background-size: cover;
@@ -23,7 +23,7 @@
       display: flex;
 
       @media screen and (min-width: $desktop) {
-        &:nth-child(6n) {
+        &:nth-child(5n) {
           page-break-after: always; // CSS 2.1 syntax
           break-after: always; // New syntax
         }
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 500f2ba5..28337532 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -2,7 +2,6 @@
   margin-top: 1rem;
   padding: 0;
   text-align: left;
-  max-width: 80vw;
 
   @media screen and (min-width: $tablet) {
     &.short {
@@ -149,4 +148,3 @@
     }
   }
 }
-
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 42bc56fe..fb3f40bf 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -63,3 +63,9 @@ button.table {
 .pagination {
   padding-bottom: 1em;
 }
+
+.is-max-width-desktop {
+  width: 100%;
+  max-width: $desktop;
+  margin: 0 auto;
+}
diff --git a/src/views/list/EditList.vue b/src/views/list/EditList.vue
index 23d54bf5..3cb12c8f 100644
--- a/src/views/list/EditList.vue
+++ b/src/views/list/EditList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container edit-list" :class="{ 'is-loading': listService.loading}">
+	<div class="loader-container edit-list is-max-width-desktop" :class="{ 'is-loading': listService.loading}">
 		<div class="notification is-warning" v-if="list.isArchived">
 			This list is archived.
 			It is not possible to create new or edit tasks or it.
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 21c97164..c161c4c3 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container" :class="{ 'is-loading': taskCollectionService.loading}">
+	<div class="loader-container is-max-width-desktop" :class="{ 'is-loading': taskCollectionService.loading}">
 		<div class="filter-container">
 			<div class="items">
 				<div class="search">
diff --git a/src/views/namespaces/EditNamespace.vue b/src/views/namespaces/EditNamespace.vue
index 46f49adc..55f9878b 100644
--- a/src/views/namespaces/EditNamespace.vue
+++ b/src/views/namespaces/EditNamespace.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container" v-bind:class="{ 'is-loading': namespaceService.loading}">
+	<div class="loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': namespaceService.loading}">
 		<div class="notification is-warning" v-if="namespace.isArchived">
 			This namespace is archived.
 			It is not possible to create new lists or edit it.
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index cee33d5f..f085fbd6 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="is-max-width-desktop">
 		<h3 v-if="showAll">Current tasks</h3>
 		<h3 v-else>Tasks from {{startDate.toLocaleDateString()}} until {{endDate.toLocaleDateString()}}</h3>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks)">
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 28612196..6d394f1b 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
+	<div class="loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
 		<div class="card is-fullwidth" v-if="userIsAdmin">
 			<header class="card-header">
 				<p class="card-header-title">
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index c2e9c5c1..82060967 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
+	<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
 		<router-link :to="{name:'teams.create'}" class="button is-success button-right" >
 			<span class="icon is-small">
 				<icon icon="plus"/>
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index abfceb37..a94d3759 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-			class="loader-container"
+			class="loader-container is-max-width-desktop"
 			:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
 		<!-- Password update -->
 		<div class="card">