diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json index f62a9b0e..7209d745 100644 --- a/app/locales/locale-en.json +++ b/app/locales/locale-en.json @@ -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
points", "DEFINED": "defined
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", diff --git a/app/modules/profile/includes/profile-projects.jade b/app/modules/profile/includes/profile-projects.jade index ab7f3e37..2963a7ee 100644 --- a/app/modules/profile/includes/profile-projects.jade +++ b/app/modules/profile/includes/profile-projects.jade @@ -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") diff --git a/app/modules/projects/listing/listing.directive.coffee b/app/modules/projects/listing/listing.directive.coffee index 64b3b385..0339c929 100644 --- a/app/modules/projects/listing/listing.directive.coffee +++ b/app/modules/projects/listing/listing.directive.coffee @@ -8,6 +8,8 @@ ProjectsListingDirective = (projectsService) -> dropOnEmpty: true revert: 200 axis: "y" + opacity: .95 + placeholder: 'placeholder' }) tdom.on "sortstop", (event, ui) -> diff --git a/app/modules/projects/listing/listing.jade b/app/modules/projects/listing/listing.jade index 873615f9..d1b5d677 100644 --- a/app/modules/projects/listing/listing.jade +++ b/app/modules/projects/listing/listing.jade @@ -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") +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.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 - li(tg-bind-scope, ng-repeat="project in vm.projects.all") - span Private: {{project.is_private}}, tags: {{project.tags}}, link: + div.project-list-single-right + span.drag.icon.icon-drag-v - a(href="#", - ng-bind="::project.name" - tg-nav="project:project=project.slug") + aside.help-area + p(translate="PROJECT.HELP") - div {{ ::project.description }} diff --git a/app/modules/profile/styles/profile-projects.scss b/app/modules/projects/listing/styles/listing.scss similarity index 63% rename from app/modules/profile/styles/profile-projects.scss rename to app/modules/projects/listing/styles/listing.scss index b2fae443..b165b095 100644 --- a/app/modules/profile/styles/profile-projects.scss +++ b/app/modules/projects/listing/styles/listing.scss @@ -1,26 +1,23 @@ -.profile-projects { - border-top: 1px solid $whitish; - .profile-project-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 { - display: flex; - flex-direction: column; - } +.project-list-single { + border-bottom: 1px solid $whitish; + display: flex; + justify-content: center; + padding: .8rem 1rem; + position: relative; } -.profile-projects-left { +.project-list-single-left, +.project-list-single-right { + display: flex; + flex-direction: column; +} + +.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; diff --git a/app/modules/projects/listing/styles/profile-projects.scss b/app/modules/projects/listing/styles/profile-projects.scss new file mode 100644 index 00000000..32aae76d --- /dev/null +++ b/app/modules/projects/listing/styles/profile-projects.scss @@ -0,0 +1,8 @@ +.profile-projects { + border-top: 1px solid $whitish; + .project-list-single { + min-height: 10rem; + } +} + + diff --git a/app/modules/projects/listing/styles/project-list.scss b/app/modules/projects/listing/styles/project-list.scss new file mode 100644 index 00000000..4e031e8b --- /dev/null +++ b/app/modules/projects/listing/styles/project-list.scss @@ -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; + } +} + diff --git a/csslintrc.json b/csslintrc.json index 6071bc41..3f615cc3 100644 --- a/csslintrc.json +++ b/csslintrc.json @@ -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,