Tweak score names, add intro, stylin'

public/style.css

@@ -34,16 +34,23 @@ i.fas, i.fab {
 #filter {
     position: fixed;
     left: 0;
+    background-color: var(--light-blue);
+    padding-top: 1rem;
+    height: 100%;
 }
 
 #filter > form > div {
-    margin: 0.5rem 0;
+    margin: 1rem 0;
 }
 
 #filter h3 {
     font-size: 18px;
 }
 
+#filter label {
+    display: block;
+}
+
 .category-tile {
     cursor: pointer;
 }
@@ -54,6 +61,12 @@ i.fas, i.fab {
     border-radius: 5px;
 }
 
+/* Intro */
+
+.card#intro {
+    margin: 1em 0;
+}
+
 /* Cards */
 
 .app-category {
@@ -139,4 +152,5 @@ i.fas, i.fab {
     #filter {
         width: 100%;
         position: relative;
+        margin-bottom: 1rem;
     }

src/Pages/Top.elm

@@ -262,7 +262,7 @@ view model =
 
 body : Model -> Html Msg
 body model =
-    div [ class "pt-3" ]
+    div []
         [ viewApps model
         ]
 
@@ -288,7 +288,7 @@ viewStatusBadge app =
                     "badge-dark"
     in
     span [ class ("card-link badge " ++ status_class) ]
-        [ text ("Status: " ++ String.fromInt app.status) ]
+        [ text ("Score: " ++ String.fromInt app.status) ]
 
 
 viewApp : App -> Html Msg
@@ -375,7 +375,7 @@ viewApps model =
         Success ->
             div [ class "row justify-content-center" ]
                 [ div [ class "col-md-3", id "filter" ]
-                    [ h2 [ class "app-headings" ] [ text "Filter" ]
+                    [ h2 [ class "app-headings" ] [ text "Finding things" ]
                     , form []
                         [ div []
                             [ h3 [] [ text "Categories" ]
@@ -387,14 +387,14 @@ viewApps model =
                             ]
                         , div []
                             [ h3 [] [ text "Status" ]
-                            , label [ for "level" ] [ text "At least:" ]
+                            , label [ for "level" ] [ text "Minimum score:" ]
                             , select [ class "search-dropdown", id "level", onInput FilterScore ]
                                 [ option [] [ text "any" ]
-                                , option [ value "5" ] [ text "5 (production)" ]
-                                , option [ value "4" ] [ text "4 (beta)" ]
-                                , option [ value "3" ] [ text "3 (alpha)" ]
-                                , option [ value "2" ] [ text "2 (pre-alpha)" ]
-                                , option [ value "1" ] [ text "1 (work-in-progress)" ]
+                                , option [ value "5" ] [ text "5 (amazing)" ]
+                                , option [ value "4" ] [ text "4 (good)" ]
+                                , option [ value "3" ] [ text "3 (ok)" ]
+                                , option [ value "2" ] [ text "2 (basic)" ]
+                                , option [ value "1" ] [ text "1 (chaos)" ]
                                 ]
                             ]
                         ]
@@ -406,7 +406,20 @@ viewApps model =
                                 []
                             ]
                         ]
-                    , h2 [ class "app-headings" ] [ text "Apps" ]
+                    , div [ id "intro", class "card" ] [ div [ class "card-body" ] [ 
+                            h2 [ class "app-headings card-title" ] [ text "Co-op Cloud Recipe Catalogue" ]
+                            , text "You can use these recipes (" 
+                            , a [ href
+                            "https://docs.coopcloud.tech/glossary/#recipe" ] [
+                                text "What's a recipe?"
+                            ]
+                            , text ") with "
+                            , a [ href "https://coopcloud.tech" ] [
+                                text "Co-op Cloud"
+                            ]
+                            , text "."
+                        ]
+                    ]
                     , div [ class "row" ]
                         (List.map viewApp
                             (model.results