Talks 2.1.1: Tweaking the table style

Author: lannonbr

public/css/app.css

@@ -3,7 +3,7 @@
 body {
 	font-family: "Open Sans";
 	background-color: #78909c;
-	color: white;
+	color: #e4e4e4;
 	margin: 0;
 	margin-top: 60px;
 	padding: 0;
@@ -15,6 +15,10 @@ h1 {
 	margin-bottom: 0px;
 }
 
+table {
+	border-collapse: collapse;
+}
+
 td.hides {
 	clear: both;
 }
@@ -25,14 +29,24 @@ td.hides button {
 	background: 0;
 	/*border: 0;
 	outline: 0;*/
-	color: white;
+	color: #eee;
+	background-color: #78909c;
+	margin: 0 2px;
 
 	&:hover {
 		background: white;
 		color: #78909c;
 	}
 }
 
+table tbody tr:last-child {
+	background-color: #6C828C;
+}
+table tbody tr:last-child button {
+	margin-right: 5px;
+}
+
+
 h3 {
 	font-size: 24px;
 	text-align: center;
@@ -70,38 +84,47 @@ h5 {
 }
 
 #talks-table {
-	color: white;
+	color: #444;
+	background-color: #fff;
 	width: 80%;
 	margin: 0 auto;
 	font-size: 120%;
+	box-shadow: 0px 0px 2px black;
 }
 #talks-table .desc {
 	word-break: break-word;
 }
 #talks-table .type {
 	font-style: italic;
 }
-#talks-table th {
+#talks-table tbody th {
 	width: 32%;
 }
 #talks-table thead th {
 	font-size: 20px;
+	color: white;
+	background-color: #6C828C;
+	padding-bottom: 5px;
+}
+.event, .name, .type, .desc {
+	padding: 5px 0;
+}
+.name {
+	padding-left: 10px;
+}
+tbody tr:last-child th {
+	padding: 10px 0;
 }
 #talks-table th td {
 	padding: 5px;
 }
 #talks-table button {
 	word-break: normal;
 }
-#talks-table tr:nth-child(2n+1) {
-	background-color: #6C828C;
-}
 #talks-table tr.hidden {
-	background-color: #070;
-	opacity: 0.6;
-}
-#talks-table tr:nth-child(2n+1).hidden {
-	background-color: #060;
+	background-color: #888;
+	/*opacity: 0.6;*/
+	color: white;
 }
 .error {
 	background-color: #662222;
@@ -111,11 +134,11 @@ h5 {
 }
 .btn_unhide {
 	border: 0px;
-	color: #fff;
+	color: #444;
 	background-color: inherit;
 }
 .btn_hide {
 	border: 0px;
-	color: #fff;
+	color: #444;
 	background-color: inherit;
 }

views/all.pug

@@ -21,13 +21,14 @@ html(ng-app='talksApp')
 
 		h1 Talks
 		h3 Upcoming Events For The Clarkson Open Source Institute Meetings
-		h3 Next Meeting: Apr. 6
+		h3 Next Meeting: Aug. 31
 
 		table(ng-controller="talksController" id="talks-table")
-			tr
+			thead: tr
 				th Talk Presenter
 				th Type
 				th Description
+				th
 			tr(class="event" ng-class="{hidden: talk.hidden}" ng-repeat="talk in talks | orderBy: ['type']")
 				td.name {{ talk.name }}
 				td.type {{ talk.type }}

views/index.pug

@@ -20,33 +20,35 @@ html(ng-app='talksApp')
 
 		h1 Talks
 		h3 Upcoming Events For The Clarkson Open Source Institute Meetings
-		h3 Next Meeting: Mar. 30
+		h3 Next Meeting: Aug. 31
 
 		table(ng-controller="talksController" id="talks-table")
-			tr
-				th.mdl-data-table__cell--non-numeric Talk Presenter
+			thead: tr
+				th Talk Presenter
 				th Type
 				th Description
+				th
 
-			tr(class="event" ng-class="{hidden: talk.hidden}" ng-repeat="talk in talks | filter: {'hidden': false} | orderBy: ['type']")
-				td.name {{ talk.name }}
-				td.type {{ talk.type }}
-				td.desc {{ talk.desc }}
-				td.hides
-					button(ng-click="hide(this.talk.id)") X
-					button(ng-click="unhide(this.talk.id)") ↶
-			tr
-				form
-					th: input(id="in_name" size=30 name="name" ng-model="newTalk.name" type="text" placeholder="Name")
-					th: select(name="type" ng-model="newTalk.type")
-						option(value="forum topic") Forum Topic
-						option(value="lightning talk") Lightning Talk
-						option(value="project	update") Project Update
-						option(value="announcement") Announcement
-						option(value="after meeting slot") After-Meeting Slot
-					th: input(id="in_desc" size=50 name="desc" type="text" ng-model="newTalk.desc" placeholder="Description")
-					th: button(ng-click="createTalk()") Create
+			tbody
+				tr(class="event" ng-class="{hidden: talk.hidden}" ng-repeat="talk in talks | filter: {'hidden': false} | orderBy: ['type']")
+					td.name {{ talk.name }}
+					td.type {{ talk.type }}
+					td.desc {{ talk.desc }}
+					td.hides
+						button(ng-click="hide(this.talk.id)") X
+						button(ng-click="unhide(this.talk.id)") ↶
+				tr
+					form
+						th: input(id="in_name" size=30 name="name" ng-model="newTalk.name" type="text" placeholder="Name")
+						th: select(name="type" ng-model="newTalk.type")
+							option(value="forum topic") Forum Topic
+							option(value="lightning talk") Lightning Talk
+							option(value="project	update") Project Update
+							option(value="announcement") Announcement
+							option(value="after meeting slot") After-Meeting Slot
+						th: input(id="in_desc" size=50 name="desc" type="text" ng-model="newTalk.desc" placeholder="Description")
+						th: button(ng-click="createTalk()") Create
 
 		script(src="js/angular.min.js")
 		script(src='js/app.js')
-		p(style="text-align:center") V2.0 - Not powered by Fsuvius
+		p(style="text-align:center") V2.1.1