create project styling

SELab-2 · May 21, 2024 · 2b4dbb5 · 2b4dbb5
1 parent bc881f2
commit 2b4dbb5
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 28 deletions.
diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -22,6 +22,7 @@
                 {{ $d(project.deadline, "long") }}
             </v-card-text>
             <v-card-text>
+                <!--<h2 v-if="project.capacity > 1  && isInGroup " class="group"> {{ $t("project.group", { number: 1}) }}</h2> -->
                 <h2>{{ $t("subject.project.assignment") }}</h2>
                 <div
                     v-if="project.description && project.description.length <= assignmentLength"
@@ -66,8 +67,9 @@
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
-import { ref } from "vue";
+import {computed, ref} from "vue";
 import { Quill } from "@vueup/vue-quill";
+import {getUserGroups} from "@/services/group";
 
 defineProps<{
     selectedTab: number;
@@ -82,6 +84,23 @@ const renderQuillContent = (content: string) => {
     quill.root.innerHTML = content;
     return quill.root.innerHTML;
 };
+
+/*const { data: groups, isLoading, isError} = getUserGroups()
+
+const projectGroup = ref()
+
+const isInGroup = computed(() => {
+    if (!groups.value) return false;
+    return groups.value.some((groupelem) => {
+        if(groupelem.project_id === project.id){
+            projectGroup.value = groupelem;
+            return true;
+        }
+        return false;
+    });
+});
+*/
+
 </script>
 
 <style scoped>
@@ -148,4 +167,8 @@ const renderQuillContent = (content: string) => {
 .title-col::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
+
+.group {
+    margin-bottom: 25px;
+}
 </style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
@@ -27,7 +27,7 @@ export default {
         logout: "Logout",
     },
     submit: {
-        submit_title: "Submit solution",
+        submit_title: "Submit title",
         submit_button: "Submit",
         remarks: "Remarks",
         files: "Files",

diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
@@ -26,7 +26,7 @@ export default {
         logout: "Uitloggen",
     },
     submit: {
-        submit_title: "Oplossing indienen",
+        submit_title: "Kies een titel",
         submit_button: "Indienen",
         remarks: "Opmerkingen",
         files: "Bestanden",

diff --git a/frontend/src/views/CreateProjectView.vue b/frontend/src/views/CreateProjectView.vue
@@ -8,18 +8,14 @@
             {{ $t("project.not_found") }}
         </h1>
         <div v-else class="projectInfo">
-            <v-row>
+            <v-row class="createproject">
                 <v-col cols="12" md="6">
                     <v-text-field
                         v-model="project_title"
                         :label="$t('project.assignment')"
                         required
                         :placeholder="$t('submit.submit_title')"
                     />
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col cols="12" md="6">
                     <v-select
                         v-if="!isEditMode"
                         v-model="selectedSubject"
@@ -30,6 +26,17 @@
                         required
                         :placeholder="$t('submit.submit_title')"
                     />
+                    <DatePicker
+                        :modelValue="deadlineModel"
+                        @update:modelValue="updateDeadline"
+                        :label="$t('project.deadline')"
+                    />
+                    <DatePicker
+                        :modelValue="publishDateModel"
+                        @update:modelValue="updatePublishDate"
+                        :label="$t('project.publish_date')"
+                        required
+                    />
                 </v-col>
                 <v-col cols="12" md="6">
                     <v-alert v-if="!isEditMode" dense text class="custom-alert">
@@ -45,21 +52,7 @@
                         @update:capacity="handleCapacityChange"
                         @update:selected-option="handleOptionChange"
                         required
-                    />
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col cols="12" md="6">
-                    <DatePicker
-                        :modelValue="deadlineModel"
-                        @update:modelValue="updateDeadline"
-                        :label="$t('project.deadline')"
-                    />
-                    <DatePicker
-                        :modelValue="publishDateModel"
-                        @update:modelValue="updatePublishDate"
-                        :label="$t('project.publish_date')"
-                        required
+                        class="radiolist"
                     />
                 </v-col>
             </v-row>
@@ -112,11 +105,7 @@
                     />
                 </v-col>
             </v-row>
-            <v-row>
-                <v-col cols="12" class="text-right">
-                    <v-btn @click="submitForm">{{ $t("submit.submit_button") }}</v-btn>
-                </v-col>
-            </v-row>
+            <v-btn color="primary" @click="submitForm">{{ $t("submit.submit_button") }}</v-btn>
             <v-alert v-model="showErrorAlert" type="error" dense dismissible :value="true">
                 {{ errorMessage }}
             </v-alert>
@@ -475,4 +464,13 @@ function divideStudentsIntoGroups(students: User[], capacity: number) {
 .alert-bottom-margin {
     margin-bottom: 15px;
 }
+
+.createproject {
+    border-radius: 3px;
+    margin-top: 25px;
+}
+
+.radiolist {
+    padding: 5px;
+}
 </style>