Merge pull request #303 from matematikk-mooc/stage

Stage

dev.Dockerfile

@@ -44,7 +44,7 @@ RUN docker-php-ext-install zip gd mysqli pdo pdo_mysql
 WORKDIR /var/www/html
 
 # Set dev env variables
-ENV CANVAS_HOST=http://localhost
+ENV CANVAS_HOST=https://*.instructure.com
 
 # Add application
 COPY --from=nodeBuild --chown=www-data /var/www/html /var/www/html

resources/js/components/Box.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="['box', `box--${type}`]">
+    <div class="box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Box',
+  props: {
+    type: {
+      type: String,
+      default: 'grey',
+      validator: (value) => ['grey', 'green', 'red'].includes(value),
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  &--grey {
+    background-color: #E3F2EB;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  &--green {
+    background-color: #E3F2EB;
+  }
+
+  &--red {
+    background-color: #ffebee;
+  }
+
+  .box-content {
+    width: 100%;
+    max-width: 960px; // Adjust the maximum width according to your design
+    padding: 1.25rem; // Adjust the padding according to your design
+  }
+}
+</style>

resources/js/components/CourseSettingsCategoryCreate.vue

@@ -6,15 +6,19 @@
     <p>Kategoritema: <input type="text" v-model="category_color"/> (Kategoritema theme_*number* må finnes som tema i frontend)</p>
 
     <button @click="createCategory">Opprett kategori</button>
-    <div v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</div>
-    <div v-if="error" class='alert alert-danger kpasAlert'>{{ error }}</div>
+    <Message type="success" v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</Message>
+    <Message type="error" v-if="error" class='alert alert-danger kpasAlert'>{{ error }}</Message>
 </template>
 
 <script>
 import api from '../api';
+import Message from './Message.vue';
 
 export default{
     name: "CourseSettingsCategoryCreate",
+    components: {
+      Message
+    },
     data() {
         return {
             category_name: '',

resources/js/components/CourseSettingsFilterCreate.vue

@@ -11,17 +11,21 @@
         ></v-select>
     </section>
     <button @click="createFilter">Opprett filter</button>
-    <div v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</div>
-    <div v-if="error" class='alert alert-danger kpasAlert'>{{ error }}</div>
+    <Message type="success" v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</Message>
+    <Message type="error" v-if="error">{{ error }}</Message>
 
 
 </template>
 
 <script>
 import api from '../api';
+import Message from './Message.vue';
 
 export default{
     name: "CourseSettingsFilterCreate",
+    components: {
+      Message
+    },
     props: {
         filterTypes: []
     },

resources/js/components/DashboardGroupSelect.vue

@@ -109,18 +109,21 @@
 			</v-select>
 		</label>
 	</section>
-
-	<div v-if="isError" class='alert alert-danger kpasAlert'> {{error}} </div>
+<Message type="error" v-if="isError">{{error}}</Message>
 
 </template>
 
 <script>
 import api from '../api';
 import 'floating-vue/dist/style.css';
 import "vue-select/dist/vue-select.css";
+import Message from './Message.vue';
 
 export default {
 	name: "DashboardGroupSelect",
+	components: {
+      Message
+    },
 	props: {
 		settings: Object,
 		categories: Array,

resources/js/components/FacultySelector.vue

@@ -1,31 +1,41 @@
 <template>
-  <div v-bind:style=" chosenFaculty || !faculties.length ? 'border: none;' : 'padding: 10px; border: 1px solid red;' ">
-    <div
+  <div class="faculty-selector" v-bind:style=" chosenFaculty || !faculties.length ? 'border: none;' : 'padding: 10px; border: 1px solid red;' ">
+    <div class="faculty-item"
       v-for="faculty in faculties"
       :key="faculty"
     >
+    <Message type="default">
       <label>
         <input
           name="faculty"
           type="radio"
           :value="faculty"
 
           v-model="chosenFaculty"
-          @input="this.$emit('update:modelValue', faculty)" 
+          @input="this.$emit('update:modelValue', faculty)"
         />
         {{ faculty }}
       </label>
+    </Message>
     </div>
   </div>
 </template>
 
 <script>
+import Message from './Message.vue';
   export default {
     name: "FacultySelector",
-
+    components: {
+      Message
+    },
     props: {
       faculties: { type: Array, default: () => [] },
-      modelValue: String
+      modelValue: String,
+      currentFaculty: String
+    },
+    created() {
+      console.log("current Faculty: ", this.currentFaculty);
+      this.chosenFaculty = this.faculties.find(faculty => faculty === this.currentFaculty);
     },
 
     data() {
@@ -41,3 +51,35 @@
     }
   }
 </script>
+
+<style scoped>
+  .message {
+    padding: 0;
+    margin: 5px;
+    width: 100%;
+  }
+  label {
+    margin: 0;
+    display: inline-block;
+    width: 100%;
+  }
+  .faculty-selector {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  .faculty-item {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 5px;
+  }
+  @media only screen and (max-width: 900px) {
+    .faculty-item {
+      width: 100%;
+    }
+    .faculty-selector {
+      flex-direction: column;
+    }
+  }
+
+</style>