diff --git a/client/app/assets/less/main.less b/client/app/assets/less/main.less index 45e5dc3c..4b7ef25b 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 00000000..36d3553b --- /dev/null +++ b/client/app/assets/less/redash/css-logo.less @@ -0,0 +1,88 @@ +// based on https://github.com/outbrain/tech-companies-logos-in-css/pull/28 + +@primary: #ff7964; +@shadow: #ef6c58; +@bar: white; + +#css-logo { + width: 100px; + height: 100px; + position: relative; + + #circle { + width: 79px; + height: 79px; + background-color: @shadow; + border-radius: 50%; + margin: auto; + overflow: hidden; + position: relative; + + & > div { + width: 79px; + height: 73px; + background-color: @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: @bar; + box-shadow: 0px 2px 0 0 @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 @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: @primary; + transform: scaleX(1.04); + left: -17px; + } +} diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less index f3d1a667..cc2bee63 100644 --- a/client/app/assets/less/redash/redash-newstyle.less +++ b/client/app/assets/less/redash/redash-newstyle.less @@ -940,4 +940,56 @@ text.slicetext { .markdown img { max-width: 100%; +} + +.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; + } } \ No newline at end of file diff --git a/client/app/index.html b/client/app/index.html index 8e5308b7..da1df9e4 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 39da9818..b19b915f 100644 --- a/client/app/multi_org.html +++ b/client/app/multi_org.html @@ -26,6 +26,23 @@
+
+ +
+