diff --git a/app/modules/home/home.scss b/app/modules/home/home.scss index a6aad27b..769c74ca 100644 --- a/app/modules/home/home.scss +++ b/app/modules/home/home.scss @@ -10,7 +10,6 @@ } .see-more-projects-btn { display: block; - margin-top: 2rem; } .title-bar { @extend %title; diff --git a/app/modules/home/projects/home-project-list.jade b/app/modules/home/projects/home-project-list.jade index a4eeb208..e9ebb4cf 100644 --- a/app/modules/home/projects/home-project-list.jade +++ b/app/modules/home/projects/home-project-list.jade @@ -1,7 +1,7 @@ ul.home-project-list(ng-show="vm.projects.size") li.home-project-list-single(tg-bind-scope, tg-repeat="project in vm.projects") - h2.home-project-list-single-title - a(href="#", tg-nav="project:project=project.get('slug')") + a(href="#", tg-nav="project:project=project.get('slug')") + h2.home-project-list-single-title span.project-name(title="{{ ::project.get('name') }}") {{::project.get('name')}} span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") include ../../../svg/lock.svg diff --git a/app/modules/home/projects/home-project-list.scss b/app/modules/home/projects/home-project-list.scss index e372c0a1..b5eaf070 100644 --- a/app/modules/home/projects/home-project-list.scss +++ b/app/modules/home/projects/home-project-list.scss @@ -1,14 +1,14 @@ .home-project-list { li { - border-right: 5px solid $whitish; + border: 1px solid lighten($gray-light, 15%); + border-radius: 3px; cursor: pointer; - margin-bottom: .5rem; - padding: .5rem; - padding-right: 1rem; + margin-bottom: .75rem; + padding: 1rem; text-overflow: ellipsis; &:hover { border-color: $fresh-taiga; - transition: border-color .3s linear; + transition: all .3s linear; p { color: $gray; transition: color .3s linear; @@ -19,12 +19,17 @@ } } } + a { + display: flex; + flex-direction: column; + min-height: 5rem; + } h2 { @extend %text; color: $gray; font-size: 1.5rem; line-height: 1.3; - margin-bottom: 0; + margin-bottom: .5rem; text-transform: none; .project-name { display: inline-block; @@ -37,8 +42,9 @@ } p { @extend %text; - @extend %small; + @extend %xsmall; color: $gray-light; + line-height: 125%; margin: 0; word-wrap: break-word; } diff --git a/app/modules/projects/listing/projects-listing.jade b/app/modules/projects/listing/projects-listing.jade index 4455b759..8cfcf2fa 100644 --- a/app/modules/projects/listing/projects-listing.jade +++ b/app/modules/projects/listing/projects-listing.jade @@ -13,10 +13,11 @@ div.project-list-wrapper.centered ul(tg-sort-projects="vm.projects") li.project-list-single(tg-bind-scope, tg-repeat="project in vm.projects track by project.get('id')") div.project-list-single-left - h1.project-name - a(href="#", tg-nav="project:project=project.get('slug')", title="{{ ::project.get('name') }}") {{project.get('name')}} - span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") - include ../../../svg/lock.svg + div.project-title + h1.project-name + a(href="#", tg-nav="project:project=project.get('slug')", title="{{ ::project.get('name') }}") {{project.get('name')}} + span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") + include ../../../svg/lock.svg p {{ ::project.get('description') | limitTo:300 }} span(ng-if="::project.get('description').length > 300") ... diff --git a/app/modules/projects/listing/projects-listing.scss b/app/modules/projects/listing/projects-listing.scss index 1dde3ee5..f4c9cc44 100644 --- a/app/modules/projects/listing/projects-listing.scss +++ b/app/modules/projects/listing/projects-listing.scss @@ -2,12 +2,12 @@ border-bottom: 1px solid $whitish; display: flex; justify-content: space-between; - padding: .5rem; + min-height: 9rem; + padding: 1rem; position: relative; } .project-list-single-left { - align-content: space-between; display: flex; flex-direction: column; padding-right: 1rem; @@ -23,15 +23,15 @@ } p { @extend %text; - @extend %small; + @extend %xsmall; color: $gray; margin-bottom: 0; } .project-list-single-tags { + align-self: flex-end; display: flex; flex: 3; flex-wrap: wrap; - justify-content: flex-start; margin-top: .5rem; } .tag { diff --git a/app/modules/projects/listing/styles/profile-projects.scss b/app/modules/projects/listing/styles/profile-projects.scss index 32aae76d..034c14c0 100644 --- a/app/modules/projects/listing/styles/profile-projects.scss +++ b/app/modules/projects/listing/styles/profile-projects.scss @@ -1,6 +1,8 @@ .profile-projects { border-top: 1px solid $whitish; .project-list-single { + display: flex; + justify-content: space-between; min-height: 10rem; } } diff --git a/app/modules/user-timeline/user-timeline/user-timeline.scss b/app/modules/user-timeline/user-timeline/user-timeline.scss index 8a819a6f..25c35e61 100644 --- a/app/modules/user-timeline/user-timeline/user-timeline.scss +++ b/app/modules/user-timeline/user-timeline/user-timeline.scss @@ -34,7 +34,7 @@ align-items: center; color: $gray-light; display: flex; - margin-right: 100px; + margin-right: 130px; } .activity-date { color: $gray-light; diff --git a/app/styles/components/private.scss b/app/styles/components/private.scss index e77260ff..47c1cc0b 100644 --- a/app/styles/components/private.scss +++ b/app/styles/components/private.scss @@ -1,6 +1,6 @@ .private { display: inline-block; - margin-left: .3rem; + margin-left: .5rem; width: .5rem; path { fill: $gray-light; diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index ec6fee85..93678449 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -1,5 +1,5 @@ // __Font Sizes__ // -%xsmall {font-size: .5rem;} +%xsmall {font-size: .75rem;} %small {font-size: .9rem;} %medium {font-size: 1rem;} %large {font-size: 1.2rem;} @@ -83,4 +83,4 @@ } $navbar: 45px; -$main-height: calc(100vh - 45px); \ No newline at end of file +$main-height: calc(100vh - 45px); diff --git a/app/svg/timeline.svg b/app/svg/timeline.svg index 083daee9..56c0347a 100644 --- a/app/svg/timeline.svg +++ b/app/svg/timeline.svg @@ -1 +1,3 @@ - \ No newline at end of file + + +