Added animations

This commit is contained in:
iko 2023-08-05 12:19:14 +03:00
parent 683f1d1ccf
commit 601f905e2a
Signed by untrusted user: iko
GPG Key ID: 82C257048D1026F2
4 changed files with 30 additions and 7 deletions

View File

@ -15,6 +15,7 @@
transform: traslateY(0);
}
}
.bobbing {
animation-duration: 2s;
animation-name: bobbing;
@ -22,6 +23,10 @@
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.hidden-engine {
transition: max-width 1s ease-out, top 1s ease-out, margin-left 1s ease-out;
}
</style>
</head>
<body>

View File

@ -199,13 +199,17 @@ view model =
[ row [ spacing 16, width fill ]
[ searchView model |> el [ padding 8 ]
, model.engines
|> List.filter (\( _, state ) -> state /= Failed)
|> List.map
(\( name, state ) ->
text ("%" ++ name)
( name
, text ("%" ++ name)
|> el
([ Font.size 43
, Font.bold
, Html.Attributes.style "max-width" "300px"
|> htmlAttribute
-- , clip
]
++ (if Set.isEmpty model.selectedEngines then
[]
@ -232,11 +236,20 @@ view model =
]
Failed ->
[]
[ Html.Attributes.class "hidden-engine" |> htmlAttribute
, Html.Attributes.style "max-width" "0px" |> htmlAttribute
, Html.Attributes.style "top" "-100px"
|> htmlAttribute
, Html.Attributes.style "margin" "0"
|> htmlAttribute
, Font.color (rgb 0.8 0.8 0.8)
, Html.Attributes.class "bobbing" |> htmlAttribute
]
)
)
)
)
|> row
|> Keyed.row
[ spacing 16
, clipX
, scrollbarX

View File

@ -52,6 +52,7 @@ $:
(~(get by search-results:(~(got by search-subscriptions.state) query)) engine)
?~ results %loading
?~ +.results %failed
?~ +.+.results %failed
%completed
=* search-results
|= =query
@ -61,6 +62,7 @@ $:
search-results.search-state
=* sink-for-query
|= =query
~& (~(get by search-subscriptions.state) query)
[(current-engines query) (search-results query)]
=* sink
|= =query
@ -145,8 +147,11 @@ $:
=. search-subscriptions.state
(~(put by search-subscriptions.state) query search-subscription)
=^ card sink (sync:sink (sink-for-query query))
~& (current-engines query)
[~[card] this]
==
++ on-fail |=([term tang] `..on-init)
++ on-fail
|= [term =tang]
((slog tang) `this)
--

View File

@ -9,9 +9,9 @@
%- zing
%+ turn results
|= [engine=term results=(list search-result)]
%+ turn (zip (gulf 1 (lent results)) results)
%+ turn (zip (gulf 0 (lent results)) results)
|= [ord=@u result=search-result]
%- malt ~[[url.result [~[engine] ~[ord] result]]]
%- malt ~[[url.result [~[engine] ~[+(ord)] result]]]
=/ url-to-engines-map
^- (map @t [engines=(list term) ords=(list @u) result=search-result])
%+ roll url-to-engine-map