Merge branch 'master' into pagination

This commit is contained in:
Felix Hamann 2019-01-27 19:04:37 +01:00
commit fe985a6cea
13 changed files with 236 additions and 209 deletions

View File

@ -250,7 +250,7 @@ uniworxMessages :: [UniWorXMessage] -> UniWorXMessages
uniworxMessages = UniWorXMessages . map SomeMessage uniworxMessages = UniWorXMessages . map SomeMessage
-- Menus and Favourites -- Menus and Favourites
data MenuType = NavbarAside | NavbarRight | NavbarSecondary | PageActionPrime | PageActionSecondary data MenuType = NavbarAside | NavbarRight | NavbarSecondary | PageActionPrime | PageActionSecondary | Footer
deriving (Eq, Ord, Enum, Bounded, Read, Show, Generic) deriving (Eq, Ord, Enum, Bounded, Read, Show, Generic)
data MenuItem = MenuItem data MenuItem = MenuItem
@ -926,6 +926,8 @@ siteLayout headingOverride widget = do
navbar = $(widgetFile "widgets/navbar") navbar = $(widgetFile "widgets/navbar")
asidenav :: Widget asidenav :: Widget
asidenav = $(widgetFile "widgets/asidenav") asidenav = $(widgetFile "widgets/asidenav")
footer :: Widget
footer = $(widgetFile "widgets/footer")
contentHeadline :: Maybe Widget contentHeadline :: Maybe Widget
contentHeadline = (toWidget <$> headingOverride) <|> (pageHeading =<< mcurrentRoute) contentHeadline = (toWidget <$> headingOverride) <|> (pageHeading =<< mcurrentRoute)
breadcrumbsWgt :: Widget breadcrumbsWgt :: Widget
@ -1066,7 +1068,7 @@ defaultLinks = fmap catMaybes . mapM runMaybeT $ -- Define the menu items of the
, menuItemAccessCallback' = return True , menuItemAccessCallback' = return True
} }
, return MenuItem , return MenuItem
{ menuItemType = NavbarRight { menuItemType = Footer
, menuItemLabel = MsgMenuVersion , menuItemLabel = MsgMenuVersion
, menuItemIcon = Just "book" , menuItemIcon = Just "book"
, menuItemRoute = SomeRoute VersionR , menuItemRoute = SomeRoute VersionR

View File

@ -218,15 +218,17 @@ getSheetListR tid ssh csh = do
return $ CSubmissionR tid ssh csh sheetName cid' SubShowR return $ CSubmissionR tid ssh csh sheetName cid' SubShowR
in anchorCellM mkRoute (mkCid >>= \cid2 -> [whamlet|#{display cid2}|]) in anchorCellM mkRoute (mkCid >>= \cid2 -> [whamlet|#{display cid2}|])
, sortable (Just "rating") (i18nCell MsgRating) , sortable (Just "rating") (i18nCell MsgRating)
$ \DBRow{dbrOutput=(Entity _ Sheet{..}, _, mbSub)} -> case mbSub of $ \DBRow{dbrOutput=(Entity _ Sheet{..}, _, mbSub)} ->
Nothing -> mempty let stats = sheetTypeSum sheetType in -- for statistics over all shown rows
case mbSub of
Nothing -> cellTell mempty $ stats Nothing
(Just (Entity sid Submission{..})) -> (Just (Entity sid Submission{..})) ->
let stats = sheetTypeSum sheetType submissionRatingPoints -- for statistics over all shown rows let mkCid = encrypt sid
mkCid = encrypt sid
mkRoute = do mkRoute = do
cid' <- mkCid cid' <- mkCid
return $ CSubmissionR tid ssh csh sheetName cid' CorrectionR return $ CSubmissionR tid ssh csh sheetName cid' CorrectionR
in cellTell stats $ anchorCellM mkRoute $(widgetFile "widgets/rating") acell = anchorCellM mkRoute $(widgetFile "widgets/rating")
in cellTell acell $ stats submissionRatingPoints
, sortable Nothing -- (Just "percent") , sortable Nothing -- (Just "percent")
(i18nCell MsgRatingPercent) (i18nCell MsgRatingPercent)

View File

@ -15,8 +15,11 @@ type CourseLink = (TermId, SchoolId, CourseShorthand) -- TODO: Refactor with Wit
-------------------- --------------------
-- Special cells -- Special cells
cellTell :: (Monoid a, IsDBTable m a) => a -> DBCell m a -> DBCell m a tellCell :: (Monoid a, IsDBTable m a) => a -> DBCell m a -> DBCell m a
cellTell = flip mappend . writerCell . tell tellCell = flip mappend . writerCell . tell
cellTell :: (Monoid a, IsDBTable m a) => DBCell m a -> a -> DBCell m a
cellTell = flip tellCell
indicatorCell :: IsDBTable m Any => DBCell m Any -- For dbTables that return a Bool to indicate content indicatorCell :: IsDBTable m Any => DBCell m Any -- For dbTables that return a Bool to indicate content
indicatorCell = writerCell . tell $ Any True indicatorCell = writerCell . tell $ Any True

View File

@ -1,13 +1,11 @@
$if not isModal $if not isModal
<!-- secondary navigation at the side -->
^{asidenav}
<!-- navigation --> <!-- navigation -->
^{navbar} ^{navbar}
<div .main> <div .main>
$if not isModal
<!-- secondary navigation at the side -->
^{asidenav}
<div .main__content> <div .main__content>
$if not isModal $if not isModal
@ -37,3 +35,7 @@ $if not isModal
<!-- actual content --> <!-- actual content -->
^{widget} ^{widget}
<!-- footer -->
$if not isModal
^{footer}

View File

@ -7,7 +7,8 @@
--color-lightblack: #1A2A36; --color-lightblack: #1A2A36;
--color-lightwhite: #fcfffa; --color-lightwhite: #fcfffa;
--color-grey: #B1B5C0; --color-grey: #B1B5C0;
--color-grey-light: #f4f5f6; --color-grey-light: #efefef;
--color-grey-medium: #9A989E;
--color-font: #34303a; --color-font: #34303a;
--color-fontsec: #5b5861; --color-fontsec: #5b5861;
@ -19,6 +20,10 @@
/* DIMENSIONS */ /* DIMENSIONS */
--header-height: 100px; --header-height: 100px;
--header-height-collapsed: 60px; --header-height-collapsed: 60px;
--asidenav-width-xl: 250px;
--asidenav-width-lg: 20%;
--asidenav-width-md: 50px;
} }
* { * {
@ -41,7 +46,8 @@ body {
body { body {
/* DEFAULT LMU THEME */ /* DEFAULT LMU THEME */
--color-primary: #0a9342; --color-lmu-green: #0a9342;
--color-primary: var(--color-lmu-green);
--color-light: #31cc72; --color-light: #31cc72;
--color-lighter: #35db7a; --color-lighter: #35db7a;
--color-dark: #087536; --color-dark: #087536;
@ -156,15 +162,12 @@ h4 {
.main { .main {
position: relative; position: relative;
min-height: calc(100vh - var(--header-height)); min-height: calc(100vh - var(--header-height));
padding: 20px;
overflow: hidden;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.main { .main {
min-height: calc(100vh - var(--header-height-collapsed)); min-height: calc(100vh - var(--header-height-collapsed));
padding: 10px;
} }
} }
@ -172,8 +175,8 @@ h4 {
position: relative; position: relative;
background-color: white; background-color: white;
transition: padding-left .2s ease-out; transition: padding-left .2s ease-out;
max-width: 1200px; margin-top: var(--header-height-collapsed);
margin: 0 auto; margin-left: 0;
> .container { > .container {
margin: 20px 0; margin: 20px 0;
@ -192,48 +195,45 @@ h4 {
} }
} }
.logged-in { @media (min-width: 426px) {
.main__content { :not(.modal) {
margin: 0;
max-width: none;
}
}
@media (max-width: 768px) {
.logged-in:not(.modal) {
.main__content { .main__content {
padding-left: 60px; margin-left: var(--asidenav-width-md, 50px);
}
}
}
@media (max-width: 425px) {
.logged-in:not(.modal) {
.main__content {
padding-left: 0;
} }
} }
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.logged-in:not(.modal) { :not(.modal) {
.main__content { .main__content {
padding-left: calc(24% + 30px); margin-left: var(--asidenav-width-lg, 20%);
margin-top: var(--header-height);
} }
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.logged-in:not(.modal) { :not(.modal) {
.main__content { .main__content {
padding-left: 320px; margin-left: var(--asidenav-width-xl, 250px);
} }
} }
} }
/* sepcial case for breadcrumbs */ .main__content-body {
.breadcrumbs__container + .main__content-body { padding: 13px;
padding-top: 0; }
@media (min-width: 426px) {
.main__content-body {
padding: 13px 20px;
}
}
@media (min-width: 769px) {
.main__content-body {
padding: 20px 40px;
}
} }
.pseudo-focus { .pseudo-focus {
@ -450,7 +450,7 @@ input[type="button"].btn-info:hover,
} }
ul.list--inline { ul.list--inline {
display: inline-block; display: inline-block;
margin-left: 0; margin-left: 0;

View File

@ -1,5 +1,10 @@
$newline never $newline never
<aside .main__aside> <aside .main__aside>
<div .asidenav__logo>
<a href="/" .asidenav__logo-link>
<span .asidenav__logo-link-item.asidenav__logo-lmu>LMU
<span .asidenav__logo-link-item.asidenav__logo-uni2work>UNI2WORK
<div .asidenav> <div .asidenav>
$forall tid <- favouriteTerms $forall tid <- favouriteTerms
<div .asidenav__box.js-show-hide> <div .asidenav__box.js-show-hide>

View File

@ -1,35 +1,36 @@
.main__aside { .main__aside {
position: absolute; position: fixed;
display: none;
background-color: var(--color-dark);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
flex: 0 0 300px; flex: 0 0 0;
flex-basis: var(--asidenav-width-lg, 20%);
min-height: calc(100% - var(--header-height)); min-height: calc(100% - var(--header-height));
transition: all .2s ease-out; transition: all .2s ease-out;
width: 24%; width: var(--asidenav-width-lg, 20%);
height: 100%; height: 100%;
}
.logged-in { &::before {
.main__aside { position: absolute;
display: block; z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--color-dark);
opacity: 0.05;
} }
}
/* maximum width of 300px for wide screens */ &::after {
@media (min-width: 1200px) { content: '';
.main__aside { position: absolute;
width: 300px; z-index: -2;
} left: 0;
} top: 0;
width: 100%;
@media (max-width: 768px) { height: 100%;
background-color: var(--color-grey-light);
.main__aside {
min-height: calc(100% - var(--header-height-collapsed));
} }
} }
@ -44,14 +45,12 @@
height: 100% !important; height: 100% !important;
width: 100%; width: 100%;
z-index: 5; z-index: 5;
box-shadow: 0 0 13px var(--color-dark);
white-space: nowrap;
overflow: hidden; overflow: hidden;
transform: translateX(0); transform: translateX(-110%);
transition: transform .2s ease-out; transition: transform .2s ease-out;
&:not(.main__aside--expanded) { &.main__aside--expanded {
transform: translateX(-110%); transform: translateX(0%);
} }
.asidenav__box-title { .asidenav__box-title {
@ -65,8 +64,14 @@
} }
} }
@media (min-width: 1200px) {
.main__aside {
width: var(--asidenav-width-xl, 250px)
}
}
.asidenav { .asidenav {
color: white; color: var(--color-font);
} }
.asidenav__box { .asidenav__box {
@ -92,24 +97,104 @@
left: auto; left: auto;
right: 20px; right: 20px;
top: 30px; top: 30px;
color: white; color: var(--color-font);
} }
} }
} }
/* LOGO */
.asidenav__logo {
height: var(--header-height);
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.asidenav__logo {
display: none;
}
}
.asidenav__logo-link {
flex: 1;
top: 10px;
left: 20px;
height: 80px;
padding: 0 20px;
display: flex;
flex-basis: var(--asidenav-width-xl, 250px);
font-size: 16px;
align-items: center;
color: var(--color-dark);
transform-origin: left;
&:hover {
color: var(--color-dark);
.asidenav__logo-link-item {
background-color: var(--color-grey-light);
}
}
}
.asidenav__logo-link-item {
font-weight: bold;
display: flex;
align-items: flex-end;
height: calc(100% - 4px);
padding: 0 6px 4px;
border: 1px solid var(--color-dark);
letter-spacing: 2px;
background-color: var(--color-lightwhite);
transition: background-color .3s ease;
}
.asidenav__logo-lmu {
font-family: var(--font-logo);
font-size: 30px;
}
.asidenav__logo-uni2work {
min-width: 70px;
margin-left: 12px;
font-weight: normal;
text-transform: uppercase;
width: 100%;
}
@media (max-width: 1199px) {
.asidenav__logo-link {
flex-basis: var(--asidenav-width-lg, 20%);
font-size: 16px;
}
.asidenav__logo-lmu {
display: none;
}
.asidenav__logo-uni2work {
margin-left: 0;
}
}
/* LIST-ITEM */
.asidenav__list-item { .asidenav__list-item {
position: relative; position: relative;
color: var(--color-lightwhite); color: var(--color-font);
min-height: 50px; min-height: 50px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
&:not(.asidenav__list-item--active):hover { &:not(.asidenav__list-item--active):hover {
background-color: var(--color-darker); background-color: var(--color-lightwhite);
> .asidenav__link-wrapper { > .asidenav__link-wrapper {
color: var(--color-lightwhite); color: var(--color-font);
} }
} }
@ -157,7 +242,7 @@
align-items: center; align-items: center;
padding: 7px 10px; padding: 7px 10px;
justify-content: flex-start; justify-content: flex-start;
color: var(--color-lightwhite); color: var(--color-font);
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
@ -213,25 +298,27 @@
@media (min-width: 425px) and (max-width: 768px) { @media (min-width: 425px) and (max-width: 768px) {
.main__aside { .main__aside {
width: 50px; width: var(--asidenav-width-md, 50px);
flex-basis: 50px; flex-basis: var(--asidenav-width-md, 50px);
overflow: hidden; overflow: hidden;
min-height: calc(100% - var(--header-height-collapsed)); min-height: calc(100% - var(--header-height-collapsed));
top: var(--header-height-collapsed);
.asidenav__box-title { .asidenav__box-title {
width: 50px; width: var(--asidenav-width-md, 50px);
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
padding: 10px 1px; padding: 10px 1px;
word-break: break-all; word-break: break-all;
background-color: var(--color-darker); background-color: var(--color-dark);
color: var(--color-lightwhite);
} }
.asidenav__link-shorthand { .asidenav__link-shorthand {
display: flex; display: flex;
position: static; position: static;
height: 50px; height: 50px;
width: 50px; width: var(--asidenav-width-md, 50px);
text-align: center; text-align: center;
opacity: 1; opacity: 1;
font-size: 15px; font-size: 15px;
@ -254,7 +341,7 @@
} }
.asidenav__link-wrapper { .asidenav__link-wrapper {
color: var(--color-lightwhite); color: var(--color-font);
padding: 0; padding: 0;
} }
@ -267,7 +354,6 @@
.asidenav__link-wrapper { .asidenav__link-wrapper {
background-color: var(--color-lightwhite); background-color: var(--color-lightwhite);
color: var(--color-dark);
} }
} }

View File

@ -1,20 +1,20 @@
.breadcrumbs__container { .breadcrumbs__container {
position: relative; position: relative;
color: var(--color-lightwhite); color: var(--color-lightwhite);
margin-top: -11px;
margin-right: -20px;
margin-bottom: 20px;
margin-left: -42px;
padding: 4px 13px; padding: 4px 13px;
padding-left: 42px;
background-color: var(--color-dark); background-color: var(--color-dark);
line-height: 30px; line-height: 30px;
} }
@media (min-width: 768px) { @media (min-width: 426px) {
.breadcrumbs__container { .breadcrumbs__container {
margin-top: -22px; padding: 7px 20px;
}
}
@media (min-width: 769px) {
.breadcrumbs__container {
padding: 7px 40px;
} }
} }

View File

@ -0,0 +1,12 @@
<footer .footer>
<div .footer-links>
$forall (MenuItem{menuItemType, menuItemRoute = _, menuItemIcon = _, menuItemLabel, menuItemModal = _}, menuIdent, route) <- menuTypes
$case menuItemType
$of Footer
$# Not used but available (remove ` = _` from the pattern match above, as needed):
$# highlight (urlRoute menuItemRoute) :: Bool -- ^ Is this menu item currently active (i.e.: are we on this page)
$# menuItemModal :: Bool -- ^ Should this menu item open a modal instead of being a normal link
$# menuItemIcon :: Maybe Text -- ^ Should this menu item have an icon, if yes, then the name of the icon
<a href=#{route} ##{menuIdent}>
_{SomeMessage menuItemLabel}
$of _

View File

@ -0,0 +1,16 @@
.footer {
text-align: center;
padding: 20px;
position: relative;
margin: 40px 0;
&::before {
content: '';
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 2px;
background-color: var(--color-grey-light);
}
}

View File

@ -3,8 +3,6 @@ $newline never
<div .navbar-shadow> <div .navbar-shadow>
<nav .navbar.js-sticky-navbar> <nav .navbar.js-sticky-navbar>
<a href="/" .navbar__logo>
<ul .navbar__list.list--inline.navbar__list-left> <ul .navbar__list.list--inline.navbar__list-left>
$# manually add favorites to navbar for small screens $# manually add favorites to navbar for small screens
<li .navbar__list-item.navbar__list-item--favorite> <li .navbar__list-item.navbar__list-item--favorite>
@ -41,5 +39,3 @@ $newline never
<i .fas.fa-#{fromMaybe "none" menuItemIcon}> <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
<div .navbar__link-label>_{SomeMessage menuItemLabel} <div .navbar__link-label>_{SomeMessage menuItemLabel}
$of _ $of _
<div .navbar__pushdown>

View File

@ -3,8 +3,9 @@
} }
.navbar-shadow { .navbar-shadow {
position: absolute; position: fixed;
right: 0; right: 0;
top: 0;
height: var(--header-height-collapsed); height: var(--header-height-collapsed);
width: 20px; width: 20px;
z-index: 50; z-index: 50;
@ -31,109 +32,30 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%; right: 0;
top: 0; top: 0;
left: 0; left: var(--asidenav-width-xl);
height: var(--header-height); height: var(--header-height);
background: var(--color-darker); /* Old browsers */ background: var(--color-darker); /* Old browsers */
background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, var(--color-dark) 0%,var(--color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to top, var(--color-dark) 0%,var(--color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: white; color: white;
margin-right: 40px;
z-index: 20; z-index: 20;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
overflow: auto; overflow: auto;
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1); transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
} }
@media (max-width: 768px) {
.navbar {
padding: 0px;
margin-right: 0;
}
}
.navbar__logo {
top: 10px;
left: 20px;
height: 80px;
padding: 0 20px;
display: flex;
flex-basis: 300px;
font-size: 16px;
align-items: center;
color: var(--color-lightwhite);
transform-origin: left;
transition: all .2s ease-out;
&:hover {
color: var(--color-lightwhite);
}
&::before {
content: 'LMU';
font-family: var(--font-logo);
font-weight: bold;
letter-spacing: 2px;
display: flex;
align-items: flex-end;
font-size: 30px;
min-width: 70px;
height: calc(100% - 4px);
padding: 0 6px 4px;
}
&::after {
content: 'Uni2work';
margin-left: 12px;
font-weight: normal;
letter-spacing: 2px;
display: flex;
align-items: flex-end;
text-transform: uppercase;
width: 100%;
height: calc(100% - 4px);
padding: 0 6px 4px;
}
}
@media (min-width: 769px) {
.navbar__logo::before,
.navbar__logo::after {
border: 1px solid var(--color-lmu-box-border);
}
}
@media (max-width: 1199px) { @media (max-width: 1199px) {
.navbar {
.navbar__logo { left: var(--asidenav-width-lg);
flex-basis: 24%;
font-size: 16px;
}
}
@media (max-width: 1024px) {
.navbar__logo {
font-size: 14px;
&::before {
content: none;
}
&::after {
margin-left: 0;
}
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.navbar {
.navbar__logo { left: 0;
display: none;
} }
} }
@ -180,13 +102,6 @@
} }
} }
@media (max-width: 500px) {
.navbar__link-label {
font-size: 12px;
}
}
/* navbar list */ /* navbar list */
.navbar__list { .navbar__list {
white-space: nowrap; white-space: nowrap;
@ -194,24 +109,21 @@
+ .navbar__list { + .navbar__list {
margin-left: 12px; margin-left: 12px;
} }
}
&:last-of-type { @media (min-width: 769px) {
.navbar__list:last-of-type {
padding-right: 40px; padding-right: 40px;
} }
} }
@media (min-width: 768px) { @media (max-width: 768px) {
.navbar__list:last-of-type {
margin-right: 20px;
}
}
@media (max-width: 425px) {
.navbar__list { .navbar__list {
+ .navbar__list { + .navbar__list {
margin-left: 0; margin-left: 0;
padding-right: 80px;
} }
} }
} }
@ -355,10 +267,6 @@
.navbar__link-wrapper { .navbar__link-wrapper {
height: var(--header-height-collapsed); height: var(--header-height-collapsed);
} }
.navbar__logo {
top: 5px;
}
} }
.navbar__pushdown { .navbar__pushdown {
@ -393,9 +301,4 @@
.navbar__link-wrapper { .navbar__link-wrapper {
height: var(--header-height-collapsed); height: var(--header-height-collapsed);
} }
.navbar__logo {
top: 5px;
height: var(--header-height-collapsed);
}
} }

View File

@ -1,6 +1,6 @@
.page-nav-prime { .page-nav-prime {
margin: 10px 0 20px; margin: 10px 0 20px;
background-color: var(--color-grey-light); background-color: var(--color-lightwhite);
} }
.pagenav__list-item { .pagenav__list-item {