fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(course-teaser): minor tweaking

Browse Source
This commit is contained in:
Gregor Kleen 2019-08-30 10:50:36 +02:00
parent cc0f79ec31
commit 251c1cced4
2 changed files with 55 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/utils/course-teaser/course-teaser.scss
View File

@ -6,14 +6,14 @@
display: grid; display: grid;
position: relative; position: relative;
grid-gap: 5px 7px; grid-gap: 5px 7px;
grid-template-columns: 140px 1fr 80px; grid-template-columns: 130px 30px 1fr 60px;
grid-template-areas: grid-template-areas:
'shrthnd title chevron' 'shrthnd . title chevron'
'smstr school chevron' 'shrthnd smstr school chevron'
'. rgstrd . ' '. . rgstrd . '
'tutor name . ' 'tutor tutor name . '
'duedate date . ' 'duedate duedate date . '
'dscrptnlbl dscrptn . '; 'dscrptn dscrptn dscrptn dscrptn';
padding: var(--course-padding-vert) var(--course-padding-hori); padding: var(--course-padding-vert) var(--course-padding-hori);
transition: background-color .1s ease-out; transition: background-color .1s ease-out;
cursor: pointer; cursor: pointer;
@ -27,16 +27,15 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
grid-template-columns: 140px 1fr; grid-template-columns: 140px 1fr 30px;
grid-template-areas: grid-template-areas:
'shrthnd chevron' 'shrthnd title chevron'
'title title' 'shrthnd title . '
'smstr school' 'smstr school school '
'. rgstrd' '. rgstrd rgstrd '
'tutor name' 'tutor name name '
'duedate date' 'duedate date date '
'dscrptnlbl .' 'dscrptn dscrptn dscrptn';
'dscrptn dscrptn';
} }
@media (max-width: 426px) { @media (max-width: 426px) {
@ -76,7 +75,8 @@
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
margin-top: -8px; margin-top: -7.35px;
margin-left: -7.35px; /* visually centered */
border-width: 0 3px 3px 0; border-width: 0 3px 3px 0;
width: 8px; width: 8px;
height: 8px; height: 8px;
@ -85,7 +85,8 @@
border-color: var(--color-fontsec); border-color: var(--color-fontsec);
border-style: solid; border-style: solid;
transform: rotate(135deg); transform: rotate(135deg);
transition: transform .2s ease-out; transform-origin: 7.25px 7.25px; /* rotate about visual center */
transition: all .2s ease-out;
} }
&:hover::before { &:hover::before {
@ -104,6 +105,11 @@
@media (max-width: 426px) { @media (max-width: 426px) {
&::before { &::before {
transform: rotate(45deg); transform: rotate(45deg);
margin-left: -7.35px;
}
&:hover::before {
transform: scale(1.4) rotate(45deg);
} }
} }
} }
@ -123,19 +129,31 @@
/* shorthand */ /* shorthand */
.course-teaser__shorthand { .course-teaser__shorthand {
position: absolute; position: relative;
grid-area: shrthnd; grid-area: shrthnd;
font-size: 2rem;
line-height: 1.25;
min-height: calc(2rem * 1.25);
> a { > a {
font-size: 2rem; position: absolute;
font-weight: bold; height: 100%;
color: var(--color-grey-medium); width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-any;
text-decoration: none !important; /* sry. */ text-decoration: none !important; /* sry. */
font-weight: 600;
color: var(--color-grey-medium);
} }
@media (max-width: 768px) { /* @media (max-width: 768px) {
position: initial; * position: initial;
} * }
*/
} }
/* title */ /* title */
@ -173,7 +191,7 @@
/* description */ /* description */
.course-teaser__description { .course-teaser__description {
grid-area: dscrptn; grid-area: dscrptn;
max-height: 1000px; max-height: 75vh;
overflow: auto; overflow: auto;
} }
@ -233,6 +251,10 @@
&::before { &::before {
transform: rotate(225deg); transform: rotate(225deg);
} }
&:hover::before {
transform: scale(1.4) rotate(225deg);
}
} }
} }
@ -240,10 +262,15 @@
.course-teaser__school, .course-teaser__school,
.course-teaser__duedate-label, .course-teaser__duedate-label,
.course-teaser__duedate, .course-teaser__duedate,
.course-teaser__description, .course-teaser__description {
.course-teaser__description-label {
display: block; display: block;
} }
@media (max-width: 426px) {
.course-teaser__description-label {
display: block;
}
}
} }
/* /*

6
frontend/src/utils/inputs/radio.scss
View File

@ -64,9 +64,3 @@
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
} }
@media (max-width: 768px) {
.radio + .radio {
margin-left: 10px;
}
}