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