diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css index b80a012..d473ec4 100644 --- a/frontend/assets/css/main.css +++ b/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; + } +} diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm index 5d753b1..cac1f45 100644 --- a/frontend/src/Main.elm +++ b/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%"] []) - , Keyed.column [ width (minimum 0 fill), padding 8 ] + , (if List.isEmpty model.searchResults then + 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