[FLORA-233] Reorder the columns of the package view in mobile view (#234

) * [FLORA-223] Reorder the columns of the package view in mobile view The right column will be easier to access on phone, as it will not be hidden by the README body. * Underline version links in package view * Systematise the error page upon a non-existent route * Lint * changelog entry
flora-pm · Oct 4, 2022 · afd75a6 · afd75a6
1 parent d9754e2
commit afd75a6
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v1.0.5 -- XXXX-XX-XX
+
+* Reorder the package page columns in mobile view (#233)
+
 ## v1.0.4 -- 2022-10-02
 
 * Colourise the search bars on focus (#215)

diff --git a/assets/css/app.css b/assets/css/app.css
@@ -111,14 +111,21 @@ a {
 }
 
 .error-code {
-  --tw-bg-opacity: 1;
+  color: var(--error-code);
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 800;
+}
 
+.error-message {
+  letter-spacing: -0.025em;
+  font-weight: 800;
+  font-size: 3rem;
+  line-height: 1;
   color: var(--error-code);
 }
 
 .error-page-button {
-  --tw-bg-opacity: 1;
-
   background-color: var(--error-button);
 }
 
@@ -174,6 +181,9 @@ div[class="bullets"] {
 }
 
 .package-body {
+  display: flex;
+  flex-direction: column;
+
   a {
     font-weight: 500;
   }
@@ -268,6 +278,10 @@ div[class="bullets"] {
   text-decoration: underline;
 }
 
+.release a:hover {
+  text-decoration: underline;
+}
+
 .package-list {
   .package-list-item {
     font-size: 1.25rem;
@@ -408,4 +422,24 @@ div[class="bullets"] {
   .dependency {
     white-space: nowrap;
   }
+
+  .package-body {
+    flex-direction: row;
+  }
+}
+
+/* smaller display rules */
+
+@media (max-width: px) {
+  .package-left-column {
+    order: 1;
+  }
+
+  .package-right-column {
+    order: 2;
+  }
+
+  .package-readme-column {
+    order: 3;
+  }
 }
diff --git a/src/FloraWeb/Server.hs b/src/FloraWeb/Server.hs
@@ -24,12 +24,18 @@ import Prometheus.Metric.Proc (procMetrics)
 import Servant
   ( Application
   , Context (..)
+  , ErrorFormatters
   , Handler
   , HasServer (hoistServerWithContext)
+  , NotFoundErrorFormatter
   , Proxy (Proxy)
+  , defaultErrorFormatters
+  , err404
   , hoistServer
+  , notFoundErrorFormatter
   , serveDirectoryWebApp
   )
+import Servant.API (getResponse)
 import Servant.Server.Generic (AsServerT, genericServeTWithContext)
 
 import Control.Exception.Safe qualified as Safe
@@ -47,6 +53,7 @@ import Data.Function ((&))
 import Data.Pool (Pool)
 import Database.PostgreSQL.Simple (Connection)
 import Effectful.Dispatch.Static
+import Effectful.Error.Static (runErrorNoCallStack)
 import Effectful.PostgreSQL.Transact.Effect (runDB)
 import Flora.Environment (DeploymentEnv, FloraEnv (..), LoggingEnv (..), getFloraEnv)
 import Flora.Environment.OddJobs qualified as OddJobs
@@ -63,8 +70,10 @@ import FloraWeb.Server.Metrics
 import FloraWeb.Server.OpenSearch
 import FloraWeb.Server.Pages qualified as Pages
 import FloraWeb.Server.Tracing
+import FloraWeb.Templates (defaultTemplateEnv, defaultsToEnv)
+import FloraWeb.Templates.Error (renderError)
 import FloraWeb.Types
-import Servant.API (getResponse)
+import Network.HTTP.Types (notFound404)
 
 runFlora :: IO ()
 runFlora = bracket (runEff getFloraEnv) (runEff . shutdownFlora) $ \env -> runEff . runCurrentTimeIO . runConcurrent $ do
@@ -171,5 +180,16 @@ naturalTransform deploymentEnv logger webEnvStore app =
     & runLog deploymentEnv logger
     & effToHandler
 
-genAuthServerContext :: Logger -> FloraEnv -> Context '[FloraAuthContext]
-genAuthServerContext logger floraEnv = authHandler logger floraEnv :. EmptyContext
+genAuthServerContext :: Logger -> FloraEnv -> Context '[FloraAuthContext, ErrorFormatters]
+genAuthServerContext logger floraEnv = authHandler logger floraEnv :. errorFormatters :. EmptyContext
+
+errorFormatters :: ErrorFormatters
+errorFormatters =
+  defaultErrorFormatters{notFoundErrorFormatter = notFoundPage}
+
+notFoundPage :: NotFoundErrorFormatter
+notFoundPage _req =
+  let result = runPureEff $ runErrorNoCallStack $ renderError (defaultsToEnv defaultTemplateEnv) notFound404
+   in case result of
+        Left err -> err
+        Right _ -> err404
diff --git a/src/FloraWeb/Templates/Error.hs b/src/FloraWeb/Templates/Error.hs
@@ -36,10 +36,10 @@ showError status = do
   div_ [class_ "px-4 py-2 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8"] $
     div_ [class_ "max-w-max mx-auto"] $
       main_ [class_ "sm:flex"] $ do
-        p_ [class_ "lg:text-5xl font-extrabold sm:text-5xl error-code"] $ toHtml $ show $ statusCode status
+        p_ [class_ "error-code"] $ toHtml $ show $ statusCode status
         div_ [class_ "sm:ml-6"] $ do
           div_ [class_ "sm:border-l sm:border-gray-200 sm:pl-6"] $ do
-            h1_ [class_ "text-6xl font-extrabold dark:text-gray-100 text-gray-900 tracking-tight sm:text-5xl"] $
+            h1_ [class_ "text-5xl error-message"] $
               toHtml $
                 statusMessage status
           div_ [class_ "mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"] $ do