git.iko.soy/seax
on master help sign in
Updated search results page
565f8bcEvangelos Lamprou
frontend/assets/css/main.css+11−2
compare with master
unifiedsplit
@@ -7,7 +7,6 @@
7}
7}
8
8
9.button {
9.button {
10− background-color: #ff7600;
11 border: none;
10 border: none;
12 color: white;
11 color: white;
13 padding: 15px 32px;
12 padding: 15px 32px;
@@ -22,6 +21,16 @@
22}
21}
23
22
24.shadow {
23.shadow {
25− box-shadow: 0 2px 2px #888888;
24+ shadow: 0 2px 2px #888888;
25+}
26+
27+.result {
26}
28}
27
29
30+.result:hover {
31+ text-decoration: underline;
32+}
33+
34+.search:hover {
35+ text-decoration: underline;
36+}
frontend/src/Main.elm+18−25
@@ -11,6 +11,9 @@ import Element.Font as Font
11import Element.Input as Input
11import Element.Input as Input
12import Element.Keyed as Keyed
12import Element.Keyed as Keyed
13import Html.Attributes
13import Html.Attributes
14+import Html.String
15+import Html.Styled.Attributes exposing (css)
16+import Html exposing (Html, hr)
14import Json.Decode as JD
17import Json.Decode as JD
15import List.Extra
18import List.Extra
16import Set exposing (Set)
19import Set exposing (Set)
@@ -102,12 +105,12 @@ main =
102 , body =
105 , body =
103 [ view model
106 [ view model
104 |> layout
107 |> layout
105− [ Font.family
108+ [ Font.family
106− [ Font.typeface "Inter"
109+ [ Font.typeface "monospace"
107 , Font.typeface "Apple Color Emoji"
110 , Font.typeface "Apple Color Emoji"
108 ]
111 ]
109 , clipX
112 , clipX
110− ]
113+ ]
111 ]
114 ]
112 }
115 }
113 , subscriptions = \model -> Animator.toSubscription Tick model (animator model)
116 , subscriptions = \model -> Animator.toSubscription Tick model (animator model)
@@ -146,19 +149,16 @@ main =
146
149
147logoView : List (Attribute Msg) -> Element Msg
150logoView : List (Attribute Msg) -> Element Msg
148logoView attributes =
151logoView attributes =
149− Element.image ( List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes )
152+ Element.image (List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes)
150− { src = "assets/img/logo.png", description = "The logo" }
153+ { src = "assets/img/logo.png", description = "%seax logo" }
151
154
152view : Model -> Element Msg
155view : Model -> Element Msg
153view model =
156view model =
154 case model.initiatedSearch of
157 case model.initiatedSearch of
155 Nothing ->
158 Nothing ->
156 column [ centerX, centerY, padding 8, spacing 16 ]
159 column [ centerX, centerY, padding 8, spacing 16 ]
157− [
158− -- el [ centerX, Font.size 67, Font.heavy] (text "%seax") ,
159− -- Element.image [ centerX, width (px 510), height (px 161), Html.Attributes.id "tilt" |> htmlAttribute ] { src = "assets/img/logo.png", description = "The logo" },
160− logoView [centerX, width (px 510), height (px 161) ],
160+ [ logoView [ centerX, width (px 510), height (px 161) ]
161− searchView model
161+ , searchView model
162 ]
162 ]
163
163
164 Just _ ->
164 Just _ ->
@@ -205,11 +205,10 @@ view model =
205 |> wrappedRow
205 |> wrappedRow
206 [ spacing 8
206 [ spacing 8
207 , width fill
207 , width fill
208−
209− -- , padding 16
210 ]
208 ]
211 ]
209 ]
212 ]
210 ]
211+ , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])
213 , Keyed.column [ width (minimum 0 fill), padding 8 ]
212 , Keyed.column [ width (minimum 0 fill), padding 8 ]
214 (model.searchResults
213 (model.searchResults
215 |> List.filter
214 |> List.filter
@@ -253,7 +252,9 @@ view model =
253 ++ "px"
252 ++ "px"
254 )
253 )
255 |> htmlAttribute
254 |> htmlAttribute
256− , Html.Attributes.style "position" "absolute" |> htmlAttribute
255+ , Html.Attributes.style "margin-bottom" "1em" |> htmlAttribute
256+ , Html.Attributes.style "padding" "0.5em" |> htmlAttribute
257+ , Html.Attributes.class "result" |> htmlAttribute
257 ]
258 ]
258 [ text title
259 [ text title
259 |> el
260 |> el
@@ -269,6 +270,7 @@ view model =
269 )
270 )
270 )
271 )
271 )
272 )
273+ , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])
272 ]
274 ]
273
275
274
276
@@ -285,24 +287,15 @@ searchView model =
285 { label =
287 { label =
286 text "search"
288 text "search"
287 |> el
289 |> el
288− [ Html.Attributes.class "button" |> htmlAttribute
290+ [ Html.Attributes.class "search" |> htmlAttribute
289− , Border.width 4
291+ , Border.width 2
290− , padding 4
292+ , padding 6
291 , Font.size 29
293 , Font.size 29
292− , Font.bold
293− , Border.color (rgb 0 0 0)
294− , Background.color (rgb 0 0 0)
295− , Font.color (rgb 1 1 1)
296− , mouseOver
297− [ Font.color (rgb 0 0 0)
298− , Background.color (rgb 1 1 1)
299− ]
300 ]
294 ]
301 , onPress = Just (Search model.search)
295 , onPress = Just (Search model.search)
302 }
296 }
303 ]
297 ]
304
298
305−
306update : Msg -> Model -> ( Model, Ur.Cmd.Cmd Msg )
299update : Msg -> Model -> ( Model, Ur.Cmd.Cmd Msg )
307update msg model =
300update msg model =
308 case msg of
301 case msg of