Show evaluation full screen

client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue

@@ -41,7 +41,7 @@ const courseSessionStore = useCourseSessionsStore();
 const router = useRouter();
 
 onMounted(async () => {
-  log.debug("AssignmentView mounted", props.assignmentId, props.learningContent);
+  log.debug("AssignmentView mounted", props.assignmentId, props.userId);
 
   if (courseSessionStore.currentCourseSession) {
     state.assignmentUser = courseSessionStore.currentCourseSession.users.find(
@@ -69,6 +69,7 @@ function exit() {
 </script>
 
 <template>
+  <div class="absolute bottom-0 top-0 z-10 w-full bg-white">
     <div v-if="state.assignment && state.completionData" class="relative">
       <header
         class="relative flex h-12 w-full items-center justify-between border-b border-b-gray-400 bg-white px-4 lg:h-16 lg:px-8"
@@ -84,8 +85,10 @@ function exit() {
         </button>
       </header>
 
-    <div class="flex">
-      <div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-white p-10">
+      <div class="h-content flex">
+        <div class="h-full w-1/2 overflow-y-auto bg-white">
+          <!-- Left part content goes here -->
+          <div class="p-10">
             <h3>Ergebnisse</h3>
             <div class="my-6 flex items-center">
               <img
@@ -103,7 +106,8 @@ function exit() {
               :allow-edit="false"
             ></AssignmentSubmissionResponses>
           </div>
-      <div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-gray-200">
+        </div>
+        <div class="w-1/2 overflow-y-auto bg-gray-200">
           <EvaluationContainer
             :assignment-completion="state.completionData"
             :assignment-user="state.assignmentUser"
@@ -112,6 +116,13 @@ function exit() {
         </div>
       </div>
     </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+$nav-height: 64px;
+
+.h-content {
+  height: calc(100vh - $nav-height);
+}
+</style>

client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue

@@ -81,14 +81,4 @@ function nextTask() {
   </div>
 </template>
 
-<style lang="scss" scoped>
-$nav-height: 86px;
-
-.h-content {
-  height: calc(100vh - $nav-height);
-}
-
-.nav {
-  height: $nav-height;
-}
-</style>
+<style lang="scss" scoped></style>

client/src/pages/learningPath/circlePage/CirclePage.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import log from "loglevel";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import CircleDiagram from "./CircleDiagram.vue";
 import CircleOverview from "./CircleOverview.vue";
 import DocumentSection from "./DocumentSection.vue";
 import LearningSequence from "./LearningSequence.vue";
 
-import { useAppStore } from "@/stores/app";
+import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { CourseSessionUser } from "@/types";
@@ -31,8 +31,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 log.debug("CirclePage created", props.readonly, props.profileUser);
 
-const appStore = useAppStore();
-appStore.showMainNavigationBar = true;
+const showUploadModal = ref(false);
+const showUploadErrorMessage = ref(false);
+const isUploading = ref(false);
 
 const circleStore = useCircleStore();
 

client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue

@@ -8,7 +8,6 @@ defineEmits(["exit"]);
 
 <template>
   <div>
-    <div class="h-full"></div>
     <div class="absolute bottom-0 top-0 w-full bg-white">
       <div class="h-content overflow-y-auto">
         <header

client/src/pages/learningPath/learningContentPage/LearningContentPage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import LearningContent from "@/pages/learningPath/learningContentPage/LearningContent.vue";
-import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";
 import type { LearningContent as LearningContentType } from "@/types";
 import * as log from "loglevel";
@@ -16,9 +15,6 @@ const props = defineProps<{
 
 const state: { learningContent?: LearningContentType } = reactive({});
 
-const appStore = useAppStore();
-appStore.showMainNavigationBar = false;
-
 const circleStore = useCircleStore();
 
 const loadLearningContent = async () => {

client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue

@@ -2,8 +2,6 @@
 import * as log from "loglevel";
 
 import SelfEvaluation from "@/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue";
-
-import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";
 import type { LearningUnit } from "@/types";
 import { onMounted, reactive } from "vue";
@@ -16,9 +14,6 @@ const props = defineProps<{
   learningUnitSlug: string;
 }>();
 
-const appStore = useAppStore();
-appStore.showMainNavigationBar = false;
-
 const circleStore = useCircleStore();
 
 const state: { learningUnit?: LearningUnit } = reactive({});

client/src/stores/app.ts

@@ -3,33 +3,12 @@ import { defineStore } from "pinia";
 export type AppState = {
   userLoaded: boolean;
   routingFinished: boolean;
-  showMainNavigationBar: boolean;
-  currentCourseSlug: string;
-};
-
-const showMainNavigationBarInitialState = () => {
-  let path = window.location.pathname;
-
-  // remove dangling slash
-  if (path.endsWith("/")) {
-    path = path.slice(0, -1);
-  }
-
-  const numberOfSlashes = (path.match(/\//g) || []).length;
-
-  // it should hide main navigation bar when on learning content page
-  if (path.startsWith("/learn/") && numberOfSlashes >= 4) {
-    return false;
-  }
-
-  return true;
 };
 
 export const useAppStore = defineStore({
   id: "app",
   state: () =>
     ({
-      showMainNavigationBar: showMainNavigationBarInitialState(),
       userLoaded: false,
       routingFinished: false,
     } as AppState),