dillonkearns/elm-pages-v3-beta
1
1
Fork 0
mirror of https://github.com/dillonkearns/elm-pages-v3-beta.git synced 2024-11-24 06:54:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move more of loading indicator style into Elm.

Browse Source
This commit is contained in:
Dillon Kearns 2020-05-08 07:13:09 -07:00
parent 3a1b7aea1d
commit 87d810790f
4 changed files with 53 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/docs/style.css
View File

@ -38,20 +38,3 @@
display: none !important;
}
}
.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
}
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}

14
generator/src/develop.js
View File

@ -16,6 +16,19 @@ const readline = require("readline");
const webpackDevMiddleware = require("webpack-dev-middleware");
const PluginGenerateElmPagesBuild = require('./plugin-generate-elm-pages-build')
const hotReloadIndicatorStyle = `
<style>
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
</style>
`
module.exports = { start, run };
function start({ routes, debug, customPort, manifestConfig }) {
const config = webpackOptions(false, routes, {
@ -185,6 +198,7 @@ function webpackOptions(
console.log("No service worker registered.");
}
</script>
${production ? '' : hotReloadIndicatorStyle}
</head>
<body></body>

58
src/Pages/Internal/HotReloadLoadingIndicator.elm
View File

@ -1,12 +1,26 @@
module Pages.Internal.HotReloadLoadingIndicator exposing (..)
import Html exposing (Html, div)
import Html exposing (Html)
import Html.Attributes exposing (..)
circle : List (Html.Attribute msg) -> Html msg
circle attrs =
Html.div
(style "animation" "lds-default 1.2s linear infinite"
:: style "background" "#000"
:: style "position" "absolute"
:: style "width" "6px"
:: style "height" "6px"
:: style "border-radius" "50%"
:: attrs
)
[]
view : Bool -> Html msg
view hmrStatus =
div
view display =
Html.div
[ id "__elm-pages-loading"
, class "lds-default"
, style "position" "fixed"
@ -17,7 +31,7 @@ view hmrStatus =
, style "background-color" "white"
, style "box-shadow" "0 8px 15px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.12)"
, style "display"
(case hmrStatus of
(case display of
True ->
"block"
@ -25,76 +39,64 @@ view hmrStatus =
"none"
)
]
[ div
[ circle
[ style "animation-delay" "0s"
, style "top" "37px"
, style "left" "66px"
]
[]
, div
, circle
[ style "animation-delay" "-0.1s"
, style "top" "22px"
, style "left" "62px"
]
[]
, div
, circle
[ style "animation-delay" "-0.2s"
, style "top" "11px"
, style "left" "52px"
]
[]
, div
, circle
[ style "animation-delay" "-0.3s"
, style "top" "7px"
, style "left" "37px"
]
[]
, div
, circle
[ style "animation-delay" "-0.4s"
, style "top" "11px"
, style "left" "22px"
]
[]
, div
, circle
[ style "animation-delay" "-0.5s"
, style "top" "22px"
, style "left" "11px"
]
[]
, div
, circle
[ style "animation-delay" "-0.6s"
, style "top" "37px"
, style "left" "7px"
]
[]
, div
, circle
[ style "animation-delay" "-0.7s"
, style "top" "52px"
, style "left" "11px"
]
[]
, div
, circle
[ style "animation-delay" "-0.8s"
, style "top" "62px"
, style "left" "22px"
]
[]
, div
, circle
[ style "animation-delay" "-0.9s"
, style "top" "66px"
, style "left" "37px"
]
[]
, div
, circle
[ style "animation-delay" "-1s"
, style "top" "62px"
, style "left" "52px"
]
[]
, div
, circle
[ style "animation-delay" "-1.1s"
, style "top" "52px"
, style "left" "62px"
]
[]
]

16
src/Pages/Internal/Platform.elm
View File

@ -7,6 +7,7 @@ import Dict exposing (Dict)
import Head
import Html exposing (Html)
import Html.Attributes exposing (style)
import Html.Lazy
import Http
import Json.Decode as Decode
import Json.Encode
@ -211,14 +212,15 @@ view pathKey content viewFn model =
loadingView : HmrStatus -> Html msg
loadingView hmrStatus =
HotReloadLoadingIndicator.view
(case hmrStatus of
HmrLoading ->
True
(case hmrStatus of
HmrLoading ->
True
HmrLoaded ->
False
)
HmrLoaded ->
False
)
|> Html.Lazy.lazy
HotReloadLoadingIndicator.view
onViewChangeElement currentUrl =