From 00c29418d7f289ca3571ac9e4180ec9dd214ced3 Mon Sep 17 00:00:00 2001
From: EJ Mitchell <ejm@cupofsquid.com>
Date: Sat, 9 Apr 2022 10:34:31 -0400
Subject: [PATCH] More work on card list.

---
 public/style.css  | 36 +++++++++++++++++++++++++++---
 src/Pages/Top.elm | 56 ++++++++++++++++++++++++-----------------------
 2 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/public/style.css b/public/style.css
index 3315ff9..c289384 100644
--- a/public/style.css
+++ b/public/style.css
@@ -33,8 +33,12 @@ i.fas, i.fab {
 }
 
 .card-description {
-    width: 85%;
+    width: 95%;
+    padding: 0em;
     margin: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .card.filter {
@@ -44,10 +48,11 @@ i.fas, i.fab {
 .footer {
     background-color: none;
     border: none;
-    padding: 0.75em;
+    padding: 0.1em 0.75em;
     text-align: center;
     width: 85%;
-    margin: auto;
+    margin: 0 auto;
+    height: 10%;
 }
 
 .card-img-top {
@@ -74,6 +79,31 @@ i.fas, i.fab {
 }
 
 
+/* Search bar*/
+
+.search-bar-container {
+    margin: 2em;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+.search-bar-input, .search-dropdown {
+    margin: 0.5em;
+    height: calc(1.5em + .75rem + 2px);
+    background-color: var(--white);
+    border: 1px solid var(--dark-pink);
+    border-radius: .5rem;
+}
+
+.search-bar-input {
+    width: 30rem;
+}
+
+.search-dropdown {
+    width: 10rem;
+}
+
 /* Navbar */
 .navbar-text {
     color: var(--dark-blue);
diff --git a/src/Pages/Top.elm b/src/Pages/Top.elm
index 8c669df..d299220 100644
--- a/src/Pages/Top.elm
+++ b/src/Pages/Top.elm
@@ -289,7 +289,7 @@ viewApp app =
         app_href =
             Route.toString <| Route.App_String { app = app.slug }
     in
-    div [ class "col-md-4 mb-3 col-sm-12" ]
+    div [ class "col-md-4 mb-4 col-sm-12" ]
         [ div [ class "smaller-card" ]
             [ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
             , div [ class "card-body" ]
@@ -331,39 +331,41 @@ viewApps model =
                 ]
 
         Success ->
-            div []
-                [ div [ class "row" ]
-                    [ div [ class "col-sm-12" ] [
-                        div [] [ 
-                                form [ class "card-body form-inline" ] [
-                                    label [ for "text" ] [ text "Search" ]
-                                    , input [ class "ml-2 form-control", id "text", onInput FilterText ] []
-                                    , label [ for "level" ] [ text "  and show only items that have at least  " ]
-                                    , select [ class "ml-2 mr-4 form-control", id "level", onInput FilterScore ] [
-                                        option [ ] [ text "any" ]
-                                        , option [ value "1" ] [ text "1 (production)" ]
-                                        , option [ value "2" ] [ text "2 (beta)" ]
-                                        , option [ value "3" ] [ text "3 (alpha)" ]
-                                        , option [ value "4" ] [ text "4 (pre-alpha)" ]
+            div [ class "row justify-content-center" ]
+                [ div [ class "col-md-3" ] []
+                , div [ class "col-md-6" ]
+                    [ div [ class "row" ]
+                        [ div [ class "col-sm-12" ] [
+                            div [] [ 
+                                    form [ class "search-bar-container" ] [
+                                        label [ for "text" ] [ text "Search" ]
+                                        , input [ class "search-bar-input", id "text", onInput FilterText ] []
+                                        , label [ for "level" ] [ text "  and show only items that have at least  " ]
+                                        , select [ class "search-dropdown", id "level", onInput FilterScore ] [
+                                            option [ ] [ text "any" ]
+                                            , option [ value "1" ] [ text "1 (production)" ]
+                                            , option [ value "2" ] [ text "2 (beta)" ]
+                                            , option [ value "3" ] [ text "3 (alpha)" ]
+                                            , option [ value "4" ] [ text "4 (pre-alpha)" ]
+                                        ]
+                                        , text "builds "
                                     ]
-                                    , text "builds "
                                 ]
                             ]
                         ]
-                    ]
-                , div [ class "row" ]
-                    (List.map viewApp
-                        (model.results
-                            |> List.sortWith
-                                (by .status ASC
-                                    |> andThen (String.toLower << .name) ASC
-                                )
+                    , div [ class "row" ]
+                        (List.map viewApp
+                            (model.results
+                                |> List.sortWith
+                                    (by .status ASC
+                                        |> andThen (String.toLower << .name) ASC
+                                    )
+                            )
                         )
-                    )
+                    ]
+                , div [class "col-md-3"] []
                 ]
 
-
-
 -- HTTP