Mirrors/go-inbucket
1
0
Fork 0
mirror of https://github.com/jhillyerd/inbucket.git synced 2025-12-18 18:17:03 +00:00
Code Issues Releases Wiki Activity

ui: Reorg navbar CSS

Browse Source
This commit is contained in:
James Hillyerd
2019-02-15 20:56:18 -08:00
parent d933d591d8
commit 35969e0b0f
2 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/Layout.elm
View File

@@ -131,7 +131,7 @@ externalLink url title =
navbarLink : Page -> Route -> List (Html a) -> Page -> Html a navbarLink : Page -> Route -> List (Html a) -> Page -> Html a
navbarLink page route linkContent activePage = navbarLink page route linkContent activePage =
li [ classList [ ( "navbar-active", page == activePage ) ] ] li [ classList [ ( "navbar-active", page == activePage ) ] ]
[ a [ class "navbar-active-bg", Route.href route ] linkContent ] [ a [ Route.href route ] linkContent ]
{-| Renders list of recent mailboxes, selecting the currently active mailbox. {-| Renders list of recent mailboxes, selecting the currently active mailbox.
@@ -170,14 +170,14 @@ navbarRecent page controls =
a [ Route.href (Route.Mailbox mailbox) ] [ text mailbox ] a [ Route.href (Route.Mailbox mailbox) ] [ text mailbox ]
in in
li li
[ class "navbar-recent navbar-dropdown" [ class "navbar-dropdown-container"
, classList [ ( "navbar-active", active ) ] , classList [ ( "navbar-active", active ) ]
, attribute "aria-haspopup" "true" , attribute "aria-haspopup" "true"
, ariaExpanded controls.recentVisible , ariaExpanded controls.recentVisible
, Events.onMouseOver (controls.showRecent True) , Events.onMouseOver (controls.showRecent True)
, Events.onMouseOut (controls.showRecent False) , Events.onMouseOut (controls.showRecent False)
] ]
[ span [ class "navbar-active-bg" ] [ span [ class "navbar-dropdown" ]
[ text title [ text title
, button , button
[ class "navbar-dropdown-button" [ class "navbar-dropdown-button"

32
ui/src/navbar.css
View File

@@ -36,7 +36,7 @@
} }
.navbar a, .navbar a,
.navbar-dropdown span { .navbar-dropdown {
color: var(--navbar-color); color: var(--navbar-color);
display: block; display: block;
padding: 15px; padding: 15px;
@@ -57,7 +57,7 @@
color: var(--navbar-color); color: var(--navbar-color);
} }
li.navbar-active .navbar-active-bg { li.navbar-active > *:first-child {
background-color: #080808; background-color: #080808;
} }
@@ -88,8 +88,7 @@ li.navbar-active span,
} }
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {
.main-nav, .main-nav {
.navbar-bg {
height: var(--navbar-height); height: var(--navbar-height);
} }
@@ -115,16 +114,17 @@ li.navbar-active span,
background-image: var(--navbar-image); background-image: var(--navbar-image);
grid-column: 1 / 4; grid-column: 1 / 4;
grid-row: 1; grid-row: 1;
height: var(--navbar-height);
width: 100%; width: 100%;
z-index: -1; z-index: -1;
} }
.navbar-brand { .navbar-toggle {
margin-left: -15px; display: none;
} }
.navbar-recent { .navbar-brand {
margin: 0 auto; margin-left: -15px;
} }
.navbar-mailbox { .navbar-mailbox {
@@ -136,12 +136,20 @@ li.navbar-active span,
margin-top: 1px; margin-top: 1px;
} }
.navbar-dropdown-container {
margin: 0 auto;
}
.navbar-dropdown {
padding: 15px 19px 15px 25px;
}
.navbar-dropdown-button { .navbar-dropdown-button {
background: none; background: none;
border: none; border: none;
color: var(--navbar-color); color: var(--navbar-color);
display: inline; display: inline;
padding-right: 0; margin-left: 3px;
} }
.navbar-dropdown-content { .navbar-dropdown-content {
@@ -156,7 +164,7 @@ li.navbar-active span,
z-index: 1; z-index: 1;
} }
.navbar-dropdown[aria-expanded="true"] .navbar-dropdown-content { .navbar-dropdown-container[aria-expanded="true"] .navbar-dropdown-content {
display: block; display: block;
} }
@@ -169,8 +177,4 @@ li.navbar-active span,
color: var(--primary-color) !important; color: var(--primary-color) !important;
background-color: var(--selected-color); background-color: var(--selected-color);
} }
.navbar-toggle {
display: none;
}
} }