clean up CSS for courseware block, re #118

controllers/api.php

@@ -86,6 +86,7 @@ class ApiController extends StudipController
                 'type'          => $exercise->type,
                 'title'         => $exercise->title,
                 'template'      => $template->render(),
+                'item_count'    => $exercise->itemCount(),
                 'show_solution' => $template->show_solution
             ];
         }
@@ -127,6 +128,7 @@ class ApiController extends StudipController
             'type'          => $exercise->type,
             'title'         => $exercise->title,
             'template'      => $template->render(),
+            'item_count'    => $exercise->itemCount(),
             'show_solution' => $template->show_solution
         ];
 

css/vips.css

@@ -104,7 +104,6 @@ button.vips_file_upload:hover {
 }
 
 .ui-tabs.ui-widget-content {
-    border: 1px solid #c5c7ca;
     border: 1px solid var(--light-gray-color-40, #c5c7ca);
     margin-top: 1.5ex;
     padding: 0;
@@ -113,7 +112,6 @@ button.vips_file_upload:hover {
 .ui-tabs .ui-tabs-nav {
     background: none;
     border: none;
-    border-bottom: 1px solid #c5c7ca;
     border-bottom: 1px solid var(--light-gray-color-40, #c5c7ca);
 }
 
@@ -123,19 +121,16 @@ button.vips_file_upload:hover {
 }
 
 .ui-tabs .ui-tabs-tab:hover {
-    border-bottom: 3px solid #b1b4b8;
     border-bottom: 3px solid var(--dark-gray-color-40, #b1b4b8);
 }
 
 .ui-tabs .ui-tabs-nav li.ui-tabs-active {
     margin-bottom: 0;
     padding-bottom: 0;
-    border-bottom: 3px solid #636971;
     border-bottom: 3px solid var(--light-gray-color-80, #636971);
 }
 
 .ui-tabs .ui-tabs-tab .ui-tabs-anchor {
-    color: #28497c;
     color: var(--base-color, #28497c);
     padding: 5px 15px;
 }
@@ -179,7 +174,6 @@ button.vips_file_upload:hover {
 }
 
 .vips_output {
-    background-color: #f5f6f6;
     background-color: var(--dark-gray-color-5, #f5f6f6);
     max-height: 30em;
     min-height: 1em;
@@ -490,9 +484,7 @@ button.vips_file_upload:hover {
 }
 
 #options-toggle + .caption {
-    background-color: #e7ebf1;
     background-color: var(--fieldset-header, #e7ebf1);
-    color: #28497c;
     color: var(--brand-color-dark, #28497c);
     cursor: pointer;
     font-weight: bold;
@@ -525,7 +517,7 @@ button.vips_file_upload:hover {
 }
 
 #character_picker .block {
-    background-color: #e6e6e6;
+    background-color: var(--fieldset-header, #e7ebf1);
     border-radius: 0.25em;
     display: inline-block;
     margin: 0.25em 0.25em;
@@ -533,7 +525,7 @@ button.vips_file_upload:hover {
 }
 
 #character_picker .block .block_title {
-    background-color: #cfcfcf;
+    background-color: var(--fieldset-border, #d0d7e3);
     border-radius: 0.25em 0 0 0.25em;
     display: inline-block;
     font-weight: bold;
@@ -541,15 +533,13 @@ button.vips_file_upload:hover {
 }
 
 #character_picker .block button {
-    cursor: pointer;
-    background-color: #e6e6e6;
     border: 0;
     border-radius: 0.25em;
+    cursor: pointer;
     padding: 0 0.25em;
 }
 
 #character_picker .block button:hover {
-    background-color: #f5f6f6;
     background-color: var(--dark-gray-color-5, #f5f6f6);
 }
 
@@ -572,16 +562,7 @@ button.vips_file_upload:hover {
 }
 
 .cw-exercise-header {
-    background-color: #e7ebf1;
-    background-color: var(--fieldset-header, #e7ebf1);
-    border: 1px solid #d0d7e3;
-    border: 1px solid var(--fieldset-border, #d0d7e3);
-    border-bottom: none;
-    color: #28497c;
-    color: var(--brand-color-dark, #28497c);
     display: flex;
-    font-weight: bold;
-    padding: 6px 0;
 }
 
 .cw-exercise-header button {
@@ -594,16 +575,13 @@ button.vips_file_upload:hover {
 
 .cw-exercise-header span {
     flex-grow: 1;
-    text-align: center;
 }
 
 .cw-exercise-fieldset header {
-    background-color: #e7ebf1;
     background-color: var(--fieldset-header, #e7ebf1);
-    color: #28497c;
     color: var(--brand-color-dark, #28497c);
     font-weight: 600;
     margin: 14px 0 8px -10px;
-    padding: 8px;
-    width: calc(100% + 4px);
+    padding: 6px 10px;
+    width: 100%;
 }

js/test-block.js

@@ -12,7 +12,7 @@ const CoursewareTestBlock = {
             @closeEdit="initCurrentData"
         >
             <template #content>
-                <div class="cw-exercise-header" v-if="assignment">
+                <div class="cw-block-title cw-exercise-header" v-if="assignment">
                     <template v-if="exercises.length > 1">
                         <button @click="prevExercise" :title="$gettext('Zurück')">
                             <studip-icon shape="arr_1left" size="20"/>
@@ -33,7 +33,7 @@ const CoursewareTestBlock = {
                         <form class="default" autocomplete="off" :exercise="exercise.id">
                             <fieldset class="cw-exercise-fieldset" v-html="exercise.template" ref="content">
                             </fieldset>
-                            <footer v-show="assignment.reset_allowed || !exercise.show_solution">
+                            <footer v-show="exercise.item_count && (assignment.reset_allowed || !exercise.show_solution)">
                                 <button
                                     v-show="!exercise.show_solution"
                                     class="button accept"
@@ -54,9 +54,8 @@ const CoursewareTestBlock = {
                 </template>
                 <component
                     :is="coursewarePluginComponents.CoursewareCompanionBox"
-                    :msgCompanion="errorMessage || $gettext('Es wurde noch kein Aufgabenblatt ausgewählt.')"
-                    mood="sad"
-                    v-if="assignment === null"
+                    :msgCompanion="errorMessage" mood="sad"
+                    v-if="errorMessage !== null"
                 />
             </template>
             <template v-if="canEdit" #edit>
@@ -90,7 +89,9 @@ const CoursewareTestBlock = {
                     </label>
                 </form>
             </template>
-            <template #info><translate>Informationen zum Testblock</translate></template>
+            <template #info>
+                <translate>Informationen zum Testblock</translate>
+            </template>
         </component>
         <studip-dialog
             v-if="showResetDialog"
@@ -127,6 +128,7 @@ const CoursewareTestBlock = {
                 parent: this.block,
                 relationship: 'container',
             });
+
             return this.$store.dispatch('updateBlockInContainer', {
                 attributes,
                 blockId: this.block.id,
@@ -160,8 +162,10 @@ const CoursewareTestBlock = {
         },
         loadSelectedAssignment() {
             if (this.assignment_id === '') {
-                return false;
+                this.errorMessage = this.$gettext('Es wurde noch kein Aufgabenblatt ausgewählt.');
+                return;
             }
+
             this.assignment = null;
             this.errorMessage = null;
             this.exercises = [];
@@ -181,9 +185,7 @@ const CoursewareTestBlock = {
         reloadExercise(exercise_id) {
             $.get(vips_url('api/exercise/' + this.assignment.id + '/' + exercise_id))
                 .done(response => {
-                    this.exercises = this.exercises.map((exercise) => {
-                        return exercise.id === exercise_id ? response : exercise;
-                    });
+                    this.$set(this.exercises, this.exercise_pos, response);
                     this.$nextTick(() => {
                         this.loadMathjax();
                         vips_post_render(this.$refs.content);
@@ -214,7 +216,6 @@ const CoursewareTestBlock = {
                 if (xhr.status === 422) {
                     info = this.$gettext('Ihre Lösung ist leer und wurde nicht gespeichert.');
                 }
-
                 this.$store.dispatch('companionError', { info: info });
             })
             .done(() => {