Merge pull request #266 from naehrstoff/ui-refinements

UI Refinements
purescript · Jan 6, 2017 · 46bebaf · 46bebaf
2 parents 25cbf90 + 7168a41
commit 46bebaf
Show file tree

Hide file tree

Showing 15 changed files with 865 additions and 351 deletions.
diff --git a/src/Css.hs b/src/Css.hs
@@ -75,15 +75,15 @@ darkForeground = fromRGB 240 240 240
 linkColor :: HSV
 linkColor = fromRGB 196 149 58
 
+linkActiveColor :: HSV
+linkActiveColor = fromRGB 123 89 4
+
 errorBackgroundColor :: HSV
 errorBackgroundColor = fromRGB 255 240 240
 
 errorBorderColor :: HSV
 errorBorderColor = fromRGB 200 80 80
 
-successBackgroundColor :: HSV
-successBackgroundColor = fromRGB 150 240 150
-
 notAvailableBackgroundColor :: HSV
 notAvailableBackgroundColor = fromRGB 240 240 150
 
@@ -92,3 +92,9 @@ codeForeground = fromRGB 25 74 91
 
 codeBackground :: HSV
 codeBackground = fromRGB 241 245 249
+
+lightGlyphColor :: HSV
+lightGlyphColor = fromRGB 160 160 160
+
+lightTypeColor :: HSV
+lightTypeColor = fromRGB 102 102 102
diff --git a/src/Handler/Packages.hs b/src/Handler/Packages.hs
@@ -145,15 +145,15 @@ getPackageVersionDocsR (PathPackageName pkgName) (PathVersion version) =
 getPackageVersionModuleDocsR :: PathPackageName -> PathVersion -> Text -> Handler Html
 getPackageVersionModuleDocsR (PathPackageName pkgName) (PathVersion version) mnString =
   cacheHtml $ findPackage pkgName version $ \pkg@D.Package{..} -> do
+    moduleList <- renderModuleList pkg
     mhtmlDocs <- renderHtmlDocs pkg mnString
     case mhtmlDocs of
       Nothing -> notFound
       Just htmlDocs ->
         defaultLayout $ do
           let mn = P.moduleNameFromString mnString
           setTitle (toHtml (mnString <> " - " <> runPackageName pkgName))
-          documentationPage pkg $
-            $(widgetFile "packageVersionModuleDocs")
+          $(widgetFile "packageVersionModuleDocs")
 
 getBuiltinDocsR :: Text -> Handler Html
 getBuiltinDocsR mnString = do
@@ -163,10 +163,12 @@ getBuiltinDocsR mnString = do
         setTitle (toHtml mnString)
         let mn = P.moduleNameFromString mnString
         let htmlDocs = primDocs
