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

Project list styles and layout

stable
Xavier Julián 2015-04-23 12:17:28 +02:00 committed by Juanfran
parent abff53c5c5
commit 003499ce44
8 changed files with 127 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/locales/locale-en.json
View File

@ -384,7 +384,7 @@
"TITLE": "Types", "TITLE": "Types",
"SUBTITLE": "Specify the types your issues could be", "SUBTITLE": "Specify the types your issues could be",
"ISSUE_TITLE": "Issues types", "ISSUE_TITLE": "Issues types",
"ACTION_ADD": "Add new type" "ACTION_ADD": "Add new {{objName}}"
}, },
"ROLES": { "ROLES": {
"SECTION_NAME": "Roles - {{projectName}}", "SECTION_NAME": "Roles - {{projectName}}",
@ -523,6 +523,7 @@
"PROJECT": { "PROJECT": {
"WELCOME": "Welcome", "WELCOME": "Welcome",
"SECTION_PROJECTS": "Projects", "SECTION_PROJECTS": "Projects",
"HELP": "TODO. You can reorder your projects in your favorite way by drag&drop, Taiga will remember your order for every project list.\n Remember that the first ten projects will be shown in your rapid access menu in the top bar dropdown menu",
"STATS": { "STATS": {
"PROJECT": "project<br/> points", "PROJECT": "project<br/> points",
"DEFINED": "defined<br/> points", "DEFINED": "defined<br/> points",
@ -565,8 +566,8 @@
"CHANGE_PASSWORD": "Change password", "CHANGE_PASSWORD": "Change password",
"DASHBOARD_TITLE": "Dashboard", "DASHBOARD_TITLE": "Dashboard",
"DISCOVER_TITLE": "Discover trending projects", "DISCOVER_TITLE": "Discover trending projects",
"DISCOVER": "Discover" "DISCOVER": "Discover",
"ACTION_REORDER": "Drag & drop to reorder"
}, },
"IMPORT": { "IMPORT": {
"TITLE": "Importing Project", "TITLE": "Importing Project",

42
app/modules/profile/includes/profile-projects.jade
View File

@ -1,14 +1,14 @@
section.profile-projects section.profile-projects
- for (var x = 0; x < 3; x++) - for (var x = 0; x < 3; x++)
div.profile-project-single div.project-list-single
div.profile-projects-left div.project-list-single-left
div.profile-project-title div.project-list-single-title
h1 h1
a(href="", title="View {{ project.title }}") My Side Project a(href="", title="View {{ project.title }}") My Side Project
p We plan to build a hundred of so called "telehubs" so people from all over the world can immediately relocate their physical self at any other telehub in microseconds. The technology and science behind this project is sound and we are now ready to build the first telehub and then massproduce them. p We plan to build a hundred of so called "telehubs" so people from all over the world can immediately relocate their physical self at any other telehub in microseconds. The technology and science behind this project is sound and we are now ready to build the first telehub and then massproduce them.
div.profile-project-tags.tags-container div.project-list-single-tags.tags-container
// Tag border style has to be set by JS // Tag border style has to be set by JS
span.tag(style='border-left: 5px solid #73d216;') span.tag(style='border-left: 5px solid #73d216;')
span.tag-name python span.tag-name python
@ -17,9 +17,9 @@ section.profile-projects
span.tag(style='border-left: 5px solid #25f45c;') span.tag(style='border-left: 5px solid #25f45c;')
span.tag-name opensource span.tag-name opensource
div.profile-projects-right div.project-list-single-right
div.profile-project-stats div.project-list-single-stats
div.stat-comments(title="2 comments") div.stat-comments(title="2 comments")
span.icon.icon-comment span.icon.icon-comment
span.stat-num 2 span.stat-num 2
@ -30,7 +30,7 @@ section.profile-projects
span.icon.icon-open-eye span.icon.icon-open-eye
span.stat-num 4 span.stat-num 4
div.profile-project-members div.project-list-single-members
a(href="", title="View {{ user.nickname }} profile") a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg") img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg")
a(href="", title="View {{ user.nickname }} profile") a(href="", title="View {{ user.nickname }} profile")
@ -48,13 +48,13 @@ section.profile-projects
a(href="", title="View {{ user.nickname }} profile") a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/syswarren/128.jpg", alt="{{ user.nickname }}") img(src="https://s3.amazonaws.com/uifaces/faces/twitter/syswarren/128.jpg", alt="{{ user.nickname }}")
div.profile-project-single div.project-list-single
div.profile-projects-left div.project-list-single-left
div.profile-project-title div.project-list-single-title
h1 h1
a(href="", title="View {{ project.title }}") Teletransportation hubs a(href="", title="View {{ project.title }}") Teletransportation hubs
div.profile-project-tags.tags-container div.project-list-single-tags.tags-container
// Tag border style has to be set by JS // Tag border style has to be set by JS
span.tag(style='border-left: 5px solid #43d56f;') span.tag(style='border-left: 5px solid #43d56f;')
span.tag-name javascript span.tag-name javascript
@ -63,8 +63,8 @@ section.profile-projects
span.tag(style='border-left: 5px solid #cc43fd;') span.tag(style='border-left: 5px solid #cc43fd;')
span.tag-name design span.tag-name design
div.profile-projects-right div.project-list-single-right
div.profile-project-stats div.project-list-single-stats
div.stat-comments(title="2 comments") div.stat-comments(title="2 comments")
span.icon.icon-comment span.icon.icon-comment
span.stat-num 2 span.stat-num 2
@ -74,21 +74,21 @@ section.profile-projects
div.stat-viewer(title="2 followers") div.stat-viewer(title="2 followers")
span.icon.icon-open-eye span.icon.icon-open-eye
span.stat-num 4 span.stat-num 4
div.profile-project-members div.project-list-single-members
a(href="", title="View {{ user.nickname }} profile") a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg") img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg")
a(href="", title="View {{ user.nickname }} profile") a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg") img(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg")
div.profile-project-single div.project-list-single
div.profile-projects-left div.project-list-single-left
div.profile-project-title div.project-list-single-title
h1 h1
a(href="", title="View {{ project.title }}") Taiga a(href="", title="View {{ project.title }}") Taiga
p Una plataforma social para crear comunidad entorno a la tienda. Esta comunidad está pensada para quedar a hacer deporte, compartir iniciativas. p Una plataforma social para crear comunidad entorno a la tienda. Esta comunidad está pensada para quedar a hacer deporte, compartir iniciativas.
div.profile-project-tags.tags-container div.project-list-single-tags.tags-container
// Tag border style has to be set by JS // Tag border style has to be set by JS
span.tag(style='border-left: 5px solid #11cd00;') span.tag(style='border-left: 5px solid #11cd00;')
span.tag-name PHP span.tag-name PHP
@ -96,9 +96,9 @@ section.profile-projects
span.tag-name marketing span.tag-name marketing
span.tag(style='border-left: 5px solid #cdcd54;') span.tag(style='border-left: 5px solid #cdcd54;')
span.tag-name wordpress span.tag-name wordpress
div.profile-projects-right div.project-list-single-right
div.profile-project-stats div.project-list-single-stats
div.stat-comments div.stat-comments
span.icon.icon-comment span.icon.icon-comment
span.stat-num 2 span.stat-num 2
@ -109,7 +109,7 @@ section.profile-projects
span.icon.icon-open-eye span.icon.icon-open-eye
span.stat-num 4 span.stat-num 4
div.profile-project-members div.project-list-single-members
- for (var x = 0; x < 2; x++) - for (var x = 0; x < 2; x++)
a(href="", title="View {{ user.nickname }} profile") a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg") img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg")

2
app/modules/projects/listing/listing.directive.coffee
View File

@ -8,6 +8,8 @@ ProjectsListingDirective = (projectsService) ->
dropOnEmpty: true dropOnEmpty: true
revert: 200 revert: 200
axis: "y" axis: "y"
opacity: .95
placeholder: 'placeholder'
}) })
tdom.on "sortstop", (event, ui) -> tdom.on "sortstop", (event, ui) ->

