Skip to content
Snippets Groups Projects
Commit 6dbe8a1a authored by Ron Lucke's avatar Ron Lucke
Browse files

Neues Layout für den Merksatz Block 

Closes #4495

Merge request studip/studip!3446
parent 332f5ef2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss
+ 117
− 69
View file @ 6dbe8a1a
......@@ -2,99 +2,147 @@
@import '../variables.scss';
.cw-keypoint-content {
display: flex;
min-height: 52px;
padding: 1.5em 2.5em 1.5em 2.5em;
border-style: solid;
border-width: 2px;
align-items: center;
}
position: relative;
min-height: 75px;
.cw-keypoint-content > img {
flex-shrink: 0;
.cw-keypoint-icon-wrapper {
position: absolute;
top: -16px;
left: 0;
height: 48px;
width: 48px;
background-color: var(--white);
border: solid 4px var(--black);
border-radius: 64px;
padding: 16px;
margin: 1px 0;
}
.cw-keypoint-sentence {
display: block;
background-color: var(--dark-gray-color-20);
margin: 16px 0 0 16px;
padding: 16px 16px 16px 96px;
width: calc(100% - 128px);
font-size: 20px;
}
}
.cw-keypoint-red {
border-color: map-get($icon-colors, 'icon-red');
.cw-keypoint-icon-wrapper {
border-color: var(--red);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(6904%) hue-rotate(1deg) brightness(95%) contrast(109%);
}
.cw-keypoint-sentence {
background-color: var(--red-20);
}
}
.cw-keypoint-blue {
border-color: map-get($icon-colors, 'icon-blue');
.cw-keypoint-icon-wrapper {
border-color: var(--base-color);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%);
}
.cw-keypoint-sentence {
background-color: var(--base-color-20);
}
}
.cw-keypoint-green {
border-color: map-get($icon-colors, 'icon-green');
.cw-keypoint-icon-wrapper {
border-color: var(--dark-green);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1531%) hue-rotate(109deg) brightness(95%) contrast(101%);
}
.cw-keypoint-sentence {
background-color: var(--dark-green-20);
}
}
.cw-keypoint-grey,
.cw-keypoint-gray {
border-color: map-get($icon-colors, 'icon-gray');
.cw-keypoint-icon-wrapper {
border-color: var(--light-gray-color);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(2621%) hue-rotate(169deg) brightness(87%) contrast(87%);
}
.cw-keypoint-sentence {
background-color: var(--light-gray-color-20);
}
}
.cw-keypoint-yellow {
border-color: map-get($icon-colors, 'icon-yellow');
}
.cw-keypoint-sentence {
display: inline;
font-size: 1.25em;
padding-left: 1.5em;
margin-top: 10px;
}
.cw-keypoint-label-color {
width: 32px !important;
min-width: 32px !important;
height: 32px;
padding: 5px !important;
> .cw-keypoint-input-color {
visibility: hidden;
position: absolute;
.cw-keypoint-icon-wrapper {
border-color: var(--yellow);
}
> .cw-keypoint-input-color + div {
cursor: pointer;
border: 2px solid transparent;
height: 32px;
width: 32px;
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%);
}
> .cw-keypoint-input-color:checked + div {
/* (RADIO CHECKED) IMAGE STYLES */
@include background-icon(accept, info_alt, 24);
background-repeat: no-repeat;
background-position: center;
.cw-keypoint-sentence {
background-color: var(--yellow-20);
}
}
label[for='cw-keypoint-color'] {
vertical-align: top;
}
.cw-keypoint-label-color {
display: inline-block !important;
}
.cw-keypoint-icons {
background-color: var(--white);
}
.cw-keypoint-bg-red {
background-color: map-get($icon-colors, 'icon-red');
.cw-keypoint-royal-purple {
.cw-keypoint-icon-wrapper {
border-color: var(--dark-violet);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(658%) hue-rotate(234deg) brightness(100%) contrast(87%);
}
.cw-keypoint-sentence {
background-color: var(--dark-violet-20);
}
}
.cw-keypoint-bg-blue {
background-color: map-get($icon-colors, 'icon-blue');
.cw-keypoint-apple-green {
.cw-keypoint-icon-wrapper {
border-color: var(--green-80);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(74%) sepia(9%) saturate(1885%) hue-rotate(76deg) brightness(86%) contrast(88%);
}
.cw-keypoint-sentence {
background-color: var(--green-20);
}
}
.cw-keypoint-bg-green {
background-color: map-get($icon-colors, 'icon-green');
.cw-keypoint-pumpkin {
.cw-keypoint-icon-wrapper {
border-color: var(--orange);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(1993%) hue-rotate(13deg) brightness(104%) contrast(108%);
}
.cw-keypoint-sentence {
background-color: var(--orange-20);
}
}
.cw-keypoint-bg-gray {
background-color: map-get($icon-colors, 'icon-gray');
.cw-keypoint-verdigris {
.cw-keypoint-icon-wrapper {
border-color: var(--petrol-80);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(4959%) hue-rotate(131deg) brightness(103%) contrast(49%);
}
.cw-keypoint-sentence {
background-color: var(--petrol-20);
}
}
.cw-keypoint-bg-yellow {
background-color: map-get($icon-colors, 'icon-yellow');
}
.cw-keypoint-mulberry {
.cw-keypoint-icon-wrapper {
border-color: var(--violet-80);
}
.cw-keypoint-icon {
filter: brightness(0) saturate(100%) invert(49%) sepia(16%) saturate(1665%) hue-rotate(271deg) brightness(88%) contrast(95%);
}
.cw-keypoint-sentence {
background-color: var(--violet-20);
}
}
\ No newline at end of file
resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
+ 13
− 3
View file @ 6dbe8a1a
......@@ -11,7 +11,9 @@
>
<template #content>
<div class="cw-keypoint-content" :class="['cw-keypoint-' + currentColor]">
<studip-icon v-if="currentIcon" :size="48" :shape="currentIcon" :role="currentRole" />
<div class="cw-keypoint-icon-wrapper">
<StudipIcon v-if="currentIcon" :size="48" :shape="currentIcon" role="info" class="cw-keypoint-icon" />
</div>
<p class="cw-keypoint-sentence">{{ currentText }}</p>
</div>
</template>
......@@ -112,9 +114,17 @@ export default {
return this.contentIcons;
},
colors() {
return this.mixinColors.filter(
(color) => color.icon && color.class !== 'white' && color.class !== 'studip-lightblue'
let colors = this.mixinColors.filter(
(color) => (color.icon && color.class !== 'white' && color.class !== 'studip-lightblue')
|| color.class === 'royal-purple' || color.class === 'apple-green' || color.class === 'pumpkin' || color.class === 'verdigris' || color.class === 'mulberry'
);
return colors.map((color) => {
if (!color.icon) {
color.icon = color.class;
}
return color;
});
},
text() {
return this.block?.attributes?.payload?.text;
......
resources/vue/mixins/courseware/content-icons.js
+ 48
− 0
View file @ 6dbe8a1a
......@@ -3,6 +3,7 @@ const contentIconsMixin = {
contentIcons() {
return [
'accept',
'accessibility',
'add',
'add-circle',
'admin',
......@@ -10,11 +11,13 @@ const contentIconsMixin = {
'arr_1down',
'arr_1left',
'arr_1right',
'arr_1sort',
'arr_1up',
'arr_2down',
'arr_2left',
'arr_2right',
'arr_2up',
'assessment',
'audio',
'audio3',
'billboard',
......@@ -24,18 +27,23 @@ const contentIconsMixin = {
'block-gallery',
'block-gallery2',
'block-imagemap',
'blubber',
'brainstorm',
'campusnavi',
'cc',
'cellphone',
'chat2',
'code',
'community2',
'computer',
'consultation',
'content',
'copy',
'courseware',
'crown',
'date-single',
'decline',
'dialog-cards',
'decline-circle',
'doctoral_cap',
'download',
......@@ -45,14 +53,32 @@ const contentIconsMixin = {
'exclaim-circle',
'export',
'favorite',
'file2',
'file-archive',
'file-audio',
'file-office',
'file-pdf',
'file-pic',
'file-presentation',
'file-spreadsheed',
'file-text',
'file-video',
'files2',
'filter',
'fishbowl',
'folder-empty',
'folder-full',
'forum',
'globe',
'graph',
'group2',
'group3',
'group4',
'guestbook',
'hand',
'home',
'home2',
'import',
'info',
'info-circle',
'install',
......@@ -69,6 +95,7 @@ const contentIconsMixin = {
'literature',
'lock-locked',
'lock-unlocked',
'mail',
'mail2',
'medal',
'metro',
......@@ -86,16 +113,28 @@ const contentIconsMixin = {
'picture',
'place',
'plugin',
'plugin2',
'print',
'progress',
'question',
'question-circle',
'radar',
'ranking',
'refresh',
'remove',
'remove-circle',
'reply',
'rescue',
'resources',
'roles',
'rss',
'schedule2',
'search',
'seminar',
'settings',
'settings2',
'share',
'source',
'span-empty',
'span-1quarter',
'span-2quarter',
......@@ -107,12 +146,21 @@ const contentIconsMixin = {
'star',
'star-empty',
'star-halffull',
'stat',
'studygroup',
'tag',
'test',
'tools',
'topic',
'ufo',
'unit-test',
'upload',
'vcard',
'video2',
'visibility-visible',
'vote',
'vote-stopped',
'wiki',
'wizard',
];
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment