From b95fd6161f8129e4f8f13e573fda3d2f45013096 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 8 Apr 2019 17:11:31 +0200 Subject: [PATCH 1/5] Disable user zoom on mobile --- client/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/index.html b/client/index.html index 7b0024b6..b94913b0 100644 --- a/client/index.html +++ b/client/index.html @@ -2,7 +2,7 @@ - + skillbox From 1bce7a710f0a0dfbbdb7027c3864a7319fe09de5 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 8 Apr 2019 17:12:52 +0200 Subject: [PATCH 2/5] Remove some non-read-only elements from mobile --- client/src/components/AddObjectiveGroupButton.vue | 7 ++++++- client/src/components/AddWidget.vue | 9 +++++++-- client/src/components/HeaderBar.vue | 4 ++++ client/src/components/WidgetFooter.vue | 6 ++++++ 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/client/src/components/AddObjectiveGroupButton.vue b/client/src/components/AddObjectiveGroupButton.vue index 4a7afd52..6961e06d 100644 --- a/client/src/components/AddObjectiveGroupButton.vue +++ b/client/src/components/AddObjectiveGroupButton.vue @@ -37,15 +37,20 @@ diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue index 8fe7d381..b85a36e6 100644 --- a/client/src/pages/start.vue +++ b/client/src/pages/start.vue @@ -185,8 +185,14 @@ -ms-grid-columns: 1fr 1fr 1fr; @supports (display: grid) { display: grid; + grid-template-columns: 1fr; } + + grid-row-gap: $large-spacing; + + @include desktop { grid-template-columns: repeat(5, 1fr); + } /* * For IE10+ @@ -221,29 +227,21 @@ padding-bottom: 24px; text-align: center; color: inherit; + margin-bottom: 0; } &__more { color: $color-white; font-family: $sans-serif-font-family; - border-left: 1px solid $color-lightgrey; line-height: $default-line-height; padding-left: $medium-spacing; font-weight: $font-weight-bold; - } - - &__teasers { - @supports (display: grid) { - display: grid; - } + text-align: center; @include desktop { - grid-template-columns: 1fr 1fr 1fr; + text-align: left; + border-left: 1px solid $color-lightgrey; } - - grid-row-gap: 15px; - grid-column-gap: 50px; } } - From d879aa1955cb8e07e0d584a470b986c6f4c3dc51 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 8 Apr 2019 17:16:35 +0200 Subject: [PATCH 4/5] Add mobile navigation --- client/src/App.vue | 20 +++- client/src/components/HeaderBar.vue | 10 +- client/src/components/MobileHeader.vue | 55 ++++++++++ client/src/components/MobileNavigation.vue | 118 +++++++++++++++++++++ client/src/components/TopNavigation.vue | 26 ++++- client/src/components/icons/Hamburger.vue | 7 ++ client/src/components/icons/Logo.vue | 37 +++++++ client/src/layouts/DefaultLayout.vue | 10 +- client/src/pages/start.vue | 7 +- client/src/router/index.js | 18 +++- client/src/store/index.js | 16 ++- 11 files changed, 306 insertions(+), 18 deletions(-) create mode 100644 client/src/components/MobileHeader.vue create mode 100644 client/src/components/MobileNavigation.vue create mode 100644 client/src/components/icons/Hamburger.vue create mode 100644 client/src/components/icons/Logo.vue diff --git a/client/src/App.vue b/client/src/App.vue index 87c0b32c..1c73926d 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,7 +1,8 @@ @@ -10,6 +11,7 @@ import SimpleLayout from '@/layouts/SimpleLayout'; import BlankLayout from '@/layouts/BlankLayout'; import Modal from '@/components/Modal'; + import MobileNavigation from '@/components/MobileNavigation'; import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard'; import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard'; import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard'; @@ -21,6 +23,8 @@ import FullscreenInfographic from '@/components/FullscreenInfographic'; import FullscreenVideo from '@/components/FullscreenVideo'; + import {mapGetters} from 'vuex'; + export default { name: 'App', @@ -29,6 +33,7 @@ SimpleLayout, BlankLayout, Modal, + MobileNavigation, NewContentBlockWizard, EditContentBlockWizard, NewRoomEntryWizard, @@ -45,9 +50,7 @@ layout() { return (this.$route.meta.layout || 'default') + '-layout'; }, - showModal() { - return this.$store.state.showModal - } + ...mapGetters(['showModal', 'showMobileNavigation']) }, mounted() { @@ -58,9 +61,16 @@ diff --git a/client/src/components/MobileNavigation.vue b/client/src/components/MobileNavigation.vue new file mode 100644 index 00000000..482b2b63 --- /dev/null +++ b/client/src/components/MobileNavigation.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue index 0d278098..de7c5e67 100644 --- a/client/src/components/TopNavigation.vue +++ b/client/src/components/TopNavigation.vue @@ -1,5 +1,5 @@