Refactoring - Moving css files and renaming the controller

Assert · Mar 12, 2014 · 48cbc41 · 48cbc41
1 parent 46163da
commit 48cbc41
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 6 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,138 @@
+/* Global */
+
+body {
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 500px;
+    background-color: #f8f8f8;
+    font-size: 24px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #424547;
+    text-align: center;
+}
+
+h1 {
+    font-size: 36px;
+    font-weight: bold;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #424547;
+}
+
+h3 {
+    font-size: 24px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #424547;
+}
+
+p {
+    font-size: 16px;
+}
+
+input {
+    font-size: 24px;
+}
+
+input[type=text] {
+    color: #424547;
+    border: 1px solid #c2c2c2;
+    background-color: white;
+}
+
+em {
+    font-style: normal;
+    font-weight: bold;
+    color: black;
+}
+
+/* Chat */
+#messagesDiv {
+    background-color: white;
+    overflow: auto;
+    height: 230px;
+    width: 100%;
+    padding: 10px;
+    border: 8px solid #424547;
+    margin-bottom: 5px;
+    text-align: left;
+}
+
+#nameInput {
+    width: 26%;
+}
+
+#messageInput {
+    width: 68%;
+}
+
+/* Drawing */
+
+#colorholder {
+    width: 480px;
+    height: 30px;
+    border: 2px solid #424547;
+    margin-top: 5px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#drawing-canvas {
+    border: 3px solid #999
+}
+
+.colorbox {
+    width: 22px;
+    height: 22px;
+    margin: 1px;
+    display: inline-block;
+    border: 3px solid black;
+}
+
+/* Leaderboard */
+
+#leaderboardTable {
+    background-color: white;
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    border: 8px solid #424547;
+    margin-bottom: 5px;
+}
+
+#scoreInput {
+    width: 68%;
+}
+
+#highestscore {
+    margin-top: 20px;
+    font-size: 14px;
+}
+
+/* Presence */
+
+#presenceDiv {
+    text-align: center;
+}
+
+/* Tetris */
+
+.tetris-body {
+    width: 600px;
+}
+
+#canvas0, #canvas1 {
+    display: inline-block;
+    border: 4px solid #424547;
+}
+
+#restartButton {
+    margin-top: 5px;
+}
+
+#gameInProgress {
+    font-size: 14px;
+}
+
+.hide {
+    display: none;
+}
diff --git a/index.htm b/index.htm
@@ -1,5 +1,5 @@
 <!doctype html>
-<html data-ng-app="myapp">
+<html data-ng-app="showMe">
   <head>
       <title>ShowMe</title>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
@@ -8,17 +8,17 @@
       <script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
       <script src="js/controller.js"></script>
 
-      <link rel="stylesheet" type="text/css" href="https://www.firebase.com/css/example.css">
+      <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
-    <body data-ng-controller="MyController">
+    <body data-ng-controller="SaveController">
         <h1>ShowMe.</h1>
 
         <span data-ng-show="user">
             {{user.name}} | <a data-ng-click="logout()">Logout</a>
         </span>
 
         <div data-ng-show="user" id="messagesDiv">
-            <div data-ng-repeat="msg in messages"><em>{{msg.name}}</em>: {{msg.desc}}</div>
+            <div data-ng-repeat="msg in messages"><em>{{msg.name}}</em>: {{msg.desc}}-{{msg.product}}</div>
         </div>
 
         <label>

diff --git a/js/controller.js b/js/controller.js
@@ -1,6 +1,6 @@
-var app = angular.module("myapp", ["firebase"]);
+var app = angular.module("showMe", ["firebase"]);
 
-function MyController($scope, angularFire, angularFireAuth) {
+function SaveController($scope, angularFire, angularFireAuth) {
 
     var ref = new Firebase("https://eysteinbye.firebaseio.com/showme");
     angularFireAuth.initialize(ref, { scope: $scope, name: "user" });