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",
"SUBTITLE": "Specify the types your issues could be",
"ISSUE_TITLE": "Issues types",
"ACTION_ADD": "Add new type"
"ACTION_ADD": "Add new {{objName}}"
},
"ROLES": {
"SECTION_NAME": "Roles - {{projectName}}",
@ -523,6 +523,7 @@
"PROJECT": {
"WELCOME": "Welcome",
"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": {
"PROJECT": "project<br/> points",
"DEFINED": "defined<br/> points",
@ -565,8 +566,8 @@
"CHANGE_PASSWORD": "Change password",
"DASHBOARD_TITLE": "Dashboard",
"DISCOVER_TITLE": "Discover trending projects",
"DISCOVER": "Discover"
"DISCOVER": "Discover",
"ACTION_REORDER": "Drag & drop to reorder"
},
"IMPORT": {
"TITLE": "Importing Project",

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

@ -1,14 +1,14 @@
section.profile-projects
- for (var x = 0; x < 3; x++)
div.profile-project-single
div.profile-projects-left
div.project-list-single
div.project-list-single-left
div.profile-project-title
div.project-list-single-title
h1
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.
div.profile-project-tags.tags-container
div.project-list-single-tags.tags-container
// Tag border style has to be set by JS
span.tag(style='border-left: 5px solid #73d216;')
span.tag-name python
@ -17,9 +17,9 @@ section.profile-projects
span.tag(style='border-left: 5px solid #25f45c;')
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")
span.icon.icon-comment
span.stat-num 2
@ -30,7 +30,7 @@ section.profile-projects
span.icon.icon-open-eye
span.stat-num 4
div.profile-project-members
div.project-list-single-members
a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg")
a(href="", title="View {{ user.nickname }} profile")
@ -48,13 +48,13 @@ section.profile-projects
a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/syswarren/128.jpg", alt="{{ user.nickname }}")
div.profile-project-single
div.profile-projects-left
div.profile-project-title
div.project-list-single
div.project-list-single-left
div.project-list-single-title
h1
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
span.tag(style='border-left: 5px solid #43d56f;')
span.tag-name javascript
@ -63,8 +63,8 @@ section.profile-projects
span.tag(style='border-left: 5px solid #cc43fd;')
span.tag-name design
div.profile-projects-right
div.profile-project-stats
div.project-list-single-right
div.project-list-single-stats
div.stat-comments(title="2 comments")
span.icon.icon-comment
span.stat-num 2
@ -74,21 +74,21 @@ section.profile-projects
div.stat-viewer(title="2 followers")
span.icon.icon-open-eye
span.stat-num 4
div.profile-project-members
div.project-list-single-members
a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg")
a(href="", title="View {{ user.nickname }} profile")
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg")
div.profile-project-single
div.profile-projects-left
div.project-list-single
div.project-list-single-left
div.profile-project-title
div.project-list-single-title
h1
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.
div.profile-project-tags.tags-container
div.project-list-single-tags.tags-container
// Tag border style has to be set by JS
span.tag(style='border-left: 5px solid #11cd00;')
span.tag-name PHP
@ -96,9 +96,9 @@ section.profile-projects
span.tag-name marketing
span.tag(style='border-left: 5px solid #cdcd54;')
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
span.icon.icon-comment
span.stat-num 2
@ -109,7 +109,7 @@ section.profile-projects
span.icon.icon-open-eye
span.stat-num 4
div.profile-project-members
div.project-list-single-members
- for (var x = 0; x < 2; x++)
a(href="", title="View {{ user.nickname }} profile")
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
revert: 200
axis: "y"
opacity: .95
placeholder: 'placeholder'
})
tdom.on "sortstop", (event, ui) ->

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

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

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

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