Start designing a Bootstrap v4 based site layout, it's boring so far but the navbar is okay?
This commit is contained in:
parent
3d4c21e18e
commit
9b6305f8c9
GPG key ID:
3844A6973C6058F1
4 changed files with 30 additions and 129 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,29 +1,16 @@
|
|||
$doctype 5
|
||||
\<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
||||
\<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
||||
\<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
||||
\<!--[if gt IE 8]><!-->
|
||||
<html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>#{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/)){
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue