Merge pull request #7 from ilyakooo0/frontend

Added %seax logo
Impovements on search results page

frontend/assets/css/main.css

@@ -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;
+  }
+}

frontend/assets/js/tilt.js

@@ -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)

frontend/elm.json

@@ -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"
         }

frontend/index.html

@@ -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>
 

frontend/src/Main.elm

@@ -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