Skip to content
Permalink
Browse files
Minor fixes to visuals and CSS tweaks 
Fixed appearance of the homepage so the elements are centred. Changed the visual appearance of the 'adding games' page.
  • Loading branch information
@byrnec5
byrnec5 committed Dec 2, 2019
1 parent bbd776e commit b5a9ee0ab0be1e836f4e55c2fd28df0e11b810e2
Show file tree
Hide file tree
Showing 6 changed files with 214 additions and 42 deletions.
4 controllers/homepage.js
View file
@@ -4,6 +4,10 @@ const Router = require('koa-router')

const homepage = new Router({ prefix: '/homepage' })

homepage.get('', async ctx => {
await ctx.render('homepage.hbs',{user: ctx.session.authorised, admin: await ctx.db.isUserAdmin(ctx.session.userID)})
})

homepage.get('/', async ctx => {
await ctx.render('homepage.hbs',{user: ctx.session.authorised, admin: await ctx.db.isUserAdmin(ctx.session.userID)})
})
155 public/css/adding.css
View file
@@ -0,0 +1,155 @@
html {
--main-shadow-color: Black;
--main-bg-color: #111111;
--main-element-color: #272727;
--main-secondaryelement-color: #1c1c1c;
--main-highlight-color: #3a3a3a;
--main-text-color: #dbdbdb;
--main-button-color: #272727;
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: 16px;
height: 150%;
margin: 75px 0 22px 0;
}
.siteContent {
margin-left: -2px;
font-family: 'Roboto', sans-serif;
margin-top: 0px;
width: 950px;
margin-left: auto;
margin-right: auto;
height: auto;
letter-spacing: 0.5px;
}
h1 {
font-family: Georgia, 'Times New Roman', Times, serif;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 40px;
color: white;
margin-top: 20px;

margin-bottom: 0px;
}
h2 {
margin-bottom: 5px;
text-transform: uppercase;
font-size: 18px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
width: 100%;
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
background-color: var(--main-element-color);
margin-bottom: 10px;
border-radius: 3px;
border: var(--main-element-color) 2px solid;
}
.grid-item{
text-align: left;
display: block;
padding: 10px;
}
input {
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: var(--main-element-color);
margin: 0 0 10px 0;
color: var(--main-text-color);
font-size: 18px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
input#titletext {
width: 40%;
}
input#slugline {
width: 50%;
}
input#summary {
width: 100%;
}
button{
border: none;
color: var(--main-text-color);
background-color: var(--main-button-color);
cursor: pointer;
font-size: 18px;
padding: 10px;
margin: 0px;
margin-top: 10px;
float: right;
border-radius: 2px;
}
button:hover {
background-color: var(--main-highlight-color);
margin-top: 9px;
}

input[type="checkbox"] {
cursor: pointer;
display: none;
}
input[type="checkbox"] + label {
background: var(--main-element-color);
padding: 10px;
-webkit-user-select: none;
cursor: pointer;
}
input[type="checkbox"] + label:hover {
background: var(--main-highlight-color);
}
input[type="checkbox"]:checked + label {
background: var(--main-highlight-color);
color: white
}
input[type="checkbox"]:checked + label .fa-plus {
display: none;
}
input[type="checkbox"]:checked + label .fa-check {
display: inline;
margin-left: -2px;
}
input[type="checkbox"] + label .fa-check {
display: none;
}

input[type="file"] {
display: none;
}
input[type="file"]:invalid ~ .fa-file-image{
display: inline;
}
input[type="file"]:valid ~ .fa-file-image{
display: none;
}
input[type="file"]:invalid ~ .fa-check{
display: none;
}
input[type="file"]:valid ~ .fa-check{
display: inline;
}
.custom-file-upload {
display: inline-block;
border: none;
color: var(--main-text-color);
background-color: var(--main-element-color);
cursor: pointer;
font-size: 18px;
padding: 10px;
margin: 0px;
margin-top: 10px;
border-radius: 2px;
}
.custom-file-upload:hover {
background-color: var(--main-highlight-color);
margin-top: 9px;
}
14 public/css/homepage.css
View file
@@ -1,21 +1,20 @@
**/
html {
height: 100%;

}

