mirror of
https://github.com/ilyakooo0/seax.git
synced 2024-10-05 16:07:12 +03:00
Merge pull request #7 from ilyakooo0/frontend
Added %seax logo Impovements on search results page
This commit is contained in:
Evangelos Lamprou
GitHub
commit
acb599cbe5
57
frontend/assets/css/main.css
Normal file
57
frontend/assets/css/main.css
Normal file
@ -0,0 +1,57 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&family=Roboto+Mono:wght@200&family=Roboto:wght@300&display=swap');
|
||||
|
||||
#tilt:hover {
|
||||
/* box-shadow: 0px 0px 30px rgba(0,0,0, 0.6); */
|
||||
/* cursor: pointer; */
|
||||
/* transition: all 0.1s ease-in-out; */
|
||||
}
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 2px 2px #888888;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
shadow: 0 2px 2px #888888;
|
||||
}
|
||||
|
||||
.result {
|
||||
}
|
||||
|
||||
.result:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
BIN
frontend/assets/img/logo.png
Normal file
BIN
frontend/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
51
frontend/assets/js/tilt.js
Normal file
51
frontend/assets/js/tilt.js
Normal file
@ -0,0 +1,51 @@
|
||||
/* Store the element in el */
|
||||
let el = document.getElementById('tilt')
|
||||
|
||||
/* Get the height and width of the element */
|
||||
const height = el.clientHeight
|
||||
const width = el.clientWidth
|
||||
|
||||
/* Define function a */
|
||||
function handleMove(e) {
|
||||
|
||||
if (el.id != 'tilt') return; /* TODO: Fix this hack. */
|
||||
|
||||
/*
|
||||
* Get position of mouse cursor
|
||||
* With respect to the element
|
||||
* On mouseover
|
||||
*/
|
||||
/* Store the x position */
|
||||
const xVal = e.layerX
|
||||
/* Store the y position */
|
||||
const yVal = e.layerY
|
||||
|
||||
/*
|
||||
* Calculate rotation valuee along the Y-axis
|
||||
* Here the multiplier 20 is to
|
||||
* Control the rotation
|
||||
* You can change the value and see the results
|
||||
*/
|
||||
const yRotation = 20 * ((xVal - width / 2) / width)
|
||||
|
||||
/* Calculate the rotation along the X-axis */
|
||||
const xRotation = -20 * ((yVal - height / 2) / height)
|
||||
|
||||
/* Generate string for CSS transform property */
|
||||
const string = 'perspective(500px) scale(1.0) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)'
|
||||
|
||||
/* Apply the calculated transformation */
|
||||
el.style.transform = string
|
||||
}
|
||||
|
||||
/* Add listener for mouseout event, remove the rotation */
|
||||
el.addEventListener('mouseout', function() {
|
||||
el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
|
||||
})
|
||||
|
||||
/*
|
||||
* Add a listener for mousemove event
|
||||
* Which will trigger function 'handleMove'
|
||||
* On mousemove
|
||||
*/
|
||||
let mouseMoveEL = el.addEventListener('mousemove', handleMove)
|
||||
@ -8,6 +8,7 @@
|
||||
"dependencies": {
|
||||
"direct": {
|
||||
"TSFoster/elm-bytes-extra": "1.3.0",
|
||||
"avh4/elm-color": "1.0.0",
|
||||
"cmditch/elm-bigint": "2.0.1",
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/bytes": "1.0.8",
|
||||
@ -20,24 +21,39 @@
|
||||
"elm/url": "1.0.0",
|
||||
"elm-community/list-extra": "8.7.0",
|
||||
"elm-community/maybe-extra": "5.3.0",
|
||||
"elm-community/string-extra": "4.0.1",
|
||||
"figbus/elm-urbit-api": "4.0.1",
|
||||
"hecrj/html-parser": "2.4.0",
|
||||
"ianmackenzie/elm-1d-parameter": "1.0.1",
|
||||
"ianmackenzie/elm-3d-camera": "3.1.0",
|
||||
"ianmackenzie/elm-3d-scene": "1.0.1",
|
||||
"ianmackenzie/elm-geometry": "3.11.0",
|
||||
"ianmackenzie/elm-triangular-mesh": "1.1.0",
|
||||
"ianmackenzie/elm-units": "2.10.0",
|
||||
"jasonliang-dev/elm-heroicons": "2.0.0",
|
||||
"jxxcarlson/hex": "4.0.0",
|
||||
"mdgriffith/elm-animator": "1.1.1",
|
||||
"mdgriffith/elm-ui": "1.1.8",
|
||||
"rtfeldman/elm-css": "18.0.0",
|
||||
"rtfeldman/elm-hex": "1.0.0",
|
||||
"toastal/either": "3.6.3"
|
||||
"toastal/either": "3.6.3",
|
||||
"zwilias/elm-html-string": "2.0.2"
|
||||
},
|
||||
"indirect": {
|
||||
"AdrianRibao/elm-derberos-date": "1.2.3",
|
||||
"avh4/elm-color": "1.0.0",
|
||||
"NoRedInk/elm-string-conversions": "1.0.1",
|
||||
"bitsoflogic/elm-radixint": "2.0.0",
|
||||
"elm/file": "1.0.5",
|
||||
"elm/parser": "1.1.0",
|
||||
"elm/random": "1.0.0",
|
||||
"elm/regex": "1.0.0",
|
||||
"elm/virtual-dom": "1.0.3",
|
||||
"ianmackenzie/elm-units": "2.10.0",
|
||||
"elm-explorations/linear-algebra": "1.0.3",
|
||||
"elm-explorations/webgl": "1.1.3",
|
||||
"ianmackenzie/elm-float-extra": "1.1.0",
|
||||
"ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
|
||||
"ianmackenzie/elm-interval": "3.1.0",
|
||||
"ianmackenzie/elm-units-interval": "3.2.0",
|
||||
"ktonon/elm-word": "2.1.2",
|
||||
"robinheghan/murmur3": "1.0.0"
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" >
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
body {
|
||||
@ -30,5 +31,6 @@
|
||||
<script src="/elm.js"></script>
|
||||
<script type="module" src="/script.js"></script>
|
||||
</body>
|
||||
<script type="text/javascript" src="assets/js/tilt.js" defer></script>
|
||||
</html>
|
||||
|
||||
|
||||
@ -11,6 +11,9 @@ import Element.Font as Font
|
||||
import Element.Input as Input
|
||||
import Element.Keyed as Keyed
|
||||
import Html.Attributes
|
||||
import Html.String
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import Html exposing (Html, hr)
|
||||
import Json.Decode as JD
|
||||
import List.Extra
|
||||
import Set exposing (Set)
|
||||
@ -22,6 +25,11 @@ import Ur.Jam exposing (isSig)
|
||||
import Ur.Run
|
||||
import Ur.Sub
|
||||
import Ur.Types exposing (Noun(..))
|
||||
import Html.String
|
||||
import List
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import Html.Parser
|
||||
import String.Extra exposing (stripTags)
|
||||
|
||||
|
||||
url : String
|
||||
@ -61,7 +69,6 @@ type alias SearchResult =
|
||||
, engines : Set String
|
||||
}
|
||||
|
||||
|
||||
type Msg
|
||||
= Noop
|
||||
| GotShipName String
|
||||
@ -100,7 +107,8 @@ main =
|
||||
[ view model
|
||||
|> layout
|
||||
[ Font.family
|
||||
[ Font.typeface "system-ui"
|
||||
[ Font.typeface "monospace"
|
||||
, Font.typeface "system-ui"
|
||||
, Font.typeface "-apple-system"
|
||||
, Font.typeface "BlinkMacSystemFont"
|
||||
, Font.typeface "Segoe UI"
|
||||
@ -108,12 +116,9 @@ main =
|
||||
, Font.typeface "Helvetica"
|
||||
, Font.typeface "Arial"
|
||||
, Font.sansSerif
|
||||
, Font.typeface "Apple Color Emoji"
|
||||
, Font.typeface "Segoe UI Emoji"
|
||||
, Font.typeface "Segoe UI Symbol"
|
||||
]
|
||||
, clipX
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
, subscriptions = \model -> Animator.toSubscription Tick model (animator model)
|
||||
@ -150,20 +155,51 @@ main =
|
||||
}
|
||||
|
||||
|
||||
logoView : List (Attribute Msg) -> Element Msg
|
||||
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
|
||||
Nothing ->
|
||||
column [ centerX, centerY, padding 8, spacing 16 ]
|
||||
[ el [ centerX, Font.size 67, Font.heavy ] (text "%seax")
|
||||
[ logoView [ centerX, width (px 510), height (px 161) ]
|
||||
, searchView model
|
||||
]
|
||||
|
||||
Just _ ->
|
||||
column [ width fill, spacing 16 ]
|
||||
[ column [ spacing 16, width (minimum 0 fill), padding 8 ]
|
||||
[ searchView model |> el []
|
||||
[ column [ spacing 16, width (minimum 0 fill), padding 8]
|
||||
[ row [] [ logoView [height (px 40)], searchView model |> el [] ]
|
||||
, row [ spacing 8, paddingEach { top = 16, bottom = 16, left = 0, right = 0 } ]
|
||||
(if List.isEmpty model.engines then
|
||||
[]
|
||||
else
|
||||
[ text "Sources: "
|
||||
, model.engines
|
||||
|> List.filter (\( _, state ) -> state /= Failed)
|
||||
@ -203,12 +239,14 @@ view model =
|
||||
|> wrappedRow
|
||||
[ spacing 8
|
||||
, width fill
|
||||
|
||||
-- , padding 16
|
||||
]
|
||||
]
|
||||
)
|
||||
]
|
||||
, 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 } ->
|
||||
@ -251,12 +289,13 @@ view model =
|
||||
++ "px"
|
||||
)
|
||||
|> htmlAttribute
|
||||
, Html.Attributes.style "position" "absolute" |> htmlAttribute
|
||||
, Html.Attributes.style "margin-bottom" "1em" |> htmlAttribute
|
||||
, Html.Attributes.style "padding" "0.5em" |> htmlAttribute
|
||||
, Html.Attributes.class "result" |> htmlAttribute
|
||||
]
|
||||
[ text title
|
||||
[ text (stripTags title)
|
||||
|> el
|
||||
[ Font.size 16
|
||||
, width fill
|
||||
]
|
||||
, text link
|
||||
|> el
|
||||
@ -266,14 +305,19 @@ 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
|
||||
searchView model =
|
||||
row [ spacing 8 ]
|
||||
[ Input.text [ width (px 250) ]
|
||||
[ Input.text [ Html.Attributes.class "shadow" |> htmlAttribute, width (px 400)]
|
||||
{ onChange = UpdateSearch
|
||||
, placeholder = Nothing
|
||||
, text = model.search
|
||||
@ -283,23 +327,15 @@ searchView model =
|
||||
{ label =
|
||||
text "search"
|
||||
|> el
|
||||
[ Border.width 4
|
||||
, padding 4
|
||||
[ Html.Attributes.class "search" |> htmlAttribute
|
||||
, Border.width 2
|
||||
, padding 6
|
||||
, Font.size 29
|
||||
, Font.bold
|
||||
, Border.color (rgb 0 0 0)
|
||||
, Background.color (rgb 0 0 0)
|
||||
, Font.color (rgb 1 1 1)
|
||||
, mouseOver
|
||||
[ Font.color (rgb 0 0 0)
|
||||
, Background.color (rgb 1 1 1)
|
||||
]
|
||||
]
|
||||
, onPress = Just (Search model.search)
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Ur.Cmd.Cmd Msg )
|
||||
update msg model =
|
||||
case msg of
|
||||
|
||||
Loading…
Reference in New Issue
Block a user