Merge branch 'jmitchell-feature/bootstrap-nav'

jgm · Feb 20, 2017 · e21aa5c · e21aa5c
2 parents e52f6d1 + d44fd7b
commit e21aa5c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 75 deletions.
diff --git a/Yst/Render.hs b/Yst/Render.hs
@@ -75,16 +75,16 @@ dropCommon xs ys = (xs,ys)
 
 renderNav :: String -> [NavNode] -> String
 renderNav targeturl nodes = unpack $ renderText $
-  ul_ [class_ "nav tree"] $ mapM_ (renderNavNode targeturl) nodes
+  ul_ [class_ "nav navbar-nav"] $ mapM_ (renderNavNode targeturl) nodes
 
 renderNavNode :: String -> NavNode -> Html ()
 renderNavNode targeturl (NavPage tit pageurl) =
-  li_ [class_ "current" | pageurl == targeturl] (a_ [href_ pageurl'] (toHtml tit))
+  li_ [class_ "active" | pageurl == targeturl] (a_ [href_ pageurl'] (toHtml tit))
     where targetdir = takeUrlDir targeturl
           pageurl' = pack $ relUrl targetdir pageurl
 renderNavNode targeturl (NavMenu tit nodes) = li_ [] $
-    do a_ [class_ "tree-toggle nav-header"] (toHtml tit)
-       ul_ [class_ "nav tree"] (mapM_ (renderNavNode targeturl) nodes)
+    do a_ [class_ "dropdown-toggle", data_ "toggle" "dropdown"] (toHtml tit)
+       ul_ [class_ "dropdown-menu"] (mapM_ (renderNavNode targeturl) nodes)
 
 formatFromExtension :: FilePath -> Format
 formatFromExtension f = case (map toLower $ takeExtension f) of

diff --git a/demo/files/css/screen.css b/demo/files/css/screen.css
@@ -1,64 +1,9 @@
 @import url("hk-pyg.css");
 
-body { padding: 10px;
+body { padding-top: 60px;       /* make room for top-fixed navbar */
       font-size: 14pt;
-      font-family: Arial, sans-serif;
       line-height: 1.4em; }
 
 header h1 { font-size: 42pt; }
 
-main { max-width: 46em;
-       border-left: 1px solid grey; }
-
-nav { margin-top: 1em; }
-
-footer { padding: 1em; color: #888; text-align: center; font-size: 93%; }
-
-.navbar-default { background-color: transparent; border: none; }
-
-/* Tree menus */
-.nav-header:after {
-content: "\00A0\25BE";
-}
-li > ul.tree {
-  padding-left: 10px;
-}
-
-/* collapse menu at "small" size rather than phone size */
-@media (max-width: 991px) {
-    .navbar-header {
-        float: none;
-    }
-    .navbar-toggle {
-        display: block;
-    }
-    .navbar-collapse {
-        border-top: 1px solid transparent;
-        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
-    }
-    .navbar-collapse.collapse {
-        display: none!important;
-    }
-    .navbar-nav {
-        float: none!important;
-        margin: 7.5px -15px;
-    }
-    .navbar-nav>li {
-        float: none;
-    }
-    .navbar-nav>li>a {
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
-    .navbar-text {
-        float: none;
-        margin: 15px 0;
-    }
-    /* since 3.1.0 */
-    .navbar-collapse.collapse.in {
-        display: block!important;
-    }
-    .collapsing {
-        overflow: hidden!important;
-    }
-}
+footer { padding: 1em; text-align: center; }
diff --git a/demo/layout.html.st b/demo/layout.html.st
@@ -10,25 +10,21 @@
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
         <![endif]-->
     <link rel="stylesheet"
-          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" media="screen"
-          href="$root$css/screen.css">
-    <link rel="stylesheet" type="text/css" media="print"
-          href="$root$css/print.css">
+          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet"
+          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
             type="text/javascript"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
     <script src="$root$js/nav.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="$root$css/screen.css" />
     <link rel="stylesheet" type="text/css" media="print" href="$root$css/print.css" />
   </head>
   <body>
-    <div class="container-fluid">
-      <header>
-        <h1>$sitetitle$</h1>
-      </header>
-      <div class="row">
-        <nav id="navbar" class="navbar nav navbar-default col-md-2">
+    <div class="container">
+      <nav id="navbar" class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle"
                     data-toggle="collapse" data-target=".navbar-collapse">
@@ -41,12 +37,17 @@
           <div class="navbar-collapse collapse">
             $nav$
           </div>
-        </nav>
+        </div>
+      </nav>
+      <header>
+        <h1>$sitetitle$</h1>
+      </header>
+      <div class="row">
         <main role="main" class="col-md-10">
           $contents$
         </main>
       </div>
-      <footer>
+      <footer class="text-muted small">
         powered by <a href="https://github.com/jgm/yst">yst</a>
       </footer>
     </div>