body{
background-color: black !important;
background-color: #111111 !important;
color: black;
margin:0;
}
/*MAIN IMAGE*/
section{
width: 1100px;
height:auto;
margin-top: 0;
margin-left: 12%;
box-shadow: inset 0px 0px 150px 150px rgb(0, 0, 0);
margin-left: auto;
margin-right: auto;
box-shadow: inset 0px 0px 150px 150px #111111;

}
img {
@@ -35,9 +34,10 @@ img {
color: white;
width: 550px;
height: auto;
margin-left: 30%;
margin-left: auto;
margin-right: auto;
margin-top: -10%;
float: center;
position: absolute;
top: 400px;

}
4 public/css/list.css
View file
@@ -5,7 +5,6 @@ html{
height: 1300px;
margin: 75px 0 22px 0;
font-family: 'Roboto', sans-serif;

}
h1 {
font-family: Georgia, 'Times New Roman', Times, serif;
@@ -14,13 +13,12 @@ h1 {
text-align: center;
font-size: 40px;
color: white;

}
.content-table{
position: relative;
bottom: 108em;
border-collapse: collapse;
margin: 420px 0;
margin: 410px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 6.5px;
77 views/addingGames.hbs
View file
@@ -2,58 +2,73 @@
<html>
<head>
<title>Add a Game</title>
<link href="/public/css/placeholderforadding.css" type="text/css" rel="stylesheet" />
<link href="/public/css/adding.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/all.css">
<link href="/public/css/navbar.css" type="text/css" rel="stylesheet" />
</head>
<body>
{{>navbar}}
<section class="siteContent">
<h1>Adding Games</h1>
<h1>Add a Game</h1>
{{#if errorMsg}}
<div class= "error-msg">
{{errorMsg}}
</div>
{{/if}}

<form method="post" enctype="multipart/form-data">
<h2>Game:</h2>
<input type="text" placeholder="Title:" name="title" required/>
<h2>Platforms:</h2>
<div class="grid-container">
<br>
<h2>Game</h2>
<input type="text" id = "titletext" placeholder="Title" name="title" required/>
<h2>Platforms</h2>
<section class="grid-container">
{{#each platforms}}
<div class="grid-item">
<input type="checkbox" name="platforms-{{this.id}}" value="{{this.id}}"/>
<label for="platforms-{{this.id}}">{{this.name}}</label>
</div>
<section class="grid-item">
<label class = "checkContainer">
<input id = "platforms-{{this.id}}" type="checkbox" name="platforms-{{this.id}}" value="{{this.id}}">
<label for="platforms-{{this.id}}"><i class="fas fa-plus"></i><i class="fas fa-check"></i> {{this.name}}</label>

</label>
</section>
{{/each}}
</div>
<h2>Categories:</h2>
<div class="grid-container">
</section>
<h2>Categories</h2>
<section class="grid-container">
{{#each categories}}
<div class="grid-item">
<input type="checkbox" name="categories-{{this.id}}" value="{{this.id}}"/>
<label for="categories-{{this.id}}">{{this.name}}</label>
</div>
<section class="grid-item">
<label class = "checkContainer">
<input id = "categories-{{this.id}}" type="checkbox" name="categories-{{this.id}}" value="{{this.id}}">
<label for="categories-{{this.id}}"><i class="fas fa-plus"></i><i class="fas fa-check"></i> {{this.name}}</label>
</label>
</section>
{{/each}}
</div>
<br>
<input type="text" placeholder="Slugline" name="slugline" required/>
<input type="text" placeholder="Summary" name="summary" required/>
</section>
<h2>Details</h2>

<input type="text" id = "slugline" placeholder="Slugline" name="slugline" required/>
<br>
<input type="text" id = "summary" placeholder="Summary" name="summary" required/>

<input type="date" placeholder="Release Date" name="releaseDate" required/>

<input type="text" placeholder="Developer" name="developer" required/>
<input type="text" placeholder="Publisher" name="publisher" required/>
<span>
<h2>Upload Poster</h2>
<input type="file" accept=".png,.jpg,.jpeg" name="poster" required/>
</span>
<span>
<h2>Upload Splash Image</h2>
<input type="file" accept=".png,.jpg,.jpeg" name="splash" required/>
</span>
<br>
<h2>Submit Game <button class="Submit_button" type="submit" class="submitButton">Submit</button></h2>

<h2>Images</h2>

<label for="poster-upload" class="custom-file-upload">
<input id = "poster-upload" type="file" accept=".png,.jpg,.jpeg" name="poster" required/>
<i class="fas fa-file-image"></i><i class="fas fa-check"></i> Upload Poster
</label>
<br>
<label for="splash-upload" class="custom-file-upload">
<input id = "splash-upload" type="file" accept=".png,.jpg,.jpeg" name="splash" required/>
<i class="fas fa-file-image"></i><i class="fas fa-check"></i> Upload Screenshot
</label>

<br>
<button class="Submit_button" type="submit" class="submitButton">Submit Game</button>

</form>
</section>
</body>
2 views/allReviews.hbs
View file
@@ -69,7 +69,7 @@
<form action="/showAllComments" method="post" style="margin: auto; ">
<input type="hidden" id="reviewID" name="reviewID" value={{this.id}}>

<th><button type="submit"title="View all comments"><i class="fas fa-ellipsis-h"></i> VIEW COMMENTS</button></th>
<th><button type="submit"title="View all comments"><i class="fas fa-ellipsis-h"></i> ALL COMMENTS</button></th>
</form>
</tr>
</tbody>

0 comments on commit b5a9ee0

Please sign in to comment.