Make task list, teams and settings pages max width of $desktop and centered

This commit is contained in:
kolaente 2020-07-03 19:37:20 +02:00
parent 6a2380ea30
commit 3c6c5ff845
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
10 changed files with 15 additions and 11 deletions

View file

@ -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
}

View file

@ -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 @@
}
}
}

View file

@ -63,3 +63,9 @@ button.table {
.pagination {
padding-bottom: 1em;
}
.is-max-width-desktop {
width: 100%;
max-width: $desktop;
margin: 0 auto;
}

View file

@ -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.

View file

@ -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">

View file

@ -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.

View file

@ -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)">

View file

@ -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">

View file

@ -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"/>

View file

@ -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">