33
app/modules/projects/listing/listing.jade
View File

@ -1,17 +1,24 @@
a.create-project-btn.button-green( div.project-list-wrapper.centered
href="#", div.project-list-title
ng-click="vm.newProject()", h1 My projects
title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}", a.create-project-btn.button-green(href="#", ng-click="vm.newProject()", title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}", translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT")
translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT") section.project-list-section
div.project-list
ul.js-sortable
li.project-list-single(tg-bind-scope, ng-repeat="project in vm.projects.all")
div.project-list-single-left
div.project-list-single-title
h1
a(href="#", ng-bind="::project.name", tg-nav="project:project=project.slug")
span {{project.is_private}}
p {{ ::project.description }}
h2 Esto es sortable y persiste en el servidor! ;) div.project-list-single-tags.tags-container(ng-if="project.tags")
div.tags-block(tg-colorize-tags="project.tags", tg-colorize-tags-type="backlog")
ul.js-sortable div.project-list-single-right
li(tg-bind-scope, ng-repeat="project in vm.projects.all") span.drag.icon.icon-drag-v
span Private: {{project.is_private}}, tags: {{project.tags}}, link:
a(href="#", aside.help-area
ng-bind="::project.name" p(translate="PROJECT.HELP")
tg-nav="project:project=project.slug")
div {{ ::project.description }}

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

