08b1af4 · seax · git.iko.soy

git.iko.soy/seax

on master help sign in

Visual imporvements on search page

08b1af4Evangelos Lamprou3 years ago

frontend/assets/css/main.css+21

compare with master

unifiedsplit

@@ -34,3 +34,24 @@

34.search:hover {

35 text-decoration: underline;

36}

37+

38+.wavy {

39+ animation-name: wavy;

40+ animation-duration: 4.2s;

41+ animation-timing-function: ease-in-out;

42+ animation-iteration-count: infinite;

43+ position: relative;

44+ top: 0;

45+ left: 0;

46+}

47+@keyframes wavy {

48+ 0% {

49+ top: 0px;

50+ }

51+ 50% {

52+ top: -15px;

53+ }

54+ 100% {

55+ top: 0px;

56+ }

57+}

frontend/src/Main.elm+35−5

@@ -27,7 +27,6 @@ import Ur.Sub

27import Ur.Types exposing (Noun(..))

28import Html.String

29import List

30−import Css

31import Html.Styled.Attributes exposing (css)

30import Html.Styled.Attributes exposing (css)

32import Html.Parser

31import Html.Parser

33import String.Extra exposing (stripTags)

32import String.Extra exposing (stripTags)

@@ -108,7 +107,8 @@ main =

108 [ view model

107 [ view model

109 |> layout

108 |> layout

110 [ Font.family

109 [ Font.family

111− [ Font.typeface "system-ui"

110+ [ Font.typeface "monospace"

111+ , Font.typeface "system-ui"

112 , Font.typeface "-apple-system"

113 , Font.typeface "BlinkMacSystemFont"

114 , Font.typeface "Segoe UI"

@@ -116,6 +116,7 @@ main =

116 , Font.typeface "Helvetica"

117 , Font.typeface "Arial"

118 , Font.sansSerif

119+ ]

119 , clipX

120 , clipX

120 ]

121 ]

122 ]

@@ -159,6 +160,29 @@ logoView attributes =

159 Element.image (List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes)

160 Element.image (List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes)

160 { src = "assets/img/logo.png", description = "%seax logo" }

161 { src = "assets/img/logo.png", description = "%seax logo" }

161

162

163+noSearchResultsView : Element Msg

164+noSearchResultsView = Element.el

165+ [ Html.Attributes.style "padding" "1em" |> htmlAttribute

166+ , width (px 500)

167+ , Font.size 15

168+ , Html.Attributes.class "wavy" |> htmlAttribute

169+ ]

170+ (Element.text """No results found... :)

171+We'll try and find you something.

172+Just come back later.""")

173+

174+subtleLink : String -> String -> Element Msg

175+subtleLink text href =

176+ Element.el

177+ [ Font.size 15

178+ , pointer

179+ , mouseOver

180+ [ Font.color (rgb 0.7 0.7 0.7)

181+ ]

182+ ]

183+ (Element.html (Html.a [ Html.Attributes.href href ] [ Html.text text ]))

184+

185+

162view : Model -> Element Msg

186view : Model -> Element Msg

163view model =

187view model =

164 case model.initiatedSearch of

188 case model.initiatedSearch of

@@ -219,8 +243,10 @@ view model =

219 ]

243 ]

220 )

244 )

221 ]

245 ]

222− , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])

246+ , (if List.isEmpty model.searchResults then

247+ noSearchResultsView

248+ else

223− , Keyed.column [ width (minimum 0 fill), padding 8 ]

249+ Keyed.column [ width (minimum 0 fill), padding 8 ]

224 (model.searchResults

250 (model.searchResults

225 |> List.filter

251 |> List.filter

226 (\{ engines } ->

252 (\{ engines } ->

@@ -279,9 +305,13 @@ view model =

279 ]

305 ]

280 )

306 )

281 )

307 )

282− )

308+ ))

283 , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])

309 , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])

310+ , row [ centerX, padding 10, spacing 10]

311+ [ subtleLink "[About]" "https://vagos.github.io/seax"

312+ , subtleLink "[Code]" "https://github.com/ilyakooo0/seax"

284 ]

313 ]

314+ ]

285

315

286

316

287searchView : { a | search : String } -> Element Msg

317searchView : { a | search : String } -> Element Msg