From 2883dedff77addaa6fb14fbbf86843bd99b72b03 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Thu, 7 Jun 2018 00:34:07 +0200 Subject: [PATCH] input field styles and less navigation items --- src/Foundation.hs | 14 ++--- static/css/icons.css | 3 ++ templates/default-layout.lucius | 37 +++++++------ templates/standalone/inputs.lucius | 69 ++++++++++++++++++------ templates/widgets/asidenav.hamlet | 3 +- templates/widgets/pageactionprime.lucius | 2 +- 6 files changed, 83 insertions(+), 45 deletions(-) diff --git a/src/Foundation.hs b/src/Foundation.hs index 4827ad443..9373de9f8 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -713,21 +713,15 @@ defaultLinks = -- Define the menu items of the header. , menuItemAccessCallback' = isJust <$> maybeAuthPair } , NavbarAside $ MenuItem - { menuItemLabel = "Aktuelle Veranstaltungen" + { menuItemLabel = "Veranstaltungen" , menuItemIcon = Just "book" , menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future , menuItemAccessCallback' = return True } , NavbarAside $ MenuItem - { menuItemLabel = "Alte Veranstaltungen" - , menuItemIcon = Just "book" - , menuItemRoute = CourseListR -- should be CourseListInactiveR or similar in the future - , menuItemAccessCallback' = return True - } - , NavbarAside $ MenuItem - { menuItemLabel = "Veranstaltungen" - , menuItemIcon = Just "book" - , menuItemRoute = CourseListR + { menuItemLabel = "Semester" + , menuItemIcon = Nothing + , menuItemRoute = CourseListR -- should be TermListR ,,, , menuItemAccessCallback' = return True } , NavbarAside $ MenuItem diff --git a/static/css/icons.css b/static/css/icons.css index b836de6e3..e5fdd191d 100644 --- a/static/css/icons.css +++ b/static/css/icons.css @@ -32,3 +32,6 @@ .glyphicon--logout::before { content: '\e163'; } +.glyphicon--none::before { + content: ''; +} diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index ad20ae148..abfcc19a2 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -126,12 +126,11 @@ table { th, td { text-align: left; - padding: 0 13px 0 7px; + padding: 7px; vertical-align: baseline; } th:first-child, td:first-child { - padding-left: 0; border-left: 0; } th { @@ -189,21 +188,15 @@ button, transition: all .1s; font-size: 16px; cursor: pointer; - border-radius: 4px; display: inline-block; -} -input.btn-primary, -button.btn-primary, -a.btn.btn-primary, -.btn.btn-primary { - background-color: var(--primarybase); -} -input.btn-info, -button.btn-info, -a.btn.btn-info, -.btn.btn-info { - background-color: var(--infobase) + a { + color: white; + } + + a:hover { + color: white; + } } input[type="submit"][disabled], @@ -226,6 +219,20 @@ a.btn:not([disabled]):hover, color: white; } +input.btn-primary, +button.btn-primary, +a.btn.btn-primary, +.btn.btn-primary { + background-color: var(--primarybase); +} + +input.btn-info, +button.btn-info, +a.btn.btn-info, +.btn.btn-info { + background-color: var(--infobase) +} + input[type="submit"].btn-info:hover, input[type="button"].btn-info:hover, button.btn-info:hover, diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 550fe84ac..1ef824d13 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -13,7 +13,7 @@ form { grid-gap: 5px; justify-content: flex-start; align-items: center; - margin: 10px 0; + margin: 17px 0; padding-left: 10px; border-left: 2px solid transparent; } @@ -44,6 +44,7 @@ input[type="password"], input[type="url"], input[type="number"], input[type="email"] { + /* background-color: rgba(0, 0, 0, 0.05); padding: 7px 3px 7px; outline: 0; @@ -54,6 +55,30 @@ input[type="email"] { transition: all .1s; font-size: 16px; min-width: 400px; + */ + + /* from bulma */ + background-color: #fff; + border-color: #dbdbdb; + color: #363636; + box-shadow: inset 0 1px 2px rgba(10,10,10,.1); + min-width: 400px; + width: 100%; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 4px; + display: inline-flex; + font-size: 1rem; + height: 2.25em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(.375em - 1px); + padding-left: calc(.625em - 1px); + padding-right: calc(.625em - 1px); + padding-top: calc(.375em - 1px); + position: relative; + vertical-align: top; } .form-group--required { @@ -82,32 +107,42 @@ input[type="password"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="email"]:focus { - border-bottom-color: var(--lightbase); + /* border-bottom-color: var(--lightbase); background-color: transparent; - box-shadow: 0 0 13px var(--lighterbase); + box-shadow: 0 0 13px var(--lighterbase); */ + border-color: #3273dc; + box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); + outline: 0; } /* BUTTON STYLE SEE default-layout.lucius */ /* TEXTAREAS */ textarea { - outline: 0; - border: 0; - padding: 7px 4px; - min-width: 400px; - min-height: 100px; - font-family: var(--fontfamilybase); - font-size: 16px; - color: var(--fontbase); - background-color: rgba(0, 0, 0, 0.05); - box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05); - border-bottom: 2px solid var(--darkbase); + -webkit-appearance: none; + border: 1px solid transparent; + border-radius: 2px; + display: inline-flex; + font-size: 1rem; + height: 170px; + width: 400px; + line-height: 1.5; + padding-bottom: calc(.375em - 1px); + padding-left: calc(.625em - 1px); + padding-right: calc(.625em - 1px); + padding-top: calc(.375em - 1px); + position: relative; + vertical-align: top; + background-color: #fff; + border-color: #dbdbdb; + color: #363636; + box-shadow: inset 0 1px 2px rgba(10,10,10,.1); } textarea:focus { - background-color: transparent; - border-bottom-color: var(--lightbase); - box-shadow: 0 0 13px var(--lighterbase); + border-color: #3273dc; + box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); + outline: 0; } /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet index 8126fd770..b34145640 100644 --- a/templates/widgets/asidenav.hamlet +++ b/templates/widgets/asidenav.hamlet @@ -8,8 +8,7 @@ $newline never $of NavbarAside (MenuItem label mIcon route _)
  • - $if isJust mIcon -
    +
    #{label} $of _ diff --git a/templates/widgets/pageactionprime.lucius b/templates/widgets/pageactionprime.lucius index 564603fdf..a1769478d 100644 --- a/templates/widgets/pageactionprime.lucius +++ b/templates/widgets/pageactionprime.lucius @@ -1,10 +1,10 @@ .page-nav-prime { background-color: var(--lightgreybase); padding: 13px; + margin-top: 30px; } .page-nav-prime .pagenav__list { - margin: 7px 0 0; display: block; } .page-nav-prime .pagenav__list-item {