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
...@@ -2,99 +2,147 @@ ...@@ -2,99 +2,147 @@
@import '../variables.scss'; @import '../variables.scss';
.cw-keypoint-content { .cw-keypoint-content {
display: flex; position: relative;
min-height: 52px; min-height: 75px;
padding: 1.5em 2.5em 1.5em 2.5em;
border-style: solid;
border-width: 2px;
align-items: center;
}
.cw-keypoint-content > img { .cw-keypoint-icon-wrapper {
flex-shrink: 0; 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 { .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 { .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 { .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 { .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 { .cw-keypoint-yellow {
border-color: map-get($icon-colors, 'icon-yellow'); .cw-keypoint-icon-wrapper {
} border-color: var(--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 {
> .cw-keypoint-input-color + div { filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%);
cursor: pointer;
border: 2px solid transparent;
height: 32px;
width: 32px;
} }
.cw-keypoint-sentence {
> .cw-keypoint-input-color:checked + div { background-color: var(--yellow-20);
/* (RADIO CHECKED) IMAGE STYLES */
@include background-icon(accept, info_alt, 24);
background-repeat: no-repeat;
background-position: center;
} }
} }
label[for='cw-keypoint-color'] {
vertical-align: top;
}
.cw-keypoint-label-color {
display: inline-block !important;
}
.cw-keypoint-icons { .cw-keypoint-royal-purple {
background-color: var(--white); .cw-keypoint-icon-wrapper {
} border-color: var(--dark-violet);
}
.cw-keypoint-bg-red { .cw-keypoint-icon {
background-color: map-get($icon-colors, 'icon-red'); 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-apple-green {
.cw-keypoint-bg-blue { .cw-keypoint-icon-wrapper {
background-color: map-get($icon-colors, 'icon-blue'); 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-pumpkin {
.cw-keypoint-bg-green { .cw-keypoint-icon-wrapper {
background-color: map-get($icon-colors, 'icon-green'); 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-verdigris {
.cw-keypoint-bg-gray { .cw-keypoint-icon-wrapper {
background-color: map-get($icon-colors, 'icon-gray'); 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 { .cw-keypoint-mulberry {
background-color: map-get($icon-colors, 'icon-yellow'); .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
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
> >
<template #content> <template #content>
<div class="cw-keypoint-content" :class="['cw-keypoint-' + currentColor]"> <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> <p class="cw-keypoint-sentence">{{ currentText }}</p>
</div> </div>
</template> </template>
...@@ -112,9 +114,17 @@ export default { ...@@ -112,9 +114,17 @@ export default {
return this.contentIcons; return this.contentIcons;
}, },
colors() { colors() {
return this.mixinColors.filter( let colors = this.mixinColors.filter(
(color) => color.icon && color.class !== 'white' && color.class !== 'studip-lightblue' (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() { text() {
return this.block?.attributes?.payload?.text; return this.block?.attributes?.payload?.text;
......
...@@ -3,6 +3,7 @@ const contentIconsMixin = { ...@@ -3,6 +3,7 @@ const contentIconsMixin = {
contentIcons() { contentIcons() {
return [ return [
'accept', 'accept',
'accessibility',
'add', 'add',
'add-circle', 'add-circle',
'admin', 'admin',
...@@ -10,11 +11,13 @@ const contentIconsMixin = { ...@@ -10,11 +11,13 @@ const contentIconsMixin = {
'arr_1down', 'arr_1down',
'arr_1left', 'arr_1left',
'arr_1right', 'arr_1right',
'arr_1sort',
'arr_1up', 'arr_1up',
'arr_2down', 'arr_2down',
'arr_2left', 'arr_2left',
'arr_2right', 'arr_2right',
'arr_2up', 'arr_2up',
'assessment',
'audio', 'audio',
'audio3', 'audio3',
'billboard', 'billboard',
...@@ -24,18 +27,23 @@ const contentIconsMixin = { ...@@ -24,18 +27,23 @@ const contentIconsMixin = {
'block-gallery', 'block-gallery',
'block-gallery2', 'block-gallery2',
'block-imagemap', 'block-imagemap',
'blubber',
'brainstorm', 'brainstorm',
'campusnavi', 'campusnavi',
'cc',
'cellphone',
'chat2', 'chat2',
'code', 'code',
'community2', 'community2',
'computer', 'computer',
'consultation', 'consultation',
'content', 'content',
'copy',
'courseware', 'courseware',
'crown', 'crown',
'date-single', 'date-single',
'decline', 'decline',
'dialog-cards',
'decline-circle', 'decline-circle',
'doctoral_cap', 'doctoral_cap',
'download', 'download',
...@@ -45,14 +53,32 @@ const contentIconsMixin = { ...@@ -45,14 +53,32 @@ const contentIconsMixin = {
'exclaim-circle', 'exclaim-circle',
'export', 'export',
'favorite', 'favorite',
'file2',
'file-archive',
'file-audio',
'file-office',
'file-pdf',
'file-pic',
'file-presentation',
'file-spreadsheed',
'file-text',
'file-video',
'files2',
'filter', 'filter',
'fishbowl',
'folder-empty',
'folder-full',
'forum',
'globe', 'globe',
'graph', 'graph',
'group2', 'group2',
'group3', 'group3',
'group4', 'group4',
'guestbook',
'hand',
'home', 'home',
'home2', 'home2',
'import',
'info', 'info',
'info-circle', 'info-circle',
'install', 'install',
...@@ -69,6 +95,7 @@ const contentIconsMixin = { ...@@ -69,6 +95,7 @@ const contentIconsMixin = {
'literature', 'literature',
'lock-locked', 'lock-locked',
'lock-unlocked', 'lock-unlocked',
'mail',
'mail2', 'mail2',
'medal', 'medal',
'metro', 'metro',
...@@ -86,16 +113,28 @@ const contentIconsMixin = { ...@@ -86,16 +113,28 @@ const contentIconsMixin = {
'picture', 'picture',
'place', 'place',
'plugin', 'plugin',
'plugin2',
'print',
'progress',
'question', 'question',
'question-circle', 'question-circle',
'radar',
'ranking', 'ranking',
'refresh',
'remove', 'remove',
'remove-circle', 'remove-circle',
'reply',
'rescue',
'resources', 'resources',
'roles', 'roles',
'rss',
'schedule2', 'schedule2',
'search', 'search',
'seminar',
'settings', 'settings',
'settings2',
'share',
'source',
'span-empty', 'span-empty',
'span-1quarter', 'span-1quarter',
'span-2quarter', 'span-2quarter',
...@@ -107,12 +146,21 @@ const contentIconsMixin = { ...@@ -107,12 +146,21 @@ const contentIconsMixin = {
'star', 'star',
'star-empty', 'star-empty',
'star-halffull', 'star-halffull',
'stat',
'studygroup',
'tag',
'test', 'test',
'tools', 'tools',
'topic', 'topic',
'ufo', 'ufo',
'unit-test',
'upload',
'vcard',
'video2', 'video2',
'visibility-visible', 'visibility-visible',
'vote',
'vote-stopped',
'wiki',
'wizard', 'wizard',
]; ];
}, },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment