NixOS · Jan 17, 2021 · Jan 17, 2021
Showing with 95 additions and 69 deletions.

+22 −18 src/Page/Options.elm

+5 −14 src/Page/Packages.elm

+23 −0 src/Search.elm

+8 −8 src/Utils.elm

+37 −29 src/index.less
diff --git a/src/Page/Options.elm b/src/Page/Options.elm
@@ -24,6 +24,7 @@ import Html
 import Html.Attributes
     exposing
         ( class
+        , classList
         , href
         , target
         )
@@ -151,14 +152,13 @@ viewResultItem :
 viewResultItem channel _ show item =
     let
         showHtml value =
-            [ div [] <|
+            div [] <|
                 case Html.Parser.run value of
                     Ok nodes ->
                         Html.Parser.Util.toVirtualDom nodes
 
                     Err _ ->
                         []
-            ]
 
         default =
             "Not given"
@@ -212,7 +212,7 @@ viewResultItem channel _ show item =
 
         showDetails =
             if Just item.source.name == show then
-                [ div [ Html.Attributes.map SearchMsg Search.trapClick ]
+                div [ Html.Attributes.map SearchMsg Search.trapClick ]
                     [ div [] [ text "Default value" ]
                     , div [] [ withEmpty (wrapped asPreCode) item.source.default ]
                     , div [] [ text "Type" ]
@@ -222,31 +222,35 @@ viewResultItem channel _ show item =
                     , div [] [ text "Declared in" ]
                     , div [] [ withEmpty asGithubLink item.source.source ]
                     ]
-                ]
+                    |> Just
 
             else
-                []
+                Nothing
 
-        open =
+        toggle =
             SearchMsg (Search.ShowDetails item.source.name)
+
+        isOpen =
+            Just item.source.name == show
     in
     li
         [ class "option"
-        , onClick open
+        , classList [ ( "opened", isOpen ) ]
         , Search.elementId item.source.name
         ]
-        (showDetails
-            |> List.append
-                (item.source.description
-                    |> Maybe.map showHtml
-                    |> Maybe.withDefault []
-                )
-            |> List.append
-                [ Html.button
-                    [ class "search-result-button" ]
+    <|
+        List.filterMap identity
+            [ Just <|
+                Html.button
+                    [ class "search-result-button"
+                    , onClick toggle
+                    ]
                     [ text item.source.name ]
-                ]
-        )
+            , Maybe.map showHtml item.source.description
+            , Just <|
+                Search.showMoreButton toggle isOpen
+            , showDetails
+            ]
 
 
 

diff --git a/src/Page/Packages.elm b/src/Page/Packages.elm
@@ -546,11 +546,13 @@ viewResultItem channel showNixOSDetails show item =
 
         trapClick =
             Html.Attributes.map SearchMsg Search.trapClick
+
+        isOpen =
+            Just item.source.attr_name == show
     in
     li
         [ class "package"
-        , classList
-            [ ( "opened", Just item.source.attr_name == show ) ]
+        , classList [ ( "opened", isOpen ) ]
         , Search.elementId item.source.attr_name
         ]
         ([]
@@ -563,18 +565,7 @@ viewResultItem channel showNixOSDetails show item =
                     [ text item.source.attr_name ]
                 , div [] [ text <| Maybe.withDefault "" item.source.description ]
                 , shortPackageDetails
-                , a
-                    [ href "#"
-                    , onClick toggle
-                    ]
-                    [ text
-                        (if Just item.source.attr_name == show then
-                            "▲▲▲ Hide package details ▲▲▲"
-
-                         else
-                            "▾▾▾ Show more package details ▾▾▾"
-                        )
-                    ]
+                , Search.showMoreButton toggle isOpen
                 ]
         )
 

diff --git a/src/Search.elm b/src/Search.elm
@@ -18,6 +18,7 @@ module Search exposing
     , makeRequestBody
     , onClickStop
     , shouldLoad
+    , showMoreButton
     , trapClick
     , update
     , view
