Merge pull request #9 from vagos/frontend

Restored fonts and added some more infos in the search results page

frontend/assets/css/main.css

@@ -34,3 +34,24 @@
 .search:hover {
     text-decoration: underline; 
 }
+
+.wavy {
+  animation-name: wavy;
+  animation-duration: 4.2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+@keyframes wavy {
+  0% {
+    top: 0px;
+  }
+  50% {
+    top: -15px;
+  }
+  100% {
+    top: 0px;
+  }
+}

frontend/src/Main.elm

@@ -27,7 +27,6 @@ import Ur.Sub
 import Ur.Types exposing (Noun(..))
 import Html.String
 import List
-import Css
 import Html.Styled.Attributes exposing (css)
 import Html.Parser
 import String.Extra exposing (stripTags)
@@ -107,9 +106,16 @@ main =
                 , body =
                     [ view model
                         |> layout
-                        [ Font.family
+                            [ Font.family
                                 [ Font.typeface "monospace"
-                                , Font.typeface "Apple Color Emoji"
+                                , Font.typeface "system-ui"
+                                , Font.typeface "-apple-system"
+                                , Font.typeface "BlinkMacSystemFont"
+                                , Font.typeface "Segoe UI"
+                                , Font.typeface "Roboto"
+                                , Font.typeface "Helvetica"
+                                , Font.typeface "Arial"
+                                , Font.sansSerif
                                 ]
                             , clipX
                         ]
@@ -154,6 +160,29 @@ logoView attributes =
     Element.image (List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes)
         { src = "assets/img/logo.png", description = "%seax logo" }
 
+noSearchResultsView : Element Msg
+noSearchResultsView = Element.el
+        [ Html.Attributes.style "padding" "1em" |> htmlAttribute
+        , width (px 500)
+        , Font.size 15
+        , Html.Attributes.class "wavy" |> htmlAttribute
+        ]
+        (Element.text """No results found... :) 
+We'll try and find you something. 
+Just come back later.""")
+
+subtleLink : String -> String -> Element Msg
+subtleLink text href =
+    Element.el
+        [ Font.size 15
+        , pointer
+        , mouseOver
+            [ Font.color (rgb 0.7 0.7 0.7)
+            ]
+        ]
+        (Element.html (Html.a [ Html.Attributes.href href ] [ Html.text text ]))
+
+
 view : Model -> Element Msg
 view model =
     case model.initiatedSearch of
@@ -214,8 +243,10 @@ view model =
                         ]
                         )
                     ]
-                , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])
+                , (if List.isEmpty model.searchResults then
-                , Keyed.column [ width (minimum 0 fill), padding 8 ]
+                    noSearchResultsView
+                else
+                Keyed.column [ width (minimum 0 fill), padding 8 ]
                     (model.searchResults
                         |> List.filter
                             (\{ engines } ->
@@ -274,9 +305,13 @@ view model =
                                     ]
                                 )
                             )
-                    )
+                    ))
                 , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])
+                , row [ centerX, padding 10, spacing 10]
+                [ subtleLink "[About]" "https://vagos.github.io/seax"
+                , subtleLink "[Code]" "https://github.com/ilyakooo0/seax"
                 ]
+            ]
 
 
 searchView : { a | search : String } -> Element Msg