diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue index a78472cb..f9196513 100644 --- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue +++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue @@ -128,7 +128,7 @@ &__link-icon { width: 40px; - height: auto; + height: 40px; margin-bottom: 15px; } diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue index 2dda30c0..0883365f 100644 --- a/client/src/components/modules/ModuleTeaser.vue +++ b/client/src/components/modules/ModuleTeaser.vue @@ -35,6 +35,7 @@ box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); border: 1px solid #E2E2E2; height: 330px; + max-width: 380px; width: 100%; border-radius: 12px; overflow: hidden; diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue index 238c1685..746dbb62 100644 --- a/client/src/layouts/DefaultLayout.vue +++ b/client/src/layouts/DefaultLayout.vue @@ -77,7 +77,7 @@ * For IE10+ */ display: -ms-grid; - -ms-grid-rows: 50px 30px 1fr; // 1 extra row for gap + -ms-grid-rows: 50px 30px auto; // 1 extra row for gap -ms-grid-columns: 1fr; @include skillbox-colors; diff --git a/client/src/pages/book.vue b/client/src/pages/book.vue index 8491000e..e39f2db5 100644 --- a/client/src/pages/book.vue +++ b/client/src/pages/book.vue @@ -26,6 +26,7 @@ &__content { display: -ms-grid; + -ms-grid-columns: 1200px; @supports (display: grid) { display: grid; } diff --git a/client/src/pages/portfolio.vue b/client/src/pages/portfolio.vue index f7a15708..ea383d9e 100644 --- a/client/src/pages/portfolio.vue +++ b/client/src/pages/portfolio.vue @@ -44,7 +44,7 @@ } }, - data () { + data() { return { projects: [], me: {} @@ -52,7 +52,7 @@ }, computed: { - userId () { + userId() { return this.me.id; } }, @@ -79,7 +79,7 @@ }) }, editProject(id) { - this.$router.push({name: 'edit-project', params: { id }}); + this.$router.push({name: 'edit-project', params: {id}}); }, updateShareState(id, state) { const project = this.projects.filter(project => project.id === id)[0]; @@ -111,23 +111,25 @@ flex-direction: column; @supports (display: grid) { display: grid; + grid-template-columns: minmax(max-content, 840px); } - grid-row-gap: 30px; grid-auto-rows: 200px; - max-width: 640px; - width: auto; - justify-self: center; + max-width: 840px; + width: 100vh; + /*justify-self: center;*/ box-sizing: border-box; padding: $large-spacing $medium-spacing; &__page { display: flex; + flex-direction: column; @supports (display: grid) { display: grid; + align-content: start; + justify-content: center; } - align-content: center; - justify-content: center; + align-items: center; padding-top: $large-spacing; } diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue index 1cff30bf..4cc38290 100644 --- a/client/src/pages/topic.vue +++ b/client/src/pages/topic.vue @@ -93,7 +93,8 @@ &__modules { margin-top: 40px; - display: -ms-grid; + display: flex; + flex-wrap: wrap; @supports (display: grid) { display: grid; }