Merge branch 'develop'

client/src/components/Chapter.vue

@@ -65,6 +65,8 @@
   .chapter {
     &__description {
       @include lead-paragraph;
+
+      margin-bottom: $large-spacing;
     }
   }
 </style>

client/src/components/ContentBlock.vue

@@ -4,8 +4,8 @@
       <div class="content-block__actions" v-if="canEditContentBlock && editModule">
         <user-widget v-bind="me" class="content-block__user-widget"></user-widget>
         <more-options-widget>
-          <li class="popover-links__link"><a @click="deleteContentBlock()">Löschen</a></li>
+          <li class="popover-links__link"><a @click="deleteContentBlock(contentBlock)">Löschen</a></li>
-          <li class="popover-links__link"><a @click="editContentBlock()">Bearbeiten</a></li>
+          <li class="popover-links__link"><a @click="editContentBlock(contentBlock)">Bearbeiten</a></li>
         </more-options-widget>
       </div>
       <div class="content-block__visibility" v-if="editModule">
@@ -181,16 +181,17 @@
     },
 
     methods: {
-      editContentBlock() {
+      editContentBlock(contentBlock) {
-        this.$store.dispatch('editContentBlock', this.contentBlock.id);
+        this.$store.dispatch('editContentBlock', contentBlock.id);
       },
-      deleteContentBlock(id) {
+      deleteContentBlock(contentBlock) {
         const parent = this.parent;
+        const id = contentBlock.id;
         this.$apollo.mutate({
           mutation: DELETE_CONTENT_BLOCK_MUTATION,
           variables: {
             input: {
-              id: id
+              id
             }
           },
           update(store, {data: {deleteContentBlock: {success}}}) {

client/src/components/content-blocks/GeniallyBlock.vue

@@ -37,9 +37,12 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
   // Styling and structure taken from original iframe
   .genially-block {
     width: 100%;
+    margin-bottom: $large-spacing;
 
     &__wrapper {
       position: relative;

client/src/components/content-blocks/SectionTitleBlock.vue

@@ -9,7 +9,10 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
   .section-title {
     margin-bottom: 30px;
+    line-height: $default-heading-line-height;
   }
 </style>

client/src/components/content-blocks/SubtitleBlock.vue

@@ -13,5 +13,6 @@
   .subtitle {
     padding-top: 1px;
     margin-bottom: $large-spacing;
+    line-height: $default-heading-line-height;
   }
 </style>

client/src/components/modules/Module.vue

@@ -157,11 +157,7 @@
     }
 
     &__meta-title {
-      color: $color-silver-dark;
+      @include meta-title;
-      font-size: 2.25rem;
-      font-weight: 300;
-      font-family: $serif-font-family;
-      line-height: 3.25rem;
     }
 
     &__intro {

client/src/pages/instrument.vue

@@ -67,6 +67,7 @@
     &__title {
       font-size: toRem(35px);
       margin-bottom: 40px;
+      line-height: $default-heading-line-height;
     }
 
     & /deep/ {

client/src/pages/survey.vue

@@ -128,9 +128,10 @@
     grid-row-gap: $large-spacing;
     justify-self: center;
     padding: 100px 0;
+    width: 100%;
 
     &__title {
-      @include heading-2;
+      @include meta-title;
       margin: 0;
     }
   }

client/src/styles/_forms.scss

@@ -20,6 +20,19 @@ $icon-size: 20px;
 
 }
 
+.skillbox-dropdown {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-indent: 1px;
+  text-overflow: '';
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2317A887" d="M50,74.07,6.86,30.93A2.93,2.93,0,0,1,11,26.79l39,39,39-39a2.93,2.93,0,1,1,4.15,4.15Z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: 97% center;
+  background-size: 24px 24px;
+  position: relative;
+}
+
 .skillbox-textarea {
   @include inputstyle;
   height: 120px;

client/src/styles/_mixins.scss

@@ -118,8 +118,11 @@
 }
 
 @mixin meta-title {
-  font-family: $serif-font-family;
+  color: $color-silver-dark;
   font-size: toRem(36px);
+  font-weight: 300;
+  font-family: $serif-font-family;
+  line-height: $default-heading-line-height;
 }
 
 @mixin lead-paragraph {

client/src/styles/_survey.scss

@@ -24,6 +24,8 @@
     margin-bottom: $medium-spacing;
     > span > span { // weird survey.js html structure
       @include heading-4;
+      line-height: $default-line-height;
+
     }
   }
 
@@ -54,9 +56,9 @@
     order: 2;
   }
 
-  $progress-margin-right: 120px;
+  $progress-margin-right: 140px;
   &__progress {
-    background-color: $color-silver;
+    background-color: $color-silver-light;
     height: 0.3em;
     order: 3;
     width: 40%;
@@ -65,7 +67,6 @@
     margin-right: $progress-margin-right;
     box-sizing: border-box;
     display: flex;
-    align-content: center;
   }
 
   &__radiogroup-group, &__checkbox-group {
@@ -81,7 +82,7 @@
     > span {
       position: absolute;
       right: -$progress-margin-right;
-      top: -0.25em;
+      top: -0.37em;
       @include regular-text;
     }
 
@@ -97,6 +98,10 @@
       @include small-text;
     }
   }
+
+  &__completed-text {
+    @include regular-text;
+  }
 }
 
 .question {

client/src/styles/_variables.scss

@@ -77,6 +77,7 @@ $font-weight-semibold: 600;
 $font-weight-regular: 400;
 
 $default-line-height: 1.5;
+$default-heading-line-height: 1.2;
 
 // popover
 $popover-default-bottom: -110px;

client/src/survey.config.js

@@ -66,7 +66,7 @@ export const css = {
   'comment': 'survey__input skillbox-input question__input',
   'dropdown': {
     'root': '',
-    'control': 'survey__input skillbox-input',
+    'control': 'survey__input skillbox-input skillbox-dropdown',
     'other': 'sv_q_dd_other skillbox-input'
   },
   'html': {

server/core/templates/registration/password_reset_complete.html

@@ -4,7 +4,7 @@
 {% block title %}{% trans 'Passwort zurücksetzen abgeschlossen' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
     <h2 class="reset-heading">{% trans 'Passwort zurücksetzen abgeschlossen' %}</h2>
     <p>{% trans 'Ihr Passwort wurde zurückgesetzt. Sie können sich nun auf der Loginseite anmelden.' %}</p>
     <p><a href="{% url "login" %}">{% trans 'Einloggen' %}</a></p>

server/core/templates/registration/password_reset_confirm.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans 'Setzen Sie Ihr Passwort' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
   <h2 class="reset-heading">{% trans 'Setzen Sie Ihr neues Passwort' %}</h2>
 
         <form method="post" class="mt-1">

server/core/templates/registration/password_reset_done.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans 'Anweisungen versandt' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
     <h2 class="reset-heading">{% trans 'Schauen Sie in Ihr Postfach' %}</h2>
     <p>{% trans 'Wir haben die Anweisungen, um Ihr Passwort zurückzusetzen, an Sie verschickt. Die E-Mail sollte in Kürze bei Ihnen ankommen.' %}</p>
 </div>

server/core/templates/registration/password_reset_form.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans 'Passwort vergessen?' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
     <h2 class="reset-heading">{% trans 'Passwort vergessen?' %}</h2>
     <p>{% trans 'Kein Problem! Geben Sie Ihre E-Mail-Adresse ein und erhalten Sie weitere Anweisungen.' %}</p>
 

server/core/templates/registration/set_password_complete.html

@@ -4,7 +4,7 @@
 {% block title %}{% trans 'Sie haben es geschafft' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
     <h2 class="reset-heading">{% trans 'Sie haben es geschafft' %}</h2>
     <p>{% trans 'Ihr Passwort wurde erfolgreich gespeichert. Sie können sich nun anmelden.' %}</p>
     <p><a href="{% url "login" %}">{% trans 'Jetzt anmelden' %}</a></p>

server/core/templates/registration/set_password_confirm.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans 'Setzen Sie Ihr Passwort' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
   <h2 class="reset-heading">{% trans 'Geben Sie ein persönliches Passwort ein:' %}</h2>
 
         <form method="post" class="mt-1">

server/core/templates/registration/set_password_done.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans 'Schauen Sie in Ihr Postfach' %}{% endblock %}
 
 {% block body %}
-    <h1 class="logo">skillbox</h1>
+    <h1 class="logo">myskillbox</h1>
     <h2 class="reset-heading">{% trans 'Schauen Sie in Ihr Postfach' %}</h2>
     <p>{% trans 'Wir haben ein E-Mail mit allen weiteren Anweisungen an Sie verschickt. Die E-Mail sollte in Kürze bei Ihnen ankommen.' %}</p>
     <p>{% trans 'Hinweis: Ihre persönlichen Angaben für Ihr Benutzerkonto wurden zuvor in mySkillbox importiert. Sie können ausschliesslich die importierte E-Mail-Adresse verwenden. Wenn Sie nicht wissen, welche E-Mail-Adresse für Sie importiert wurde, können Sie Ihre Lehrperson fragen.' %}</p>

server/core/templates/registration/set_password_form.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans 'Willkommen bei mySkillbox' %}{% endblock %}
 
 {% block body %}
-  <h1 class="logo">skillbox</h1>
+  <h1 class="logo">myskillbox</h1>
     <h2 class="reset-heading">{% trans 'Willkommen bei Myskillbox' %}</h2>
     <p>{% trans 'Bevor Sie mySkillbox verwenden können, müssen Sie Ihre E-Mail-Adresse bestätigen und ein persönliches Passwort festlegen.' %}</p>