From ee814bfafe3b34a21c16120b3384eb1ea54da643 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Sat, 9 Feb 2019 16:42:50 +0200 Subject: [PATCH 1/3] Loading indicator till app inits --- client/app/assets/less/main.less | 1 + client/app/assets/less/redash/css-logo.less | 86 +++++++++++++++++++ .../assets/less/redash/redash-newstyle.less | 51 +++++++++++ client/app/index.html | 17 ++++ client/app/multi_org.html | 17 ++++ 5 files changed, 172 insertions(+) create mode 100644 client/app/assets/less/redash/css-logo.less diff --git a/client/app/assets/less/main.less b/client/app/assets/less/main.less index 45e5dc3ce5..4b7ef25beb 100644 --- a/client/app/assets/less/main.less +++ b/client/app/assets/less/main.less @@ -75,6 +75,7 @@ @import 'redash/redash-table'; @import 'redash/query'; @import 'redash/tags-control'; +@import 'redash/css-logo'; diff --git a/client/app/assets/less/redash/css-logo.less b/client/app/assets/less/redash/css-logo.less new file mode 100644 index 0000000000..7eb2754d21 --- /dev/null +++ b/client/app/assets/less/redash/css-logo.less @@ -0,0 +1,86 @@ +// based on https://github.com/outbrain/tech-companies-logos-in-css/pull/28 +#css-logo { + --primary: #ff7964; + --shadow: #ef6c58; + --bar: white; + width: 100px; + height: 100px; + position: relative; + + #circle { + width: 79px; + height: 79px; + background-color: var(--shadow); + border-radius: 50%; + margin: auto; + overflow: hidden; + position: relative; + + & > div { + width: 79px; + height: 73px; + background-color: var(--primary); + border-radius: 50%; + position: absolute; + top: 0; + } + } + + #bars { + position: absolute; + left: 0; + top: 24px; + right: 0; + height: 33px; + display: flex; + padding: 0 22px 0; + + .bar { + background: var(--bar); + box-shadow: 0px 2px 0 0 var(--shadow); + display: inline-block; + border-radius: 1px; + align-self: flex-end; + flex: 1; + margin: 0 2px; + border-radius: 3px; + + &:nth-child(1) { + height: 32%; + } + + &:nth-child(2) { + height: 71%; + } + + &:nth-child(3) { + height: 50%; + } + + &:nth-child(4) { + height: 100%; + } + } + } + + #point, + #point > div { + position: absolute; + width: 0; + height: 0; + border: 17px solid var(--shadow); + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: 0; + left: 48px; + transform: scaleX(0.87); + transform-origin: left; + } + + #point > div { + bottom: -12px; + border-color: var(--primary); + transform: scaleX(1.04); + left: -17px; + } +} \ No newline at end of file diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less index f3d1a667f1..06ea38bf75 100644 --- a/client/app/assets/less/redash/redash-newstyle.less +++ b/client/app/assets/less/redash/redash-newstyle.less @@ -938,6 +938,57 @@ text.slicetext { font-weight: bold; } +.loading-indicator { + position: fixed; + top: 50%; + left: 50%; + margin: -50px 0 0 -50px; // center + width: 100px; + height: 100px; + transition-duration: 150ms; + transition-timing-function: linear; + transition-property: opacity, transform; + + #css-logo { + animation: hover 2s infinite; + } + + shadow { + width: 33px; + height: 12px; + border-radius: 50%; + background-color: black; + opacity: 0.25; + display: block; + position: absolute; + left: 34px; + top: 115px; + animation: shadow 2s infinite; + } + + @keyframes hover { + 50% { + transform: translateY(-5px); + } + } + @keyframes shadow { + 50% { + transform: scaleX(0.9); + opacity: 0.2; + } + } +} + +// hide indicator when app-view has content +app-view:not(:empty) ~ .loading-indicator { + opacity: 0; + transform: scale(0.9); + pointer-events: none; + + * { + animation: none !important; + } +} .markdown img { max-width: 100%; } \ No newline at end of file diff --git a/client/app/index.html b/client/app/index.html index 8e5308b773..aebe092177 100644 --- a/client/app/index.html +++ b/client/app/index.html @@ -26,6 +26,23 @@
+
+ + +
diff --git a/client/app/multi_org.html b/client/app/multi_org.html index 39da9818de..1b3c55029b 100644 --- a/client/app/multi_org.html +++ b/client/app/multi_org.html @@ -26,6 +26,23 @@
+
+ + +
From 054355814e49aaacbe4caa434bd7908f75a2a997 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Sun, 12 May 2019 11:41:50 -0600 Subject: [PATCH 2/3] Rebased --- client/app/assets/less/redash/redash-newstyle.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less index 06ea38bf75..f86f84fdcc 100644 --- a/client/app/assets/less/redash/redash-newstyle.less +++ b/client/app/assets/less/redash/redash-newstyle.less @@ -938,6 +938,10 @@ text.slicetext { font-weight: bold; } +.markdown img { + max-width: 100%; +} + .loading-indicator { position: fixed; top: 50%; @@ -988,7 +992,4 @@ app-view:not(:empty) ~ .loading-indicator { * { animation: none !important; } -} -.markdown img { - max-width: 100%; } \ No newline at end of file From 59a898409a4a94e97690941cf4df277446dcd1c5 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 13 May 2019 11:38:00 -0600 Subject: [PATCH 3/3] Fixed comments --- client/app/assets/less/redash/css-logo.less | 22 ++++++++++--------- .../assets/less/redash/redash-newstyle.less | 2 +- client/app/index.html | 2 +- client/app/multi_org.html | 2 +- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/client/app/assets/less/redash/css-logo.less b/client/app/assets/less/redash/css-logo.less index 7eb2754d21..36d3553b73 100644 --- a/client/app/assets/less/redash/css-logo.less +++ b/client/app/assets/less/redash/css-logo.less @@ -1,8 +1,10 @@ // based on https://github.com/outbrain/tech-companies-logos-in-css/pull/28 + +@primary: #ff7964; +@shadow: #ef6c58; +@bar: white; + #css-logo { - --primary: #ff7964; - --shadow: #ef6c58; - --bar: white; width: 100px; height: 100px; position: relative; @@ -10,7 +12,7 @@ #circle { width: 79px; height: 79px; - background-color: var(--shadow); + background-color: @shadow; border-radius: 50%; margin: auto; overflow: hidden; @@ -19,7 +21,7 @@ & > div { width: 79px; height: 73px; - background-color: var(--primary); + background-color: @primary; border-radius: 50%; position: absolute; top: 0; @@ -36,8 +38,8 @@ padding: 0 22px 0; .bar { - background: var(--bar); - box-shadow: 0px 2px 0 0 var(--shadow); + background: @bar; + box-shadow: 0px 2px 0 0 @shadow; display: inline-block; border-radius: 1px; align-self: flex-end; @@ -68,7 +70,7 @@ position: absolute; width: 0; height: 0; - border: 17px solid var(--shadow); + border: 17px solid @shadow; border-right-color: transparent !important; border-bottom-color: transparent !important; bottom: 0; @@ -79,8 +81,8 @@ #point > div { bottom: -12px; - border-color: var(--primary); + border-color: @primary; transform: scaleX(1.04); left: -17px; } -} \ No newline at end of file +} diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less index f86f84fdcc..cc2bee630d 100644 --- a/client/app/assets/less/redash/redash-newstyle.less +++ b/client/app/assets/less/redash/redash-newstyle.less @@ -957,7 +957,7 @@ text.slicetext { animation: hover 2s infinite; } - shadow { + #shadow { width: 33px; height: 12px; border-radius: 50%; diff --git a/client/app/index.html b/client/app/index.html index aebe092177..da1df9e446 100644 --- a/client/app/index.html +++ b/client/app/index.html @@ -41,7 +41,7 @@
- +
diff --git a/client/app/multi_org.html b/client/app/multi_org.html index 1b3c55029b..b19b915f7e 100644 --- a/client/app/multi_org.html +++ b/client/app/multi_org.html @@ -41,7 +41,7 @@
- +