Skip to content

Commit

Permalink
- Modularise Code for Error Page
Browse files Browse the repository at this point in the history 
- Modularise Code for Navigation Bar
- Modularise Code for Index
- Modularise Code for Dashboard
  • Loading branch information
@Silfer
Silfer committed Apr 10, 2017
1 parent 721e704 commit e08b992
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 130 deletions.
68 changes: 9 additions & 59 deletions public/css/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,19 @@
body {
background-color: #141311;
}

ul {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #141311;
}

li {
float: left;
color: #FFFFFF;
}

a.active {
font-family: 'VT323', monospace;
}

li a {
font-family: 'VT323', monospace;
font-size: 1.5vw;
color: #FFFFFF;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}

li a:hover {
background-color: #B7B7B6;
}

h2 {
font-family: 'VT323', monospace;
font-weight: bold;
font-size: 24px;
text-align: left;
color: #A2482E;
font-size: 2.5em;
}

#logout {
cursor: pointer;
.img-responsive {
width: 100%;
}

.avatarWardrobe {
text-align: center;
.tutorial-level-bar {
font-size: 1.5em;
}

.col-md-12 {
margin-top: 3.5%;
height: 80vh;
}


img {
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
.module-container {
font-size: 1.5em;
}

.level-container {
color: #FFFFFF;
.separateModules {
margin-bottom: 2%;
}
10 changes: 0 additions & 10 deletions public/css/error.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,10 @@
body {
background-color: #141311;
}

h1 {
font-weight: bold;
font-size: 6em;
color: #FFFFFF;
text-align: center;
margin-top: 10%;
}

h2 {
font-weight: bold;
font-size: 4em;
color: #A2482E;
text-align: center;
}

.centralise {
Expand Down
14 changes: 0 additions & 14 deletions public/css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
body {
background-color: #141311;
}

h2 {
font-size: 3em;
color: #A2482E;
text-align: center;
margin-top: 1%;
}

Expand Down Expand Up @@ -36,12 +30,4 @@ h2 {
display: block;
margin: 0 auto;
width:25em;

image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
30 changes: 30 additions & 0 deletions public/css/navigationbar.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
body {
background-color: #141311;
}

ul#header {
overflow: hidden;
background-color: #141311;
Expand Down Expand Up @@ -27,4 +31,30 @@ li a:hover {

.font {
font-family: 'VT323', monospace;
}

.whiteFont {
color: #FFFFFF;
}

.brownFont {
color: #A2482E;
}

.boldText {
font-weight: bold;
}

.centerText {
text-align: center;
}

img {
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
98 changes: 54 additions & 44 deletions source/view/dashboard.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,21 @@
<script type="text/javascript" src="/libs/socket.io-1.7.3/js/socket.io.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=VT323">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/dashboard.css">
<link rel="stylesheet" type="text/css" href="/css/navigationbar.css">
</head>

<body>
<ul id="header">
<li class="header"><a class="active" href="/"><%= user.name %></a></li>
<li class="header">
<a class="active font" href="/"><%= user.name %></a>
</li>

<% if(user){ %>
<li class="header" style="float:right"><a class="active" id="logout" href="/">Log Out</a></li>
<li class="header">
<a class="active font" id="logout" href="/">Log Out</a>
</li>
<% } %>
</ul>

Expand All @@ -29,67 +32,74 @@
<div class="container-fluid" ng-app="dashboardApp">
<div class="row">
<div class="col-md-2">
<div class="level-container" ng-controller="userCtrl">
<img ng-src="{{userInfo.imgSrc}}" style="width: 100%" class="img-responsive" />
<h2>{{userInfo.name}}</h2>
<div class="tutorial-level-bar" ng-repeat="t in userInfo.tutorials">
<div class="font whiteFont level-container" ng-controller="userCtrl">

<img ng-src="{{userInfo.imgSrc}}" class="img-responsive"/>
<h2 class="brownFont centerText boldText">{{userInfo.name}}</h2>

<div class="tutorial-level-bar centerText" ng-repeat="t in userInfo.tutorials">
{{t.coursecode}}
<br>
Level: {{t.level}}
<br>
{{t.currExp}} / {{t.totalToNext}}
Experience: {{t.currExp}} / {{t.totalToNext}}
<br>

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{t.percentage}}%">
</div>
<div class="progress-bar" role="progressbar" style="width: {{t.percentage}}%">
</div>
</div>
</div>
</div>
</div>

<div class="col-md-10">

<h2>Modules</h2>
<h2 class="font brownFont centerText boldText">Modules</h2>

<div class="list-group" ng-controller="moduleCtrl">
<ul id="tutorials">
<li ng-repeat="t in tuts">
<div class="container">
<div class="module-container">
<div class="row">
{{t.coursecode}} {{t.coursename}}
</div>
<div class="row">
<button class="btn btn-primary lobby-button" ng-click="redirect(t)" name="tut-id" value="{{t.id}}"> Join Class </button>
<button class="btn btn-primary" ng-click="toggleLeaderboard(t)"> View Leaderboard </button>
</div>
<div class="row">
<table class="table" ng-show="t.leaderboardIsVisible">
<tr>
<th></th>
<th>Name</th>
<th>Level</th>
</tr>
<tr ng-repeat="s in t.students">
<td>{{ $index + 1 }}</td>
<td>{{ s.name }}</td>
<td>{{ s.level }}</td>
</tr>
</table>
</div>
</div>
</div>
</li>
</ul>
<div id="tutorials">
<div ng-repeat="t in tuts">
<div class="container">
<div class="module-container">

<div class="row font whiteFont centerText">
{{t.coursecode}} {{t.coursename}}
</div>

<div class="row font centerText separateModules">
<button class="btn btn-primary lobby-button" ng-click="redirect(t)" name="tut-id" value="{{t.id}}"> Join Class </button>
<button class="btn btn-primary" ng-click="toggleLeaderboard(t)"> View Leaderboard </button>
</div>

<div class="row font whiteFont">
<table class="table" ng-show="t.leaderboardIsVisible">
<tr>
<th></th>
<th>Name</th>
<th>Level</th>
</tr>
<tr ng-repeat="s in t.students">
<td>{{ $index + 1 }}</td>
<td>{{ s.name }}</td>
<td>{{ s.level }}</td>
</tr>
</table>
</div>

</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

</div>
</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="javascripts/dashboard/dashboard.js" type="application/javascript"></script>
4 changes: 2 additions & 2 deletions source/view/error.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@

<body>
<% if(errorMessage){ %>
<h1 class="font">Error!</h1>
<h2 class="font"><%=errorMessage%></h2>
<h1 class="font whiteFont centerText boldText">Error!</h1>
<h2 class="font brownFont centerText boldText"><%=errorMessage%></h2>
<% } %>

<a href="/">
Expand Down
2 changes: 1 addition & 1 deletion source/view/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<img class="logo" src="/images/logo.png"></img>

<% if(user){ %>
<h2 id="welcomeText" class="font">Welcome, <%= user.name %>!</h2>
<h2 id="welcomeText" class="font brownFont centerText">Welcome, <%= user.name %>!</h2>
<a href="/dashboard">
<div class="centralise font"><button type="button" class="btn btn-danger btn-lg">Go to Dashboard!</button></div>
</a>
Expand Down

0 comments on commit e08b992

Please sign in to comment.