Add settings pages

client/src/pages/moduleSettings.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="module-settings">
+    <h1 class="module-settings__page-title">Einstellungen</h1>
+    <section class="module-settings__section">
+      <h2 class="module-settings__heading">Lösungen</h2>
+      <p class="module-settings__paragraph">Wollen Sie die Lösungen in diesem Modul für Lernende anzeigen?</p>
+      <checkbox label="Lösungen anzeigen"/>
+    </section>
+    <section class="module-settings__section">
+      <h2 class="module-settings__heading">Sichtbarkeit</h2>
+      <p class="module-settings__paragraph">Haben Sie die Sichtbarkeit für eine andere Klasse bereits angepasst? Dann
+      können Sie diese Anpassungen hier
+      übernehmen</p>
+    </section>
+  </div>
+</template>
+
+<script>
+  import Checkbox from '@/components/Checkbox';
+
+  export default {
+    components: {
+      Checkbox
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import 'styles/_helpers';
+
+  .module-settings {
+    @include settings-page;
+
+  }
+</style>

client/src/pages/moduleVisibility.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="module-visibility">
+    <h1 class="module-visibility__page-title">Sichtbarkeit</h1>
+    <div class="module-visibility__section">
+      <p class="module-visibility__paragraph">
+        Wollen Sie die angepasste Sichtbarkeit (
+        <eye-icon class="module-visibility__inline-icon"/>
+        ) von Inhalten einer anderen Klasse übernehmen?
+      </p>
+
+    </div>
+    <div class="module-visibility__form module-visibility__section">
+      Von
+      <select
+        class="skillbox-input skillbox-dropdown module-visibility__dropdown"
+        placeholder="Hallo">
+        <option
+          value
+          selected>-</option>
+      </select>
+      für INF2019i übernehmen.
+    </div>
+    <div class="module-visibility__section">
+      <a class="button button--primary">Anpassungen übernehmen</a>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EyeIcon from '@/components/icons/EyeIcon';
+  import CloseButton from '@/components/ui/CloseButton';
+
+  export default {
+    components: {
+      CloseButton,
+      EyeIcon
+    },
+
+    methods: {
+      hello() {
+        console.log('hello');
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import 'styles/_helpers';
+
+  .module-visibility {
+    @include settings-page;
+
+    margin: 0 auto;
+
+    &__inline-icon {
+      width: 25px;
+      height: 25px;
+      vertical-align: middle;
+    }
+
+    &__dropdown {
+      width: 200px;
+      margin: 0 $medium-spacing;
+    }
+
+    &__form {
+      display: flex;
+      align-items: center;
+      @include regular-text;
+      font-weight: 600;
+    }
+  }
+</style>

client/src/router/index.js

@@ -40,9 +40,11 @@ import onboardingStart from '@/pages/onboarding/start';
 import onboardingStep1 from '@/pages/onboarding/step1';
 import onboardingStep2 from '@/pages/onboarding/step2';
 import onboardingStep3 from '@/pages/onboarding/step3';
+import settingsPage from '@/pages/moduleSettings';
 import portfolioRoutes from './portfolio.routes';
 
 import store from '@/store/index';
+import moduleVisibility from '@/pages/moduleVisibility';
 
 const ONBOARDING_STEP_1 = 'onboarding-step-1';
 const ONBOARDING_STEP_2 = 'onboarding-step-2';
@@ -240,6 +242,17 @@ const routes = [
       },
     ]
   },
+  {
+    path: '/settings',
+    component: settingsPage
+  },
+  {
+    path: '/visibility',
+    component: moduleVisibility,
+    meta: {
+      layout: 'simple'
+    }
+  },
   {path: '/styleguide', component: styleGuidePage},
   {
     path: '*',

client/src/styles/_mixins.scss

@@ -211,3 +211,32 @@
   line-height: $default-heading-line-height;
   margin-top: -0.2rem; // to offset the 1.2 line height, it leaves a padding on top
 }
+
+@mixin settings-page {
+  padding: $section-spacing;
+
+  @include desktop {
+    width: 800px;
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+  }
+
+  &__page-title {
+    @include main-title;
+    margin-bottom: $section-spacing;
+  }
+
+  &__heading {
+    @include heading-1;
+    margin-bottom: $medium-spacing;
+  }
+
+  &__paragraph {
+    @include lead-paragraph;
+  }
+
+  &__section {
+    margin-bottom: $section-spacing;
+  }
+}