diff --git a/app/modules/home/home-project-list.jade b/app/modules/home/home-project-list.jade index 7617033d..79500efb 100644 --- a/app/modules/home/home-project-list.jade +++ b/app/modules/home/home-project-list.jade @@ -1,10 +1,7 @@ ul.home-project-list li.home-project-list-single(tg-bind-scope, ng-repeat="project in vm.projects.all") - div.home-project-list-single-left - div.home-project-list-single-title - h2 - a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug") - span {{project.is_private}} - p {{ ::project.description }} - - div.home-project-list-single-right + h2.home-project-list-single-title + a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug") + span {{project.is_private}} + p {{ ::project.description | limitTo:150 }} + span(ng-if="::project.description.length > 150") ... diff --git a/app/modules/home/styles/home-project-list.scss b/app/modules/home/styles/home-project-list.scss index ab01f613..6b8fc7c5 100644 --- a/app/modules/home/styles/home-project-list.scss +++ b/app/modules/home/styles/home-project-list.scss @@ -1,3 +1,38 @@ .home-project-list { - content: 'WIP'; + li { + border-right: 5px solid $whitish; + cursor: pointer; + margin-bottom: .5rem; + padding: .5rem; + padding-right: 1rem; + text-overflow: ellipsis; + transition: border-color .3s linear; + &:hover { + border-color: $fresh-taiga; + p { + color: $gray; + } + } + } + h2 { + @extend %text; + color: $gray; + font-size: 1.5rem; + line-height: 1.3; + margin-bottom: 0; + text-transform: none; + a { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + p { + @extend %text; + @extend %small; + color: $gray-light; + margin: 0; + transition: color .3s linear; + } } diff --git a/app/modules/home/styles/home.scss b/app/modules/home/styles/home.scss index 72e932c9..0a77715e 100644 --- a/app/modules/home/styles/home.scss +++ b/app/modules/home/styles/home.scss @@ -3,7 +3,7 @@ padding-top: 2rem; .duty-summary { flex: 1; - margin-right: .5rem; + margin-right: 2rem; } .project-list { width: 250px; diff --git a/app/modules/projects/listing/listing.jade b/app/modules/projects/listing/listing.jade index 7cd45e87..46c1f9f3 100644 --- a/app/modules/projects/listing/listing.jade +++ b/app/modules/projects/listing/listing.jade @@ -6,7 +6,7 @@ div.project-list-wrapper.centered a.button-blackish.import-project-button(href="", title="{{'PROJECT.NAVIGATION.TITLE_ACTION_IMPORT' | translate}}") span.icon.icon-upload input.import-file.hidden(type="file") - + section.project-list-section div.project-list ul.js-sortable @@ -16,7 +16,8 @@ div.project-list-wrapper.centered h1 a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug") span {{project.is_private}} - p {{ ::project.description }} + p {{ ::project.description | limitTo:300 }} + span(ng-if="::project.description.length > 300") ... div.project-list-single-tags.tags-container(ng-if="project.tags") div.tags-block(tg-colorize-tags="project.tags", tg-colorize-tags-type="backlog") diff --git a/app/modules/projects/listing/styles/listing.scss b/app/modules/projects/listing/styles/listing.scss index b165b095..0670f52d 100644 --- a/app/modules/projects/listing/styles/listing.scss +++ b/app/modules/projects/listing/styles/listing.scss @@ -2,7 +2,7 @@ border-bottom: 1px solid $whitish; display: flex; justify-content: center; - padding: .8rem 1rem; + padding: .5rem; position: relative; } @@ -18,12 +18,16 @@ h1 { @extend %text; @extend %larger; + color: $gray; margin-bottom: 0; text-transform: none; } p { - color: $gray-light; - max-width: 70%; + @extend %text; + @extend %small; + color: $gray; + margin-bottom: 0; + max-width: 95%; } .project-list-single-tags { align-content: flex-end; @@ -31,6 +35,7 @@ flex: 3; flex-wrap: wrap; justify-content: flex-start; + margin-top: .5rem; } .tag { align-self: flex-end; diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index 24ed564b..6c71c3c9 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -1,6 +1,6 @@ // __Font Sizes__ // %xsmall {font-size: .5rem;} -%small {font-size: .8rem;} +%small {font-size: .9rem;} %medium {font-size: 1rem;} %large {font-size: 1.2rem;} %larger {font-size: 1.6rem;}