diff --git a/frontend/frontend/static/frontend/assets/js/setup-tool.js b/frontend/frontend/static/frontend/assets/js/setup-tool.js index 2e05723..1a37b8b 100644 --- a/frontend/frontend/static/frontend/assets/js/setup-tool.js +++ b/frontend/frontend/static/frontend/assets/js/setup-tool.js @@ -188,6 +188,7 @@ function Item(name, button) { function updateSelection() { //todo: freeze UI + loader(true); return requestSelection().then(function(data){ // go by items for (var name in data) { @@ -209,9 +210,11 @@ function Item(name, button) { // remove all hover styles styleTool.unstyleAll('hover'); } + loader(false); return {}; }, function(error){ - //todo: unfreez UI + //unfreez UI + loader(false); console.log('Server error: '+ error); }); } @@ -415,11 +418,14 @@ function updateCreateButton() { function onCreateButtonClick() { var active = !$('#create').hasClass('disabled'); if (active) - //todo: freeze UI + //freeze UI + loader(true); createFeed().then(function(feed_page_url){ window.location.href = feed_page_url; + loader(false); }, function(error){ - //todo: unfreez UI + //unfreez UI + loader(false); console.log('Server error: '+ error); }); } @@ -457,6 +463,10 @@ function createFeed() { // ++++ Create button logic //// +// Spinner +function loader(show) { + document.getElementById("loader-bg").style.display = show ? "block" : "none"; +} $(document).ready(function(){ items['title'] = new Item('title', $('#st-title')[0]); diff --git a/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css b/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css index f8942af..c5323da 100644 --- a/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css +++ b/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css @@ -35,4 +35,43 @@ color: white; border: none; } +/* Loader background */ +#loader-bg { + display: none; + position: absolute; + left: 0%; + top: 0%; + z-index: 1; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.5); } + +/* Center the loader */ +#loader { + position: absolute; + left: 50%; + top: 50%; + z-index: 1; + width: 150px; + height: 150px; + margin: -75px 0 0 -75px; + border: 16px solid #f3f3f3; + border-radius: 50%; + border-top: 16px solid #3498db; + width: 120px; + height: 120px; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; } + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(360deg); } } +@keyframes spin { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } + /*# sourceMappingURL=wizard.css.css.map */ diff --git a/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css.map b/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css.map index 578232c..b671188 100644 --- a/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css.map +++ b/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAGA,OAAQ;EAIN,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,MAAM;EAIlB,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,MAAM;EATlB,WAAI;IACF,KAAK,EAAE,KAAK;EAId,UAAG;IACD,SAAS,EAAE,GAAG;;;;AAYlB,gDAAiD;EAE7C,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;;AAMpB,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;;AAMpB,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,OAAQ;EACN,UAAU,EAAE,MAAM;;AAGpB,sBAAuB;EACrB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI", +"mappings": "AAGA,OAAQ;EAIN,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,MAAM;EAIlB,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,MAAM;EATlB,WAAI;IACF,KAAK,EAAE,KAAK;EAId,UAAG;IACD,SAAS,EAAE,GAAG;;AAOlB,mBAAmB;AAInB,8CAA8C;AAC9C,gDAAiD;EAE7C,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,wCAAwC;AACxC,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,+BAA+B;AAC/B,yBAA0B;EAEtB,WAAI;IACF,KAAK,EAAE,KAAK;EAEd,UAAG;IACD,SAAS,EAAE,GAAG;AAKpB,OAAQ;EACN,UAAU,EAAE,MAAM;;AAGpB,sBAAuB;EACrB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;;AAId,uBAAuB;AACvB,UAAW;EACT,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,EAAE;EACR,GAAG,EAAE,EAAE;EACP,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,wBAAqB;;AAEzC,uBAAuB;AACvB,OAAQ;EACN,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,GAAG,EAAE,GAAG;EACR,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,eAAe;EACvB,MAAM,EAAE,kBAAkB;EAC1B,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,kBAAkB;EAC9B,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,iBAAiB,EAAE,uBAAuB;EAC1C,SAAS,EAAE,uBAAuB;;AAGpC,uBAGC;EAFC,EAAG;IAAE,iBAAiB,EAAE,YAAY;EACpC,IAAK;IAAE,iBAAiB,EAAE,cAAc;AAG1C,eAGC;EAFC,EAAG;IAAE,SAAS,EAAE,YAAY;EAC5B,IAAK;IAAE,SAAS,EAAE,cAAc", "sources": ["wizard.css.scss"], "names": [], "file": "wizard.css.css" diff --git a/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.scss b/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.scss index ac3123f..31c4a39 100644 --- a/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.scss +++ b/frontend/frontend/static/frontend/assets/stylesheets/wizard.css.scss @@ -63,4 +63,45 @@ background: gray; color: white; border: none; -} \ No newline at end of file +} + + +/* Loader background */ +#loader-bg { + display: none; + position: absolute; + left: 0%; + top: 0%; + z-index: 1; + width: 100%; + height: 100%; + background-color: rgba(255,255,255,0.5); +} +/* Center the loader */ +#loader { + position: absolute; + left: 50%; + top: 50%; + z-index: 1; + width: 150px; + height: 150px; + margin: -75px 0 0 -75px; + border: 16px solid #f3f3f3; + border-radius: 50%; + border-top: 16px solid #3498db; + width: 120px; + height: 120px; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} + +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + diff --git a/frontend/frontend/templates/frontend/setup.html b/frontend/frontend/templates/frontend/setup.html index 1dea3cb..e66cdba 100644 --- a/frontend/frontend/templates/frontend/setup.html +++ b/frontend/frontend/templates/frontend/setup.html @@ -2,6 +2,7 @@ {% load i18n %}_ {% block content %} +