From 773d384678349e16ccc41c888a30b10736860816 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Mon, 25 Nov 2024 09:40:02 +0000
Subject: [PATCH] Polishing: Courseware Layout
Closes #4853
Merge request studip/studip!3672
---
.../assets/stylesheets/mixins/colors.scss | 7 ++++
.../scss/courseware/blockadder.scss | 8 ++---
.../scss/courseware/blocks/default-block.scss | 12 +++----
.../containers/default-container.scss | 5 +--
.../scss/courseware/containers/tabs.scss | 2 +-
.../scss/courseware/layouts/collapsible.scss | 4 +--
.../scss/courseware/layouts/radioset.scss | 6 ++--
.../scss/courseware/layouts/ribbon.scss | 2 +-
.../scss/courseware/layouts/tabs.scss | 8 ++---
.../scss/courseware/layouts/tree.scss | 1 +
.../scss/courseware/structural-element.scss | 2 +-
.../stylesheets/scss/courseware/toolbar.scss | 2 +-
.../assets/stylesheets/scss/variables.scss | 7 ++++
resources/assets/stylesheets/scss/wizard.scss | 9 ++---
.../tasks/CoursewareDashboardStudents.vue | 8 +++--
.../courseware/tasks/PagesTaskGroupsShow.vue | 36 +++++++++++++++----
.../components/courseware/tasks/TaskGroup.vue | 28 +--------------
17 files changed, 82 insertions(+), 65 deletions(-)
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index d0f54bb3223..7471e33c8b6 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -265,6 +265,7 @@ $color--tile-border-focus: $color--gray-4;
$color--tile-border-hover: $color--gray-4;
$color--tile-border: $color--gray-5;
$color--tile-background: $color--gray-7;
+$color--tile-background-active: $color--gray-6;
$color--tile-background-focus: $color--gray-6;
$color--tile-background-hover: $color--gray-6;
$color--tile-marker-inactive: $color--gray-4;
@@ -291,6 +292,10 @@ $color--button-hover: $color--blue-1;
$color--button-inactive-background: $color--gray-7;
$color--button-inactive-border: $color--gray-5;
+$color--radiobuttonset-background: $color--white;
+$color--radiobuttonset-background-selected: $color--gray-6;
+$color--radiobuttonset-border: $color--gray-6;
+
$color--input-field-border: $color--gray-5;
$color--input-field-background: $color--white;
@@ -308,3 +313,5 @@ $color--good: $color--green-1;
$color--good-alternative: mix($color--good, $color--white, 20%);
$color--info: $color--blue-2;
$color--info-alternative: mix($color--info, $color--white, 20%);
+
+$color-image-placeholder-background: $color--gray-6;
diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss
index a2d5bba9835..f393641ac3a 100644
--- a/resources/assets/stylesheets/scss/courseware/blockadder.scss
+++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss
@@ -8,7 +8,7 @@
.cw-blockadder-item-wrapper {
display: flex;
position: relative;
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--tile-border);
background-color: var(--white);
max-width: 268px;
@@ -68,7 +68,7 @@
.cw-containeradder-item-wrapper {
position: relative;
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--tile-border);
margin-bottom: 4px;
.cw-sortable-handle {
opacity: 0;
@@ -117,7 +117,7 @@
margin-bottom: 8px;
label {
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--tile-border);
padding: calc(0.5em + 32px) 1em 0.5em 1em;
color: var(--base-color);
text-align: center;
@@ -170,7 +170,7 @@
.cw-clipboard-item-wrapper {
background-color: var(--white);
display: flex;
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--tile-border);
max-width: 248px;
position: relative;
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
index 2a0e6d36794..e5a99996b26 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
@@ -11,7 +11,7 @@
}
.cw-block-header {
- background-color: var(--content-color-20);
+ background-color: var(--color--content-box-header);
padding: 4px 10px 4px 22px;
.cw-block-header-toggle {
@@ -49,7 +49,7 @@
.cw-discuss-wrapper,
.cw-block-features {
header{
- background-color: var(--content-color-20);
+ background-color: var(--color--content-box-header);
color: var(--base-color);
font-weight: 600;
padding: 0.5em;
@@ -83,7 +83,7 @@
}
}
.cw-content-wrapper-active {
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
.cw-block-content {
padding: $cw-wrapper-gap;
}
@@ -91,17 +91,17 @@
.cw-block-title {
padding: 4px;
- background-color: var(--content-color-20);
+ background-color: var(--color--content-box-header);
color: var(--base-color);
font-weight: 700;
text-align: center;
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
border-bottom: none;
}
.cw-file-empty {
@include background-icon(file, info, 96px);
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
background-position: center 1em;
background-repeat: no-repeat;
min-height: 140px;
diff --git a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
index 5f73f4c757b..8821935d0ed 100644
--- a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
+++ b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
@@ -18,7 +18,7 @@
}
.cw-container-header {
- background-color: var(--content-color-20);
+ background-color: var(--color--content-box-header);
padding: 4px 10px 4px 22px;
.cw-container-header-toggle {
@@ -64,7 +64,7 @@
}
}
.cw-container-content {
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
}
}
@@ -102,5 +102,6 @@ form.cw-container-dialog-edit-form {
fieldset {
max-width: 200px;
+ padding-top: 10px;
}
}
diff --git a/resources/assets/stylesheets/scss/courseware/containers/tabs.scss b/resources/assets/stylesheets/scss/courseware/containers/tabs.scss
index 0485266d88c..5ff8789256d 100644
--- a/resources/assets/stylesheets/scss/courseware/containers/tabs.scss
+++ b/resources/assets/stylesheets/scss/courseware/containers/tabs.scss
@@ -18,7 +18,7 @@
}
.cw-tabs-content {
- padding: 8px 0 0 0;
+ padding: 8px;
.cw-companion-box {
border: none;
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
index 39b6514dc04..e1acb44731f 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss
@@ -1,14 +1,14 @@
@use '../../../mixins.scss' as *;
.cw-collapsible {
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
margin-bottom: -1px;
.cw-collapsible-title {
@include background-icon(arr_1right);
background-position: 6px center;
background-repeat: no-repeat;
- background-color: var(--content-color-20);
+ background-color: var(--color--content-box-header);
padding: 0.5em 2em;
margin: 0;
font-weight: 600;
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss b/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss
index 0be379b606f..9569da428fd 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss
@@ -10,7 +10,7 @@ $radio-icons: (
groups: group2
);
-.cw-radioset {
+form.default .cw-radioset {
display: flex;
flex-direction: row;
justify-content: center;
@@ -21,7 +21,7 @@ $radio-icons: (
height: 128px;
text-align: center;
margin-right: 8px;
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--tile-border);
label {
height: 100%;
width: 100%;
@@ -69,7 +69,7 @@ $radio-icons: (
&.selected {
border-color: var(--base-color);
- background-color: var(--content-color-20);
+ background-color: var(--color--tile-background-active);
label {
@include background-icon(check-circle);
.label-icon {
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
index 6d30b4edbd5..3d22c9e2fb0 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
@@ -290,7 +290,7 @@ $consum_ribbon_width: calc(100% - 58px);
max-width: unset;
flex-grow: 0.5;
&::after {
- margin-top: 20px;
+ margin-top: 16px;
}
}
}
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss
index 0f653eb3dc8..2db91ce1e2d 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss
@@ -7,7 +7,7 @@
list-style: none;
padding: 0;
margin: 0;
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
border-bottom: none;
button {
@@ -23,8 +23,8 @@
&::after {
display: block;
- margin-top: 4px;
- margin-bottom: -12px;
+ margin-top: 8px;
+ margin-bottom: -4px;
margin-left: -14px;
width: calc(100% + 28px);
content: '';
@@ -96,7 +96,7 @@
}
.cw-tabs-content {
- border: solid thin var(--content-color-40);
+ border: solid thin var(--color--content-box-border);
padding: 4px;
}
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
index 1ff0312afeb..4708e3a9a32 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
@@ -28,6 +28,7 @@
> .cw-sortable-handle {
margin-bottom: 2px;
+ margin-right: -4px;
}
> a.cw-tree-item-link {
diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss
index 565f0da3a53..b17bb99f349 100644
--- a/resources/assets/stylesheets/scss/courseware/structural-element.scss
+++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss
@@ -164,7 +164,7 @@
width: 300px;
height: 200px;
margin: 0 auto;
- background-color: var(--content-color-20);
+ background-color: var(--color-image-placeholder-background);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index a0f04e50e15..23bb42a3c97 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -149,7 +149,7 @@
}
&.active {
- border-bottom: solid 2px var(--base-color);
+ border-bottom: solid 3px var(--dark-gray-color-75);
}
}
.cw-toolbar-spacer-right {
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index d1564fef5e9..d0a174f17b2 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -246,6 +246,7 @@ $grid-gap: 0;
--color--tile-border-hover: #{$color--tile-border-hover};
--color--tile-border: #{$color--tile-border};
--color--tile-background: #{$color--tile-background};
+ --color--tile-background-active: #{$color--tile-background-active};
--color--tile-background-focus: #{$color--tile-background-focus};
--color--tile-background-hover: #{$color--tile-background-hover};
--color--tile-marker-inactive: #{$color--tile-marker-inactive};
@@ -272,6 +273,10 @@ $grid-gap: 0;
--color--button-inactive-background: #{$color--button-inactive-background};
--color--button-inactive-border: #{$color--button-inactive-border};
+ --color--radiobuttonset-background: #{$color--radiobuttonset-background};
+ --color--radiobuttonset-background-selected: #{$color--radiobuttonset-background-selected};
+ --color--radiobuttonset-border: #{$color--radiobuttonset-border};
+
--color--input-field-border: #{$color--input-field-border};
--color--input-field-background: #{$color--input-field-background};
@@ -290,6 +295,8 @@ $grid-gap: 0;
--color--info: #{$color--info};
--color--info-alternative: #{$color--info-alternative};
+ --color-image-placeholder-background: #{$color-image-placeholder-background};
+
@media (prefers-reduced-motion) {
#{"--"}transition-duration: 0s;
#{"--"}transition-duration-slow: 0s;
diff --git a/resources/assets/stylesheets/scss/wizard.scss b/resources/assets/stylesheets/scss/wizard.scss
index 6fc54b331ef..6c5f81e8141 100644
--- a/resources/assets/stylesheets/scss/wizard.scss
+++ b/resources/assets/stylesheets/scss/wizard.scss
@@ -174,7 +174,8 @@ form.default fieldset.radiobutton-set {
>label {
cursor: pointer;
- border: 1px solid var(--content-color-40);
+ border: 1px solid var(--color--radiobuttonset-border);
+ background-color: var(--color--radiobuttonset-background);
transition: background-color 200ms;
display: flex;
justify-content: space-between;
@@ -202,7 +203,7 @@ form.default fieldset.radiobutton-set {
}
>label:first-of-type {
- border-top: 1px solid var(--content-color-40);
+ border-top: 1px solid var(--color--radiobuttonset-border);
}
>label:last-child::after {
@@ -210,7 +211,7 @@ form.default fieldset.radiobutton-set {
}
>div {
- border: 1px solid var(--content-color-40);
+ border: 1px solid var(--color--radiobuttonset-border);
border-top: none;
display: none;
padding: 10px;
@@ -218,7 +219,7 @@ form.default fieldset.radiobutton-set {
}
>input[type=radio]:checked+label {
- background-color: var(--content-color-20);
+ background-color: var(--color--radiobuttonset-background-selected);
transition: background-color 200ms;
>.unchecked {
diff --git a/resources/vue/components/courseware/tasks/CoursewareDashboardStudents.vue b/resources/vue/components/courseware/tasks/CoursewareDashboardStudents.vue
index 2b86c713769..889b64d3f4f 100644
--- a/resources/vue/components/courseware/tasks/CoursewareDashboardStudents.vue
+++ b/resources/vue/components/courseware/tasks/CoursewareDashboardStudents.vue
@@ -7,9 +7,11 @@
</router-link>
</template>
<template #breadcrumb-list>
- <li>
- {{ $gettext('Aufgaben') }}
- </li>
+ <ul>
+ <li>
+ {{ $gettext('Aufgaben') }}
+ </li>
+ </ul>
</template>
</ContentBar>
<table class="default" v-if="taskGroups.length">
diff --git a/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue b/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue
index b0530c45da3..cacd3abf10b 100644
--- a/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue
+++ b/resources/vue/components/courseware/tasks/PagesTaskGroupsShow.vue
@@ -12,13 +12,22 @@
</router-link>
</template>
<template #breadcrumb-list>
- <li>
- <router-link :to="{ name: 'task-groups-index' }">
- {{ $gettext('Aufgaben') }}
- </router-link>
- </li>
- <li>{{ taskGroup.attributes['title'] }}</li>
+ <ul>
+ <li>
+ <router-link :to="{ name: 'task-groups-index' }">
+ {{ $gettext('Aufgaben') }}
+ </router-link>
+ </li>
+ <li>{{ taskGroup.attributes['title'] }}</li>
+ </ul>
</template>
+ <template #info-text>
+ <span>{{ statusMessage }}</span>
+ <span>
+ {{ $gettext('Bearbeitungszeit') }}
+ <StudipDate :date="startDate" /> - <StudipDate :date="endDate" />
+ </span>
+ </template>
</ContentBar>
<TaskGroup
@@ -76,6 +85,8 @@ import TaskGroupsAddSolversDialog from './TaskGroupsAddSolversDialog.vue';
import TaskGroupsDeleteDialog from './TaskGroupsDeleteDialog.vue';
import TaskGroupsModifyDeadlineDialog from './TaskGroupsModifyDeadlineDialog.vue';
import ContentBar from "../../ContentBar.vue";
+import StudipDate from '../../StudipDate.vue';
+import { getStatus } from './task-groups-helper.js';
export default {
components: {
@@ -86,6 +97,7 @@ export default {
CoursewareTasksDialogDistribute,
EditFeedbackDialog,
RenewalDialog,
+ StudipDate,
TaskGroup,
TaskGroupsAddSolversDialog,
TaskGroupsDeleteDialog,
@@ -126,6 +138,18 @@ export default {
return memo;
}, {});
},
+ status() {
+ return getStatus(this.taskGroup);
+ },
+ statusMessage() {
+ return this.status.description;
+ },
+ startDate() {
+ return new Date(this.taskGroup.attributes['start-date']);
+ },
+ endDate() {
+ return new Date(this.taskGroup.attributes['end-date']);
+ },
},
methods: {
...mapActions({
diff --git a/resources/vue/components/courseware/tasks/TaskGroup.vue b/resources/vue/components/courseware/tasks/TaskGroup.vue
index 62449f1c035..541ce7b780e 100644
--- a/resources/vue/components/courseware/tasks/TaskGroup.vue
+++ b/resources/vue/components/courseware/tasks/TaskGroup.vue
@@ -1,14 +1,5 @@
<template>
<div>
- <CompanionBox :msgCompanion="statusMessage">
- <template #companionActions>
- <span>
- {{ $gettext('Bearbeitungszeit') }}
- <StudipDate :date="startDate" /> - <StudipDate :date="endDate" />
- </span>
- </template>
- </CompanionBox>
-
<section v-if="tasks.length > 0">
<table class="default">
<caption>
@@ -48,12 +39,10 @@
<script>
import { mapGetters } from 'vuex';
import CompanionBox from '../layouts/CoursewareCompanionBox.vue';
-import StudipDate from '../../StudipDate.vue';
import TaskItem from './TaskGroupTaskItem.vue';
-import { getStatus } from './task-groups-helper.js';
export default {
- components: { CompanionBox, StudipDate, TaskItem },
+ components: { CompanionBox, TaskItem },
props: ['taskGroup', 'tasks'],
computed: {
...mapGetters({
@@ -64,21 +53,6 @@ export default {
taskGroup: this.taskGroup.attributes.title,
});
},
- endDate() {
- return new Date(this.taskGroup.attributes['end-date']);
- },
- isAfter() {
- return new Date() > this.endDate;
- },
- startDate() {
- return new Date(this.taskGroup.attributes['start-date']);
- },
- status() {
- return getStatus(this.taskGroup);
- },
- statusMessage() {
- return this.status.description;
- },
},
};
</script>
--
GitLab