A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve loading animation

+54 -47
+19 -5
src/Applications/UI.elm
··· 17 17 import Return2 18 18 import Return3 19 19 import Sources 20 - import Svg.Elements 21 20 import Tachyons.Classes as T 22 21 import UI.Authentication 23 22 import UI.Backdrop ··· 29 28 import UI.Reply as Reply exposing (Reply(..)) 30 29 import UI.Settings 31 30 import UI.Sources 31 + import UI.Svg.Elements 32 32 import UI.UserData 33 33 import Url exposing (Url) 34 34 ··· 347 347 348 348 loadingAnimation : Html msg 349 349 loadingAnimation = 350 - Html.map never Svg.Elements.spinner 350 + Html.map never UI.Svg.Elements.loading 351 351 352 352 353 353 ··· 360 360 -- Body 361 361 ----------------------------------------- 362 362 Css.Global.body 363 - [ Css.backgroundColor (Color.toElmCssColor UI.Kit.colors.background) 364 - , Css.backgroundImage (url "/images/ep_naturalblack_pattern.jpg") 365 - , Css.color (Color.toElmCssColor UI.Kit.colors.text) 363 + [ Css.color (Color.toElmCssColor UI.Kit.colors.text) 366 364 , Css.fontFamilies UI.Kit.defaultFontFamilies 367 365 , Css.textRendering Css.optimizeLegibility 368 366 ··· 372 370 , Css.property "-moz-osx-font-smoothing" "grayscale" 373 371 , Css.property "font-smoothing" "antialiased" 374 372 ] 373 + 374 + ----------------------------------------- 375 + -- Placeholders 376 + ----------------------------------------- 377 + , Css.Global.selector "::-webkit-input-placeholder" placeholderStyles 378 + , Css.Global.selector "::-moz-placeholder" placeholderStyles 379 + , Css.Global.selector ":-ms-input-placeholder" placeholderStyles 380 + , Css.Global.selector ":-moz-placeholder" placeholderStyles 381 + , Css.Global.selector "::placeholder" placeholderStyles 382 + ] 383 + 384 + 385 + placeholderStyles : List Css.Style 386 + placeholderStyles = 387 + [ Css.color (Css.rgb 0 0 0) 388 + , Css.opacity (Css.num 0.2) 375 389 ]
+2
src/Library/Conditional.elm
··· 1 1 module Conditional exposing (ifThenElse) 2 2 3 + -- 🔱 4 + 3 5 4 6 ifThenElse : Bool -> a -> a -> a 5 7 ifThenElse bool x y =
+7 -7
src/Library/Svg/Elements.elm src/Applications/UI/Svg/Elements.elm
··· 1 - module Svg.Elements exposing (blockstackLogo, remoteStorageLogo, spinner) 1 + module UI.Svg.Elements exposing (blockstackLogo, loading, remoteStorageLogo) 2 2 3 3 import Html.Styled.Attributes as Attributes 4 4 import Svg.Styled as Svg exposing (..) ··· 6 6 7 7 8 8 9 - -- Logos 9 + -- LOGOS 10 10 11 11 12 12 blockstackLogo : Svg Never ··· 60 60 61 61 62 62 63 - -- Spinner 63 + -- LOADING ANIMATION 64 64 65 65 66 - spinner : Svg Never 67 - spinner = 66 + loading : Svg Never 67 + loading = 68 68 svg 69 - [ class "spinner" 69 + [ class "loading-animation" 70 70 , height "29" 71 71 , viewBox "0 0 30 30" 72 72 , width "29" 73 73 ] 74 74 [ circle 75 - [ class "spinner-circle" 75 + [ class "loading-animation__circle" 76 76 , cx "15" 77 77 , cy "15" 78 78 , fill "none"
+24 -32
src/Static/Css/Application.css
··· 1 - :root { 2 - --placeholder-color: black; 1 + body { 2 + background-color: rgb(2, 7, 14); 3 + background-image: url(/images/ep_naturalblack_pattern.jpg); 3 4 } 4 5 5 6 6 7 7 - /*************** 8 - * Placeholder * 9 - ***************/ 10 - 11 - ::-webkit-input-placeholder { color: var(--placeholder-color); opacity: 0.2; } 12 - ::-moz-placeholder { color: var(--placeholder-color); opacity: 0.2; } 13 - :-ms-input-placeholder { color: var(--placeholder-color); opacity: 0.2; } 14 - :-moz-placeholder { color: var(--placeholder-color); opacity: 0.2; } 15 - ::placeholder { color: var(--placeholder-color); opacity: 0.2; } 16 - 17 - 18 - 19 8 /*********** 20 - * Spinner * 9 + * Loading * 21 10 ***********/ 22 11 23 - .spinner { 24 - animation: spinner-rotator 1.4s linear infinite; 12 + .loading-animation { 13 + animation: loading-rotator 2s linear infinite; 25 14 } 26 15 27 16 28 - .spinner-circle { 29 - animation: spinner-dash 1.4s ease-in-out infinite, 30 - spinner-colors 5.6s ease-in-out infinite; 31 - stroke-dasharray: calc(30 * 2.875); 17 + .loading-animation__circle { 18 + animation: loading-dash 1.5s ease-in-out infinite, 19 + loading-colors 6s ease-in-out infinite; 20 + stroke-dasharray: 1, 86.25; 32 21 stroke-dashoffset: 0; 33 22 transform-origin: center; 34 23 } 35 24 36 25 37 - @keyframes spinner-rotator { 26 + @keyframes loading-rotator { 38 27 0% { transform: rotate(0deg); } 39 - 100% { transform: rotate(270deg); } 28 + 100% { transform: rotate(360deg); } 40 29 } 41 30 42 - @keyframes spinner-colors { 43 - 0% { stroke: rgb(239, 97, 85); } 31 + 32 + @keyframes loading-colors { 33 + 0% { stroke: rgb(248, 164, 167); } 44 34 25% { stroke: rgb(254, 196, 24); } 45 35 50% { stroke: rgb(72, 182, 133); } 46 36 75% { stroke: rgb(6, 182, 239); } 47 - 100% { stroke: rgb(239, 97, 85); } 37 + 100% { stroke: rgb(248, 164, 167); } 48 38 } 49 39 50 - @keyframes spinner-dash { 40 + 41 + @keyframes loading-dash { 51 42 0% { 52 - stroke-dashoffset: calc(30 * 2.875); 43 + stroke-dasharray: 1, 86.25; 44 + stroke-dashoffset: 0; 53 45 } 54 46 50% { 55 - stroke-dashoffset: calc((30 * 2.875) / 4); 56 - transform: rotate(135deg); 47 + stroke-dasharray: 64.6875, 86.25; 48 + stroke-dashoffset: -21.5625; 57 49 } 58 50 100% { 59 - stroke-dashoffset: calc(30 * 2.875); 60 - transform: rotate(450deg); 51 + stroke-dasharray: 64.6875, 86.25; 52 + stroke-dashoffset: -86.25; 61 53 } 62 54 }
+2 -3
src/Static/Html/Application.html
··· 19 19 20 20 <!-- Stylesheets --> 21 21 <link rel="stylesheet" href="/vendor/tachyons.css"> 22 - 22 + <link rel="stylesheet" href="/application.css"> 23 23 <link rel="stylesheet" href="/fonts.css"> 24 - <link rel="stylesheet" href="/application.css"> 25 24 26 25 </head> 27 26 <body class="min-vh-100 overflow-hidden"> ··· 58 57 <!-- Insert loader --> 59 58 <script> 60 59 document.getElementById("elm").innerHTML = 61 - '<div class="flex items-center justify-center min-vh-100"><svg class="spinner" height="29" width="29" viewbox="0 0 30 30"><circle class="spinner-circle" cx="15" cy="15" fill="none" r="14" stroke-linecap="round" stroke-width="2"></circle></svg></div>' 60 + '<div class="flex items-center justify-center min-vh-100"><svg class="loading-animation" height="29" width="29" viewbox="0 0 30 30"><circle class="loading-animation__circle" cx="15" cy="15" fill="none" r="14" stroke-linecap="round" stroke-width="2"></circle></svg></div>' 62 61 </script> 63 62 64 63