From 67279ef388a823106a6f531efd3cecfad87768fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Mon, 5 Oct 2020 18:53:12 +0200 Subject: [PATCH] #141 - Show animated spinner when upload progress is 0%. --- .../Entries/Pages/EntryDetail.razor.cs | 2 +- .../wwwroot/css/_loading.scss | 20 +++++++++++++++++++ .../wwwroot/css/site.css | 15 ++++++++++++++ .../wwwroot/css/site.min.css | 2 +- 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/Recollections.Blazor.UI/Entries/Pages/EntryDetail.razor.cs b/src/Recollections.Blazor.UI/Entries/Pages/EntryDetail.razor.cs index b6f1071..19365db 100644 --- a/src/Recollections.Blazor.UI/Entries/Pages/EntryDetail.razor.cs +++ b/src/Recollections.Blazor.UI/Entries/Pages/EntryDetail.razor.cs @@ -325,7 +325,7 @@ public string StatusCssClass if (Progress.Status == "done") return "text-success"; else if (Progress.Status == "current") - return $"text-primary"; + return Progress.Percentual == 0 ? "loading-circle" : $"text-primary"; else if (Progress.Status == "error") return "text-danger"; else if (Progress.Status == "pending") diff --git a/src/Recollections.Blazor.UI/wwwroot/css/_loading.scss b/src/Recollections.Blazor.UI/wwwroot/css/_loading.scss index 17c5fd5..8083de3 100644 --- a/src/Recollections.Blazor.UI/wwwroot/css/_loading.scss +++ b/src/Recollections.Blazor.UI/wwwroot/css/_loading.scss @@ -40,3 +40,23 @@ } } } + +.loading-circle { + border: 8px solid #BCBFBE; + border-top: 8px solid #007BFF; + border-radius: 50%; + width: 60px; + height: 60px; + animation: spin 2s linear infinite; + color: transparent; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/src/Recollections.Blazor.UI/wwwroot/css/site.css b/src/Recollections.Blazor.UI/wwwroot/css/site.css index 0e3beae..4977547 100644 --- a/src/Recollections.Blazor.UI/wwwroot/css/site.css +++ b/src/Recollections.Blazor.UI/wwwroot/css/site.css @@ -57,6 +57,21 @@ a { top: 19px; height: 26px; } } +.loading-circle { + border: 8px solid #BCBFBE; + border-top: 8px solid #007BFF; + border-radius: 50%; + width: 60px; + height: 60px; + animation: spin 2s linear infinite; + color: transparent; } + +@keyframes spin { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } + .inline-editor .oi-check, .inline-editor .fa-check { color: var(--green); } diff --git a/src/Recollections.Blazor.UI/wwwroot/css/site.min.css b/src/Recollections.Blazor.UI/wwwroot/css/site.min.css index b610828..48c48b2 100644 --- a/src/Recollections.Blazor.UI/wwwroot/css/site.min.css +++ b/src/Recollections.Blazor.UI/wwwroot/css/site.min.css @@ -1 +1 @@ -@charset "UTF-8";body{position:relative;min-width:400px;min-height:100vh;padding-bottom:56px;}footer.navbar{position:absolute;bottom:0;width:100%;border-top:1px solid rgba(0,0,0,.1);padding-top:.5rem;}blockquote{color:#aaa;}.clear{clear:both;}.body-offset{margin-top:24px;}.hidden,.inline-editor .hidden{display:none;}a{cursor:pointer;}.loading-bar{display:inline-block;position:relative;width:64px;height:84px;}.loading-bar div{display:inline-block;position:absolute;left:6px;width:13px;background:var(--purple);animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;}.loading-bar div:nth-child(1){left:6px;animation-delay:-.24s;}.loading-bar div:nth-child(2){left:26px;animation-delay:-.12s;}.loading-bar div:nth-child(3){left:45px;animation-delay:0;}@keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}.inline-editor .oi-check,.inline-editor .fa-check{color:var(--green);}.inline-editor .oi-x,.inline-editor .fa-times{color:var(--danger);}.inline-editor .editor-toolbar:after{clear:both;}.inline-editor .input-group-append button:hover .oi-check{color:#fff;}.inline-editor .input-group-append button:hover .oi-x{color:#fff;}.inline-editor .form-control{font-size:inherit;}.inline-editor textarea{min-height:400px;}.inline-editor input[type=text]{border-right:none;}.inline-editor .input-group-append button{border-color:#ced4da;border-left-width:0;border-right-width:0;}.inline-editor .input-group-append button:last-of-type{border-right-width:1px;}.inline-editor-viewmode .inline-editor-value{position:relative;}.inline-editor-viewmode .oi-pencil{display:none;color:#aaa;font-size:16px;left:-24px;position:absolute;top:2px;}.inline-editor-viewmode:hover .oi-pencil,.inline-editor-viewmode:active .oi-pencil{display:inline-block;}h2 .inline-editor-viewmode .oi{top:14px;}h4 .inline-editor-viewmode .oi{top:8px;}.inline-markdown .inline-submit{margin-top:-60px;}.map-container{position:relative;}.map-container .map{height:500px;}.map-container .map-controls{position:absolute;top:10px;z-index:1;left:10px;}.map-container .card .card-header,.map-container .card .card-footer{display:none;}.map-container .card .card-body{padding:4px;}.file-upload{float:left;margin-right:4px;}.file-upload input[type=file]{display:none;}.main-navbar{z-index:2;}.main-navbar .navbar-toggler{border:none;outline:none;}.actions .right-actions{text-align:right;}.actions button{margin-bottom:4px;}@media(max-width:575px){.actions button,.actions form{width:100%;display:block;}}@media(max-width:480px){footer{font-size:13px;}}.exception-panel{margin-top:24px;}.component-login form{width:100%;max-width:330px;padding:15px;margin:0 auto;}.component-login .checkbox{font-weight:400;}.component-login .form-control{position:relative;box-sizing:border-box;height:auto;padding:10px;font-size:16px;}.component-login .form-control:focus{z-index:2;}.component-login input[type="text"]{margin-bottom:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0;}.component-login input[type="password"]{margin-bottom:10px;border-top-left-radius:0;border-top-right-radius:0;}.timeline{width:100%;padding:64px 0 0 0;position:relative;font-family:'Source Sans Pro',sans-serif;font-weight:300;}.timeline:before{content:'';position:absolute;top:0;left:calc(15%);bottom:0;width:4px;background:#ddd;}.timeline:after{content:"";display:table;clear:both;}.timeline *{box-sizing:border-box;}.entry{clear:both;text-align:left;position:relative;}.entry .title{margin-bottom:.5em;float:left;width:15%;padding-right:30px;text-align:right;position:relative;}.entry .title:before{content:'';position:absolute;width:18px;height:18px;border:4px solid #fa8072;background-color:#fff;border-radius:100%;top:15%;right:-11px;}.entry .title h3{margin:0;font-size:120%;}.entry .title p{margin:0;font-size:100%;}.entry .body{margin:0 0 3em;float:right;width:85%;padding-left:30px;}.entry .body h2{margin-top:-6px;font-size:180%;}.entry .body h2 a{color:#000;}.entry .body h2 a:hover{text-decoration:none;}.entry .body h2 a:hover::after{color:#fa8072;content:"»";}.entry .body .information{margin-right:6px;color:#333;}.entry .body .oi{font-size:12px;}.entry:after{content:'';display:block;clear:both;}.entry-new .date-box{width:100px;float:right;}.entry-more{position:relative;margin-left:calc(15% - 34px);margin-bottom:48px;background:#fff;}.entry-more .btn-outline-salmon{color:#fa8072;border-color:#fa8072;background-color:transparent;}.entry-more .btn-outline-salmon:focus,.entry-more .btn-outline-salmon:hover{box-shadow:0 0 0 .2rem rgba(250,128,114,.25);}.entry-more .btn-outline-salmon:hover{color:#fff;background-color:#ffa07a;}.entry-picker .timeline:before{left:7px;}.entry-picker .entry .title{position:initial;width:auto;float:none;padding-right:0;padding-left:30px;text-align:left;position:relative;}.entry-picker .entry .title:before{right:auto;left:0;}.entry-picker .entry .body{float:none;width:auto;}.entry-picker .entry-new .date-box{width:100%;float:none;}.entry-picker .entry-more{margin-left:0;}@media(max-width:768px){.timeline:before{left:7px;}.entry .title{position:initial;width:auto;float:none;padding-right:0;padding-left:30px;text-align:left;position:relative;}.entry .title:before{right:auto;left:0;}.entry .body{float:none;width:auto;}.entry-new .date-box{width:100%;float:none;}.entry-more{margin-left:0;}}.mappage{position:absolute;top:70px;left:0;bottom:0;right:0;}.mappage .map-container{height:100%;}.mappage .map-container .map{height:100%;}@media(max-width:991px){.mappage{top:55px;}}.entry-detail{padding:24px;margin:24px 0;}.entry-detail .text{margin:24px 0;}.entry-detail .images{margin:24px 0;display:grid;grid-gap:15px;}@media(min-width:520px){.entry-detail .images{grid-template-columns:1fr 1fr;}}@media(min-width:768px){.entry-detail .images{grid-template-columns:1fr 1fr 1fr;}}@media(min-width:992px){.entry-detail .images{grid-template-columns:1fr 1fr 1fr 1fr;}}@media(min-width:1200px){.entry-detail .images{grid-template-columns:1fr 1fr 1fr 1fr 1fr;}}.entry-detail .images .image{display:flex;align-items:center;}.entry-detail .images .image a{display:block;margin:0 auto;}.entry-detail .images .image img{width:200px;height:160px;transition:all .5s;}.entry-detail .images .image img:hover{transform:scale(1.05);}.entry-detail .images .image-placeholder{justify-content:center;}.entry-detail .images .image-placeholder img{opacity:.2;}.entry-detail .images .image-placeholder span{position:absolute;}.entry-detail .placeholder{color:#aaa;}.entry-picker .modal-body{padding:0;}.entry-picker .timeline{padding:0;}.entry-picker .timeline:before{left:23px;}.entry-picker .entry{padding:1rem;}.entry-picker .entry .title{display:block;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.entry-picker .entry .body{margin-bottom:0;}.entry-picker .entry .body h2{font-size:120%;font-weight:bold;line-height:1;margin-bottom:0;}.entry-picker .entry .date{padding-right:.5rem;}.entry-picker .entry:last-child{padding-bottom:0;border-bottom-width:0;}.image-detail{padding:24px;margin:24px 0;}.image-detail .text{margin:24px 0;}.image-detail .image{margin:24px 0;display:flex;align-items:center;}.image-detail .image img{max-width:100%;max-height:100%;display:block;margin:0 auto;}.image-detail .placeholder{color:#aaa;}.stories{margin-bottom:1rem;}.stories .story{padding:1rem;border-bottom:1px solid rgba(0,0,0,.1);}.stories .story .dates,.stories .story .entries,.stories .story .chapters{padding-right:.5rem;}.stories .story-new{padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.1);}.stories .story:last-child{padding-bottom:0;border-bottom-width:0;}.entry-detail .chapter{margin-top:1.5rem !important;}.entry-detail .entries{margin-bottom:1.5rem;}.story-picker .story{padding:1rem;border-bottom:1px solid rgba(0,0,0,.1);}.story-picker .story .title{display:block;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.story-picker .story .chapters{padding-right:.5rem;}.story-picker .story .chapters ul{padding-left:20px;}.story-picker .story:first-child{padding-top:0;}.story-picker .story:last-child{padding-bottom:0;border-bottom-width:0;}.version{color:#aaa;} \ No newline at end of file +@charset "UTF-8";body{position:relative;min-width:400px;min-height:100vh;padding-bottom:56px;}footer.navbar{position:absolute;bottom:0;width:100%;border-top:1px solid rgba(0,0,0,.1);padding-top:.5rem;}blockquote{color:#aaa;}.clear{clear:both;}.body-offset{margin-top:24px;}.hidden,.inline-editor .hidden{display:none;}a{cursor:pointer;}.loading-bar{display:inline-block;position:relative;width:64px;height:84px;}.loading-bar div{display:inline-block;position:absolute;left:6px;width:13px;background:var(--purple);animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;}.loading-bar div:nth-child(1){left:6px;animation-delay:-.24s;}.loading-bar div:nth-child(2){left:26px;animation-delay:-.12s;}.loading-bar div:nth-child(3){left:45px;animation-delay:0;}@keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}.loading-circle{border:8px solid #bcbfbe;border-top:8px solid #007bff;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite;color:transparent;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.inline-editor .oi-check,.inline-editor .fa-check{color:var(--green);}.inline-editor .oi-x,.inline-editor .fa-times{color:var(--danger);}.inline-editor .editor-toolbar:after{clear:both;}.inline-editor .input-group-append button:hover .oi-check{color:#fff;}.inline-editor .input-group-append button:hover .oi-x{color:#fff;}.inline-editor .form-control{font-size:inherit;}.inline-editor textarea{min-height:400px;}.inline-editor input[type=text]{border-right:none;}.inline-editor .input-group-append button{border-color:#ced4da;border-left-width:0;border-right-width:0;}.inline-editor .input-group-append button:last-of-type{border-right-width:1px;}.inline-editor-viewmode .inline-editor-value{position:relative;}.inline-editor-viewmode .oi-pencil{display:none;color:#aaa;font-size:16px;left:-24px;position:absolute;top:2px;}.inline-editor-viewmode:hover .oi-pencil,.inline-editor-viewmode:active .oi-pencil{display:inline-block;}h2 .inline-editor-viewmode .oi{top:14px;}h4 .inline-editor-viewmode .oi{top:8px;}.inline-markdown .inline-submit{margin-top:-60px;}.map-container{position:relative;}.map-container .map{height:500px;}.map-container .map-controls{position:absolute;top:10px;z-index:1;left:10px;}.map-container .card .card-header,.map-container .card .card-footer{display:none;}.map-container .card .card-body{padding:4px;}.file-upload{float:left;margin-right:4px;}.file-upload input[type=file]{display:none;}.main-navbar{z-index:2;}.main-navbar .navbar-toggler{border:none;outline:none;}.actions .right-actions{text-align:right;}.actions button{margin-bottom:4px;}@media(max-width:575px){.actions button,.actions form{width:100%;display:block;}}@media(max-width:480px){footer{font-size:13px;}}.exception-panel{margin-top:24px;}.component-login form{width:100%;max-width:330px;padding:15px;margin:0 auto;}.component-login .checkbox{font-weight:400;}.component-login .form-control{position:relative;box-sizing:border-box;height:auto;padding:10px;font-size:16px;}.component-login .form-control:focus{z-index:2;}.component-login input[type="text"]{margin-bottom:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0;}.component-login input[type="password"]{margin-bottom:10px;border-top-left-radius:0;border-top-right-radius:0;}.timeline{width:100%;padding:64px 0 0 0;position:relative;font-family:'Source Sans Pro',sans-serif;font-weight:300;}.timeline:before{content:'';position:absolute;top:0;left:calc(15%);bottom:0;width:4px;background:#ddd;}.timeline:after{content:"";display:table;clear:both;}.timeline *{box-sizing:border-box;}.entry{clear:both;text-align:left;position:relative;}.entry .title{margin-bottom:.5em;float:left;width:15%;padding-right:30px;text-align:right;position:relative;}.entry .title:before{content:'';position:absolute;width:18px;height:18px;border:4px solid #fa8072;background-color:#fff;border-radius:100%;top:15%;right:-11px;}.entry .title h3{margin:0;font-size:120%;}.entry .title p{margin:0;font-size:100%;}.entry .body{margin:0 0 3em;float:right;width:85%;padding-left:30px;}.entry .body h2{margin-top:-6px;font-size:180%;}.entry .body h2 a{color:#000;}.entry .body h2 a:hover{text-decoration:none;}.entry .body h2 a:hover::after{color:#fa8072;content:"»";}.entry .body .information{margin-right:6px;color:#333;}.entry .body .oi{font-size:12px;}.entry:after{content:'';display:block;clear:both;}.entry-new .date-box{width:100px;float:right;}.entry-more{position:relative;margin-left:calc(15% - 34px);margin-bottom:48px;background:#fff;}.entry-more .btn-outline-salmon{color:#fa8072;border-color:#fa8072;background-color:transparent;}.entry-more .btn-outline-salmon:focus,.entry-more .btn-outline-salmon:hover{box-shadow:0 0 0 .2rem rgba(250,128,114,.25);}.entry-more .btn-outline-salmon:hover{color:#fff;background-color:#ffa07a;}.entry-picker .timeline:before{left:7px;}.entry-picker .entry .title{position:initial;width:auto;float:none;padding-right:0;padding-left:30px;text-align:left;position:relative;}.entry-picker .entry .title:before{right:auto;left:0;}.entry-picker .entry .body{float:none;width:auto;}.entry-picker .entry-new .date-box{width:100%;float:none;}.entry-picker .entry-more{margin-left:0;}@media(max-width:768px){.timeline:before{left:7px;}.entry .title{position:initial;width:auto;float:none;padding-right:0;padding-left:30px;text-align:left;position:relative;}.entry .title:before{right:auto;left:0;}.entry .body{float:none;width:auto;}.entry-new .date-box{width:100%;float:none;}.entry-more{margin-left:0;}}.mappage{position:absolute;top:70px;left:0;bottom:0;right:0;}.mappage .map-container{height:100%;}.mappage .map-container .map{height:100%;}@media(max-width:991px){.mappage{top:55px;}}.entry-detail{padding:24px;margin:24px 0;}.entry-detail .text{margin:24px 0;}.entry-detail .images{margin:24px 0;display:grid;grid-gap:15px;}@media(min-width:520px){.entry-detail .images{grid-template-columns:1fr 1fr;}}@media(min-width:768px){.entry-detail .images{grid-template-columns:1fr 1fr 1fr;}}@media(min-width:992px){.entry-detail .images{grid-template-columns:1fr 1fr 1fr 1fr;}}@media(min-width:1200px){.entry-detail .images{grid-template-columns:1fr 1fr 1fr 1fr 1fr;}}.entry-detail .images .image{display:flex;align-items:center;}.entry-detail .images .image a{display:block;margin:0 auto;}.entry-detail .images .image img{width:200px;height:160px;transition:all .5s;}.entry-detail .images .image img:hover{transform:scale(1.05);}.entry-detail .images .image-placeholder{justify-content:center;}.entry-detail .images .image-placeholder img{opacity:.2;}.entry-detail .images .image-placeholder span{position:absolute;}.entry-detail .placeholder{color:#aaa;}.entry-picker .modal-body{padding:0;}.entry-picker .timeline{padding:0;}.entry-picker .timeline:before{left:23px;}.entry-picker .entry{padding:1rem;}.entry-picker .entry .title{display:block;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.entry-picker .entry .body{margin-bottom:0;}.entry-picker .entry .body h2{font-size:120%;font-weight:bold;line-height:1;margin-bottom:0;}.entry-picker .entry .date{padding-right:.5rem;}.entry-picker .entry:last-child{padding-bottom:0;border-bottom-width:0;}.image-detail{padding:24px;margin:24px 0;}.image-detail .text{margin:24px 0;}.image-detail .image{margin:24px 0;display:flex;align-items:center;}.image-detail .image img{max-width:100%;max-height:100%;display:block;margin:0 auto;}.image-detail .placeholder{color:#aaa;}.stories{margin-bottom:1rem;}.stories .story{padding:1rem;border-bottom:1px solid rgba(0,0,0,.1);}.stories .story .dates,.stories .story .entries,.stories .story .chapters{padding-right:.5rem;}.stories .story-new{padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.1);}.stories .story:last-child{padding-bottom:0;border-bottom-width:0;}.entry-detail .chapter{margin-top:1.5rem !important;}.entry-detail .entries{margin-bottom:1.5rem;}.story-picker .story{padding:1rem;border-bottom:1px solid rgba(0,0,0,.1);}.story-picker .story .title{display:block;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.story-picker .story .chapters{padding-right:.5rem;}.story-picker .story .chapters ul{padding-left:20px;}.story-picker .story:first-child{padding-top:0;}.story-picker .story:last-child{padding-bottom:0;border-bottom-width:0;}.version{color:#aaa;} \ No newline at end of file