diff --git a/app/modules/home/projects/home-project-list.scss b/app/modules/home/projects/home-project-list.scss index 6f942ed9..d8f9071c 100644 --- a/app/modules/home/projects/home-project-list.scss +++ b/app/modules/home/projects/home-project-list.scss @@ -34,14 +34,6 @@ vertical-align: middle; white-space: nowrap; } - .private { - display: inline-block; - margin-left: .3rem; - width: .5rem; - path { - fill: $gray-light; - } - } } p { @extend %text; diff --git a/app/modules/projects/listing/projects-listing.scss b/app/modules/projects/listing/projects-listing.scss index 3a2a5d08..5354288c 100644 --- a/app/modules/projects/listing/projects-listing.scss +++ b/app/modules/projects/listing/projects-listing.scss @@ -29,15 +29,6 @@ vertical-align: middle; white-space: nowrap; } - .private { - display: inline-block; - margin-left: .3rem; - width: .5rem; - path { - fill: $gray-light; - transition: fill .3s linear; - } - } p { @extend %text; @extend %small; diff --git a/app/partials/project/project.jade b/app/partials/project/project.jade index 5cba01e1..d02dce3b 100644 --- a/app/partials/project/project.jade +++ b/app/partials/project/project.jade @@ -2,9 +2,30 @@ doctype html div.wrapper(ng-controller="ProjectController as ctrl") nav.menu.hidden(tg-project-menu) - section.main.single-project - h1 - span.green(tg-bo-bind="project.name", class="project-name") + div.main.centered.single-project + section.single-project-intro + h1 + span.green(tg-bo-bind="project.name", class="project-name") + span.private(ng-if="project.is_private", title="{{'PROJECT.PRIVATE' | translate}}") + include ../../svg/lock.svg + p.description(tg-bo-bind="project.description") + div.project-list-single-tags.tags-container(ng-if="::project.tags") + div.tags-block(tg-colorize-tags="project.tags", tg-colorize-tags-type="backlog") + div.project-data + section.timeline + span TODO. Missing the amazing timeline around!! + section.involved-data + h2.title Team + ul.involved-team + a(href="", title="{{member.full_name}}", ng-repeat="member in project.memberships") + img(tg-bo-src="member.photo", alt="{{member.full_name}}") + + h2.title Organizations + div.involved-organization + a(href="", title="User Name") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/dan_higham/48.jpg", alt="{{member.full_name}}") + + // div.summary div.summary-stats span.number(ng-bind="stats.total_points") -- diff --git a/app/styles/components/private.scss b/app/styles/components/private.scss new file mode 100644 index 00000000..e77260ff --- /dev/null +++ b/app/styles/components/private.scss @@ -0,0 +1,9 @@ +.private { + display: inline-block; + margin-left: .3rem; + width: .5rem; + path { + fill: $gray-light; + transition: fill .3s linear; + } +} diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss index b093b945..d418719e 100644 --- a/app/styles/modules/home-project.scss +++ b/app/styles/modules/home-project.scss @@ -1,34 +1,84 @@ -.summary-stats { - align-items: flex-start; - display: flex; - .info-num { - @extend %xlarge; - @extend %bold; - float: left; - margin-right: .3rem; - position: relative; - top: 5px; +.single-project { + h1 { + line-height: 1.2; + margin: 0; + vertical-align: middle; } - .info-text { - @extend %small; - float: left; - line-height: .9rem; + .private { + font-size: 1rem; + vertical-align: super; } -} - -.project-data-container { - display: flex; - justify-content: space-between; - ul { - flex-grow: 0; - max-width: 33%; + .project-data { + display: flex; } - li { - display: inline-block; - margin-right: .1rem; - width: 10%; - figure { + .title { + @extend %larger; + @extend %title; + align-content: center; + background: $whitish; + display: flex; + margin-bottom: .5rem; + padding: .9rem 1rem; + } + .timeline { + flex: 1; + margin-right: 1rem; + } + .involved-data { + flex-basis: 200px; + } + .involved-team, + .involved-organization { + display: flex; + flex-wrap: wrap; + margin-bottom: 1rem; + a { + display: block; + margin-right: .14rem; + width: 24%; + &:nth-child(4n) { + margin-right: 0; + } + } + img { width: 100%; } } } + + +//.summary-stats { +// align-items: flex-start; +// display: flex; +// .info-num { +// @extend %xlarge; +// @extend %bold; +// float: left; +// margin-right: .3rem; +// position: relative; +// top: 5px; +// } +// .info-text { +// @extend %small; +// float: left; +// line-height: .9rem; +// } +//} +// +//.project-data-container { +// display: flex; +// justify-content: space-between; +// ul { +// flex-grow: 0; +// max-width: 33%; +// } +// li { +// display: inline-block; +// margin-right: .1rem; +// width: 10%; +// figure { +// width: 100%; +// } +// } +//} +//