Improve style of the torrent informations

2 files changed, 14 insertions, 4 deletions

diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index f2a50eccd..9e8f50908 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -7,7 +7,7 @@
 </div>
 
 <div id="torrent-info">
-  <div>Download: {{ downloadSpeed | bytes }}/s</div>
-  <div>Upload: {{ uploadSpeed | bytes }}/s</div>
-  <div>Number of peers: {{ numPeers }}</div>
+  <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div>
+  <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div>
+  <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div>
 <div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
index b6c2fc050..62ae8a126 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/client/angular/videos/components/watch/videos-watch.component.scss
@@ -1,5 +1,5 @@
 .embed-responsive {
-  height: 100%;
+  height: 500px;
 }
 
 #video-loading {
@@ -28,3 +28,13 @@
     from { -moz-transform: rotate(0deg);}
     to { -moz-transform: rotate(360deg);}
 }
+
+#torrent-info {
+  font-size: 10px;
+
+  div {
+    display: inline-block;
+    width: 33%;
+    text-align: center;
+  }
+}