@ -1,26 +1,23 @@
.profile-projects { .project-list-single {
border-top: 1px solid $whitish; border-bottom: 1px solid $whitish;
.profile-project-single { display: flex;
border-bottom: 1px solid $whitish; justify-content: center;
display: flex; padding: .8rem 1rem;
justify-content: center; position: relative;
min-height: 10rem;
padding: .8rem 1rem;
position: relative;
}
.profile-projects-left,
.profile-projects-right {
display: flex;
flex-direction: column;
}
} }
.profile-projects-left { .project-list-single-left,
.project-list-single-right {
display: flex;
flex-direction: column;
}
.project-list-single-left {
align-content: space-between; align-content: space-between;
flex: 4; flex: 4;
h1 { h1 {
@extend %bold; @extend %text;
@extend %xlarge; @extend %larger;
margin-bottom: 0; margin-bottom: 0;
text-transform: none; text-transform: none;
} }
@ -28,7 +25,7 @@
color: $gray-light; color: $gray-light;
max-width: 70%; max-width: 70%;
} }
.profile-project-tags { .project-list-single-tags {
align-content: flex-end; align-content: flex-end;
display: flex; display: flex;
flex: 3; flex: 3;
@ -37,13 +34,14 @@
} }
.tag { .tag {
align-self: flex-end; align-self: flex-end;
margin-bottom: .3rem; margin-right: .5rem;
padding: .5rem;
} }
} }
.profile-projects-right { .project-list-single-right {
justify-content: space-between; justify-content: space-between;
.profile-project-stats { .project-list-single-stats {
align-self: flex-end; align-self: flex-end;
display: flex; display: flex;
div { div {
@ -60,7 +58,7 @@
} }
} }
} }
.profile-project-members { .project-list-single-members {
align-self: flex-end; align-self: flex-end;
display: flex; display: flex;
flex-grow: 0; flex-grow: 0;

8
app/modules/projects/listing/styles/profile-projects.scss Normal file
View File

@ -0,0 +1,8 @@
.profile-projects {
border-top: 1px solid $whitish;
.project-list-single {
min-height: 10rem;
}
}

50
app/modules/projects/listing/styles/project-list.scss Normal file
View File

@ -0,0 +1,50 @@
.project-list-wrapper {
.project-list-title {
align-items: center;
background: $whitish;
display: flex;
justify-content: space-between;
margin: 2rem 0 1rem;
padding: .9rem 1rem;
h1 {
@extend %larger;
margin: 0;
}
}
.project-list-section {
display: flex;
}
.project-list {
flex: 1;
margin-right: 2rem;
}
.help-area {
@extend %small;
color: $gray-light;
width: 200px;
}
.placeholder {
background-color: lighten($whitish, 3%);
height: 7rem;
width: 100%;
}
.project-list-single {
background: $white;
&:hover {
background: lighten($green-taiga, 60%);
cursor: move;
transition: background .3s;
.drag {
opacity: 1;
}
}
}
.drag {
@extend %large;
align-self: center;
color: $gray-light;
opacity: 0;
transition: opacity .2s;
}
}

2
csslintrc.json
View File

@ -6,7 +6,7 @@
"font-sizes": false, "font-sizes": false,
"ids": true, "ids": true,
"known-properties": false, "known-properties": false,
"overqualified-elements": true, "overqualified-elements": false,
"shorthand": true, "shorthand": true,
"text-indent": true, "text-indent": true,
"unique-headings": false, "unique-headings": false,