Refactor video component and CSS styles

Updated SimplegsaTimelineItem.vue component, changed video source name, moved the media-video-layout component inside the v-card, and set v-card's width to 100%. In the 'styles.css' file, simplified units by removing 'px' where unnecessary. Added a new http_requests.http file for GET requests.
BrianPurgert · May 7, 2024 · 08de4e7 · 08de4e7
1 parent db8a818
commit 08de4e7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 27 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -109,10 +109,10 @@
 	}
 
 	.v-container{
-		margin-right:  0px !important;
-		margin-left:   0px !important;
-		padding-right: 0px !important;
-		padding-left:  0px !important;
+		margin-right:  0 !important;
+		margin-left:   0 !important;
+		padding-right: 0 !important;
+		padding-left:  0 !important;
 	}
 
 	.v-timeline-item__body{
@@ -122,6 +122,11 @@
 	.v-timeline-item__opposite{
 	}
 
+	.v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body{
+		padding-inline-start: 0 !important;
+
+	}
+
 }
 
 /*.v-timeline-divider,*/
@@ -207,13 +212,13 @@
 	font-family:     "Yielding Timber" !important;
 	/*font-size       :  !important;*/
 	position:        absolute;
-	bottom:          0px;
+	bottom:          0;
 	width:           100% !important;
 	height:          50px !important;
 	text-align:      center;
 	color:           rgb(255, 255, 255);
 	background:      rgba(0, 0, 0, 0.5);
-	text-shadow:     1px 1px 0px rgba(9, 9, 9, 0.95), 2px 2px 0px rgb(41, 117, 168);
+	text-shadow:     1px 1px 0 rgba(9, 9, 9, 0.95), 2px 2px 0 rgb(41, 117, 168);
 	backdrop-filter: blur(5px);
 }
 
@@ -224,8 +229,8 @@
 #is82 .v-card-subtitle{
 	font-family: "Yielding Timber Semi-Italic", sans-serif !important;
 	position:    absolute;
-	top:         0px;
-	right:       0px;
+	top:         0;
+	right:       0;
 	text-align:  end;
 	background:  rgba(0, 0, 0, 0.5);
 }
@@ -244,7 +249,7 @@
 	font-size:   1.7em !important;
 
 	color:       rgb(var(--v-theme-on-background), 1) !important;
-	text-shadow: 1px 1px 0px rgba(9, 9, 9, 0.95), 3px 3px 0px rgba(243, 243, 243, 0.95);
+	text-shadow: 1px 1px 0 rgba(9, 9, 9, 0.95), 3px 3px 0 rgba(243, 243, 243, 0.95);
 }
 
 .axial-cut{
@@ -253,9 +258,9 @@
 	Gilam DEMO, 100 italic, 900
 */
 	color:       #2975a8;
-	text-shadow: 1px 1px 0px rgba(9, 9, 9, 0.95),
-	             2px 2px 0px rgb(189, 44, 68),
-	             3px 3px 0px rgba(243, 243, 243, 0.95);
+	text-shadow: 1px 1px 0 rgba(9, 9, 9, 0.95),
+	             2px 2px 0 rgb(189, 44, 68),
+	             3px 3px 0 rgba(243, 243, 243, 0.95);
 }
 
 /**/
