New homepage and new top nav (#52)

Foundation.hs

@@ -11,6 +11,7 @@ import           Settings (widgetFile, Extra (..), GoogleAuth (..))
 import           Settings.Development (development)
 import           Settings.StaticFiles
 import qualified System.Random.MWC as MWC
+import           Text.Blaze
 import           Text.Hamlet (hamletFile)
 import           Text.Jasmine (minifym)
 import           Types
@@ -153,6 +154,12 @@ instance Yesod App where
     maximumContentLength _ (Just UploadHaddockR{}) = Just 100000000
     maximumContentLength _ _ = Just 2000000
 
+instance ToMarkup (Route App) where
+    toMarkup c = case c of
+                   AllSnapshotsR{} -> "Snapshots"
+                   UploadStackageR{} -> "Upload"
+                   AuthR (LoginR{}) -> "Login"
+
 -- How to run database actions.
 instance YesodPersist App where
     type YesodPersistBackend App = SqlBackend

Handler/Home.hs

@@ -13,8 +13,8 @@ import Yesod.GitRepo (grContent)
 -- The majority of the code you will write in Yesod lives in these handler
 -- functions. You can spread them across multiple files if you are so
 -- inclined, or create a single monolithic file.
-getHomeR' :: Handler Html
+getHomeR :: Handler Html
-getHomeR' = contentHelper "Stackage Server" wcHomepage
+getHomeR = contentHelper "Stackage Server" wcHomepage
 
 getAuthorsR :: Handler Html
 getAuthorsR = contentHelper "Library Authors" wcAuthors
@@ -27,15 +27,11 @@ contentHelper title accessor = do
     homepage <- getYesod >>= fmap accessor . liftIO . grContent . websiteContent
     defaultLayout $ do
         setTitle title
-        $(combineStylesheets 'StaticR
-            [ css_bootstrap_modified_css
-            , css_bootstrap_responsive_modified_css
-            ])
         toWidget homepage
 
 -- FIXME remove this and switch to above getHomeR' when new homepage is ready
-getHomeR :: Handler Html
+getHomeR' :: Handler Html
-getHomeR = do
+getHomeR' = do
     windowsLatest <- linkFor "unstable-ghc78hp-inclusive"
     restLatest    <- linkFor "unstable-ghc78-inclusive"
     defaultLayout $ do

design/logo.svg

@@ -597,9 +597,9 @@
      borderopacity="1"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
+     inkscape:zoom="1"
-     inkscape:cx="506.30836"
+     inkscape:cx="86.502676"
-     inkscape:cy="262.58608"
+     inkscape:cy="171.32119"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -607,7 +607,7 @@
      fit-margin-left="0"
      fit-margin-right="0"
      fit-margin-bottom="0"
-     inkscape:window-width="2880"
+     inkscape:window-width="1440"
      inkscape:window-height="1760"
      inkscape:window-x="0"
      inkscape:window-y="40"
@@ -620,7 +620,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -1093,18 +1093,6 @@
        y="126.88701"
        rx="9"
        ry="9" />
-    <text
-       xml:space="preserve"
-       style="font-size:27.06111908px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Impact;-inkscape-font-specification:Impact"
-       x="-39.449871"
-       y="173.42827"
-       id="text5279-1-1-2-8-7-2"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan5281-4-7-5-0-7-2"
-         x="-39.449871"
-         y="173.42827"
-         style="font-size:47.54410553px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#ffffff;fill-opacity:1;font-family:Impact;-inkscape-font-specification:Impact">S</tspan></text>
     <rect
        style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79500002;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        id="rect6209-0"
@@ -1119,5 +1107,17 @@
        width="227.02972"
        id="rect6295"
        style="color:#000000;fill:#0981c3;fill-opacity:0.27899686;fill-rule:nonzero;stroke:none;stroke-width:0.79500002000000003;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <text
+       xml:space="preserve"
+       style="font-size:27.86038971px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Swasadee;-inkscape-font-specification:Swasadee"
+       x="-40.771191"
+       y="173.38159"
+       id="text5279-1-1-2-8-7-7"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan5281-4-7-5-0-7-5"
+         x="-40.771191"
+         y="173.38159"
+         style="font-size:48.94834518px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#ffffff;fill-opacity:1;font-family:Swasadee;-inkscape-font-specification:Swasadee">S</tspan></text>
   </g>
 </svg>

templates/all-snapshots.hamlet

@@ -1,14 +1,15 @@
 <div .container>
-    <h1>Snapshots
+    <div .content>
-    $forall stackages <- groups
+        <h1>Snapshots
-        $forall (_, _, uploaded, _, _) <- take 1 stackages
+        $forall stackages <- groups
-            <h3>
+            $forall (_, _, uploaded, _, _) <- take 1 stackages
-                #{uploaded}
+                <h3>
-        <ul .snapshots>
+                    #{uploaded}
-            $forall (ident, title, _uploaded, display, handle) <- stackages
+            <ul .snapshots>
-                <li>
+                $forall (ident, title, _uploaded, display, handle) <- stackages
-                    <strong>
+                    <li>
-                        <a href=@{SnapshotR ident StackageHomeR}>
+                        <strong>
-                            #{title}
+                            <a href=@{SnapshotR ident StackageHomeR}>
-                    <p>
+                                #{title}
-                        #{display} (#{handle})
+                        <p>
+                            #{display} (#{handle})

templates/default-layout-wrapper.hamlet

@@ -28,9 +28,6 @@ $newline never
         <script>
           document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
     <body>
-        <a href="https://github.com/fpco/stackage-server">
-            <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
-
         <div id="main" role="main">
             ^{pageBody pc}
 

templates/default-layout.hamlet

@@ -1,40 +1,39 @@
-<div .wrap>
+<div class="navbar navbar-inverse navbar-static-top">
+  <div class="navbar-inner">
+    <div class="container">
+      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="icon-bar">
+        <span class="icon-bar">
+        <span class="icon-bar">
+      <a class="brand" href="/">
+        <img src="/static/img/stackage.png" title="FP Complete">
+      <div>
+        <ul class="nav">
+          $forall route <- [AllSnapshotsR,UploadStackageR,AuthR LoginR]
+            $maybe current <- cur
+              $if route == current
+                <li .active>
+                  <a href=@{route}>#{route}
+              $else
+                <li>
+                  <a href=@{route}>#{route}
+            $nothing
+              <li>
+                  <a href=@{route}>#{route}
+
+
+$maybe msg <- mmsg
     <div .container>
-        <a .logo href=@{HomeR}>
+        <div .alert .alter-info>#{msg}
-            <img src=@{StaticR img_logo_png}>
 
-        <div .navbar .navbar-default role=navigation>
+$case cur
-            <ul .nav>
+  $of Just (AuthR _)
-                <li>
+      <div .container>
-                    <a href=@{AllSnapshotsR}>
+          <h1>Authorization
-                        Snapshots
+          <p>Please login with an authorization method below:
-                <li>
-                    <a href=@{PackageListR}>
-                        Packages
-                <li>
-                    <a href=@{UploadStackageR}>
-                        Upload
-                 $maybe Entity _ user <- muser
-                     <li>
-                         <a href=@{ProfileR}>
-                             <span .user-handle>
-                                 #{userHandle user}
-                     <li>
-                         <a href=@{AuthR LogoutR}>Logout
-                 $nothing
-                     <li>
-                         <a href=@{AuthR LoginR}>Login
-
-    $maybe msg <- mmsg
-        <div .container>
-            <div .alert .alter-info>#{msg}
-
-    $case cur
-      $of Just (AuthR _)
-          <div .container>
-              ^{widget}
-      $of _
           ^{widget}
+  $of _
+      ^{widget}
 
 <div .footer>
   <div .container>

templates/default-layout.lucius

@@ -9,74 +9,35 @@ html {
 
 body {
   background: #f0f0f0;
-  margin:0 0 4em;
-  padding:0;
   font-family: 'Lato', sans-serif;
   text-shadow: 1px 1px 1px #ffffff;
-  font-size: 20px;
+  margin-bottom: 4em;
-  line-height: 30px;
-}
-
-p {
-  margin-top: 20px;
-}
-
-code {
-  color: #555;
-}
-
-.wrap {
-  padding-top: 2em;
-  padding-left: 15px;
-  padding-right: 15px;
   padding-bottom: 2em;
 }
 
-h1,h2 {
+code,pre {
-  font-weight: normal;
+  color: #555;
-  color: #06537d;
+  font-family: "ubuntu mono", monospace;
-  font-size: 45px;
 }
 
-li + li {
+.brand > img {
-  margin-top: 0.5em;
+  height: 20px;
 }
 
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+.navbar-inverse .navbar-inner {
-   Logo
+  background: #0981c3;
-   */
+}
-
+.navbar-inverse .navbar-inner .btn-navbar {
-.logo {
+  background: #0981c3;
-  display: block;
+}
-  width: 300px;
+.navbar-inverse .navbar-inner * {
-  border: 0;
+  color: #fff !important
+}
+.navbar-inverse .nav .active>a, .navbar-inverse .nav .active>a:hover, .navbar-inverse .nav .active>a:focus {
+  background: #0981c3 !important;
 }
 
-
+.navbar-inner { border-color: #06537d !important; }
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-   Navbar
-   */
-
-.navbar .nav > li > a {
-  padding-left: 0;
-  color: #0981c3 !important;
-}
-
-.navbar {
-  margin-top: 20px;
-  font-size: 25px;
-  .nav {
-    margin: auto;
-  }
-  li {
-    margin-top: 0;
-  }
-}
-
-
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-   Footer
-   */
 
 .footer {
   text-shadow: none;
@@ -106,3 +67,12 @@ li + li {
 .alert {
   margin-top: 1em;
 }
+
+h1,h2,h3,h4,h5 {
+  color: #06537d
+}
+
+.content {
+  font-size: 20px;
+  line-height: 30px;
+}

templates/homepage.lucius

@@ -1,82 +1 @@
-h2 {
-  margin-top: 50px;
-  margin-bottom: 40px;
-}
 
-.recommended-snapshots {
-  margin-top: 30px;
-  margin-bottom: 20px;
-}
-
-.how-stackage-works {
-  margin-bottom: 50px;
-}
-
-.snapshots {
-  margin-left: 0;
-  padding-left: 0;
-  td {
-    padding: 0 0.25em 0.25em 0.25em;
-    a { font-weight: bold }
-  }
-}
-
-.stackage-process {
-  p {
-    font-size: 30px;
-    line-height: 35px;
-  }
-  .github {
-    width: 150px;
-  }
-  .jenkins {
-    width: 100px;
-  }
-  .ping {
-    width: 100px;
-  }
-  .stackage {
-    width: 100px;
-  }
-  .haskell {
-    width: 120px;
-  }
-}
-
-.stackage-process + .stackage-process {
-  margin-top: 50px;
-}
-
-.steps-to-contribute {
-  h2 {
-    margin-bottom: 0;
-  }
-  h2 + p {
-    margin-bottom: 1em;
-  }
-}
-
-.operating-systems {
-  margin-top: 1em;
-}
-
-.getting-started {
-  margin-bottom: 0;
-}
-
-/*   ul { */
-/*     margin-top: 30px; */
-/*     text-align: left; */
-/*   } */
-/*   ul, li, p { */
-/*     font-size: 20px; */
-/*     line-height: 25px; */
-/*   } */
-/*   li { */
-/*     margin-bottom: 0.5em */
-/* } */
-/* } */
-
-h2.getting-started {
-  margin-top: 0.7em;
-}

templates/package-list.hamlet

@@ -1,4 +1,4 @@
-<div .container>
+<div .container .content>
     <h1>Packages
     $maybe (back, backText) <- mback
         <p>

templates/package.hamlet

@@ -1,5 +1,5 @@
 $newline never
-<div .container #snapshot-home>
+<div .container #snapshot-home .content>
     <div .row>
         <div .span12>
             <h1>

templates/package.lucius

@@ -1,6 +1,5 @@
 #snapshot-home {
   margin-top: 1em;
-  border-top: 1px solid #ddd;
   padding-top: 0.5em;
 }
 .wrap {