Support interactive video stats graph

1 files changed, 26 insertions, 0 deletions

diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index 190499b5c..e2a74152f 100644
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -21,6 +21,7 @@
   min-width: 200px;
   margin-right: 15px;
   background-color: pvar(--submenuBackgroundColor);
+  margin-bottom: 15px;
 
   .label,
   .more-info {
@@ -37,6 +38,12 @@
     font-size: 24px;
     font-weight: $font-semibold;
   }
+
+  @media screen and (max-width: $mobile-view) {
+    min-height: fit-content;
+    min-width: fit-content;
+    padding: 15px;
+  }
 }
 
 my-embed {
@@ -45,6 +52,12 @@ my-embed {
   width: 100%;
 }
 
+@include on-small-main-col {
+  my-embed {
+    display: none;
+  }
+}
+
 .tab-content {
   margin-top: 15px;
 }
@@ -52,3 +65,16 @@ my-embed {
 .nav-tabs {
   @include peertube-nav-tabs($border-width: 2px);
 }
+
+.chart-container {
+  margin-bottom: 10px;
+}
+
+.zoom-container {
+  display: flex;
+  justify-content: center;
+
+  .description {
+    font-style: italic;
+  }
+}