Erick homepage content picker

sass/assets/atoms.scss

@@ -0,0 +1,13 @@
+a.members-grid {
+  @extend .float-xs-left;
+  font-size: .75em;
+  margin: $margin-sm;
+  margin-bottom: $margin-sm;
+  padding: $margin-xs $margin-md;
+  background-color: $gray;
+  border-radius: 16px;
+
+}
+a.members-grid:hover {
+  text-decoration: none;
+}

sass/assets/tables.scss

@@ -1,5 +1,10 @@
 @import './node_modules/bootstrap/scss/bootstrap';
 
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .cell {
   @extend .card;
   >.context {
@@ -14,3 +19,7 @@ a.cell {
     background-color: $highlighted;
   }
 }
+
+.table {
+
+}

sass/main.scss

@@ -70,6 +70,7 @@ p.header {
 
 @import 'assets/tables';
 @import 'assets/media';
+@import 'assets/atoms';
 
 @import 'partials/navbar';
 @import 'partials/index_page';

sass/partials/_index_page.scss

@@ -49,9 +49,15 @@
 			}
     }
     #project-cell-content-picker {
+      .table {
+        margin-bottom: 0;
+      }
       p {
+        text-align: center;
         font-size: .75em;
+        margin-bottom: 0;
       }
+      margin-bottom: $margin-md;
 
     }
     .link {
@@ -115,16 +121,6 @@
         }
 
       }
-      .position-requests, .events {
-        .table {
-          margin-bottom: 0;
-        }
-        .table td.title {
-          font-weight: bold;
-          text-align: left;
-        }
-
-      }
 
     }
     .project-banner-headline {

views/partials/atoms/area_requests-table.jade

@@ -0,0 +1,16 @@
+if (block_requests.length > 0)
+  table.table
+    tbody
+      each request in block_requests
+        tr
+          td.title
+            p
+              a(href="/projects/"+project.id+"#areaRequest-list")= request.title
+          //TODO Tooltips/Popovers
+          - var assets = [];
+          each asset in request.assets
+            - assets.push(asset.title + "— level " + asset.experience + "\n")
+          td(title=assets style=" background-color: " +request.project_interest_color)
+            p!= helper.pluralize('position', request.nPositions, true)
+else
+  span no current requests at this moment

views/partials/atoms/events-table.jade

@@ -0,0 +1,12 @@
+if (block_events.length > 0)
+  table.table
+    tbody
+      each event in block_events
+        tr
+          td.title
+            p
+              a(href="/events/"+event.id)= event.title
+          td
+            p= event.date_range
+else
+  span no current events

views/partials/atoms/members-grid.jade

@@ -0,0 +1,5 @@
+if (block_members.length > 0) 
+  each member in block_members
+    a.members-grid(href="/members/"+member.id)= member.first_name + " " + member.last_name[0]
+else
+  span no participating members

views/partials/homepage/_homepage_project_cell-content-picker.jade

@@ -1,3 +1,29 @@
 #project-cell-content-picker
-  h2 Description
-  p= project.description_short
+  .tab-content
+    //Description
+    .tab-pane(id=p+"content-description" role="tabpanel")
+      a(data-toggle="tab" href="#"+p+"content-members" role="tab")
+        h2 Description
+      p= project.description_short
+    //Members
+    .tab-pane(id=p+"content-members" role="tabpanel")
+      a(data-toggle="tab" href="#"+p+"content-positions" role="tab")
+        h2 Members
+      - var block_members = project.members
+      .scroll-y(style="max-height: 132px;")
+        include ../../partials/atoms/members-grid
+    //Area Requests
+    .tab-pane.active(id=p+"content-positions" role="tabpanel")
+      a(data-toggle="tab" href="#"+p+"content-events" role="tab")
+        h2 Area Requests
+      - var block_requests = project.areaRequests
+      .scroll-y(style="max-height: 132px;")
+        include ../../partials/atoms/area_requests-table
+    //Events
+    .tab-pane(id=p+"content-events" role="tabpanel")
+      a(data-toggle="tab" href="#"+p+"content-description" role="tab")
+        h2 Events
+      - var block_events = project.events
+      .scroll-y(style="max-height: 132px;")
+        include ../../partials/atoms/events-table
+

views/partials/homepage/_homepage_project_cell.jade

@@ -1,13 +1,13 @@
 //Tablet-Desktop-HD Desktop
 .row.card.project-banner.hidden-sm-down
-	.col-lg-9.project-banner-img
+	.col-lg-8.project-banner-img
 		img.img-fluid(src= 'images/projects/' + project.title.toLowerCase() + '/banner.jpg')
 		h1.project-banner-headline= project.title
 		.project-cell
 			h3= project.post
 			p.status= project.status	
 		a.link(href='/projects/' + project.id )
-	.col-lg-3.project-banner-description
+	.col-lg-4.project-banner-description
 		include ./_homepage_project_cell-content-picker
 //Phone landscape sm
 #device-phone.row.card.project-banner.hidden-md-up.hidden-xs-down
@@ -79,32 +79,12 @@
 								span no images
 					.position-requests
 						p.header Position Requests
-						if (project.areaRequests.length > 0)
-							table.table
-								tbody
-									each request in project.areaRequests
-										tr
-											td.title
-												a(href="/projects/"+project.id+"#areaRequest-list")= request.title
-											//TODO Tooltips/Popovers
-											- var assets = [];
-											each asset in request.assets
-												- assets.push(asset.title + "— level " + asset.experience + "\n")
-											td(title=assets style=" background-color: " +request.project_interest_color)!= helper.pluralize('position', request.nPositions, true)
-						else
-							span no current requests at this moment
+						- var block_requests = project.areaRequests
+						include ../../partials/atoms/area_requests-table
 					.events
 						p.header Events
-						if (project.events.length > 0)
-							table.table
-								tbody
-									each event in project.events
-										tr
-											td.title
-												a(href="/events/"+event.id)= event.title
-											td= event.date_range
-						else
-							span no listed events
+						- var block_events = project.events
+						include ../../partials/atoms/events-table
 
 //Phone xs
 #device-phone.row.card.project-banner.hidden-sm-up

views/partials/homepage/_homepage_project_spotlight.jade

@@ -2,5 +2,6 @@
 	.col-lg-12
 		h1 Project Spotlight
 		each project in projects
+			- var p = "p"+project.id+"-";
 			include ./_homepage_project_cell
 hr