New homepage and new top nav (#52)

8 years ago · f98e513f7a
parent 0364b87aa1
commit f98e513f7a
13 changed files with 100 additions and 212 deletions
--- a/Foundation.hs
+++ b/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
--- a/Handler/Home.hs
+++ b/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' = contentHelper "Stackage Server" wcHomepage
+getHomeR :: Handler Html
+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 = do
+getHomeR' :: Handler Html
+getHomeR' = do
    windowsLatest <- linkFor "unstable-ghc78hp-inclusive"
    restLatest    <- linkFor "unstable-ghc78-inclusive"
    defaultLayout $ do
--- a/design/logo.svg
+++ b/design/logo.svg
@ -597,9 +597,9 @@
     borderopacity="1"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="506.30836"
-     inkscape:cy="262.58608"
+     inkscape:zoom="1"
+     inkscape:cx="86.502676"
+     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>
--- a/static/img/stackage.png
+++ b/static/img/stackage.png
--- a/templates/all-snapshots.hamlet
+++ b/templates/all-snapshots.hamlet
@ -1,14 +1,15 @@
 <div .container>
-    <h1>Snapshots
-    $forall stackages <- groups
-        $forall (_, _, uploaded, _, _) <- take 1 stackages
-            <h3>
-                #{uploaded}
-        <ul .snapshots>
-            $forall (ident, title, _uploaded, display, handle) <- stackages
-                <li>
-                    <strong>
-                        <a href=@{SnapshotR ident StackageHomeR}>
-                            #{title}
-                    <p>
-                        #{display} (#{handle})
+    <div .content>
+        <h1>Snapshots
+        $forall stackages <- groups
+            $forall (_, _, uploaded, _, _) <- take 1 stackages
+                <h3>
+                    #{uploaded}
+            <ul .snapshots>
+                $forall (ident, title, _uploaded, display, handle) <- stackages
+                    <li>
+                        <strong>
+                            <a href=@{SnapshotR ident StackageHomeR}>
+                                #{title}
+                        <p>
+                            #{display} (#{handle})
--- a/templates/default-layout-wrapper.hamlet
+++ b/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}

--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@ -1,40 +1,39 @@
-<div .wrap>
-    <div .container>
-        <a .logo href=@{HomeR}>
-            <img src=@{StaticR img_logo_png}>
-
-        <div .navbar .navbar-default role=navigation>
-            <ul .nav>
-                <li>
-                    <a href=@{AllSnapshotsR}>
-                        Snapshots
+<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=@{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
+                  <a href=@{route}>#{route}
+            $nothing
+              <li>
+                  <a href=@{route}>#{route}
+

-    $maybe msg <- mmsg
-        <div .container>
-            <div .alert .alter-info>#{msg}
+$maybe msg <- mmsg
+    <div .container>
+        <div .alert .alter-info>#{msg}

-    $case cur
-      $of Just (AuthR _)
-          <div .container>
-              ^{widget}
-      $of _
+$case cur
+  $of Just (AuthR _)
+      <div .container>
+          <h1>Authorization
+          <p>Please login with an authorization method below:
          ^{widget}
+  $of _
+      ^{widget}

 <div .footer>
  <div .container>
--- a/templates/default-layout.julius
+++ b/templates/default-layout.julius
--- a/templates/default-layout.lucius
+++ b/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;
-  line-height: 30px;
-}
-
-p {
-  margin-top: 20px;
+  margin-bottom: 4em;
+  padding-bottom: 2em;
 }

-code {
+code,pre {
  color: #555;
+  font-family: "ubuntu mono", monospace;
 }

-.wrap {
-  padding-top: 2em;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 2em;
+.brand > img {
+  height: 20px;
 }

-h1,h2 {
-  font-weight: normal;
-  color: #06537d;
-  font-size: 45px;
+.navbar-inverse .navbar-inner {
+  background: #0981c3;
 }
-
-li + li {
-  margin-top: 0.5em;
+.navbar-inverse .navbar-inner .btn-navbar {
+  background: #0981c3;
 }
-
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-   Logo
-   */
-
-.logo {
-  display: block;
-  width: 300px;
-  border: 0;
+.navbar-inverse .navbar-inner * {
+  color: #fff !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;
-  }
+.navbar-inverse .nav .active>a, .navbar-inverse .nav .active>a:hover, .navbar-inverse .nav .active>a:focus {
+  background: #0981c3 !important;
 }

-
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-   Footer
-   */
+.navbar-inner { border-color: #06537d !important; }

 .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;
+}
--- a/templates/homepage.lucius
+++ b/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;
-}
--- a/templates/package-list.hamlet
+++ b/templates/package-list.hamlet
@ -1,4 +1,4 @@
-<div .container>
+<div .container .content>
    <h1>Packages
    $maybe (back, backText) <- mback
        <p>
--- a/templates/package.hamlet
+++ b/templates/package.hamlet
@ -1,5 +1,5 @@
 $newline never
-<div .container #snapshot-home>
+<div .container #snapshot-home .content>
    <div .row>
        <div .span12>
            <h1>
--- a/templates/package.lucius
+++ b/templates/package.lucius
@ -1,6 +1,5 @@
 #snapshot-home {
  margin-top: 1em;
-  border-top: 1px solid #ddd;
  padding-top: 0.5em;
 }
 .wrap {