@@ -297,20 +302,20 @@ v-card{
 
 	/*margin: 10px 0.5em;*/
 	z-index:     1;
-	left:        0px;
+	left:        0;
 
 	/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
 	width:       fit-content;
 
 	margin:      20vh -10px;
-	padding:     0px 11px;
+	padding:     0 11px;
 
 	text-align:  center;
 
 	color:       rgb(var(--v-theme-on-primary));
 
-	box-shadow:  0px 2px 0px 0px rgb(47, 47, 47);
-	text-shadow: 1px 1px 0px rgba(9, 9, 9, 0.95), 2px 2px 0px rgb(41, 117, 168);
+	box-shadow:  0 2px 0 0 rgb(47, 47, 47);
+	text-shadow: 1px 1px 0 rgba(9, 9, 9, 0.95), 2px 2px 0 rgb(41, 117, 168);
 }
 
 .rs-hovering{
@@ -342,7 +347,7 @@ VideoBackground{
 	text-align:      center;
 	color:           rgb(255, 255, 255);
 	background:      rgba(0, 0, 0, 0.5);
-	text-shadow:     1px 1px 0px rgba(9, 9, 9, 0.95), 2px 2px 0px rgb(41, 117, 168);
+	text-shadow:     1px 1px 0 rgba(9, 9, 9, 0.95), 2px 2px 0 rgb(41, 117, 168);
 	backdrop-filter: blur(5px);
 }
 
@@ -357,13 +362,13 @@ VideoBackground{
 	padding:     0.8rem !important;
 	opacity:     1 !important;
 	color:       rgb(255, 255, 255);
-	text-shadow: 1px 1px 0px rgba(9, 9, 9, 0.95), 2px 2px 0px rgb(41, 117, 168);
+	text-shadow: 1px 1px 0 rgba(9, 9, 9, 0.95), 2px 2px 0 rgb(41, 117, 168);
 }
 
 .google_installs{
 	font-size: 10em;
 	position:  absolute;
-	bottom:    0px;
+	bottom:    0;
 	left:      0;
 	height:    100%;
 }
@@ -377,17 +382,17 @@ VideoBackground{
 }
 
 .shadow-blue{
-	text-shadow: 1px 1px 0px rgba(9, 9, 9, 0.95), 2px 2px 1px rgb(41, 117, 168), 3px 3px 1px rgb(41, 117, 168);
+	text-shadow: 1px 1px 0 rgba(9, 9, 9, 0.95), 2px 2px 1px rgb(41, 117, 168), 3px 3px 1px rgb(41, 117, 168);
 }
 
 .shadow-red{
-	text-shadow: 1px 1px 0px rgba(9, 9, 9, 0.95), 2px 2px 1px rgb(189, 44, 68), 3px 3px 1px rgb(189, 44, 68);
+	text-shadow: 1px 1px 0 rgba(9, 9, 9, 0.95), 2px 2px 1px rgb(189, 44, 68), 3px 3px 1px rgb(189, 44, 68);
 }
 
 .bp-test{
 	outline:    5px dotted rgba(189, 44, 68, 0.9);
-	box-shadow: inset 0px 0px 0px 4px rgb(106, 0, 85),
-	            inset 0px 0px 6px 6px rgb(0, 56, 106);
+	box-shadow: inset 0 0 0 4px rgb(106, 0, 85),
+	            inset 0 0 6px 6px rgb(0, 56, 106);
 }
 
 .bg-primary{

diff --git a/components/player/SimplegsaTimelineItem.vue b/components/player/SimplegsaTimelineItem.vue
@@ -3,7 +3,10 @@
 			<v-container >
 
 				  <!--				  <ClientOnly fallback-tag = "span" >-->
-				  <v-card class = "elevation-5 pa-1" width = "70vw" >
+				  <v-card class = "elevation-5 pa-1" width = "100%" >
+						<media-video-layout >
+
+						</media-video-layout >
 						<media-player
 							  :loop = "true"
 							  :aspectRatio = "16/9"
@@ -12,7 +15,7 @@
 							  :paused = "false"
 
 							  :playsInline
-							  src = "/cap50/SimpleGSA-Video_low_av1.mp4"
+							  src = "/cap50/SimpleGSA-Video-AV1.mp4"
 							  style = "min-height: 337px;"
 
 							  title = "Price Comparison Program"
@@ -30,9 +33,7 @@
 
 				  </v-card >
 				  <!--				  </ClientOnly >-->
-				  <media-video-layout >
 
-				  </media-video-layout >
 			</v-container >
 			<template v-slot:icon >
 				  <img class = '' src = ""

diff --git a/http_requests.http b/http_requests.http
@@ -0,0 +1,5 @@
+### GET request to example server
+GET https://examples.http-client.intellij.net/get
+    ?generated-in=WebStorm
+
+###
diff --git a/public/cap50/SimpleGSA-Video_low_hevc.mp4 → public/cap50/SimpleGSA-Video-AV1.mp4 b/public/cap50/SimpleGSA-Video_low_hevc.mp4 → public/cap50/SimpleGSA-Video-AV1.mp4