css clean up, added fa buttons, no display

chromebook-checkout-meteor/client/admin.css

@@ -1,30 +0,0 @@
-.admintitle {
-	text-align: center;
-  margin-top: 0;
-}
-
-.content {
-  background-color: #F7F7FF;
-  border-radius:15px;
-  margin-left:auto;
-  margin-right:auto;
-  margin-top:5%;
-  margin-bottom:0;
-  height:auto;
-  max-width:60%;
-  box-shadow: 0px 5px 10px #222222;
-  padding-bottom:0;
-  padding-top:0;
-}
-
-.remove {
-  margin-bottom: 4%;
-}
-
-.yield:hover, .yieldc:hover{
-  color: #E14C2B;
-}
-
-.row {
-  min-width: 80%;
-}

chromebook-checkout-meteor/client/admin.html

@@ -1,6 +1,6 @@
 <template name="admin">
-  <div id="center">
+  <div id="main-center">
-    <h5 class="admintitle">Admin Panel</h5>
+    <h5 class="titleadmin">Admin Panel</h5>
     <div class="content">
       
               {{#teacherTabs tabs=tabs}}

chromebook-checkout-meteor/client/checkout.css

@@ -1,29 +0,0 @@
-.center-box {
-background-color: #F7F7FF;
-border-radius:15px;
-margin-left:auto;
-margin-right:auto;
-margin-top:15%;
-height:auto;
-max-width:60%;
-box-shadow: 0px 5px 10px #222222;
-padding-bottom:0;
-padding-top:0;
-overflow-y: auto;
-margin-bottom: 25%;
-}
-
-.title {
-  display: inline;
-  min-width: 50%;
-}
-
-.titleword {
-  text-align: center;
-  margin-top: 0;
-}
-
-.row {
-  height: 10%;
-  display: flex;
-}

chromebook-checkout-meteor/client/checkout.html

@@ -1,8 +1,10 @@
 <template name="checkout">
-    <div class="center-box">
+    <div id="main-center">
-	    <div class="title">
+    	<div>
-	      <h5 class="titleword">Chromebook Checkout</h5>
+	      <h5>Chromebook Checkout</h5>
 	    </div>
+	     <div id="border">
+	      <div id="chromebooks">
 	      {{#each chromebooks}}
 	    		<div class="row">
 	        	{{> chromebook}}
@@ -10,6 +12,9 @@
 	      		<!-- <i class="icons cross fa fa-exclamation-triangle fa-lg"></i> -->
      			</div>
 	      {{/each}}
+	  	  </div>
+	  	  </div>
+	  	  <i class="icons teacher fa fa-user"></i>	
 	      <i class="icons edit fa fa-pencil-square-o fa-lg"></i>
       </div>
 </template>

chromebook-checkout-meteor/client/checkout.js

@@ -32,5 +32,13 @@ Template.checkout.events({
     else {
       alert("Access Denied");
     }
+  },
+  'click .teacher': function() {
+    if (Roles.userIsInRole(Meteor.userId(), ['admin', 'teacher'])) {
+      Router.go('/teacher');
+    }
+    else {
+      alert("Access Denied");
+    }
   }
 });

chromebook-checkout-meteor/client/initial.html

@@ -1,11 +1,8 @@
 <template name="initial">
-  <div id="center">
+    <div id="initial">
-    <div id="sign-in">
       <h5>Chromebook Checkout</h5>
       <button id="submit">Checkout!</button>
     </div>
     <p class="bottom">Checkout a chromebook.</p>
       <img class="chromeicon" src="ico/chrico.png">
-
-  </div>
 </template> 

chromebook-checkout-meteor/client/login.html

@@ -1,11 +1,8 @@
 <template name="login">
-<div id="center">
+<div id="main-center">
-    <div id="sign-in">
       <h5>Chromebook Checkout</h5>
+      <div id="chromebooks">
       {{> loginButtons}}
       </div>
-    <p class="bottom">Checkout a chromebook. 
-      <img class="chromeicon" src="ico/chrico.png">
-    </p>
   </div>
 </template>

chromebook-checkout-meteor/client/main.css

@@ -22,8 +22,8 @@ html {
   height: 30px;
   width: 30px;
   float: right;
-  margin-right: 41.4%;
+  margin-right: 37%;
-  margin-top: 0.5%;
+  margin-top: 0.75%;
 }
 
 body {
@@ -45,16 +45,12 @@ a {
   -moz-animation: neon1 1.5s ease-in-out infinite alternate;
   animation: neon1 1.5s ease-in-out infinite alternate; 
 }
-
+#initial {
-//Divs
-#main {
-}
-#sign-in {
   background-color: #F7F7FF;
   border-radius:15px;
   margin-left:auto;
   margin-right:auto;
-  margin-top:18%;
+  margin-top:23%;
   margin-bottom:0;
   height:auto;
   max-width:600px;
@@ -62,6 +58,57 @@ a {
   padding-bottom:0;
   padding-top:0;
 }
+#main-center {
+  background-color: #F7F7FF;
+  border-radius:15px;
+  margin-left:auto;
+  margin-right:auto;
+  margin-top:4%;
+  margin-bottom:0;
+  height:auto;
+  max-height:700px;
+  max-width:825px;
+  box-shadow: 0px 5px 10px #222222;
+  padding-bottom:0;
+  padding-top:0;
+}
+#chromebooks, #carts {
+  overflow: auto;
+  padding-top:.5%;
+  padding-bottom:.5%;
+  max-height:600px;
+}
+#tchromebooks {
+  overflow: auto;
+  padding-top:.5%;
+  padding-bottom:.5%;
+  max-height:500px;
+}
+#border {
+  padding: 0 15px 15px 15px;
+}
+.row {
+  height: 10%;
+  display: flex;
+}
+.tabs {
+  margin-top: 0;
+  padding-top: 0;
+}
+//Admin Panel
+.remove {
+  margin-bottom: 4%;
+}
+
+.yield:hover {
+  color: #E14C2B;
+}
+
+.row {
+  min-width: 80%;
+}
+
+
 button {
 	 background: #d94158;
   background-image: -webkit-linear-gradient(top, #d94158, #ad3838);
@@ -108,7 +155,7 @@ p {
 }
 p.bottom {
 	padding-top:0%;
-  margin-left:41.5%;
+  margin-left:37.5%;
   margin-right:auto;
 	color:#f7f7f7;
   max-width:325px;
@@ -135,10 +182,9 @@ padding-bottom:10px;
 h5{
 	margin-left:auto;
   margin-right:auto;
-  margin-top:12.5%;
+  margin-top:0.3%;
   margin-bottom:0.3%;
   color:#777;
-  max-width:300px;
   font-weight:10;
   padding-top:3%;
 }

chromebook-checkout-meteor/client/main.html

@@ -1,6 +1,7 @@
 <head>
   <title>IA Chromebook Checkout</title>
   <link rel="icon" href="ico/favicon.png">
+  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 </head>
 
 <body>

chromebook-checkout-meteor/client/tabs.css

@@ -8,7 +8,7 @@
   font-weight: 600;
   font-size: 13px;
   float: left;
-  padding: 13px 22.57%;
+  padding: 13px 23.02%;
   margin: 0;
   list-style: none;
   cursor: pointer;
@@ -18,7 +18,7 @@
   border: 1px solid #ddd;
   border-bottom: none;
   margin-bottom: -1px !important;
-  padding: 13px 22% 14px 22% !important;
+  padding: 13px 23.03% 14px 23.03% !important;
   background-color: #fff;
   color: #333;
 }

chromebook-checkout-meteor/client/teacher.html

@@ -1,10 +1,10 @@
 <template name="teacher">
-    <div id="centerbox">
+    <div id="main-center">
-      <h5 class="titleword">Chromebook Checkout</h5>
+      <h5>Chromebook Checkout</h5>
-        <div id="tabs">
+          <div>
               {{#teacherTabs tabs=tabs}}
           <!-- Single -->
-           <div>
+           <div id="tchromebooks">
               {{#each chromebooks}}
                 <div class="row">
                   {{> chromebook}}