From 9b6305f8c99d98d0b18c4402ea3c14bbbd59a6ae Mon Sep 17 00:00:00 2001 From: Danielle McLean Date: Mon, 2 Oct 2017 22:33:32 +1100 Subject: [PATCH] Start designing a Bootstrap v4 based site layout, it's boring so far but the navbar is okay? --- src/Foundation.hs | 4 +- templates/default-layout-wrapper.hamlet | 26 +++------ templates/default-layout.hamlet | 56 ++++++++----------- templates/default-layout.lucius | 73 ------------------------- 4 files changed, 30 insertions(+), 129 deletions(-) delete mode 100644 templates/default-layout.lucius diff --git a/src/Foundation.hs b/src/Foundation.hs index 4d767c1..1fc9372 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -142,9 +142,7 @@ instance Yesod App where -- value passed to hamletToRepHtml cannot be a widget, this allows -- you to use normal widget features in default-layout. - pc <- widgetToPageContent $ do - addStylesheet $ StaticR css_bootstrap_css - $(widgetFile "default-layout") + pc <- widgetToPageContent $(widgetFile "default-layout") withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet") -- The page to be redirected to when authentication is required. diff --git a/templates/default-layout-wrapper.hamlet b/templates/default-layout-wrapper.hamlet index 23975d9..4727263 100644 --- a/templates/default-layout-wrapper.hamlet +++ b/templates/default-layout-wrapper.hamlet @@ -1,29 +1,16 @@ $doctype 5 -\ -\ -\ -\ - + - + + #{pageTitle pc} <meta name="description" content=""> <meta name="author" content=""> - <meta name="viewport" content="width=device-width,initial-scale=1"> - + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> ^{pageHead pc} - \<!--[if lt IE 9]> - \<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> - \<![endif]--> - <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"> - <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js"> - - \<!-- Bootstrap-3.3.7 compiled and minified JavaScript --> - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"> - <script> /* The `defaultCsrfMiddleware` Middleware added in Foundation.hs adds a CSRF token to the request cookies. */ /* AJAX requests should add that token to a header to be validated by the server. */ @@ -42,11 +29,12 @@ $doctype 5 \ }); } - <script> - document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js'); <body> ^{pageBody pc} + <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"> $maybe analytics <- appAnalytics $ appSettings master <script> if(!window.location.href.match(/localhost/)){ diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index 23d09d2..9095826 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -1,41 +1,29 @@ -<!-- Static navbar --> -<nav .navbar.navbar-default.navbar-static-top> - <div .container> - <div .navbar-header> - <button type="button" .navbar-toggle.collapsed data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> - <span .sr-only>Toggle navigation - <span .icon-bar> - <span .icon-bar> - <span .icon-bar> - $maybe title <- appTitle $ appSettings master - <a class="navbar-brand" href="@{HomeR}">#{title} +<nav .navbar .navbar-expand-lg .navbar-dark.bg-dark> + $maybe title <- appTitle $ appSettings master + <a .navbar-brand href=@{HomeR}>#{title} + <button type="button" .navbar-toggler data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"> + <span .navbar-toggler-icon> - <div #navbar .collapse.navbar-collapse> - <ul .nav.navbar-nav> - $forall MenuItem label route _ <- navbarLeftFilteredMenuItems - <li :Just route == mcurrentRoute:.active> - <a href="@{route}">#{label} - - <ul .nav.navbar-nav.navbar-right> - $forall MenuItem label route _ <- navbarRightFilteredMenuItems - <li :Just route == mcurrentRoute:.active> - <a href="@{route}">#{label} - -<!-- Page Contents --> -<div .container> - $if not $ Just HomeR == mcurrentRoute - <ul .breadcrumb> - $forall bc <- parents - <li> - <a href="@{fst bc}">#{snd bc} - - <li .active>#{title} - - $maybe msg <- mmsg - <div .alert.alert-info #message>#{msg} + <div #navbar .collapse.navbar-collapse> + <ul .navbar-nav.mr-auto> + $forall MenuItem label route _ <- navbarLeftFilteredMenuItems + <li .nav-item :Just route == mcurrentRoute:.active> + <a .nav-link href=@{route}>#{label} + <ul .navbar-nav> + $forall MenuItem label route _ <- navbarRightFilteredMenuItems + <li .nav-item :Just route == mcurrentRoute:.active> + <a .nav-link href=@{route}>#{label} <main> + $if not $ null parents + <ul .breadcrumb.rounded-0> + $forall bc <- parents + <li .breadcrumb-item> + <a href=@{fst bc}>#{snd bc} + <li .breadcrumb-item.active>#{title} + $maybe msg <- mmsg + <div .alert.alert-info #message>#{msg} ^{widget} <!-- Footer --> diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius deleted file mode 100644 index cc0884a..0000000 --- a/templates/default-layout.lucius +++ /dev/null @@ -1,73 +0,0 @@ -.masthead, -.navbar { - background-color: rgb(27, 28, 29); -} - -.navbar-default .navbar-nav > .active > a { - background-color: transparent; - border-bottom: 2px solid white; -} - -.navbar-nav { - padding-bottom: 1em; -} - -.masthead { - margin-top: -21px; - color: white; - text-align: center; - min-height: 500px; -} - -.masthead .header { - max-width: 700px; - margin: 0 auto; - font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; -} - -.masthead h1.header { - margin-top: 1em; - margin-bottom: 0em; - font-size: 4.5em; - line-height: 1.2em; - font-weight: normal; - } - -.masthead h2 { - font-size: 1.7em; - font-weight: normal; -} - -.masthead .btn { - margin: 1em 0; -} - - -/* Common styles for all types */ -.bs-callout { - padding: 20px; - margin: 20px 0; - border: 1px solid #eee; - border-left-width: 5px; - border-radius: 3px; -} - -.bs-callout p:last-child { - margin-bottom: 0; -} - -.bs-callout-info { - border-left-color: #1b809e; -} - -/* Space things out */ -.bs-docs-section { - margin-bottom: 60px; -} -.bs-docs-section:last-child { - margin-bottom: 0; -} - -#message { - margin-bottom: 40px; -}