-        let widget = $(widgetFile "packageVersionModuleDocs")
         [whamlet|
-          <div .col.col-main>
-            ^{widget}
+          <div .col.col--main>
+            <div .page-title.clearfix>
+              <div .page-title__label>Module
+              <h1 .page-title__title>#{insertBreaks mn}
+            #{htmlDocs}
           |]
     _ ->
       defaultLayout404 $ [whamlet|
@@ -207,23 +209,6 @@ versionSelector pkgName version = do
   availableVersionsUrl <- getUrlRender <*> pure route
   $(widgetFile "versionSelector")
 
-documentationPage ::
-  D.VerifiedPackage -> WidgetT App IO () -> WidgetT App IO ()
-documentationPage pkg@D.Package{..} widget =
-  let pkgName = D.packageName pkg
-  in [whamlet|
-    <div .clearfix>
-      <div .col.col-main>
-        <h1>
-          package
-          <a href=@{packageRoute pkg}>#{runPackageName pkgName}
-
-      ^{versionSelector pkgName pkgVersion}
-
-    <div .col.col-main>
-      ^{widget}
-    |]
-
 uploadPackageForm :: Html -> MForm Handler (FormResult FileInfo, Widget)
 uploadPackageForm = renderDivs $ areq fileField settings Nothing
   where

diff --git a/src/Model/DocsAsHtml.hs b/src/Model/DocsAsHtml.hs
@@ -147,14 +147,17 @@ declAsHtml :: HtmlRenderContext -> Declaration -> Html ()
 declAsHtml r d@Declaration{..} = do
   let declFragment = makeFragment (declNamespace d) declTitle
   div_ [class_ "decl", id_ (T.drop 1 declFragment)] $ do
-    linkTo declFragment $
-      h3_ (text declTitle)
-    div_ [class_ "decl-inner"] $ do
+    h3_ [class_ "decl__title clearfix"] $ do
+      a_ [class_ "decl__anchor", href_ declFragment] "#"
+      text declTitle
+      for_ declSourceSpan (linkToSource r)
+
+    div_ [class_ "decl__body"] $ do
       case declInfo of
         AliasDeclaration fixity alias ->
           renderAlias fixity alias
         _ ->
-          code_ [class_ "code-block"] $
+          pre_ [class_ "decl__signature"] $ code_ $
             codeAsHtml r (Render.renderDeclaration d)
 
       for_ declComments renderComments
@@ -172,8 +175,10 @@ declAsHtml r d@Declaration{..} = do
       unless (null instances) $ do
         h4_ "Instances"
         renderChildren r instances
-
-      for_ declSourceSpan (linkToSource r)
+  where
+    linkToSource :: HtmlRenderContext -> P.SourceSpan -> Html ()
+    linkToSource ctx srcspan =
+      span_ [class_ "decl__source"] (linkTo (renderSourceLink ctx srcspan) (text "Source"))
 
 renderChildren :: HtmlRenderContext -> [ChildDeclaration] -> Html ()
 renderChildren _ [] = return ()
@@ -244,10 +249,6 @@ linkToDeclaration :: HtmlRenderContext ->
 linkToDeclaration r target containMn =
   maybe id (renderLink r) (buildDocLink r target containMn)
 
-linkToSource :: HtmlRenderContext -> P.SourceSpan -> Html ()
-linkToSource r srcspan =
-  p_ (linkTo (renderSourceLink r srcspan) (text "Source"))
-
 renderAlias :: P.Fixity -> FixityAlias -> Html ()
 renderAlias (P.Fixity associativity precedence) alias =
   p_ $ do

diff --git a/src/TemplateHelpers.hs b/src/TemplateHelpers.hs
@@ -31,7 +31,7 @@ linkToGithub (user, repo) =
 joinLicenses :: [Text] -> Maybe Html
 joinLicenses ls
   | null ls   = Nothing
-  | otherwise = Just (strong (toHtml (intercalate "/" ls)))
+  | otherwise = Just (toHtml (intercalate "/" ls))
 
 renderVersionRange :: Bower.VersionRange -> Html
 renderVersionRange = toHtml . Bower.runVersionRange
@@ -71,9 +71,10 @@ renderModuleList pkg = do
   moduleLinks <- traverse (linkToModule pkg . D.Local) moduleNames
 
   withUrlRenderer [hamlet|
-    <ul .documentation-contents>
+    <dl .grouped-list>
+      <dt .grouped-list__title>Modules
       $forall link <- moduleLinks
-        <li>#{link}
+        <dd .grouped-list__item>#{link}
     |]
 
 -- | Insert <wbr> elements in between elements of a module name, in order to
@@ -105,18 +106,18 @@ renderReadme = \case
     html'
   Left APIRateLimited ->
     [shamlet|
-      <div .message .not-available>
+      <div .message .message--not-available>
         No readme available (due to rate limiting). Please try again later.
     |]
   Left ReadmeNotFound ->
     [shamlet|
-      <div .message .not-available>
+      <div .message .message--not-available>
         No readme found in the repository at this tag. If you are the maintainer,
         perhaps consider adding one in the next release.
     |]
   Left (OtherReason _) ->
     [shamlet|
-      <div .message .not-available>
+      <div .message .message--not-available>
         No readme available, for some unexpected reason (which has been logged).
         Perhaps
         <a href="https://github.com/purescript/pursuit/issues/new">

diff --git a/static/js/Pursuit.js b/static/js/Pursuit.js
@@ -92,7 +92,7 @@ function initializeUploadForm() {
 
     // remove previous error messages. Having one rendered by the server on the
     // page at the same time as one rendered client-side is a bit weird.
-    var errors = document.querySelectorAll('div.message.error')
+    var errors = document.querySelectorAll('div.message.message--error')
     Array.prototype.forEach.call(errors,
       function(el) {
         el.parentNode.removeChild(el)

diff --git a/templates/default-layout-wrapper.hamlet b/templates/default-layout-wrapper.hamlet
@@ -1,12 +1,12 @@
 $doctype 5
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>#{pageTitle'}
 
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" type="text/css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i" type="text/css" rel="stylesheet">
     <link href=@{StaticR css_normalize_css} type="text/css" rel="stylesheet">
     <script type="text/javascript" src=@{StaticR js_js_cookie_js}>
     <script type="text/javascript" src=@{StaticR js_Markup_js}>

diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
@@ -1,19 +1,21 @@
 <div .everything-except-footer>
   <div .top-banner .clearfix>
     <div .container .clearfix>
-      <div .banner-item .pursuit>
-        <a .pursuit href=@{HomeR}>Pursuit
+      <a .top-banner__logo href=@{HomeR}>Pursuit
 
-      <form .banner-item role="search" action=@{SearchR} method="get">
-        <label .sr-only for="q">Search for packages, types, and functions
-        <input .form-control #search-input type="text" name="q" :isSearch:autofocus
-          data-focus-placeholder="Search for packages, functions..."
-          data-normal-placeholder="Search for packages, functions... (S to focus)"
-          placeholder="Search for packages, types, functions... (S to focus)"
-          value=#{searchText}>
+      <div .top-banner__actions>
+        <div .top-banner__actions__item>
+          <a href=@{HelpR}>Help
+        <div .top-banner__actions__item>
+          <a href=@{UploadPackageR}>Publish
 
-      <div .banner-item .upload>
-        <a href=@{UploadPackageR}>Upload
+      <form .top-banner__form role="search" action=@{SearchR} method="get">
+        <label .hide-visually for="search-input">Search for packages, types, and functions
+        <input #search-input type="text" name="q" :isSearch:autofocus
+          data-focus-placeholder="Search for packages, functions …"
+          data-normal-placeholder="Search for packages, functions … (S to focus)"
+          placeholder="Search for packages, types, functions … (S to focus)"
+          value=#{searchText}>
 
   <main .container .clearfix role="main">
     <div #message-container>