diff --git a/app/modules/projects/listing/listing.jade b/app/modules/projects/listing/listing.jade index 643da715..f83bf0a5 100644 --- a/app/modules/projects/listing/listing.jade +++ b/app/modules/projects/listing/listing.jade @@ -14,8 +14,10 @@ div.project-list-wrapper.centered div.project-list-single-left div.project-list-single-title h1 - a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug", title="{{ ::project.name }}") - span {{::project.is_private}} + a(href="#", tg-nav="project:project=project.slug") + h1.project-name(ng-bind="::project.name", title="{{ ::project.name }}") + span.private(ng-if="project.is_private", title="{{'PROJECT.PRIVATE' | translate}}") + include ../../../svg/lock.svg p {{ ::project.description | limitTo:300 }} span(ng-if="::project.description.length > 300") ... diff --git a/app/modules/projects/listing/styles/listing.scss b/app/modules/projects/listing/styles/listing.scss index 0670f52d..3a2a5d08 100644 --- a/app/modules/projects/listing/styles/listing.scss +++ b/app/modules/projects/listing/styles/listing.scss @@ -17,11 +17,27 @@ flex: 4; h1 { @extend %text; - @extend %larger; - color: $gray; + @extend %large; + display: inline-block; margin-bottom: 0; text-transform: none; } + .project-name { + @extend %text; + @extend %larger; + color: $gray; + 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;