Made minor UI changes to 'adding games' page.

Relpaced 'Slugline' & 'Summary' with 'Summary' & 'Description'. Added Splash Image This is becuase the latter are more understandable to a general user.
5001CEM-1920SEPJAN · Dec 2, 2019 · e2731c8385f74f141e1060190200cf2ee584be04 · e2731c8
1 parent b5a9ee0
commit e2731c8385f74f141e1060190200cf2ee584be04
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 51 deletions.
diff --git a/public/css/adding.css b/public/css/adding.css
@@ -29,14 +29,16 @@ h1 {
 	text-align: center;
 	font-size: 40px;
 	color: white;
-	margin-top: 20px;
-
 	margin-bottom: 0px;
+	margin-top: -90px;
+	position: relative;
+
 }
 h2 {
 	margin-bottom: 5px;
 	text-transform: uppercase;
 	font-size: 18px;
+	position: relative;
 }
 .grid-container {
   display: grid;
@@ -152,4 +154,30 @@ input[type="file"]:valid ~ .fa-check{
 .custom-file-upload:hover {
 	background-color: var(--main-highlight-color);
 	margin-top: 9px;
+}
+.splash {
+	width: 125%;
+	margin-left: -12.5%;
+	margin-top: -5%;
+	height: 478px;
+}
+.splash img {
+	object-fit: cover;
+	height: 100%;
+}
+.splash .splashGradient {
+	position: relative;
+	margin-top: -478px;
+	height: 100%;
+	background: rgba(0, 0, 0, 0);
+	width: 100%;
+	box-shadow: inset 0 0 78px 100px var(--main-bg-color);
+}
+figure {
+	width: 100%;
+	height: auto;
+	margin: 0px;
+}
+figure img {
+	width: 100%;
 }
diff --git a/public/css/placeholderforadding.css b/public/css/placeholderforadding.css
diff --git a/public/images/addingGameSplash.jpg b/public/images/addingGameSplash.jpg
diff --git a/views/addingGames.hbs b/views/addingGames.hbs
@@ -9,6 +9,11 @@
 	<body>
 		{{>navbar}}
 		<section class="siteContent">
+        <figure class="splash">
+            <img src="/public/images/addingGameSplash.jpg" alt="Splash image" class="centre" />
+            <section class="splashGradient">
+                </sec>
+        </figure>			
 		<h1>Add a Game</h1>
 		{{#if errorMsg}}
 		<div class= "error-msg">
@@ -45,9 +50,9 @@
 			</section>
 									<h2>Details</h2>
 
-			<input type="text" id = "slugline" placeholder="Slugline" name="slugline" required/>
+			<input type="text" id = "slugline" placeholder="Summary" name="slugline" required/>
 						<br>
-			<input type="text" id = "summary" placeholder="Summary" name="summary" required/>
+			<input type="text" id = "summary" placeholder="Description" name="summary" required/>
 
 			<input type="date" placeholder="Release Date" name="releaseDate" required/>