diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html index 2b5273b11..dda09e23e 100644 --- a/frontend/src/app/components/television/television.component.html +++ b/frontend/src/app/components/television/television.component.html @@ -1,21 +1,23 @@
-
+
-
- -
+
TV only
-
-
- - +
-
+
+
+
+
+ + +
+
+
-
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss index 695cb6df9..0c907ac9f 100644 --- a/frontend/src/app/components/television/television.component.scss +++ b/frontend/src/app/components/television/television.component.scss @@ -1,49 +1,96 @@ + +.loading { + margin: auto; + width: 100%; + display: flex; + text-align: center; + justify-content: center; + height: 100vh; + align-items: center; +} + #tv-wrapper { - height: 100%; - padding: 10px; - padding-top: 20px; -} - -.blockchain-wrapper { + height: 100vh; overflow: hidden; -} - -.position-container { - position: absolute; - left: 50%; - bottom: 170px; + position: relative; } .chart-holder { - height: calc(100% - 220px); + height: calc(100vh - 270px); + min-height: 600px; + padding-left: 20px; + width: 97%; + padding-top: 70px; + @media(min-width: 992px){ + padding-top: 30px; + } } -#divider { - width: 3px; - height: 175px; - left: 0; - top: -40px; - background-image: url('/resources/divider-new.png'); - background-repeat: repeat-y; - position: absolute; -} +.blockchain-wrapper { -#divider > img { - position: absolute; - left: -100px; - top: -28px; -} - -@media (min-width: 1920px) { .position-container { - transform: scale(1.3); - bottom: 210px; + position: absolute; + left: 50%; + bottom: 170px; } + .chart-holder { - height: calc(100% - 280px); + height: calc(100% - 220px); + } + + #divider { + width: 3px; + height: 175px; + left: 0; + top: -40px; + background-image: url('/resources/divider-new.png'); + background-repeat: repeat-y; + position: absolute; + img { + position: absolute; + left: -100px; + top: -28px; + } + } + + @media (min-width: 1920px) { + .position-container { + transform: scale(1.3); + bottom: 210px; + } + .chart-holder { + height: calc(100% - 280px); + } + } + + :host ::ng-deep .ct-legend { + top: 25px; } } -:host ::ng-deep .ct-legend { - top: 25px; +.tv-only { + display: block; + height: 100vh; + width: 100%; + position: relative; + display: flex; + text-align: center; + flex-direction: row; + align-items: center; + justify-content: center; + @media(min-width: 768px) { + display: none; + } + @media(max-height: 720px) { + display: flex; + } } +.tv-container { + display: none; + @media(min-width: 768px) { + display: flex; + } + @media(max-height: 720px) { + display: none; + } +} \ No newline at end of file diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index fdb7c62bb..c1b9012ca 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -58,7 +58,7 @@ } .item { width: 124px; - margin: 0px auto 20px; + margin: 0px auto 0px; display: inline-block; @media (min-width: 400px) { width: 50%;