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

style(course-teaser): tweaked style for sorting pills

Browse Source
This commit is contained in:
Sarah Vaupel 2019-08-05 11:45:02 +02:00
parent d964e1f705
commit 4007b0400d
3 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
templates/default-layout.lucius
View File

@ -658,32 +658,29 @@ TODO: move somewhere else?
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
a { .course-header {
text-decoration: none; background-color: var(--color-dark);
} position: relative;
font-size: 16px;
.course-header-link { color: #fff;
color: white; line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 35px;
font-weight: bold; font-weight: bold;
text-align: left;
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
margin-right: 30px;
&:hover { .course-header-link {
color: inherit; color: white;
}
.course-header {
background-color: var(--color-dark);
position: relative;
font-size: 16px;
color: #fff;
line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 25px;
font-weight: bold; font-weight: bold;
text-align: left; text-decoration: none;
border-radius: 15px;
margin-right: 10px; &:hover {
color: inherit;
}
} }
} }
} }

18
templates/table/course/colonnade.lucius
View File

@ -10,11 +10,11 @@
box-shadow: none!important; box-shadow: none!important;
} }
.course-header.sortable::after, .course-header::after,
.course-header.sortable::before { .course-header::before {
content: ''; content: '';
position: absolute; position: absolute;
right: 5px; right: 10px;
top: 20px; top: 20px;
width: 0; width: 0;
height: 0; height: 0;
@ -23,23 +23,23 @@
border-bottom: 8px solid rgba(255, 255, 255, 0.4); border-bottom: 8px solid rgba(255, 255, 255, 0.4);
} }
.course-header.sortable::before { .course-header::before {
/* magic numbers to move arrow back in the right position after flipping it. /* magic numbers to move arrow back in the right position after flipping it.
this allows us to use the same border for the up and the down arrow */ this allows us to use the same border for the up and the down arrow */
transform: translateY(150%) scale(1, -1); transform: translateY(150%) scale(1, -1);
transform-origin: top; transform-origin: top;
} }
.course-header.sortable::after { .course-header::after {
transform: translateY(-150%); transform: translateY(-150%);
} }
.course-header.sortable:hover::before, .course-header:hover::before,
.course-header.sortable:hover::after { .course-header:hover::after {
border-bottom-color: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(255, 255, 255, 0.7);
} }
.course-header.sorted-asc::before, .sorted-asc::before,
.course-header.sorted-desc::after { .sorted-desc::after {
border-bottom-color: white !important; border-bottom-color: white !important;
} }

13
templates/table/course/header.hamlet
View File

@ -1,13 +1,12 @@
$newline never $newline never
$maybe flag <- sortableKey $maybe flag <- sortableKey
$case directions <span .course-header *{attrs} :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
$of [SortAsc] $case directions
<a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortDesc : piSorting'))}> $of [SortAsc]
<span .course-header *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc> <a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortDesc : piSorting'))}>
^{widget} ^{widget}
$of _ $of _
<a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortAsc : piSorting'))}> <a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortAsc : piSorting'))}>
<span .course-header *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
^{widget} ^{widget}
$nothing $nothing