@@ -1143,6 +1144,28 @@ decodeAggregationBucketItem =
 
 
 
+-- Html Helper elemetnts
+
+
+showMoreButton : msg -> Bool -> Html msg
+showMoreButton toggle isOpen =
+    div [ class "result-item-show-more-wrapper" ]
+        [ a
+            [ href "#"
+            , onClick toggle
+            , class "result-item-show-more"
+            ]
+            [ text <|
+                if isOpen then
+                    "▲▲▲ Hide package details ▲▲▲"
+
+                else
+                    "▾▾▾ Show more package details ▾▾▾"
+            ]
+        ]
+
+
+
 -- Html Event Helpers
 
 

diff --git a/src/Utils.elm b/src/Utils.elm
@@ -1,13 +1,13 @@
-module Utils exposing
-    ( toggleList
-    )
+module Utils exposing (toggleList)
 
 
-toggleList : 
+toggleList :
     List a
-    -> a 
+    -> a
     -> List a
 toggleList list item =
-    if List.member item list
-    then List.filter (\x -> x /= item) list
-    else List.append list [item]
+    if List.member item list then
+        List.filter (\x -> x /= item) list
+
+    else
+        List.append list [ item ]
diff --git a/src/index.less b/src/index.less
@@ -12,6 +12,37 @@
   }
 }
 
+
+.search-result-item() {
+  .result-item-show-more-wrapper {
+      text-align: center;
+  }
+
+  // show longer details link
+  .result-item-show-more {
+    margin: 0 auto;
+    display: none;
+    text-align: center;
+    text-decoration: none;
+    line-height: 1.5em;
+    color: #666;
+    background: #FFF;
+    padding: 0 1em;
+    position: relative;
+    top: 0.75em;
+    outline: none;
+  }
+  &.opened,
+  &:hover {
+    padding-bottom: 0;
+
+    .result-item-show-more {
+      display: inline-block;
+      padding-top: 0.5em;
+    }
+  }
+}
+
 /* ------------------------------------------------------------------------- */
 /* -- Layout --------------------------------------------------------------- */
 /* ------------------------------------------------------------------------- */
@@ -275,7 +306,6 @@ header .navbar.navbar-static-top {
             font-size: 0.7em;
           }
         }
-
       }
 
       // Search results list
@@ -288,7 +318,6 @@ header .navbar.navbar-static-top {
           border-bottom: 1px solid #ccc;
           padding-bottom: 2em;
           margin-bottom: 2em;
-          text-align: center;
 
           &:last-child {
             border-bottom: 0;
@@ -314,6 +343,8 @@ header .navbar.navbar-static-top {
           }
 
           &.package {
+            .search-result-item()
+
             // short details of a pacakge
             & > :nth-child(3) {
               color: #666;
@@ -334,30 +365,6 @@ header .navbar.navbar-static-top {
               }
             }
 
-            // show longer details link
-            & > :nth-child(4) {
-              margin: 0 auto;
-              display: none;
-              text-align: center;
-              text-decoration: none;
-              line-height: 1.5em;
-              color: #666;
-              background: #FFF;
-              padding: 0 1em;
-              position: relative;
-              top: 0.75em;
-              outline: none;
-            }
-            &.opened,
-            &:hover {
-              padding-bottom: 0;
-
-              & > :nth-child(4) {
-                display: inline-block;
-                padding-top: 0.5em;
-              }
-            }
-
             // longer details of a pacakge
             & > :nth-child(5) {
               margin: 2em 0 1em 1em;
@@ -407,10 +414,11 @@ header .navbar.navbar-static-top {
           }
 
           &.option {
+            .search-result-item()
+
             // short details of a pacakge
-            & > :nth-child(3) {
-              margin-top: 1em;
-              margin-left: 1em;
+            & > :nth-child(4) {
+              margin: 2em 0 1em 1em;
               display: grid;
               grid-template-columns: 100px 1fr;
               column-gap: 1em;