Update vue router version
This commit is contained in:
parent
578b563b7b
commit
6cf9457dca
|
|
@ -25,7 +25,7 @@
|
|||
"cypress:parallel:run": "cy2 run --parallel --record --config-file cypress.frontend.json --ci-build-id "
|
||||
},
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.5.8",
|
||||
"@apollo/client": "^3.5.10",
|
||||
"@babel/core": "^7.16.7",
|
||||
"@babel/eslint-plugin": "^7.16.5",
|
||||
"@babel/plugin-transform-runtime": "^7.5.0",
|
||||
|
|
@ -46,6 +46,8 @@
|
|||
"@tiptap/vue-2": "^2.0.0-beta.77",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.0",
|
||||
"@typescript-eslint/parser": "^5.10.0",
|
||||
"@vue/apollo-option": "^4.0.0-alpha.16",
|
||||
"@vue/compiler-sfc": "3.2.30",
|
||||
"@vue/compat": "3.2.31",
|
||||
"@vue/test-utils": "^1.3.0",
|
||||
"@vue/vue2-jest": "^27.0.0",
|
||||
|
|
@ -96,12 +98,10 @@
|
|||
"uploadcare-widget": "^3.6.0",
|
||||
"url-loader": "^1.0.1",
|
||||
"vee-validate": "^4.5.10",
|
||||
"@vee-validate/rules": "^4.5.10",
|
||||
"vue": "^3.2.31",
|
||||
"vue-apollo": "^3.1.0",
|
||||
"vue": "3.2.30",
|
||||
"vue-loader": "^16.8.3",
|
||||
"vue-matomo": "^4.1.0",
|
||||
"vue-router": "^3.5.3",
|
||||
"vue-router": "^4.0.14",
|
||||
"vue-scrollto": "^2.20.0",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-vimeo-player": "^0.2.2",
|
||||
|
|
|
|||
|
|
@ -1,68 +1,75 @@
|
|||
<template>
|
||||
<router-link :to="to" data-cy="back-link" class="sub-navigation-item back-link">
|
||||
<router-link
|
||||
:to="to"
|
||||
class="sub-navigation-item back-link"
|
||||
>
|
||||
<chevron-left class="back-link__icon sub-navigation-item__icon" />
|
||||
{{ fullTitle }}
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MODULE_PAGE } from '@/router/module.names';
|
||||
import { ROOMS_PAGE } from '@/router/room.names';
|
||||
import { PROJECTS_PAGE } from '@/router/portfolio.names';
|
||||
import { MODULE_PAGE } from '@/router/module.names';
|
||||
import { ROOMS_PAGE } from '@/router/room.names';
|
||||
import { PROJECTS_PAGE } from '@/router/portfolio.names';
|
||||
|
||||
const ChevronLeft = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronLeft');
|
||||
const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'topic',
|
||||
},
|
||||
slug: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'topic',
|
||||
},
|
||||
slug: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
ChevronLeft,
|
||||
},
|
||||
components: {
|
||||
ChevronLeft,
|
||||
},
|
||||
|
||||
computed: {
|
||||
to() {
|
||||
switch (this.type) {
|
||||
case 'topic':
|
||||
return { name: 'topic', params: { topicSlug: this.slug } };
|
||||
case 'module':
|
||||
return { name: MODULE_PAGE };
|
||||
case 'portfolio':
|
||||
return { name: PROJECTS_PAGE };
|
||||
default:
|
||||
return { name: ROOMS_PAGE };
|
||||
}
|
||||
computed: {
|
||||
to() {
|
||||
switch (this.type) {
|
||||
case 'topic':
|
||||
if (this.slug) {
|
||||
return {name: 'topic', params: {topicSlug: this.slug}};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
case 'module':
|
||||
return {name: MODULE_PAGE};
|
||||
case 'portfolio':
|
||||
return {name: PROJECTS_PAGE};
|
||||
default:
|
||||
return {name: ROOMS_PAGE};
|
||||
}
|
||||
},
|
||||
fullTitle() {
|
||||
switch (this.type) {
|
||||
case 'topic':
|
||||
return `${this.$flavor.textTopic}: ${this.title}`;
|
||||
case 'module':
|
||||
return `${this.$flavor.textModule}: ${this.title}`;
|
||||
default:
|
||||
return this.title;
|
||||
}
|
||||
},
|
||||
},
|
||||
fullTitle() {
|
||||
switch (this.type) {
|
||||
case 'topic':
|
||||
return `${this.$flavor.textTopic}: ${this.title}`;
|
||||
case 'module':
|
||||
return `${this.$flavor.textModule}: ${this.title}`;
|
||||
default:
|
||||
return this.title;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import '~styles/helpers';
|
||||
|
||||
.back-link {
|
||||
@include regular-text;
|
||||
}
|
||||
.back-link {
|
||||
@include regular-text;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,73 +1,78 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<a class="scroll-up" v-if="scroll > 200" @click="scrollTop">
|
||||
<a
|
||||
class="scroll-up"
|
||||
v-if="scroll>200"
|
||||
@click="scrollTop"
|
||||
>
|
||||
<arrow-up class="scroll-up__icon" />
|
||||
</a>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const ArrowUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowUp');
|
||||
const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ArrowUp,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
scroll: 0,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let html = document.scrollingElement;
|
||||
document.body.onscroll = () => {
|
||||
this.scroll = html.scrollTop;
|
||||
};
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
document.body.onscroll = null;
|
||||
},
|
||||
|
||||
methods: {
|
||||
scrollTop() {
|
||||
document.scrollingElement.scrollTop = 0;
|
||||
export default {
|
||||
components: {
|
||||
ArrowUp
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
data() {
|
||||
return {
|
||||
scroll: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let html = document.scrollingElement;
|
||||
document.body.onscroll = () => {
|
||||
this.scroll = html.scrollTop;
|
||||
};
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
document.body.onscroll = null;
|
||||
},
|
||||
|
||||
methods: {
|
||||
scrollTop() {
|
||||
document.scrollingElement.scrollTop = 0;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_mixins.scss';
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_mixins.scss';
|
||||
|
||||
.scroll-up {
|
||||
position: fixed;
|
||||
right: $large-spacing;
|
||||
bottom: $large-spacing;
|
||||
padding: $medium-spacing;
|
||||
border-radius: 100px;
|
||||
@include default-box-shadow;
|
||||
cursor: pointer;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-silver;
|
||||
z-index: 2;
|
||||
.scroll-up {
|
||||
position: fixed;
|
||||
right: $large-spacing;
|
||||
bottom: $large-spacing;
|
||||
padding: $medium-spacing;
|
||||
border-radius: 100px;
|
||||
@include default-box-shadow;
|
||||
cursor: pointer;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-silver;
|
||||
z-index: 2;
|
||||
|
||||
&__icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
fill: $color-brand;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
fill: $color-brand;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,18 @@
|
|||
<template>
|
||||
<transition name="slide">
|
||||
<div class="navigation-sidebar" v-if="sidebar.navigation" v-click-outside="close">
|
||||
<content-navigation :is-sidebar="true" class="navigation-sidebar__main" />
|
||||
<div class="navigation-sidebar__close-button" @click="close">
|
||||
<div
|
||||
class="navigation-sidebar"
|
||||
v-if="sidebar.navigation"
|
||||
v-click-outside="close"
|
||||
>
|
||||
<content-navigation
|
||||
:is-sidebar="true"
|
||||
class="navigation-sidebar__main"
|
||||
/>
|
||||
<div
|
||||
class="navigation-sidebar__close-button"
|
||||
@click="close"
|
||||
>
|
||||
<cross class="navigation-sidebar__close-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,94 +20,93 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ContentNavigation from '@/components/book-navigation/ContentNavigation';
|
||||
import ContentNavigation from '@/components/book-navigation/ContentNavigation';
|
||||
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
|
||||
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
|
||||
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
|
||||
|
||||
export default {
|
||||
mixins: [sidebarMixin],
|
||||
export default {
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
components: {
|
||||
ContentNavigation,
|
||||
Cross,
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('navigation');
|
||||
components: {
|
||||
ContentNavigation,
|
||||
Cross
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('navigation');
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_mixins.scss';
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
$desktop-width: 285px;
|
||||
$desktop-width: 285px;
|
||||
|
||||
.navigation-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: white;
|
||||
z-index: 20;
|
||||
.navigation-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: white;
|
||||
z-index: 20;
|
||||
|
||||
@include desktop {
|
||||
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 1fr 50px;
|
||||
grid-template-rows: 50px max-content auto 100px;
|
||||
|
||||
grid-template-areas: 'm m' 'm m' 's s' 's s';
|
||||
|
||||
&--with-subnavigation {
|
||||
grid-template-areas: 'm m' 'm m' 'sub sub' 's s';
|
||||
}
|
||||
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
@include desktop {
|
||||
width: $desktop-width;
|
||||
}
|
||||
|
||||
&__main {
|
||||
padding: $medium-spacing;
|
||||
grid-area: m;
|
||||
}
|
||||
|
||||
&__main-link {
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
left: -100vw;
|
||||
@include desktop {
|
||||
left: -$desktop-width;
|
||||
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 1fr 50px;
|
||||
grid-template-rows: 50px max-content auto 100px;
|
||||
|
||||
grid-template-areas: "m m" "m m" "s s" "s s";
|
||||
|
||||
&--with-subnavigation {
|
||||
grid-template-areas: "m m" "m m" "sub sub" "s s";
|
||||
}
|
||||
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
@include desktop {
|
||||
width: $desktop-width;
|
||||
}
|
||||
|
||||
&__main {
|
||||
padding: $medium-spacing;
|
||||
grid-area: m;
|
||||
}
|
||||
|
||||
&__main-link {
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
&-enter-active, &-leave-active {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
|
||||
&-enter-from, &-leave-to {
|
||||
left: -100vw;
|
||||
@include desktop {
|
||||
left: -$desktop-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div :class="componentClass" :data-scrollto="component.id" data-cy="content-component">
|
||||
<div
|
||||
:class="componentClass"
|
||||
:data-scrollto="component.id"
|
||||
data-cy="content-component"
|
||||
>
|
||||
<bookmark-actions
|
||||
:bookmarked="bookmarked"
|
||||
:note="note"
|
||||
|
|
@ -9,105 +13,97 @@
|
|||
@edit-note="editNote"
|
||||
@bookmark="bookmarkContent(component.id, !bookmarked)"
|
||||
/>
|
||||
<component v-bind="component" :parent="parent" :is="component.type" />
|
||||
<component
|
||||
v-bind="component"
|
||||
:parent="parent"
|
||||
:is="component.type"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { constructContentComponentBookmarkMutation } from '@/helpers/update-content-bookmark-mutation';
|
||||
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
|
||||
import {defineAsyncComponent} from 'vue';
|
||||
|
||||
const TextBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock');
|
||||
const InstrumentWidget = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InstrumentWidget');
|
||||
const ImageBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageBlock');
|
||||
const ImageUrlBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageUrlBlock');
|
||||
const VideoBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/VideoBlock');
|
||||
const LinkBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock');
|
||||
const DocumentBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
|
||||
const CmsDocumentBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/CmsDocumentBlock');
|
||||
const InfogramBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
|
||||
const ThinglinkBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ThinglinkBlock');
|
||||
const GeniallyBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
|
||||
const SubtitleBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock');
|
||||
const SectionTitleBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SectionTitleBlock');
|
||||
const ContentListBlock = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentListBlock');
|
||||
const ModuleRoomSlug = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ModuleRoomSlug');
|
||||
const Assignment = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/Assignment');
|
||||
const Survey = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SurveyBlock');
|
||||
const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
|
||||
const Instruction = () =>
|
||||
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Instruction');
|
||||
const BookmarkActions = () => import(/* webpackChunkName: "content-components" */ '@/components/notes/BookmarkActions');
|
||||
const TextBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock'));
|
||||
const InstrumentWidget = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget'));
|
||||
const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock'));
|
||||
const ImageUrlBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock'));
|
||||
const VideoBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock'));
|
||||
const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
|
||||
const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
|
||||
const CmsDocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/CmsDocumentBlock'));
|
||||
const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock'));
|
||||
const ThinglinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock'));
|
||||
const GeniallyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock'));
|
||||
const SubtitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock'));
|
||||
const SectionTitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock'));
|
||||
const ContentListBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock'));
|
||||
const ModuleRoomSlug = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug'));
|
||||
const Assignment = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment'));
|
||||
const Survey = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock'));
|
||||
const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
|
||||
const Instruction = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction'));
|
||||
const BookmarkActions = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions'));
|
||||
|
||||
export default {
|
||||
props: {
|
||||
component: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
default: () => ({})
|
||||
},
|
||||
parent: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
default: () => ({})
|
||||
},
|
||||
bookmarks: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
default: () => ([])
|
||||
},
|
||||
notes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
default: () => ([])
|
||||
},
|
||||
root: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
text_block: TextBlock,
|
||||
basic_knowledge: InstrumentWidget, // for legacy
|
||||
instrument: InstrumentWidget,
|
||||
image_block: ImageBlock,
|
||||
image_url_block: ImageUrlBlock,
|
||||
video_block: VideoBlock,
|
||||
link_block: LinkBlock,
|
||||
document_block: DocumentBlock,
|
||||
infogram_block: InfogramBlock,
|
||||
genially_block: GeniallyBlock,
|
||||
subtitle: SubtitleBlock,
|
||||
section_title: SectionTitleBlock,
|
||||
content_list: ContentListBlock,
|
||||
module_room_slug: ModuleRoomSlug,
|
||||
thinglink_block: ThinglinkBlock,
|
||||
cms_document_block: CmsDocumentBlock,
|
||||
'text_block': TextBlock,
|
||||
'basic_knowledge': InstrumentWidget, // for legacy
|
||||
'instrument': InstrumentWidget,
|
||||
'image_block': ImageBlock,
|
||||
'image_url_block': ImageUrlBlock,
|
||||
'video_block': VideoBlock,
|
||||
'link_block': LinkBlock,
|
||||
'document_block': DocumentBlock,
|
||||
'infogram_block': InfogramBlock,
|
||||
'genially_block': GeniallyBlock,
|
||||
'subtitle': SubtitleBlock,
|
||||
'section_title': SectionTitleBlock,
|
||||
'content_list': ContentListBlock,
|
||||
'module_room_slug': ModuleRoomSlug,
|
||||
'thinglink_block': ThinglinkBlock,
|
||||
'cms_document_block': CmsDocumentBlock,
|
||||
Survey,
|
||||
Solution,
|
||||
Instruction,
|
||||
Assignment,
|
||||
BookmarkActions,
|
||||
BookmarkActions
|
||||
},
|
||||
|
||||
computed: {
|
||||
bookmarked() {
|
||||
return this.bookmarks && !!this.bookmarks.find((bookmark) => bookmark.uuid === this.component.id);
|
||||
return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
|
||||
},
|
||||
note() {
|
||||
const bookmark = this.bookmarks && this.bookmarks.find((bookmark) => bookmark.uuid === this.component.id);
|
||||
const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
|
||||
return bookmark && bookmark.note;
|
||||
},
|
||||
showBookmarkActions() {
|
||||
|
|
@ -119,19 +115,18 @@ export default {
|
|||
classes.push('content-component--bookmarked');
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addNote(id) {
|
||||
const type = Object.prototype.hasOwnProperty.call(this.parent, '__typename')
|
||||
? this.parent.__typename
|
||||
: 'ContentBlockNode';
|
||||
? this.parent.__typename : 'ContentBlockNode';
|
||||
|
||||
this.$store.dispatch('addNote', {
|
||||
content: id,
|
||||
type,
|
||||
block: this.root,
|
||||
block: this.root
|
||||
});
|
||||
},
|
||||
editNote() {
|
||||
|
|
@ -139,36 +134,37 @@ export default {
|
|||
},
|
||||
bookmarkContent(uuid, bookmarked) {
|
||||
this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~styles/helpers';
|
||||
@import "~styles/helpers";
|
||||
|
||||
.content-component {
|
||||
position: relative;
|
||||
.content-component {
|
||||
position: relative;
|
||||
|
||||
&--bookmarked {
|
||||
&--bookmarked {
|
||||
|
||||
}
|
||||
|
||||
&--subtitle {
|
||||
margin-top: $section-spacing;
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
&--section_title {
|
||||
margin-top: $section-spacing;
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
&--text_block {
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
&--document_block {
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
&--subtitle {
|
||||
margin-top: $section-spacing;
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
&--section_title {
|
||||
margin-top: $section-spacing;
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
&--text_block {
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
|
||||
&--document_block {
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,114 @@
|
|||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div class="solution" data-cy="solution">
|
||||
<a class="solution__toggle" data-cy="show-solution" @click="toggle"
|
||||
>Lösung
|
||||
<div
|
||||
class="solution"
|
||||
data-cy="solution"
|
||||
>
|
||||
<a
|
||||
class="solution__toggle"
|
||||
data-cy="show-solution"
|
||||
@click="toggle"
|
||||
>Lösung
|
||||
<template v-if="!visible">anzeigen</template>
|
||||
<template v-else>ausblenden</template>
|
||||
</a>
|
||||
<transition name="fade">
|
||||
<div class="solution__hidden fade" v-if="visible">
|
||||
<p class="solution__text solution-text" data-cy="solution-text" v-html="sanitizedText" />
|
||||
<cms-document-block :solution="true" class="solution__document" :value="value.document" v-if="value.document" />
|
||||
<div
|
||||
class="solution__hidden fade"
|
||||
v-if="visible"
|
||||
>
|
||||
<p
|
||||
class="solution__text solution-text"
|
||||
data-cy="solution-text"
|
||||
|
||||
v-html="sanitizedText"
|
||||
/>
|
||||
<cms-document-block
|
||||
:solution="true"
|
||||
class="solution__document"
|
||||
:value="value.document"
|
||||
v-if="value.document"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sanitizeAsHtml } from '@/helpers/text';
|
||||
import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
|
||||
import {sanitizeAsHtml} from '@/helpers/text';
|
||||
import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
|
||||
|
||||
export default {
|
||||
props: ['value'],
|
||||
components: { CmsDocumentBlock },
|
||||
export default {
|
||||
props: ['value'],
|
||||
components: {CmsDocumentBlock},
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
sanitizedText() {
|
||||
return sanitizeAsHtml(this.value.text);
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.visible = !this.visible;
|
||||
computed: {
|
||||
sanitizedText() {
|
||||
return sanitizeAsHtml(this.value.text);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.visible = !this.visible;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import "~styles/helpers";
|
||||
|
||||
.solution {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
grid-row-gap: 15px;
|
||||
.solution {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
grid-row-gap: 15px;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&__toggle {
|
||||
font-family: $sans-serif-font-family;
|
||||
color: $color-silver-dark;
|
||||
font-size: toRem(15px);
|
||||
/*margin-bottom: 15px;*/
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: toRem(18px);
|
||||
color: $color-silver-dark;
|
||||
|
||||
:deep(p) {
|
||||
font-size: toRem(18px);
|
||||
&__toggle {
|
||||
font-family: $sans-serif-font-family;
|
||||
color: $color-silver-dark;
|
||||
font-size: toRem(15px);
|
||||
/*margin-bottom: 15px;*/
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
|
||||
:deep(ul) {
|
||||
padding-left: $medium-spacing;
|
||||
&__text {
|
||||
font-size: toRem(18px);
|
||||
color: $color-silver-dark;
|
||||
|
||||
> li {
|
||||
list-style: disc outside none;
|
||||
/deep/ p {
|
||||
font-size: toRem(18px);
|
||||
color: $color-silver-dark;
|
||||
}
|
||||
|
||||
/deep/ ul {
|
||||
padding-left: $medium-spacing;
|
||||
|
||||
> li {
|
||||
list-style: disc outside none;
|
||||
color: $color-silver-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
:slug="module.topic.slug"
|
||||
class="module-navigation__topic-link"
|
||||
type="topic"
|
||||
v-if="module.topic"
|
||||
/>
|
||||
<div class="module-navigation__module-content" v-if="false">
|
||||
<!-- Do not display this for now, might be used later again though -->
|
||||
|
|
|
|||
|
|
@ -2,23 +2,31 @@
|
|||
<div class="avatar">
|
||||
<transition name="fade">
|
||||
<default-avatar
|
||||
:class="{ 'avatar__placeholder--highlighted': iconHighlighted }"
|
||||
:class="{'avatar__placeholder--highlighted': iconHighlighted}"
|
||||
class="avatar__placeholder"
|
||||
v-show="!isAvatarLoaded"
|
||||
/>
|
||||
</transition>
|
||||
<transition name="show">
|
||||
<div
|
||||
:style="{ 'background-image': `url(${avatarUrl})` }"
|
||||
:style="{'background-image': `url(${avatarUrl})`}"
|
||||
class="avatar__image"
|
||||
v-show="isAvatarLoaded"
|
||||
ref="avatarImage"
|
||||
/>
|
||||
</transition>
|
||||
<img :src="avatarUrl" class="avatar__fake-image" ref="fakeImage" />
|
||||
<img
|
||||
:src="avatarUrl"
|
||||
class="avatar__fake-image"
|
||||
ref="fakeImage"
|
||||
>
|
||||
|
||||
<div class="avatar__edit" v-if="editable" @click="closeSidebar">
|
||||
<router-link :to="{ name: 'profile' }">
|
||||
<div
|
||||
class="avatar__edit"
|
||||
v-if="editable"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
<router-link :to="{name: 'profile'}">
|
||||
<pen-icon />
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
@ -26,121 +34,119 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
|
||||
import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
|
||||
|
||||
const DefaultAvatar = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DefaultAvatar');
|
||||
const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
|
||||
const DefaultAvatar = () => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar');
|
||||
const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
|
||||
|
||||
export default {
|
||||
props: {
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
export default {
|
||||
props: {
|
||||
avatarUrl: {
|
||||
type: String
|
||||
},
|
||||
iconHighlighted: {},
|
||||
editable: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
iconHighlighted: {},
|
||||
editable: {
|
||||
default: false,
|
||||
components: {
|
||||
DefaultAvatar,
|
||||
PenIcon
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DefaultAvatar,
|
||||
PenIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAvatarLoaded: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.avatarUrl !== '') {
|
||||
this.$refs.fakeImage.addEventListener('load', () => {
|
||||
if (this.$refs.fakeImage) {
|
||||
this.$refs.fakeImage.remove();
|
||||
this.isAvatarLoaded = true;
|
||||
}
|
||||
});
|
||||
data() {
|
||||
return {
|
||||
isAvatarLoaded: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.avatarUrl !== '') {
|
||||
this.$refs.fakeImage.addEventListener('load', () => {
|
||||
if (this.$refs.fakeImage) {
|
||||
this.$refs.fakeImage.remove();
|
||||
this.isAvatarLoaded = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeSidebar() {
|
||||
this.$apollo.mutate({
|
||||
mutation: TOGGLE_SIDEBAR,
|
||||
variables: {
|
||||
sidebar: {
|
||||
profile: false
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeSidebar() {
|
||||
this.$apollo.mutate({
|
||||
mutation: TOGGLE_SIDEBAR,
|
||||
variables: {
|
||||
sidebar: {
|
||||
profile: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import "~styles/helpers";
|
||||
|
||||
$max-width: 100%;
|
||||
$max-width: 100%;
|
||||
|
||||
.avatar {
|
||||
height: $max-width;
|
||||
width: $max-width;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
&__placeholder {
|
||||
.avatar {
|
||||
height: $max-width;
|
||||
fill: $color-silver-dark;
|
||||
border-radius: 50%;
|
||||
width: $max-width;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
&--highlighted {
|
||||
fill: $color-brand;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
&--landscape {
|
||||
width: auto;
|
||||
&__placeholder {
|
||||
height: $max-width;
|
||||
fill: $color-silver-dark;
|
||||
border-radius: 50%;
|
||||
|
||||
&--highlighted {
|
||||
fill: $color-brand;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
&--landscape {
|
||||
width: auto;
|
||||
height: $max-width;
|
||||
}
|
||||
}
|
||||
|
||||
&__fake-image {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: block;
|
||||
left: 50%;
|
||||
bottom: -3px;
|
||||
transform: translateX(80%);
|
||||
background-color: $color-white;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.fade-leave-active, .show-enter-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.fade-leave-to, .show-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__fake-image {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: block;
|
||||
left: 50%;
|
||||
bottom: -3px;
|
||||
transform: translateX(80%);
|
||||
background-color: $color-white;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.fade-leave-active,
|
||||
.show-enter-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-leave-to,
|
||||
.show-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,69 @@
|
|||
<template>
|
||||
<transition name="slide">
|
||||
<div class="profile-sidebar" data-cy="sidebar" v-if="sidebar.profile" v-click-outside="close">
|
||||
<a class="profile-sidebar__close-link" data-cy="close-profile-sidebar-link" @click="close">
|
||||
<div
|
||||
class="profile-sidebar"
|
||||
data-cy="sidebar"
|
||||
v-if="sidebar.profile"
|
||||
v-click-outside="close"
|
||||
>
|
||||
<a
|
||||
class="profile-sidebar__close-link"
|
||||
data-cy="close-profile-sidebar-link"
|
||||
@click="close"
|
||||
>
|
||||
<cross class="profile-sidebar__close-icon" />
|
||||
</a>
|
||||
<div class="profile-sidebar__section">
|
||||
<profile-widget class="profile-sidebar__item" />
|
||||
<div class="profile-sidebar__item" @click="close">
|
||||
<router-link to="/me/activity" class="profile-sidebar__link"> Meine Aktivitäten </router-link>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close"
|
||||
>
|
||||
<router-link
|
||||
to="/me/activity"
|
||||
class="profile-sidebar__link"
|
||||
>
|
||||
Meine Aktivitäten
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="profile-sidebar__item" v-if="me.isTeacher && !me.readOnly" @click="close">
|
||||
<router-link :to="myTeamPage" data-cy="my-team-link" class="profile-sidebar__link"> Mein Team </router-link>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
v-if="me.isTeacher && !me.readOnly"
|
||||
@click="close"
|
||||
>
|
||||
<router-link
|
||||
:to="myTeamPage"
|
||||
data-cy="my-team-link"
|
||||
class="profile-sidebar__link"
|
||||
>
|
||||
Mein Team
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-sidebar__section">
|
||||
<div class="profile-sidebar__item">
|
||||
<class-selection-widget />
|
||||
<div @click="close">
|
||||
<router-link :to="{ name: 'my-class' }" data-cy="class-list-link" class="profile-sidebar__link">
|
||||
<router-link
|
||||
:to="{name: 'my-class'}"
|
||||
data-cy="class-list-link"
|
||||
class="profile-sidebar__link"
|
||||
>
|
||||
Klassenliste
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-sidebar__section">
|
||||
<div class="profile-sidebar__item" @click="close">
|
||||
<router-link :to="{ name: 'join-class' }" data-cy="join-class-link" class="profile-sidebar__link">
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close"
|
||||
>
|
||||
<router-link
|
||||
:to="{name:'join-class'}"
|
||||
data-cy="join-class-link"
|
||||
class="profile-sidebar__link"
|
||||
>
|
||||
Zugangscode
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
@ -38,112 +76,111 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ProfileWidget from '@/components/profile/ProfileWidget';
|
||||
import ProfileWidget from '@/components/profile/ProfileWidget';
|
||||
|
||||
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
|
||||
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
|
||||
|
||||
import sidebar from '@/mixins/sidebar';
|
||||
import me from '@/mixins/me';
|
||||
import LogoutWidget from '@/components/LogoutWidget';
|
||||
import { MY_TEAM } from '@/router/me.names';
|
||||
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
|
||||
import sidebar from '@/mixins/sidebar';
|
||||
import me from '@/mixins/me';
|
||||
import LogoutWidget from '@/components/LogoutWidget';
|
||||
import {MY_TEAM} from '@/router/me.names';
|
||||
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
|
||||
|
||||
export default {
|
||||
mixins: [sidebar, me],
|
||||
export default {
|
||||
|
||||
components: {
|
||||
LogoutWidget,
|
||||
ClassSelectionWidget,
|
||||
ProfileWidget,
|
||||
Cross,
|
||||
},
|
||||
mixins: [sidebar, me],
|
||||
|
||||
computed: {
|
||||
myTeamPage() {
|
||||
return {
|
||||
name: MY_TEAM,
|
||||
};
|
||||
components: {
|
||||
LogoutWidget,
|
||||
ClassSelectionWidget,
|
||||
ProfileWidget,
|
||||
Cross,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('profile');
|
||||
computed: {
|
||||
myTeamPage() {
|
||||
return {
|
||||
name: MY_TEAM,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('profile');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import "~styles/helpers";
|
||||
|
||||
$desktop-width: 333px;
|
||||
$desktop-width: 333px;
|
||||
|
||||
.profile-sidebar {
|
||||
padding: $large-spacing 0;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
background-color: $color-white;
|
||||
z-index: 15;
|
||||
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
|
||||
overflow-y: scroll;
|
||||
.profile-sidebar {
|
||||
padding: $large-spacing 0;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
background-color: $color-white;
|
||||
z-index: 15;
|
||||
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
|
||||
overflow-y: scroll;
|
||||
|
||||
width: 100%;
|
||||
@include desktop {
|
||||
width: $desktop-width;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
&__section {
|
||||
margin-bottom: $large-spacing;
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: $small-spacing $medium-spacing;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@include small-text;
|
||||
margin: 0;
|
||||
margin-bottom: $small-spacing;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include default-link;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__close-link {
|
||||
position: absolute;
|
||||
right: $small-spacing;
|
||||
top: $small-spacing;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: right 0.2s;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
right: -100vw;
|
||||
width: 100%;
|
||||
@include desktop {
|
||||
right: -$desktop-width;
|
||||
width: $desktop-width;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
&__section {
|
||||
margin-bottom: $large-spacing;
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: $small-spacing $medium-spacing;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@include small-text;
|
||||
margin: 0;
|
||||
margin-bottom: $small-spacing;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include default-link;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__close-link {
|
||||
position: absolute;
|
||||
right: $small-spacing;
|
||||
top: $small-spacing;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
&-enter-active, &-leave-active {
|
||||
transition: right 0.2s;
|
||||
}
|
||||
|
||||
&-enter-from, &-leave-to {
|
||||
right: -100vw;
|
||||
@include desktop {
|
||||
right: -$desktop-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import '@babel/polyfill';
|
||||
import {createApp, inject} from 'vue';
|
||||
import {createApp} from 'vue';
|
||||
import VueVimeoPlayer from 'vue-vimeo-player';
|
||||
import apolloClientFactory from './graphql/client';
|
||||
import VueApollo from 'vue-apollo';
|
||||
import App from './App.vue';
|
||||
import { postLoginRedirectUrlKey, router } from './router';
|
||||
import store from '@/store/index';
|
||||
|
|
@ -14,13 +13,14 @@ import VueModal from '@/plugins/modal';
|
|||
import VueRemoveEdges from '@/plugins/edges';
|
||||
import VueMatomo from 'vue-matomo';
|
||||
import VueLogger from 'vuejs3-logger';
|
||||
import { createApolloProvider } from '@vue/apollo-option';
|
||||
import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
|
||||
import flavorPlugin from '@/plugins/flavor';
|
||||
|
||||
const publicApolloClient = apolloClientFactory('/api/graphql-public/', null);
|
||||
const privateApolloClient = apolloClientFactory('/api/graphql/', networkErrorCallback);
|
||||
|
||||
const apolloProvider = new VueApollo({
|
||||
const apolloProvider = createApolloProvider({
|
||||
clients: {
|
||||
publicClient: publicApolloClient,
|
||||
},
|
||||
|
|
@ -39,7 +39,6 @@ const isProduction = process.env.NODE_ENV === 'production';
|
|||
|
||||
app.use(VueModal);
|
||||
app.use(VueRemoveEdges);
|
||||
app.use(VueApollo);
|
||||
app.use(VueVimeoPlayer);
|
||||
app.use(VueLogger, {
|
||||
isEnabled: true,
|
||||
|
|
@ -47,6 +46,8 @@ app.use(VueLogger, {
|
|||
stringifyArguments: false,
|
||||
showConsoleColors: true,
|
||||
});
|
||||
app.use(apolloProvider);
|
||||
app.use(router);
|
||||
|
||||
// VueScrollTo.setDefaults({
|
||||
// duration: 500,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Route } from 'vue-router';
|
||||
import {RouteLocationNormalized} from "vue-router";
|
||||
|
||||
function getCookieValue(cookieName: string) {
|
||||
// https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript
|
||||
|
|
@ -6,16 +6,16 @@ function getCookieValue(cookieName: string) {
|
|||
return cookieValue ? cookieValue.pop() : '';
|
||||
}
|
||||
|
||||
export function loginRequired(to: Route) {
|
||||
export function loginRequired(to: RouteLocationNormalized) {
|
||||
// public pages have the meta.public property set to true
|
||||
const isPublic = to.meta && to.meta.public;
|
||||
return !isPublic;
|
||||
}
|
||||
|
||||
export function unauthorizedAccess(to: Route) {
|
||||
export function unauthorizedAccess(to: RouteLocationNormalized) {
|
||||
return loginRequired(to) && getCookieValue('loginStatus') !== 'true';
|
||||
}
|
||||
|
||||
export function joiningClass(to: Route) {
|
||||
export function joiningClass(to: RouteLocationNormalized) {
|
||||
return to.name && (to.name === 'join-class' || to.name === 'licenseActivation');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import Router from 'vue-router';
|
||||
import {createRouter, createWebHistory} from 'vue-router';
|
||||
|
||||
import moduleRoutes from './module.routes';
|
||||
import portfolioRoutes from './portfolio.routes';
|
||||
|
|
@ -10,26 +8,26 @@ import authRoutes from './auth.routes';
|
|||
import roomRoutes from './room.routes';
|
||||
|
||||
import store from '@/store/index';
|
||||
import { LAYOUT_SIMPLE } from '@/router/core.constants';
|
||||
import { EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE } from './oauth.names';
|
||||
import {LAYOUT_SIMPLE} from '@/router/core.constants';
|
||||
import {EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE} from './oauth.names';
|
||||
|
||||
import start from '@/pages/start';
|
||||
|
||||
const instrument = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrument');
|
||||
const instrumentOverview = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrumentOverview');
|
||||
const instrument = () => import(/* webpackChunkName: "instruments" */'@/pages/instrument');
|
||||
const instrumentOverview = () => import(/* webpackChunkName: "instruments" */'@/pages/instrumentOverview');
|
||||
|
||||
const article = () => import(/* webpackChunkName: "news" */ '@/pages/article');
|
||||
const news = () => import(/* webpackChunkName: "news" */ '@/pages/news');
|
||||
const article = () => import(/* webpackChunkName: "news" */'@/pages/article');
|
||||
const news = () => import(/* webpackChunkName: "news" */'@/pages/news');
|
||||
|
||||
const surveyPage = () => import(/* webpackChunkName: "survey" */ '@/pages/survey');
|
||||
const surveyPage = () => import(/* webpackChunkName: "survey" */'@/pages/survey');
|
||||
|
||||
const styleGuidePage = () => import('@/pages/styleguide.vue');
|
||||
const joinClass = () => import('@/pages/joinClass.vue');
|
||||
const styleGuidePage = () => import('@/pages/styleguide');
|
||||
const joinClass = () => import('@/pages/joinClass');
|
||||
|
||||
const topic = () => import('@/pages/topic-page.vue');
|
||||
const topic = () => import('@/pages/topic-page');
|
||||
|
||||
const p404 = () => import('@/pages/p404.vue');
|
||||
const submission = () => import('@/pages/studentSubmission.vue');
|
||||
const p404 = () => import('@/pages/p404');
|
||||
const submission = () => import('@/pages/studentSubmission');
|
||||
|
||||
const postLoginRedirectUrlKey = 'postLoginRedirectionUrl';
|
||||
|
||||
|
|
@ -52,22 +50,22 @@ const routes = [
|
|||
...onboardingRoutes,
|
||||
...portfolioRoutes,
|
||||
...meRoutes,
|
||||
{ path: '/article/:slug', name: 'article', component: article, meta: { layout: LAYOUT_SIMPLE } },
|
||||
{path: '/article/:slug', name: 'article', component: article, meta: {layout: LAYOUT_SIMPLE}},
|
||||
{
|
||||
path: '/instruments/',
|
||||
name: 'instrument-overview',
|
||||
component: instrumentOverview,
|
||||
},
|
||||
{ path: '/instrument/:slug', name: 'instrument', component: instrument, meta: { layout: LAYOUT_SIMPLE } },
|
||||
{ path: '/submission/:id', name: 'submission', component: submission, meta: { layout: LAYOUT_SIMPLE } },
|
||||
{ path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug' },
|
||||
{ path: '/join-class', name: 'join-class', component: joinClass, meta: { layout: LAYOUT_SIMPLE } },
|
||||
{path: '/instrument/:slug', name: 'instrument', component: instrument, meta: {layout: LAYOUT_SIMPLE}},
|
||||
{path: '/submission/:id', name: 'submission', component: submission, meta: {layout: LAYOUT_SIMPLE}},
|
||||
{path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug'},
|
||||
{path: '/join-class', name: 'join-class', component: joinClass, meta: {layout: LAYOUT_SIMPLE}},
|
||||
{
|
||||
path: '/survey/:id',
|
||||
component: surveyPage,
|
||||
name: 'survey',
|
||||
props: true,
|
||||
meta: { layout: LAYOUT_SIMPLE },
|
||||
meta: {layout: LAYOUT_SIMPLE},
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
|
|
@ -76,7 +74,7 @@ const routes = [
|
|||
},
|
||||
{
|
||||
path: '/oauth-redirect',
|
||||
redirect: (to) => {
|
||||
redirect: to => {
|
||||
switch (to.query.state) {
|
||||
case EMAIL_NOT_VERIFIED_STATE:
|
||||
return '/verify-email';
|
||||
|
|
@ -94,28 +92,28 @@ const routes = [
|
|||
}
|
||||
},
|
||||
},
|
||||
{ path: '/styleguide', component: styleGuidePage },
|
||||
{path: '/styleguide', component: styleGuidePage},
|
||||
{
|
||||
path: '/not-found',
|
||||
name: 'not-found',
|
||||
...notFoundRoute,
|
||||
...notFoundRoute
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
...notFoundRoute,
|
||||
path: '/:pathMatch(.*)*',
|
||||
...notFoundRoute
|
||||
},
|
||||
];
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
const router = new Router({
|
||||
const router = createRouter({
|
||||
routes,
|
||||
history: createWebHistory(),
|
||||
mode: 'history',
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition;
|
||||
}
|
||||
return { x: 0, y: 0 };
|
||||
return {left: 0, top: 0};
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -124,4 +122,4 @@ router.afterEach(() => {
|
|||
store.dispatch('showMobileNavigation', false);
|
||||
});
|
||||
|
||||
export { router, postLoginRedirectUrlKey };
|
||||
export {router, postLoginRedirectUrlKey};
|
||||
|
|
|
|||
Loading…
Reference in New Issue