ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add mobile styling

This commit is contained in:
Ramon Wenger 2018-11-21 18:33:38 +01:00
parent 1b11599eb8
commit d46d0dde0a
17 changed files with 124 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/AddContentBlockButton.vue
View File

@ -29,9 +29,14 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.add-content {
display: flex;
display: none;
@include desktop {
display: flex;
}
justify-content: flex-end;
&__button {

7
client/src/components/BookSidebar.vue
View File

@ -29,8 +29,15 @@
<style scoped lang="scss">
@import "@/styles/_functions.scss";
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.book-sidebar {
display: none;
@include desktop {
display: block;
}
&__title {
font-size: toRem(17px);
font-weight: 400;

11
client/src/components/modules/Module.vue
View File

@ -10,10 +10,10 @@
<h3 id="objectives">Lernziele</h3>
<objective-groups :groups="languageCommunicationObjectiveGroups"></objective-groups>
<add-objective-group-button type="languageCommunication" :module="module.id"></add-objective-group-button>
<add-objective-group-button v-if="!isStudent" type="languageCommunication" :module="module.id"></add-objective-group-button>
<objective-groups :groups="societyObjectiveGroups"></objective-groups>
<add-objective-group-button type="society" :module="module.id"></add-objective-group-button>
<add-objective-group-button v-if="!isStudent" type="society" :module="module.id"></add-objective-group-button>
<chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
<h3 id="objectives-confirm">Alles klar?</h3>
@ -30,8 +30,10 @@
import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl.vue';
import AddObjectiveGroupButton from '@/components/AddObjectiveGroupButton';
import Chapter from '@/components/Chapter.vue';
import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
import {withoutOwnerFirst} from '@/helpers/sorting';
@ -117,11 +119,14 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss";
.module {
display: flex;
justify-self: center;
width: 640px;
@include desktop {
width: 640px;
}
flex-direction: column;
padding: 0 15px;
-webkit-box-sizing: border-box;

6
client/src/components/modules/ModuleNavigation.vue
View File

@ -97,6 +97,7 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@mixin module-navigation-typography {
font-family: $sans-serif-font-family;
@ -108,6 +109,11 @@
position: -webkit-sticky;
position: sticky;
top: 75px;
display: none;
@include desktop {
display: block;
}
&__module-content {
margin-bottom: 18px;

7
client/src/components/rooms/AddRoomEntryButton.vue
View File

@ -24,12 +24,12 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.add-room-entry-button {
border: 2px solid $color-white;
border-radius: 12px;
height: 150px;
display: flex;
box-sizing: border-box;
margin-bottom: 25px;
justify-content: center;
@ -37,6 +37,11 @@
break-inside: avoid;
cursor: pointer;
display: none;
@include desktop {
display: flex;
}
&__icon {
width: 80px;
fill: $color-white;

1
client/src/layouts/BlankLayout.vue
View File

@ -7,6 +7,7 @@
<style lang="scss">
.blank-layout {
margin-top: 60px;
margin-bottom: 60px;
}
</style>

8
client/src/layouts/DefaultLayout.vue
View File

@ -43,8 +43,7 @@
data() {
return {
me: {
}
me: {}
}
},
@ -67,6 +66,7 @@
grid-template-rows: auto auto 1fr;
grid-row-gap: 32px;
min-height: 100vh;
grid-template-areas: "h" "." "c";
padding-bottom: 50px;
@ -91,7 +91,9 @@
grid-auto-rows: 50px;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;
@include desktop {
grid-template-columns: 1fr 1fr 1fr;
}
/*
* For IE10+

16
client/src/layouts/SimpleLayout.vue
View File

@ -8,15 +8,20 @@
</template>
<style lang="scss">
@import "@/styles/_mixins.scss";
.layout {
&--simple {
display: -ms-grid;
display: grid;
padding: 20px;
grid-template-columns: 1fr 640px 1fr;
& > :nth-child(2){
grid-column: 2;
@include desktop {
grid-template-columns: 1fr 640px 1fr;
& > :nth-child(2) {
grid-column: 2;
}
}
}
@ -25,7 +30,10 @@
.close-button {
justify-self: end;
cursor: pointer;
grid-column: 3;
@include desktop {
grid-column: 3;
}
&__icon {
width: 40px;

8
client/src/pages/book.vue
View File

@ -21,16 +21,22 @@
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
.book {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
grid-template-columns: 305px 1fr;
grid-column-gap: 50px;
justify-items: start;
padding: 0 24px;
@include desktop {
grid-template-columns: 305px 1fr;
}
}
</style>

6
client/src/pages/module-base.vue
View File

@ -16,6 +16,8 @@
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
.module-page {
display: -ms-grid;
@supports (display: grid) {
@ -23,7 +25,9 @@
}
justify-items: center;
grid-template-columns: 400px minmax(max-content, 1fr) minmax(auto, 400px);
@include desktop {
grid-template-columns: 400px minmax(max-content, 1fr) minmax(auto, 400px);
}
/*
* For IE10+

13
client/src/pages/room.vue
View File

@ -143,6 +143,7 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss";
.room {
display: grid;
@ -164,6 +165,10 @@
&__meta {
display: flex;
flex-direction: column;
@include desktop {
flex-direction: row-reverse;
}
justify-content: start;
& > :first-child {
@ -172,9 +177,13 @@
}
&__content {
padding: 50px 60px;
padding: 50px 15px;
background-color: rgba($color-darkgrey-1, 0.18);
columns: 4;
@include desktop {
columns: 4;
padding: 50px 60px;
}
}
}
</style>

10
client/src/pages/rooms.vue
View File

@ -60,16 +60,22 @@
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
.rooms-page {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
grid-template-columns: repeat(3, 1fr);
padding: 50px 15px;
@include desktop {
grid-template-columns: repeat(3, 1fr);
padding: 50px 45px;
}
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-auto-rows: 260px;
padding: 50px 45px;
max-width: 1440px;
width: 100%;
justify-self: center;

28
client/src/pages/start.vue
View File

@ -62,6 +62,7 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.start-page {
@ -79,23 +80,29 @@
}
.start-sections {
padding-left: 120px;
padding-right: 120px;
@include desktop {
padding-left: 120px;
padding-right: 120px;
}
display: -ms-grid;
margin-bottom: 90px;
@supports (display: grid) {
display: grid;
}
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 50px;
@include desktop {
grid-template-columns: 1fr 1fr 1fr;
}
grid-row-gap: 15px;
grid-column-gap: 50px;
justify-items: start;
}
.news {
padding-left: 120px;
padding-right: 120px;
@include desktop {
padding-left: 120px;
padding-right: 120px;
}
&__title {
font-family: $serif-font-family;
@ -110,7 +117,12 @@
@supports (display: grid) {
display: grid;
}
grid-template-columns: 1fr 1fr 1fr;
@include desktop {
grid-template-columns: 1fr 1fr 1fr;
}
grid-row-gap: 15px;
grid-column-gap: 50px;
}
}

8
client/src/pages/submissions.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="submissions-page">
<assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
:assignment="assignment"></assignment-with-submissions>
:assignment="assignment"></assignment-with-submissions>
</div>
</template>
@ -43,7 +43,11 @@
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
.submissions-page {
width: 800px;
@include desktop {
width: 800px;
}
}
</style>

5
client/src/pages/topic.vue
View File

@ -53,6 +53,7 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.topic {
&__teaser {
@ -70,10 +71,12 @@
@supports (display: grid) {
display: grid;
}
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 40px;
grid-row-gap: 30px;
@include desktop {
grid-template-columns: repeat(3, 1fr);
}
}
}
</style>

6
client/src/styles/_mixins.scss
View File

@ -44,3 +44,9 @@
background-color: $color-white;
}
}
@mixin desktop {
@media (min-width: 1024px) {
@content
}
}

7
client/src/styles/_typography.scss
View File

@ -1,5 +1,6 @@
@import "variables";
@import "functions";
@import "mixins";
* {
font-size: $base-font-size;
@ -27,10 +28,14 @@ a {
}
h1 {
font-size: 4rem; // 64px
font-size: 2rem;
font-weight: 800;
color: $header-color;
margin-bottom: 35px;
@include desktop {
font-size: 4rem; // 64px
}
}
h2 {