taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #501 from taigaio/project-list-fix 

Project list fixes
stable
Juanfran 2015-06-09 03:59:06 -07:00
parent a37bfbdc88 55043f77a7
commit 3e1bc0791d
10 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/modules/home/home.scss
View File

@ -10,7 +10,6 @@
} }
.see-more-projects-btn { .see-more-projects-btn {
display: block; display: block;
margin-top: 2rem;
} }
.title-bar { .title-bar {
@extend %title; @extend %title;

4
app/modules/home/projects/home-project-list.jade
View File

@ -1,7 +1,7 @@
ul.home-project-list(ng-show="vm.projects.size") ul.home-project-list(ng-show="vm.projects.size")
li.home-project-list-single(tg-bind-scope, tg-repeat="project in vm.projects") 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.project-name(title="{{ ::project.get('name') }}") {{::project.get('name')}}
span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}")
include ../../../svg/lock.svg include ../../../svg/lock.svg

20
app/modules/home/projects/home-project-list.scss
View File

@ -1,14 +1,14 @@
.home-project-list { .home-project-list {
li { li {
border-right: 5px solid $whitish; border: 1px solid lighten($gray-light, 15%);
border-radius: 3px;
cursor: pointer; cursor: pointer;
margin-bottom: .5rem; margin-bottom: .75rem;
padding: .5rem; padding: 1rem;
padding-right: 1rem;
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
border-color: $fresh-taiga; border-color: $fresh-taiga;
transition: border-color .3s linear; transition: all .3s linear;
p { p {
color: $gray; color: $gray;
transition: color .3s linear; transition: color .3s linear;
@ -19,12 +19,17 @@
} }
} }
} }
a {
display: flex;
flex-direction: column;
min-height: 5rem;
}
h2 { h2 {
@extend %text; @extend %text;
color: $gray; color: $gray;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.3; line-height: 1.3;
margin-bottom: 0; margin-bottom: .5rem;
text-transform: none; text-transform: none;
.project-name { .project-name {
display: inline-block; display: inline-block;
@ -37,8 +42,9 @@
} }
p { p {
@extend %text; @extend %text;
@extend %small; @extend %xsmall;
color: $gray-light; color: $gray-light;
line-height: 125%;
margin: 0; margin: 0;
word-wrap: break-word; word-wrap: break-word;
} }

9
app/modules/projects/listing/projects-listing.jade
View File

@ -13,10 +13,11 @@ div.project-list-wrapper.centered
ul(tg-sort-projects="vm.projects") ul(tg-sort-projects="vm.projects")
li.project-list-single(tg-bind-scope, tg-repeat="project in vm.projects track by project.get('id')") li.project-list-single(tg-bind-scope, tg-repeat="project in vm.projects track by project.get('id')")
div.project-list-single-left div.project-list-single-left
h1.project-name div.project-title
a(href="#", tg-nav="project:project=project.get('slug')", title="{{ ::project.get('name') }}") {{project.get('name')}} h1.project-name
span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") a(href="#", tg-nav="project:project=project.get('slug')", title="{{ ::project.get('name') }}") {{project.get('name')}}
include ../../../svg/lock.svg span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}")
include ../../../svg/lock.svg
p {{ ::project.get('description') | limitTo:300 }} p {{ ::project.get('description') | limitTo:300 }}
span(ng-if="::project.get('description').length > 300") ... span(ng-if="::project.get('description').length > 300") ...

8
app/modules/projects/listing/projects-listing.scss
View File

@ -2,12 +2,12 @@
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .5rem; min-height: 9rem;
padding: 1rem;
position: relative; position: relative;
} }
.project-list-single-left { .project-list-single-left {
align-content: space-between;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 1rem; padding-right: 1rem;
@ -23,15 +23,15 @@
} }
p { p {
@extend %text; @extend %text;
@extend %small; @extend %xsmall;
color: $gray; color: $gray;
margin-bottom: 0; margin-bottom: 0;
} }
.project-list-single-tags { .project-list-single-tags {
align-self: flex-end;
display: flex; display: flex;
flex: 3; flex: 3;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start;
margin-top: .5rem; margin-top: .5rem;
} }
.tag { .tag {

2
app/modules/projects/listing/styles/profile-projects.scss
View File

@ -1,6 +1,8 @@
.profile-projects { .profile-projects {
border-top: 1px solid $whitish; border-top: 1px solid $whitish;
.project-list-single { .project-list-single {
display: flex;
justify-content: space-between;
min-height: 10rem; min-height: 10rem;
} }
} }

2
app/modules/user-timeline/user-timeline/user-timeline.scss
View File

@ -34,7 +34,7 @@
align-items: center; align-items: center;
color: $gray-light; color: $gray-light;
display: flex; display: flex;
margin-right: 100px; margin-right: 130px;
} }
.activity-date { .activity-date {
color: $gray-light; color: $gray-light;

2
app/styles/components/private.scss
View File

@ -1,6 +1,6 @@
.private { .private {
display: inline-block; display: inline-block;
margin-left: .3rem; margin-left: .5rem;
width: .5rem; width: .5rem;
path { path {
fill: $gray-light; fill: $gray-light;

4
app/styles/dependencies/helpers.scss
View File

@ -1,5 +1,5 @@
// __Font Sizes__ // // __Font Sizes__ //
%xsmall {font-size: .5rem;} %xsmall {font-size: .75rem;}
%small {font-size: .9rem;} %small {font-size: .9rem;}
%medium {font-size: 1rem;} %medium {font-size: 1rem;}
%large {font-size: 1.2rem;} %large {font-size: 1.2rem;}
@ -83,4 +83,4 @@
} }
$navbar: 45px; $navbar: 45px;
$main-height: calc(100vh - 45px); $main-height: calc(100vh - 45px);

4
app/svg/timeline.svg
View File

@ -1 +1,3 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path d="m0 16.5 24 0 0-3-24 0 0 3zm0 6 24 0 0-3-24 0 0 3zm0-12 24 0 0-3-24 0 0 3zm0-9 0 3 24 0 0-3-24 0z"/></svg> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" height="24px" width="24px">
<path d="m0 16.5 24 0 0-3-24 0 0 3zm0 6 24 0 0-3-24 0 0 3zm0-12 24 0 0-3-24 0 0 3zm0-9 0 3 24 0 0-3-24 0z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 261 B