diff --git a/sass/assets/atoms.scss b/sass/assets/atoms.scss new file mode 100644 index 0000000..caf51ef --- /dev/null +++ b/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; +} diff --git a/sass/assets/tables.scss b/sass/assets/tables.scss index 45421a0..3380745 100644 --- a/sass/assets/tables.scss +++ b/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 { + +} diff --git a/sass/main.scss b/sass/main.scss index db4808a..a42b686 100644 --- a/sass/main.scss +++ b/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'; diff --git a/sass/partials/_index_page.scss b/sass/partials/_index_page.scss index ddb4c2c..b1b42e4 100644 --- a/sass/partials/_index_page.scss +++ b/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 { diff --git a/views/partials/atoms/area_requests-table.jade b/views/partials/atoms/area_requests-table.jade new file mode 100644 index 0000000..584e9ed --- /dev/null +++ b/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 diff --git a/views/partials/atoms/events-table.jade b/views/partials/atoms/events-table.jade new file mode 100644 index 0000000..1a1b72a --- /dev/null +++ b/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 diff --git a/views/partials/atoms/members-grid.jade b/views/partials/atoms/members-grid.jade new file mode 100644 index 0000000..9f01927 --- /dev/null +++ b/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 diff --git a/views/partials/homepage/_homepage_project_cell-content-picker.jade b/views/partials/homepage/_homepage_project_cell-content-picker.jade index 15a82ae..744ce23 100644 --- a/views/partials/homepage/_homepage_project_cell-content-picker.jade +++ b/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 + diff --git a/views/partials/homepage/_homepage_project_cell.jade b/views/partials/homepage/_homepage_project_cell.jade index 41e45e9..ed79018 100644 --- a/views/partials/homepage/_homepage_project_cell.jade +++ b/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 diff --git a/views/partials/homepage/_homepage_project_spotlight.jade b/views/partials/homepage/_homepage_project_spotlight.jade index fc04231..a627490 100644 --- a/views/partials/homepage/_homepage_project_spotlight.jade +++ b/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