Změny designu

closes #2 @1h

css/style.css

@@ -50,6 +50,15 @@ article {
 article img {
   max-width: 100%;
   max-height: 25vh;
+  margin: 1em;
+}
+
+article img:nth-child(odd) {
+  float: right;
+}
+
+article img:nth-child(even) {
+  float: left;
 }
 
 article h1:first-child {
@@ -92,6 +101,7 @@ article p:last-child {
     "icon time"
     "icon comment";
   border-bottom: 0.1vh solid #707070;
+  cursor: pointer;
 }
 .comment:last-child {
   border: none;
@@ -174,7 +184,7 @@ progress::-webkit-progress-bar {
   min-height: 5px;
   margin: 0;
   cursor: pointer;
-  z-index: 5;
+  z-index: 15;
 }
 
 .seek:focus {
@@ -209,7 +219,7 @@ progress::-webkit-progress-bar {
   left: 35%;
   height: 0.5vh;
   min-height: 5px;
-  z-index: 6;
+  z-index: 10;
   cursor: pointer;
 }
 

js/controller.js

@@ -27,6 +27,7 @@ class Controller {
     this.loadXml(videoToLoad).then(
       function (v) {
         this.view.drawCommentsText(v);
+        this.addEventListeners();
         this.view.drawCommentsToVideo(v);
       }.bind(this)
     );
@@ -79,6 +80,26 @@ class Controller {
     );
   }
 
+  addEventListeners() {
+    let comments = document.getElementsByClassName("comment");
+
+    for (let i = 0; i < comments.length; i++) {
+      comments[i].addEventListener(
+        "mouseover",
+        function () {
+          this.view.commentHover(comments[i].firstChild);
+        }.bind(this)
+      );
+      comments[i].addEventListener(
+        "mouseout",
+        function () {
+          if (!comments[i].classList.contains("activeComment"))
+            this.view.commentHover(comments[i].firstChild, false);
+        }.bind(this)
+      );
+    }
+  }
+
   async loadVideo(v) {
     let video = document.getElementById("video");
 

js/view.js

@@ -123,6 +123,15 @@ class View {
     textArea.innerHTML = text;
   }
 
+  commentHover(c, active = true) {
+    let svgDoc = c.contentDocument;
+
+    if (active) {
+      svgDoc.getElementById("path4").style.fill = "#ffa800";
+    } else {
+      svgDoc.getElementById("path4").style.fill = "#c1c1c1";
+    }
+  }
   /* colorTogglePlaySVG() {
     var playSVG = document.getElementById("togglePlayIcon");
     var svgDoc;