From c0ce5bca9677cb36ee608567db2cf3b71fa8ffdc Mon Sep 17 00:00:00 2001
From: Muzahid <muzahid.h@cisinlabs.com>
Date: Thu, 3 Feb 2022 19:10:36 +0530
Subject: [PATCH] fix ui issue

---
 index.html |  38 ++++-----
 style.css  | 231 +++++++++++++++++++++++++----------------------------
 2 files changed, 129 insertions(+), 140 deletions(-)

diff --git a/index.html b/index.html
index 3380a94..3eaa86e 100644
--- a/index.html
+++ b/index.html
@@ -59,25 +59,27 @@
         <!-- Sidebar scroller start -->
     </div>
 
-
-<script>
-    let listVideo= document.querySelectorAll('.video-list .vid');
-    let mainVideo= document.querySelector('.main-video video')
-    let title = document.querySelector('.main-video .title')
-    listVideo.forEach(video =>{
-        video.onclick = () =>{
-            listVideo.forEach(vid => vid.classList.remove('active'));
-            video.classList.add('active');
-            if(video.classList.contains('active')){
-                let src = video.children[0].getAttribute('src');
-                mainVideo.src = src;
-                let text = video.children[1].innerHTML;
-                title.innerHTML = text;
+    <script>
+        let listVideo= document.querySelectorAll('.video-list .vid');
+        let mainVideo= document.querySelector('.main-video video')
+        let title = document.querySelector('.main-video .title')
+        listVideo.forEach(video =>{
+            video.onclick = () =>{
+                listVideo.forEach(vid => vid.classList.remove('active'));
+                video.classList.add('active');
+                console.log("video",video)
+                let src = document.getElementsByClassName('active').item('video').children[0].currentSrc;
+                // let src = $('.active').children[0].currentSrc;
+                if(video.classList.contains('active')){
+                    // let src = video
+                    console.log("here is the src",src)
+                    mainVideo.src = src;
+                    let text = video.children[1].innerHTML;
+                    title.innerHTML = text;
+                };
             };
-        };
-    });
+        });
+    </script>
 
-    
-</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index ba6c582..f257b35 100644
--- a/style.css
+++ b/style.css
@@ -1,144 +1,131 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    text-transform: capitalize;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    font-weight: normal;
-}
-body{
-    background: #fff;
-}
-.heading{
-    color: dimgrey;
-    font-size: 40px;
-    /*text-align: center;*/
-    padding: 10px;
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	text-transform: capitalize;
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-weight: normal;
 }
 
-.container{
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 15px;
-    align-items: flex-start;
-    padding: 5px 5%;
-}
-.container .main-video{
-    background: white;
-    border-radius: 5px;
-    padding: 10px;
-}
-.container .main-video video{
-    width: 100%;
-    border-radius: 5px;
-
-}
-.container .main-video video .title{
-    color: grey;
-    font-size: 23px;
-    padding-top: 15px;
-    padding-bottom: 15px;
+body {
+	background: #fff;
 }
 
-.container .video-list{
-    background: white;
-    border-radius: 5px;
-    height: 520px;
-    overflow-y:  scroll;
-
-
-}
-.container .video-list .vid video{
-    width: 100%;
-    border-radius: 5px;
-
+.heading {
+	color: dimgrey;
+	font-size: 40px;
+	/*text-align: center;*/
+	padding: 10px;
 }
 
-
-.container .main-video .title{
-    color: grey;
-    font-size: 23px;
-    padding-top: 15px;
-    padding-bottom: 15px;
+.container {
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	gap: 15px;
+	align-items: flex-start;
+	padding: 5px 5%;
 }
 
-.container .video-list{
-    background: white;
-    border-radius: 5px;
-    height: 100%;
-    overflow-y: scroll;
+.container .main-video {
+	background: white;
+	border-radius: 5px;
+	padding: 10px;
 }
 
-.container .video-list::-webkit-scrollbar{
-    width: 7px;
-}
-.container .video-list::-webkit-scrollbar-track{
-    background: white;
-    border-radius: 50px;
-
+.container .main-video video {
+	width: 100%;
+	border-radius: 5px;
 }
 
-.container .video-list::-webkit-scrollbar-thumb{
-    background: #ccc;
-    border-radius: 50px;
-    
-}
-.container .video-list .vid video{
-    width: 100px;
-    border-radius: 5px;
-
+.container .main-video video .title {
+	color: grey;
+	font-size: 23px;
+	padding-top: 15px;
+	padding-bottom: 15px;
 }
 
-
-.container .video-list .vid{
-    display: flex;
-    gap: 15px;
-    background: white;
-    border-radius: 5px;
-    margin: 10px;
-    padding: 10px;
-    border: 1px solid rgba(0, 0, 0, .1);
-    cursor: pointer;
-    flex-direction: column;
-}
-.container .video-list .vid:hover{
-    background: white;
-}
-
-.container .video-list .vid.active{
-    background: #ccc;
-}
-.container .video-list .vid.active.title{
-    color: white;
-}
-
-.container .video-list .vid .title{
-    color: grey;
-    font-size: 17px;
+.container .video-list {
+	background: white;
+	border-radius: 5px;
+	height: 520px;
+	overflow-y: scroll;
 }
 
 .container .video-list .vid video {
-    width: 100%;
-    border-radius: 5px;
+	width: 100%;
+	border-radius: 5px;
 }
 
-@media(max-width:994px){
-    .container{
-        
-        grid-template-columns: 1.5fr 1fr;
-        
-        padding: 10px;
-    }
-
-}
-@media(max-width:778px){
-    .container{
-        
-        grid-template-columns:  1fr;
-        
-        padding: 10px;
-    }
-
+.container .main-video .title {
+	color: grey;
+	font-size: 23px;
+	padding-top: 15px;
+	padding-bottom: 15px;
 }
 
+.container .video-list::-webkit-scrollbar {
+	width: 7px;
+}
 
+.container .video-list::-webkit-scrollbar-track {
+	background: white;
+	border-radius: 50px;
+}
+
+.container .video-list::-webkit-scrollbar-thumb {
+	background: #ccc;
+	border-radius: 50px;
+}
+
+.container .video-list .vid video {
+	width: 100px;
+	border-radius: 5px;
+}
+
+.container .video-list .vid {
+	display: flex;
+	gap: 15px;
+	background: white;
+	border-radius: 5px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid rgba(0, 0, 0, .1);
+	cursor: pointer;
+	flex-direction: column;
+}
+
+.container .video-list .vid:hover {
+	background: white;
+}
+
+.container .video-list .vid.active {
+	background: #ccc;
+}
+
+.container .video-list .vid.active.title {
+	color: white;
+}
+
+.container .video-list .vid .title {
+	color: grey;
+	font-size: 17px;
+}
+
+.container .video-list .vid video {
+	width: 100%;
+	border-radius: 5px;
+}
+
+@media(max-width:994px) {
+	.container {
+		grid-template-columns: 1.5fr 1fr;
+		padding: 10px;
+	}
+}
+
+@media(max-width:778px) {
+	.container {
+		grid-template-columns: 1fr;
+		padding: 10px;
+	}
+}
\ No newline at end of file