diff --git a/public/assets/avatar.svg b/public/assets/avatar.svg new file mode 100644 index 0000000..8c569a0 --- /dev/null +++ b/public/assets/avatar.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/avatar1.svg b/public/assets/avatar1.svg new file mode 100644 index 0000000..8c569a0 --- /dev/null +++ b/public/assets/avatar1.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index b40411b..ef6f2fa 100644 --- a/public/index.html +++ b/public/index.html @@ -6,11 +6,12 @@ + - + + + diff --git a/public/ports.js b/public/ports.js new file mode 100644 index 0000000..6ff2d11 --- /dev/null +++ b/public/ports.js @@ -0,0 +1,13 @@ +app.ports.initCarousel.subscribe(function() { + window.requestAnimationFrame(function() { + var element = document.getElementsByClassName("makecarousel")[0]; + console.log("ELEMENT", element); + var flkty = new Flickity(element, { + lazyLoad: true, + adaptiveHeight: true, + wrapAround: true, + prevNextButtons: false, + pageDots: true + }); + }); +}); diff --git a/src/css/_custom.css b/src/css/_custom.css index 32f535e..8b8b8b2 100644 --- a/src/css/_custom.css +++ b/src/css/_custom.css @@ -25,3 +25,28 @@ .lh-f7 { line-height: 13px; } + +/* Carousel */ + +.carousel-cell { + opacity: 0.2; + -webkit-overflow-scrolling: touch; +} + +.carousel-cell.is-selected { + opacity: 1; +} + +.makecarousel { + -webkit-overflow-scrolling: touch; +} + +.dot.is-selected { + background: var(--green); + transform: scale(1.1); + transition: 1s; +} + +.smooth { + transform: translate3d(0, 0, 0); +} diff --git a/src/elm/Main.elm b/src/elm/Main.elm index 1bb50a6..25c7087 100644 --- a/src/elm/Main.elm +++ b/src/elm/Main.elm @@ -1,8 +1,9 @@ module Main exposing (..) import Navigation exposing (program) -import State exposing (..) +import Ports exposing (..) import Router exposing (..) +import State exposing (..) import Types exposing (..) @@ -12,5 +13,5 @@ main = { init = init , view = view , update = update - , subscriptions = always Sub.none + , subscriptions = subscriptions } diff --git a/src/elm/Ports.elm b/src/elm/Ports.elm new file mode 100644 index 0000000..c824c7c --- /dev/null +++ b/src/elm/Ports.elm @@ -0,0 +1,11 @@ +port module Ports exposing (..) + +import Types exposing (..) + + +port initCarousel : () -> Cmd msg + + +subscriptions : Model -> Sub msg +subscriptions model = + Sub.none diff --git a/src/elm/Router.elm b/src/elm/Router.elm index b6e1c63..aebe8ca 100644 --- a/src/elm/Router.elm +++ b/src/elm/Router.elm @@ -3,7 +3,6 @@ module Router exposing (..) import Data.View exposing (getCurrentView, getViewFromRoute) import Html exposing (..) import Html.Attributes exposing (..) -import Navigation exposing (..) import Types exposing (..) @@ -13,6 +12,6 @@ view model = view = getCurrentView model in - div [ class "w-100 fixed overflow-y-scroll top-0 bottom-0 m0-auto cover", id "container" ] + div [ class "w-100 fixed overflow-y-scroll top-0 bottom-0 m0-auto cover flex justify-center items-center", id "container" ] [ view ] diff --git a/src/elm/State.elm b/src/elm/State.elm index 158bc52..737d80a 100644 --- a/src/elm/State.elm +++ b/src/elm/State.elm @@ -1,10 +1,11 @@ -module State exposing (..) +port module State exposing (..) import Data.Log exposing (defaultLog) import Data.Stim exposing (defaultStim) import Data.View exposing (getViewFromRoute, viewFromUrl) -import Navigation exposing (..) import Helpers exposing (scrollToTop) +import Navigation exposing (..) +import Ports exposing (..) import Types exposing (..) @@ -30,7 +31,7 @@ init location = model = viewFromUrl location initModel in - model ! [] + model ! [ initCarousel () ] update : Msg -> Model -> ( Model, Cmd Msg ) @@ -39,5 +40,8 @@ update msg model = UrlChange location -> { model | view = getViewFromRoute location.hash } ! [ scrollToTop ] + MakeCarousel -> + model ! [] + NoOp -> model ! [] diff --git a/src/elm/Types.elm b/src/elm/Types.elm index ad8cd76..b0dd784 100644 --- a/src/elm/Types.elm +++ b/src/elm/Types.elm @@ -114,3 +114,4 @@ type Feeling type Msg = NoOp | UrlChange Navigation.Location + | MakeCarousel diff --git a/src/elm/Views/CreateAvatar.elm b/src/elm/Views/CreateAvatar.elm index 9d6fea0..a7dff9e 100644 --- a/src/elm/Views/CreateAvatar.elm +++ b/src/elm/Views/CreateAvatar.elm @@ -1,9 +1,26 @@ module Views.CreateAvatar exposing (..) +import Helpers exposing (..) import Html exposing (..) +import Html.Attributes exposing (..) import Types exposing (..) createAvatar : Model -> Html Msg createAvatar model = - div [] [ text "Home" ] + section [ class "smooth" ] + [ div [ class "flex justify-center flex-column items-center" ] [ h1 [ class "f3 green avenir center ma0" ] [ text "My Stimmy friend" ], h2 [ class "ma0 avenir fw2 f4" ] [ text "Choose your avatar" ] ] + , div + [ class "db makecarousel mv2" ] + [ avatarCaroCell "./assets/avatar.svg" + , avatarCaroCell "./assets/avatar.svg" + , avatarCaroCell "./assets/avatar.svg" + , avatarCaroCell "./assets/avatar.svg" + , avatarCaroCell "./assets/avatar.svg" + ] + ] + + +avatarCaroCell : String -> Html Msg +avatarCaroCell imgSrc = + img [ class "carousel-cell-image", attribute "data-flickity-lazyload" imgSrc ] []