Add Ribbon

This commit is contained in:
Valentin Brandl 2019-07-27 20:07:22 +02:00
parent 03188df0af
commit 3425fd7b99
No known key found for this signature in database
GPG Key ID: 30D341DD34118D7D
2 changed files with 62 additions and 8 deletions

View File

@ -2,10 +2,11 @@ module Main exposing (Model, Msg(..), init, main, update, view)
import Browser import Browser
import Data exposing (Url, toHost, toUrl) import Data exposing (Url, toHost, toUrl)
import Html exposing (Html, br, div, input, table, td, text, tr) import Html exposing (Html, br, div, h1, input, table, td, text, tr)
import Html.Attributes exposing (disabled, placeholder, style, value) import Html.Attributes exposing (disabled, placeholder, style, value)
import Html.Events exposing (onInput) import Html.Events exposing (onInput)
import Parse exposing (parseUrl) import Parse exposing (parseUrl)
import Ribbon exposing (ribbon)
type Msg type Msg
@ -82,8 +83,13 @@ myStyle2 =
view : Model -> Html Msg view : Model -> Html Msg
view state = view state =
div myStyle div []
[ input (myStyle2 [ placeholder "URL to parse", value state.url, onInput UrlChange ]) [] [ h1 []
[ text "Gitache" ]
, div
myStyle
[ ribbon
, input (myStyle2 [ placeholder "URL to parse", value state.url, onInput UrlChange ]) []
, div myStyle , div myStyle
[ text "Parsed URL: " [ text "Parsed URL: "
, br [] [] , br [] []
@ -91,6 +97,7 @@ view state =
] ]
, input (myStyle2 [ placeholder "https://host/<service>/<user>/<repo>/<gitref>/<file>", disabled True, value (displayMUrl state.parsed) ]) [] , input (myStyle2 [ placeholder "https://host/<service>/<user>/<repo>/<gitref>/<file>", disabled True, value (displayMUrl state.parsed) ]) []
] ]
]
main : Program () Model Msg main : Program () Model Msg

47
frontend/src/Ribbon.elm Normal file
View File

@ -0,0 +1,47 @@
module Ribbon exposing (ribbon)
import Html exposing (Html, a)
import Html.Attributes exposing (href)
import Svg exposing (Svg, path, svg)
import Svg.Attributes exposing (class, d, fill, height, style, viewBox, width)
ribbon : Html msg
ribbon =
a
[ href "https://github.com/vbrandl/gitache" ]
[ ribbonSvg ]
ribbonSvg : Svg msg
ribbonSvg =
svg
[ width "80"
, height "80"
, viewBox "0 0 250 250"
, style
"fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0; aria-hidden: true"
]
[ path
[ d "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" ]
[]
, path
[ d "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
, fill "currentColor"
, style "transform-origin: 130px 106px;"
, class "octo-arm"
]
[]
, path
[ d "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
, fill "currentColor"
, class "octo-body"
]
[]
]
-- svgStyle : String
-- svgStyle =
-- ".github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}"