From 19742f40e17b3b582a0e5e619b6b4ded4296de86 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 28 Apr 2021 00:44:31 +0200
Subject: [PATCH] Clean up some client code

---
 .../components/AssignmentWithSubmissions.vue  |  3 +-
 client/src/components/StudentSubmission.vue   |  4 +-
 client/src/graphql/gql/moduleDetailsQuery.gql |  2 +-
 client/src/pages/instrumentOverview.vue       | 15 ++-----
 client/src/pages/me/myTeam.vue                |  2 +-
 client/src/pages/module/module-base.vue       |  4 +-
 client/src/styles/_buttons.scss               | 13 +-----
 client/src/styles/_mixins.scss                | 41 +++++++++++++++++++
 client/src/styles/_student-submission.scss    |  4 +-
 9 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index 9198ddf0..821b1776 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -90,8 +90,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+  @import "~styles/helpers";
 
   .assignment-with-submissions {
     &__title {
diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
index c33cc7ab..0a6dd5d5 100644
--- a/client/src/components/StudentSubmission.vue
+++ b/client/src/components/StudentSubmission.vue
@@ -57,10 +57,10 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+  @import "~styles/helpers";
 
   .student-submission {
+    @include table-row;
 
     &__student-name {
       font-size: toRem(17px);
diff --git a/client/src/graphql/gql/moduleDetailsQuery.gql b/client/src/graphql/gql/moduleDetailsQuery.gql
index 03369007..3d98c96c 100644
--- a/client/src/graphql/gql/moduleDetailsQuery.gql
+++ b/client/src/graphql/gql/moduleDetailsQuery.gql
@@ -3,7 +3,7 @@
 #import "./fragments/objectiveGroupParts.gql"
 #import "./fragments/objectiveParts.gql"
 #import "./fragments/moduleParts.gql"
-query ModulesQuery($slug: String!) {
+query ModuleDetailsQuery($slug: String!) {
   module(slug: $slug) {
     ...ModuleParts
     assignments {
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 07717759..a1a68b47 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -61,16 +61,12 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .instrument-overview {
     display: grid;
     grid-template-rows: auto auto 1fr;
-    justify-items: center;
-    justify-self: center;
-    width: 800px;
-    max-width: 100%;
+    @include centered(800px);
 
     &__heading {
       padding: 2*$large-spacing 0;
@@ -99,12 +95,9 @@
 
     &__list-item {
       padding: $medium-spacing 0;
-      border-top: 1px solid $color-silver;
-      @include regular-text;
 
-      &:last-of-type {
-        border-bottom: 1px solid $color-silver;
-      }
+      @include regular-text;
+      @include table-row($color-silver);
     }
   }
 </style>
diff --git a/client/src/pages/me/myTeam.vue b/client/src/pages/me/myTeam.vue
index c883884b..95725ecb 100644
--- a/client/src/pages/me/myTeam.vue
+++ b/client/src/pages/me/myTeam.vue
@@ -12,7 +12,7 @@
       />
     </template>
     <template v-else>
-      <h1 class="my-team__heading">Mein Team {{ me.team }}</h1>
+      <h1 class="my-team__heading">Mein Team</h1>
       <div class="my-team__section">
         <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
         <router-link
diff --git a/client/src/pages/module/module-base.vue b/client/src/pages/module/module-base.vue
index fd5a4933..a310e5b5 100644
--- a/client/src/pages/module/module-base.vue
+++ b/client/src/pages/module/module-base.vue
@@ -28,7 +28,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .module-page {
     display: flex;
@@ -37,6 +37,8 @@
     }
     justify-items: center;
 
+    grid-auto-rows: max-content;
+
     @include desktop {
       grid-template-columns: 1fr;
     }
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index 3245ecab..09d43154 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -1,27 +1,18 @@
 .button {
   background: transparent;
-  border: 2px solid $color-silver-dark;
   padding: 5px 15px;
-  border-radius: 3px;
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   display: inline-flex;
   cursor: pointer;
+
   @include small-text;
-
-  &--active {
-    border-color: $color-brand;
-  }
-
-  &--primary {
-    border-color: $color-brand;
-  }
+  @include button-border;
 
   &--white-bg {
     background-color: $color-white;
   }
   &--disabled {
-    border: 2px solid $color-silver-light;
     background-color: $color-silver-light;
   }
   &--big {
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index bf627f81..6cb79683 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -145,6 +145,12 @@
   font-weight: 600;
 }
 
+@mixin large-link {
+  font-family: $sans-serif-font-family;
+  font-size: toRem(18px);
+  font-weight: 400;
+}
+
 @mixin meta-title {
   color: $color-silver-dark;
   font-size: toRem(36px);
@@ -240,3 +246,38 @@
     margin-bottom: $section-spacing;
   }
 }
+
+
+@mixin button-border {
+  border: 2px solid $color-silver-dark;
+  border-radius: 3px;
+
+  &--active {
+    border-color: $color-brand;
+  }
+
+  &--primary {
+    border-color: $color-brand;
+  }
+
+  &--disabled {
+    border-color: $color-silver-light;
+  }
+}
+
+
+@mixin centered($width: 800px) {
+  width: $width;
+  max-width: 100%;
+  justify-self: center;
+}
+
+@mixin table-row($color: $color-silver-dark) {
+  border-top: 1px solid $color;
+  padding: 15px 0;
+  width: 100%;
+
+  &:last-of-type {
+    border-bottom: 1px solid $color;
+  }
+}
diff --git a/client/src/styles/_student-submission.scss b/client/src/styles/_student-submission.scss
index c7b2f713..a4edc392 100644
--- a/client/src/styles/_student-submission.scss
+++ b/client/src/styles/_student-submission.scss
@@ -1,5 +1,4 @@
-@import "@/styles/_variables.scss";
-@import "@/styles/_mixins.scss";
+@import "~styles/helpers";
 
 .student-submission-row {
   display: grid;
@@ -12,6 +11,5 @@
   }
 
   align-items: center;
-  border-bottom: 1px solid $color-silver-dark;
   padding: 15px 0;
 }