NixOS · Jan 25, 2021
Showing with 67 additions and 30 deletions.

+16 −11 src/Page/Options.elm

+2 −1 src/Page/Packages.elm

+34 −8 src/Search.elm

+15 −10 src/index.less
diff --git a/src/Page/Options.elm b/src/Page/Options.elm
@@ -152,13 +152,12 @@ viewResultItem :
 viewResultItem channel _ show item =
     let
         showHtml value =
-            div [] <|
-                case Html.Parser.run value of
-                    Ok nodes ->
-                        Html.Parser.Util.toVirtualDom nodes
+            case Html.Parser.run value of
+                Ok nodes ->
+                    Html.Parser.Util.toVirtualDom nodes
 
-                    Err _ ->
-                        []
+                Err _ ->
+                    []
 
         default =
             "Not given"
@@ -213,7 +212,15 @@ viewResultItem channel _ show item =
         showDetails =
             if Just item.source.name == show then
                 div [ Html.Attributes.map SearchMsg Search.trapClick ]
-                    [ div [] [ text "Default value" ]
+                    [ div [] [ text "Name" ]
+                    , div [] [ wrapped asPreCode item.source.name ]
+                    , div [] [ text "Description" ]
+                    , div [] <|
+                        (item.source.description
+                            |> Maybe.map showHtml
+                            |> Maybe.withDefault []
+                        )
+                    , div [] [ text "Default value" ]
                     , div [] [ withEmpty (wrapped asPreCode) item.source.default ]
                     , div [] [ text "Type" ]
                     , div [] [ withEmpty asPre item.source.type_ ]
@@ -241,14 +248,12 @@ viewResultItem channel _ show item =
     <|
         List.filterMap identity
             [ Just <|
-                Html.button
+                Html.a
                     [ class "search-result-button"
                     , onClick toggle
+                    , href ""
                     ]
                     [ 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
@@ -540,9 +540,10 @@ viewResultItem channel showNixOSDetails show item =
         ([]
             |> List.append longerPackageDetails
             |> List.append
-                [ Html.button
+                [ Html.a
                     [ class "search-result-button"
                     , onClick toggle
+                    , href ""
                     ]
                     [ text item.source.attr_name ]
                 , div [] [ text <| Maybe.withDefault "" item.source.description ]

diff --git a/src/Search.elm b/src/Search.elm
@@ -82,6 +82,7 @@ type alias Model a b =
     , size : Int
     , buckets : Maybe String
     , sort : Sort
+    , showSort : Bool
     , showNixOSDetails : Bool
     }
 
@@ -174,6 +175,7 @@ init args maybeModel =
                 |> Maybe.withDefault ""
                 |> fromSortId
                 |> Maybe.withDefault Relevance
+      , showSort = False
       , showNixOSDetails = False
       }
         |> ensureLoading
@@ -213,6 +215,7 @@ elementId str =
 type Msg a b
     = NoOp
     | SortChange Sort
+    | ToggleSort
     | BucketsChange String
     | ChannelChange String
     | QueryInput String
@@ -258,6 +261,13 @@ update toRoute navKey msg model =
                 |> ensureLoading
                 |> pushUrl toRoute navKey
 
+        ToggleSort ->
+            ( { model
+                | showSort = not model.showSort
+              }
+            , Cmd.none
+            )
+
         BucketsChange buckets ->
             { model
                 | buckets =
@@ -577,7 +587,16 @@ view { toRoute, categoryName } title model viewSuccess viewBuckets outMsg =
                 RemoteData.Failure _ ->
                     "failure"
     in
-    div [ class <| "search-page " ++ resultStatus ]
+    div
+        (List.append
+            [ class <| "search-page " ++ resultStatus ]
+            (if model.showSort then
+                [ onClick (outMsg ToggleSort) ]
+
+             else
+                []
+            )
+        )
         [ h1 [] title
         , viewSearchInput outMsg categoryName model.channel model.query
         , viewResult outMsg toRoute categoryName model viewSuccess viewBuckets
@@ -781,7 +800,7 @@ viewResults model result viewSuccess toRoute outMsg categoryName =
             String.fromInt result.hits.total.value
     in
     [ div []
-        [ Html.map outMsg <| viewSortSelection toRoute model
+        [ Html.map outMsg <| viewSortSelection model
         , div []
             (List.append
                 [ text "Showing results "
@@ -812,20 +831,27 @@ viewResults model result viewSuccess toRoute outMsg categoryName =
 
 
 viewSortSelection :
-    Route.SearchRoute
-    -> Model a b
+    Model a b
     -> Html (Msg a b)
-viewSortSelection toRoute model =
-    div [ class "btn-group dropdown pull-right" ]
+viewSortSelection model =
+    div
+        [ class "btn-group dropdown pull-right"
+        , classList
+            [ ( "open", model.showSort )
+            ]
+        , onClickStop NoOp
+        ]
         [ button
             [ class "btn"
-            , attribute "data-toggle" "dropdown"
+            , onClick ToggleSort
             ]
             [ span [] [ text <| "Sort: " ]
             , span [ class "selected" ] [ text <| toSortTitle model.sort ]
             , span [ class "caret" ] []
             ]
-        , ul [ class "dropdown-menu pull-right" ]
+        , ul
+            [ class "pull-right dropdown-menu"
+            ]
             (List.append
                 [ li [ class " header" ] [ text "Sort options" ]
                 , li [ class "divider" ] []

diff --git a/src/index.less b/src/index.less
@@ -292,7 +292,7 @@ header .navbar.navbar-static-top {
 
           & > ul > li.header {
             font-weight: bold;
-            padding: 3px 10px;
+            padding: 3px 10px 0 10px;
           }
 
           & > ul > li.header:before,
@@ -339,16 +339,16 @@ header .navbar.navbar-static-top {
             display: block;
           }
 
-          // Description
-          & > :nth-child(2) {
-            font-size: 1.2em;
-            margin-bottom: 0.5em;
-            text-align: left;
-          }
-
           &.package {
             .search-result-item();
 
+            // Description
+            & > :nth-child(2) {
+              font-size: 1.2em;
+              margin-bottom: 0.5em;
+              text-align: left;
+            }
+
             // short details of a pacakge
             & > :nth-child(3) {
               color: #666;
@@ -418,10 +418,15 @@ header .navbar.navbar-static-top {
           }
 
           &.option {
-            .search-result-item();
+            margin: 0;
+            padding: 0;
+
+            & > :nth-child(1) {
+              padding: 0.5em 0;
+            }
 
             // short details of a pacakge
-            & > :nth-child(4) {
+            & > :nth-child(2) {
               margin: 2em 0 1em 1em;
               display: grid;
               grid-template-columns: 100px 1fr;