diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f8d388f..6280b4f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,15 +4,26 @@ ## 1.10.0 ??? (unreleased) ### Features -- Upload attachments on US/issue/task lightbox. -- Attachments image gallery view mode in detail pages. -- Drag files from desktop to attachments section. -- Drag files from desktop in wysiwyg textareas. - New design for the detail pages slidebar. -- Sticky project navigation bar. - Added 'Assign to me' button in User Stories, Tasks and Issues detail pages. (thanks to [@allistera](https://github.com/allistera)). +- Attachments: + - Upload attachments on US/issue/task lightbox. + - Attachments image gallery view mode in detail pages. + - Drag files from desktop to attachments section. + - Drag files from desktop in wysiwyg textareas. +- Project: + - Add a logo to your project. + - Denotes that your project is looking for people and add an explanation. +- Discover section: + - List most liked and most active project (last week/month/year or all time). + - List featured project. + - Search projects: + - Full text search with priorities over title, tags and description fields. + - Order results alphabeticaly, by most liked or more actived. + - Filter by 'use kanban', 'use scrum' or 'looking for people'. ### Misc +- Sticky project navigation bar. - Lots of small and not so small bugfixes. diff --git a/app/images/discover.png b/app/images/discover.png new file mode 100644 index 00000000..04568fc6 Binary files /dev/null and b/app/images/discover.png differ diff --git a/app/images/looking-for-people.png b/app/images/looking-for-people.png new file mode 100644 index 00000000..89800164 Binary files /dev/null and b/app/images/looking-for-people.png differ diff --git a/app/images/project-logos/project-logo-01.png b/app/images/project-logos/project-logo-01.png new file mode 100644 index 00000000..f8491702 Binary files /dev/null and b/app/images/project-logos/project-logo-01.png differ diff --git a/app/images/project-logos/project-logo-02.png b/app/images/project-logos/project-logo-02.png new file mode 100644 index 00000000..c4034369 Binary files /dev/null and b/app/images/project-logos/project-logo-02.png differ diff --git a/app/images/project-logos/project-logo-03.png b/app/images/project-logos/project-logo-03.png new file mode 100644 index 00000000..c3f2f833 Binary files /dev/null and b/app/images/project-logos/project-logo-03.png differ diff --git a/app/images/project-logos/project-logo-04.png b/app/images/project-logos/project-logo-04.png new file mode 100644 index 00000000..a33c622e Binary files /dev/null and b/app/images/project-logos/project-logo-04.png differ diff --git a/app/images/project-logos/project-logo-05.png b/app/images/project-logos/project-logo-05.png new file mode 100644 index 00000000..5f5afd0a Binary files /dev/null and b/app/images/project-logos/project-logo-05.png differ diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json index 464e558d..2228e699 100644 --- a/app/locales/taiga/locale-en.json +++ b/app/locales/taiga/locale-en.json @@ -450,9 +450,18 @@ "NUMBER_US_POINTS": "Number of US points (0 for an undetermined quantity)", "TAGS": "Tags", "DESCRIPTION": "Description", + "RECRUITING": "Is this project looking for people?", + "RECRUITING_MESSAGE": "Who are you looking for?", + "RECRUITING_PLACEHOLDER": "Define the profiles you are looking for", "PUBLIC_PROJECT": "Public project", + "PUBLIC_PROJECT_DESC": "Users will be able to find and view your project", "PRIVATE_PROJECT": "Private project", - "DELETE": "Delete this project" + "PRIVATE_PROJECT_DESC": "By default, this project will be hidden to the public", + "PRIVATE_OR_PUBLIC": "What's the difference between public and private projects?", + "DELETE": "Delete this project", + "LOGO_HELP": "The image will be scaled to 80x80px.", + "CHANGE_LOGO": "Change logo", + "ACTION_USE_DEFAULT_LOGO": "Use default image" }, "REPORTS": { "TITLE": "Reports", @@ -715,6 +724,10 @@ "SECTION_PROJECTS": "Projects", "HELP": "Reorder your projects to set in the top the most used ones.
The top 10 projects will appear in the top navigation bar project list", "PRIVATE": "Private project", + "LOOKING_FOR_PEOPLE": "This project is looking for people", + "FANS_COUNTER_TITLE": "{total, plural, one{one fan} other{# fans}}", + "WATCHERS_COUNTER_TITLE": "{total, plural, one{one watcher} other{# watchers}}", + "MEMBERS_COUNTER_TITLE": "{total, plural, one{one member} other{# members}}", "STATS": { "PROJECT": "project
points", "DEFINED": "defined
points", @@ -744,6 +757,7 @@ "TITLE_NEXT_PROJECT": "Show next projects", "HELP_TITLE": "Taiga Support Page", "HELP": "Help", + "HOMEPAGE": "Homepage", "FEEDBACK_TITLE": "Send feedback", "FEEDBACK": "Feedback", "NOTIFICATIONS_TITLE": "Edit your notification settings", @@ -1269,9 +1283,9 @@ } }, "USER_PROFILE": { - "IMAGE_HELP": "The image will be scaled to 80x80px.
", + "IMAGE_HELP": "The image will be scaled to 80x80px.", "ACTION_CHANGE_IMAGE": "Change", - "ACTION_USE_GRAVATAR": "Use gravatar image", + "ACTION_USE_GRAVATAR": "Use default image", "ACTION_DELETE_ACCOUNT": "Delete Taiga account", "CHANGE_EMAIL_SUCCESS": "Check your inbox!
We have sent a mail to your account
with the instructions to set your new address", "CHANGE_PHOTO": "Change photo", @@ -1429,5 +1443,33 @@ "TEXT2": "Good luck!" } } + }, + "DISCOVER": { + "DISCOVER_TITLE": "Discover projects", + "DISCOVER_SUBTITLE": "{projects, plural, one{One public project to discover} other{# public projects to discover}}", + "MOST_ACTIVE": "Most active", + "MOST_ACTIVE_EMPTY": "There are no ACTIVE projects yet", + "MOST_LIKED": "Most liked", + "MOST_LIKED_EMPTY": "There are no LIKED projects yet", + "VIEW_MORE": "View more", + "RECRUITING": "This project is looking for people", + "FEATURED": "Featured Projects", + "EMPTY": "There are no projects to show with this search criteria.
Try again!", + "FILTERS": { + "ALL": "All", + "KANBAN": "Kanban", + "SCRUM": "Scrum", + "PEOPLE": "Looking for people", + "WEEK": "Last week", + "MONTH": "Last month", + "YEAR": "Last year", + "ALL_TIME": "All time", + "CLEAR": "Clear filters" + }, + "SEARCH": { + "INPUT_PLACEHOLDER": "Type something...", + "ACTION_TITLE": "Search", + "RESULTS": "Search results" + } } } diff --git a/app/modules/components/vote-button/vote-button.jade b/app/modules/components/vote-button/vote-button.jade index 457f966b..24d63b04 100644 --- a/app/modules/components/vote-button/vote-button.jade +++ b/app/modules/components/vote-button/vote-button.jade @@ -16,7 +16,6 @@ a.vote-inner( ) {{ vm.item.total_voters }} //- Anonymous user button - span.vote-inner(ng-if="::!vm.user") span.track-icon include ../../../svg/upvote.svg diff --git a/app/modules/profile/profile-favs/items/project.jade b/app/modules/profile/profile-favs/items/project.jade index 2cb121d9..827eff4f 100644 --- a/app/modules/profile/profile-favs/items/project.jade +++ b/app/modules/profile/profile-favs/items/project.jade @@ -1,13 +1,26 @@ .list-itemtype-project - .list-itemtype-project-data - h2 - a( + .list-itemtype-project-left + .list-itemtype-project-data-wrapper + + a.list-itemtype-project-image( href="#" tg-nav="project:project=vm.item.get('slug')" title="{{ ::vm.item.get('name') }}" - ) {{ ::vm.item.get('name') }} - span.private(ng-if="::project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") - p {{ ::vm.item.get('description') }} + ) + img( + tg-project-logo-src="vm.item" + title="{{ ::vm.item.get('name') }}" + ) + + .list-itemtype-project-data + h2 + a( + href="#" + tg-nav="project:project=vm.item.get('slug')" + title="{{ ::vm.item.get('name') }}" + ) {{ ::vm.item.get('name') }} + span.private(ng-if="::project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}") + p {{ ::vm.item.get('description') }} .list-itemtype-project-tags.tags-container(ng-if="::vm.item.get('tags_colors').size") span.tag( diff --git a/app/modules/profile/profile-projects/profile-projects.jade b/app/modules/profile/profile-projects/profile-projects.jade index 3d4e8b2c..28c2ef45 100644 --- a/app/modules/profile/profile-projects/profile-projects.jade +++ b/app/modules/profile/profile-projects/profile-projects.jade @@ -13,15 +13,24 @@ section.profile-projects .list-itemtype-project(tg-repeat="project in vm.projects") .list-itemtype-project-left - - .project-list-single-title - h2 - a( - href="#" - tg-nav="project:project=project.get('slug')" - title="{{ ::project.get('name') }}" - ) {{::project.get('name')}} - p {{ ::project.get('description') | limitTo:300 }} + .project-list-single-title-wrapper + a.list-itemtype-project-image( + href="#" + tg-nav="project:project=project.get('slug')" + title="{{ ::project.get('name') }}" + ) + img( + tg-project-logo-src="::project" + alt="{{::project.get('name')}}" + ) + .project-list-single-title + h2 + a( + href="#" + tg-nav="project:project=project.get('slug')" + title="{{ ::project.get('name') }}" + ) {{::project.get('name')}} + p {{ ::project.get('description') | limitTo:300 }} .list-itemtype-project-tags.tags-container(ng-if="::project.get('tags').size") span.tag( diff --git a/app/modules/profile/styles/profile-content-tabs.scss b/app/modules/profile/styles/profile-content-tabs.scss index 492778cc..6b5340be 100644 --- a/app/modules/profile/styles/profile-content-tabs.scss +++ b/app/modules/profile/styles/profile-content-tabs.scss @@ -4,7 +4,7 @@ .tab { color: $gray-light; display: inline-block; - padding: 1rem 1.25rem; + padding: 1rem; &:hover, &.active { color: $grayer; diff --git a/app/modules/projects/listing/projects-listing.jade b/app/modules/projects/listing/projects-listing.jade index 60dab648..3e1e0de9 100644 --- a/app/modules/projects/listing/projects-listing.jade +++ b/app/modules/projects/listing/projects-listing.jade @@ -1,28 +1,60 @@ -div.project-list-wrapper.centered - div.project-list-title +.project-list-wrapper.centered + .project-list-title h1(translate="PROJECTS.MY_PROJECTS") - div.create-options - a.create-project-btn.button-green(href="#", ng-click="vm.newProject()", title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}", translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT") + .create-options + a.create-project-btn.button-green( + href="#" + ng-click="vm.newProject()" + title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}" + translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT" + ) span(tg-import-project-button) - a.button-blackish.import-project-button(href="", title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}") + a.button-blackish.import-project-button( + href="" + title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}" + ) span.icon.icon-upload input.import-file.hidden(type="file") section.project-list-section - div.project-list + .project-list ul(tg-sort-projects="vm.projects") - li.list-itemtype-project(tg-bind-scope, tg-repeat="project in vm.projects track by project.get('id')") - div.list-itemtype-project-left - div.list-itemtype-project-data - h2 - 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") ... - - div.list-itemtype-project-tags.tag-container(ng-if="::project.get('tags').size") - span.tag(style='border-left: 5px solid {{::tag.get("color")}};', tg-repeat="tag in ::project.get('colorized_tags')") + li.list-itemtype-project( + tg-bind-scope + tg-repeat="project in vm.projects track by project.get('id')" + ) + .list-itemtype-project-left + + .list-itemtype-project-data-wrapper + a.list-itemtype-project-image( + href="#" + tg-nav="project:project=project.get('slug')" + title="{{ ::project.get('name') }}" + ) + img( + tg-project-logo-src="::project" + alt="{{::project.get('name')}}" + ) + .list-itemtype-project-data + h2 + 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") ... + + .list-itemtype-project-tags.tag-container(ng-if="::project.get('tags').size") + span.tag( + style='border-left: 5px solid {{::tag.get("color")}};' + tg-repeat="tag in ::project.get('colorized_tags')" + ) span.tag-name {{::tag.get('name')}} span.drag.icon.icon-drag-v diff --git a/app/modules/projects/listing/styles/profile-projects.scss b/app/modules/projects/listing/styles/profile-projects.scss index 534e9738..e068e7c7 100644 --- a/app/modules/projects/listing/styles/profile-projects.scss +++ b/app/modules/projects/listing/styles/profile-projects.scss @@ -4,6 +4,12 @@ display: flex; justify-content: space-between; min-height: 10rem; + .project-list-single-title-wrapper { + display: flex; + } + .list-itemtype-project-image { + flex-shrink: 0; + } .list-itemtype-project-right { display: flex; flex-direction: column; diff --git a/app/modules/projects/listing/styles/project-list.scss b/app/modules/projects/listing/styles/project-list.scss index daf97513..b9f68b93 100644 --- a/app/modules/projects/listing/styles/project-list.scss +++ b/app/modules/projects/listing/styles/project-list.scss @@ -54,6 +54,13 @@ opacity: 1; } } + .list-itemtype-project-data-wrapper { + display: flex; + } + .list-itemtype-project-image { + flex-shrink: 0; + margin-right: 1rem; + } } .drag { @extend %large; diff --git a/app/modules/projects/project/project.jade b/app/modules/projects/project/project.jade index 8977c920..b646fbff 100644 --- a/app/modules/projects/project/project.jade +++ b/app/modules/projects/project/project.jade @@ -2,51 +2,67 @@ div.wrapper tg-project-menu div.single-project.centered section.single-project-intro - div.intro-options - h1 - span.project-name {{::vm.project.get("name")}} - span.private( - ng-if="::vm.project.get('is_private')" - title="{{'PROJECT.PRIVATE' | translate}}" - ) - include ../../../svg/lock.svg - - //- Like and wacht buttons for authenticated users - div.track-buttons-container(ng-if="vm.user") - tg-like-project-button(project="vm.project") - tg-watch-project-button(project="vm.project") - - //- Like and wacht buttons for anonymous users - div.track-container(ng-if="!vm.user") - .list-itemtype-track - span.list-itemtype-track-likers( - title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_fans\")||0}:'messageformat' }}" - ) - span.icon - include ../../../svg/like.svg - span {{ ::vm.project.get('total_fans') }} - - span.list-itemtype-track-watchers( - title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_watchers\")||0}:'messageformat' }}" - ) - span.icon - include ../../../svg/watch.svg - span {{ ::vm.project.get('total_watchers') }} - - p.description {{vm.project.get('description')}} - - div.single-project-tags.tags-container(ng-if="::vm.project.get('tags').size") - span.tag( - style='border-left: 5px solid {{::tag.get("color")}};', - tg-repeat="tag in ::vm.project.get('colorized_tags')" + .project-logo( + href="#" + tg-nav="project:project=project.get('slug')" + title="{{::project.get('name')}}" + ) + img( + tg-project-logo-src="vm.project" + alt="{{::vm.project.get('name')}}" ) - span.tag-name {{::tag.get('name')}} + .single-project-title-wrapper + .intro-options + .intro-title + h1 + span.project-name {{::vm.project.get("name")}} + span.private( + ng-if="::vm.project.get('is_private')" + title="{{'PROJECT.PRIVATE' | translate}}" + ) + include ../../../svg/lock.svg + + div.track-buttons-container(ng-if="vm.user") + tg-like-project-button(project="vm.project") + tg-watch-project-button(project="vm.project") + + div.track-container(ng-if="!vm.user") + .list-itemtype-track + span.list-itemtype-track-likers( + title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_fans\")||0}:'messageformat' }}" + ) + span.icon + include ../../../svg/like.svg + span {{ ::vm.project.get('total_fans') }} + + span.list-itemtype-track-watchers( + title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_watchers\")||0}:'messageformat' }}" + ) + span.icon + include ../../../svg/watch.svg + span {{ ::vm.project.get('total_watchers') }} + + p.description {{vm.project.get('description')}} + + div.single-project-tags.tags-container(ng-if="::vm.project.get('tags').size") + span.tag( + style='border-left: 5px solid {{::tag.get("color")}};', + tg-repeat="tag in ::vm.project.get('colorized_tags')" + ) + span.tag-name {{::tag.get('name')}} div.project-data section.timeline(ng-if="vm.project") div(tg-user-timeline, projectId="vm.project.get('id')") section.involved-data + .looking-for-people(ng-if="vm.project.get('is_looking_for_people')") + img( + src="/#{v}/images/looking-for-people.png" + title="{{'PROJECT.LOOKING_FOR_PEOPLE' | translate}}" + ) + h3 {{'PROJECT.LOOKING_FOR_PEOPLE' | translate}} + p(ng-if="vm.project.get('looking_for_people_note')") {{::vm.project.get('looking_for_people_note')}}" h2.title {{"PROJECT.SECTION.TEAM" | translate}} ul.involved-team li(tg-repeat="member in vm.members") @@ -55,11 +71,3 @@ div.wrapper title="{{::member.get('full_name')}}" ) img(ng-src="{{::member.get('photo')}}", alt="{{::member.get('full_name')}}") - //- - h2.title Organizations - div.involved-organization - a(href="", title="User Name") - img( - src="https://s3.amazonaws.com/uifaces/faces/twitter/dan_higham/48.jpg" - alt="{{member.full_name}}" - ) diff --git a/app/partials/admin/admin-project-profile.jade b/app/partials/admin/admin-project-profile.jade index aebc5d45..235202c9 100644 --- a/app/partials/admin/admin-project-profile.jade +++ b/app/partials/admin/admin-project-profile.jade @@ -1,7 +1,10 @@ doctype html -div.wrapper(tg-project-profile, ng-controller="ProjectProfileController as ctrl", - ng-init="section='admin'; sectionName='ADMIN.PROJECT_PROFILE.PROJECT_DETAILS'") +div.wrapper( + tg-project-profile + ng-controller="ProjectProfileController as ctrl" + ng-init="section='admin'; sectionName='ADMIN.PROJECT_PROFILE.PROJECT_DETAILS'" +) tg-project-menu sidebar.menu-secondary.sidebar.settings-nav(tg-admin-navigation="project-profile") @@ -15,44 +18,137 @@ div.wrapper(tg-project-profile, ng-controller="ProjectProfileController as ctrl" include ../includes/components/mainTitle form - fieldset - label(for="project-name", translate="ADMIN.PROJECT_PROFILE.PROJECT_NAME") - input(type="text", name="name", placeholder="{{'ADMIN.PROJECT_PROFILE.PROJECT_NAME' | translate}}", id="project-name", - ng-model="project.name", data-required="true", maxlength="45") - fieldset - label(for="project-sprints", translate="ADMIN.PROJECT_PROFILE.NUMBER_SPRINTS") - input(type="number", name="total_milestones", min="0", placeholder="{{'ADMIN.PROJECT_PROFILE.NUMBER_SPRINTS' | translate}}", - id="project-sprints", ng-model="project.total_milestones", data-type="digits") + .project-details-image(tg-project-logo) + fieldset.image-container + img.image( + tg-project-logo-src="project._attrs" + alt="logo" + ) + .loading-overlay + img.loading-spinner( + src="/#{v}/svg/spinner-circle.svg", + alt="{{'COMMON.LOADING' | translate}}" + ) + input.hidden( + type="file" + id="logo-field" + tg-project-logo-model="logoAttachment" + ) + p.image-help + span {{ 'ADMIN.PROJECT_PROFILE.LOGO_HELP' | translate }} + span.size-info.hidden(tg-bo-html="maxFileSizeMsg") - fieldset - label(for="total-story-points", translate="ADMIN.PROJECT_PROFILE.NUMBER_US_POINTS") - input(type="number", name="total_story_points", min="0", placeholder="{{'ADMIN.PROJECT_PROFILE.NUMBER_US_POINTS' | translate}}", - id="total-story-points", ng-model="project.total_story_points", - data-type="digits") + a.button-green.change.js-change-logo( + href="#" + title="{{'ADMIN.PROJECT_PROFILE.CHANGE_LOGO' | translate}}" + ) {{'ADMIN.PROJECT_PROFILE.CHANGE_LOGO' | translate}} - fieldset - label(for="tags", translate="ADMIN.PROJECT_PROFILE.TAGS") - div.tags-block(ng-if="project.id", tg-lb-tag-line, ng-model="project.tags") + a.use-default-image.js-use-default-logo( + href="#" + title="{{ 'ADMIN.PROJECT_PROFILE.ACTION_USE_DEFAULT_LOGO' | translate }}" + ) {{ 'ADMIN.PROJECT_PROFILE.ACTION_USE_DEFAULT_LOGO' | translate }} - fieldset - label(for="project-description", translate="ADMIN.PROJECT_PROFILE.DESCRIPTION") - textarea(name="description", ng-attr-placeholder="{{'ADMIN.PROJECT_PROFILE.DESCRIPTION' | translate}}", id="project-description", - ng-model="project.description", data-required="true") - div - div.privacy-settings - div - input.privacy-project(type="radio", name="private-project", ng-model="project.is_private", ng-value="false") - label.trans-button(for="public-project") - span(translate="ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT") - div - input.privacy-project(type="radio", name="private-project", ng-model="project.is_private", ng-value="true") - label.trans-button(for="private-project") - span(translate="ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT") + .project-details-form-data - button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE") - a.delete-project(href="", title="{{'ADMIN.PROJECT_PROFILE.DELETE' | translate}}", ng-click="ctrl.openDeleteLightbox()", translate="ADMIN.PROJECT_PROFILE.DELETE") + fieldset + label(for="project-name") {{ 'ADMIN.PROJECT_PROFILE.PROJECT_NAME' | translate }} + input( + type="text" + name="name" + placeholder="{{'ADMIN.PROJECT_PROFILE.PROJECT_NAME' | translate}}" + id="project-name" + ng-model="project.name" + data-required="true" + maxlength="45" + ) + + fieldset + label(for="project-description") {{ 'ADMIN.PROJECT_PROFILE.DESCRIPTION' | translate }} + textarea( + name="description" + ng-attr-placeholder="{{'ADMIN.PROJECT_PROFILE.DESCRIPTION' | translate}}" + id="project-description" + ng-model="project.description" + data-required="true" + ) + + fieldset + label(for="tags") {{ 'ADMIN.PROJECT_PROFILE.TAGS' | translate }} + div.tags-block( + ng-if="project.id" + tg-lb-tag-line + ng-model="project.tags" + ) + fieldset.looking-for-people + .looking-for-people-selector + span {{ 'ADMIN.PROJECT_PROFILE.RECRUITING' | translate }} + span( + title="{{ 'ADMIN.PROJECT_PROFILE.RECRUITING_MESSAGE' | translate }}" + ) + include ../../svg/recruit.svg + div.check + input( + type="checkbox", + ng-model="project.is_looking_for_people" + ) + div + span.check-text.check-yes(translate="COMMON.YES") + span.check-text.check-no(translate="COMMON.NO") + + .looking-for-people-reason(ng-show="project.is_looking_for_people") + label {{ 'ADMIN.PROJECT_PROFILE.RECRUITING_MESSAGE' | translate }} + input( + type="text" + maxlength="200" + ng-model="project.looking_for_people_note" + placeholder="{{ 'ADMIN.PROJECT_PROFILE.RECRUITING_PLACEHOLDER' | translate }}" + ) + + fieldset + .project-privacy-settings + div.privacy-option + input.privacy-project( + type="radio" + id="private-project" + name="privacy-project" + ng-model="project.is_private" + ng-value="false" + ) + label.trans-button(for="private-project") {{ 'ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT' | translate }} + span(title="{{ 'ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT_DESC' | translate }}") + include ../../svg/help.svg + + div.privacy-option + input.privacy-project( + type="radio" + id="public-project" + name="privacy-project" + ng-model="project.is_private" + ng-value="true" + ) + label.trans-button(for="public-project") {{'ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT' | translate }} + span(title="{{ 'ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT_DESC' | translate }}") + include ../../svg/help.svg + + a.private-or-public( + href="https://taiga.io/support/whats-the-difference-between-public-and-private-projects/" + target="_blank" + ) + span(title="{{ 'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }}") + include ../../svg/help.svg + span {{'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }} + button.button-green.submit-button( + type="submit" + title="{{'COMMON.SAVE' | translate}}" + translate="COMMON.SAVE" + ) + a.delete-project( + href="" + title="{{'ADMIN.PROJECT_PROFILE.DELETE' | translate}}" + ng-click="ctrl.openDeleteLightbox()" + ) {{ 'ADMIN.PROJECT_PROFILE.DELETE' | translate }} div.lightbox.lightbox-delete-project(tg-lb-delete-project) include ../includes/modules/lightbox-delete-project diff --git a/app/partials/includes/components/mainTitle.jade b/app/partials/includes/components/mainTitle.jade index 8e7fa75d..24914a14 100644 --- a/app/partials/includes/components/mainTitle.jade +++ b/app/partials/includes/components/mainTitle.jade @@ -1,2 +1,6 @@ header - h1(tg-main-title, project-name="project.name", i18n-section-name="{{ sectionName }}") + h1( + tg-main-title + project-name="project.name" + i18n-section-name="{{ sectionName }}" + ) diff --git a/app/partials/user/mail-notifications.jade b/app/partials/user/mail-notifications.jade index 35485362..2f4a5986 100644 --- a/app/partials/user/mail-notifications.jade +++ b/app/partials/user/mail-notifications.jade @@ -1,8 +1,10 @@ doctype html -div.wrapper(tg-user-notifications, ng-controller="UserNotificationsController as ctrl", - ng-init="section='mail-notifications'") - tg-project-menu +div.wrapper( + tg-user-notifications + ng-controller="UserNotificationsController as ctrl", + ng-init="section='mail-notifications'" +) sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="mail-notifications") include ../includes/modules/user-settings-menu diff --git a/app/partials/user/user-change-password.jade b/app/partials/user/user-change-password.jade index 734005c9..5b5e0b5d 100644 --- a/app/partials/user/user-change-password.jade +++ b/app/partials/user/user-change-password.jade @@ -5,8 +5,6 @@ div.wrapper( ng-controller="UserChangePasswordController as ctrl" ng-init="section='user-settings'" ) - tg-project-menu - sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="change-password") include ../includes/modules/user-settings-menu diff --git a/app/partials/user/user-profile.jade b/app/partials/user/user-profile.jade index 7064ba34..2f4c0470 100644 --- a/app/partials/user/user-profile.jade +++ b/app/partials/user/user-profile.jade @@ -1,126 +1,129 @@ doctype html -div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl", - ng-init="section='user-settings'") +div.wrapper( + tg-user-profile + ng-controller="UserSettingsController as ctrl" + ng-init="section='user-settings'" +) sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="user-profile") include ../includes/modules/user-settings-menu section.main.user-profile header - h1 - span.green {{sectionName | translate}} + include ../includes/components/mainTitle form - div.container - div.avatar-container - fieldset(tg-user-avatar) - .image-container - img.avatar(ng-src="{{user.big_photo}}" alt="avatar") - .overlay.hidden - img.loading-spinner( - src="/#{v}/svg/spinner-circle.svg", - alt="{{'COMMON.LOADING' | translate}}" - ) - - input.hidden( - type="file" - id="avatar-field" - tg-avatar-model="avatarAttachment" + .project-details-image(tg-user-avatar) + fieldset.image-container + img.image(ng-src="{{user.big_photo}}" alt="avatar") + .loading-overlay + img.loading-spinner( + src="/#{v}/svg/spinner-circle.svg", + alt="{{'COMMON.LOADING' | translate}}" ) + input.hidden( + type="file" + id="avatar-field" + tg-avatar-model="avatarAttachment" + ) + p.image-help + span {{ 'USER_PROFILE.IMAGE_HELP' | translate }} + span.size-info.hidden(tg-bo-html="maxFileSizeMsg") - p(translate="USER_PROFILE.IMAGE_HELP") - span.size-info.hidden(tg-bo-html="maxFileSizeMsg") + a.button-green.change.js-change-avatar( + href="#" + title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}}" + ) {{'USER_PROFILE.CHANGE_PHOTO' | translate}} - a.button-green.change.js-change-avatar( - translate="USER_PROFILE.ACTION_CHANGE_IMAGE", - title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}} {{maxFileSizeMsg}}" - ) - a.use-gravatar(translate="USER_PROFILE.ACTION_USE_GRAVATAR") + a.use-default-image.js-use-gravatar( + href="#" + title="{{ 'USER_PROFILE.ACTION_USE_GRAVATAR' | translate }}" + ) {{ 'USER_PROFILE.ACTION_USE_GRAVATAR' | translate }} - div.data - fieldset - label(for="username", translate="USER_PROFILE.FIELD.USERNAME") - input( - type="text" - autocorrect="off" - autocapitalize="none" - name="username" - id="username" - ng-model="user.username" - data-required="true" - data-maxlength="255" - data-regexp="^[\\w.-]+$" - placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}", - ) + .project-details-form-data + fieldset + label(for="username", translate="USER_PROFILE.FIELD.USERNAME") + input( + type="text" + autocorrect="off" + autocapitalize="none" + name="username" + id="username" + ng-model="user.username" + data-required="true" + data-maxlength="255" + data-regexp="^[\\w.-]+$" + placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}", + ) - fieldset - label(for="email", translate="USER_PROFILE.FIELD.EMAIL") - input( - type="email" - name="email" - id="email" - ng-model="user.email" - data-type="email" - data-required="true" - data-maxlength="255" - placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}" - ) + fieldset + label(for="email", translate="USER_PROFILE.FIELD.EMAIL") + input( + type="email" + name="email" + id="email" + ng-model="user.email" + data-type="email" + data-required="true" + data-maxlength="255" + placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}" + ) - fieldset - label(for="full-name", translate="USER_PROFILE.FIELD.FULL_NAME") - input( - type="text" - name="full_name" - id="full-name" - ng-model="user.full_name" - data-required="true" - data-maxlength="256" - placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}", - ) + fieldset + label(for="full-name", translate="USER_PROFILE.FIELD.FULL_NAME") + input( + type="text" + name="full_name" + id="full-name" + ng-model="user.full_name" + data-required="true" + data-maxlength="256" + placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}", + ) - fieldset - label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE") - select( - name="lang" - id="lang" - ng-model="lang" - ng-options="locale.code as locale.name for locale in locales" - ) - option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT") + fieldset + label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE") + select( + name="lang" + id="lang" + ng-model="lang" + ng-options="locale.code as locale.name for locale in locales" + ) + option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT") - fieldset - label(for="theme", translate="USER_PROFILE.FIELD.THEME") - select( - name="theme" - id="theme" - ng-model="theme" - ng-options="availableTheme for availableTheme in availableThemes" - ) - option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT") + fieldset + label(for="theme", translate="USER_PROFILE.FIELD.THEME") + select( + name="theme" + id="theme" + ng-model="theme" + ng-options="availableTheme for availableTheme in availableThemes" + ) + option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT") - fieldset - label(for="bio", translate="USER_PROFILE.FIELD.BIO") - textarea( - name="bio" - id="bio" - ng-model="user.bio" - ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}" - ng-maxlength="210" - maxlength="210" - ) + fieldset + label(for="bio", translate="USER_PROFILE.FIELD.BIO") + textarea( + name="bio" + id="bio" + ng-model="user.bio" + ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}" + ng-maxlength="210" + maxlength="210" + ) - fieldset.submit - button.button-green.submit-button( - type="submit" - title="{{'COMMON.SAVE' | translate}}", - translate="COMMON.SAVE" - ) - a.delete-account( - href="" - title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}" - ng-click="ctrl.openDeleteLightbox()" - translate="USER_PROFILE.ACTION_DELETE_ACCOUNT" - ) + fieldset.submit + button.button-green.submit-button( + type="submit" + title="{{'COMMON.SAVE' | translate}}", + translate="COMMON.SAVE" + ) + a.delete-account( + href="" + title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}" + ng-click="ctrl.openDeleteLightbox()" + translate="USER_PROFILE.ACTION_DELETE_ACCOUNT" + ) div.lightbox.lightbox-delete-account(tg-lb-delete-user) diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 30817476..e4f13781 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -4,6 +4,7 @@ @extend %small; background: transparent; border: 0; + border-radius: 3px; color: $white; cursor: pointer; display: inline-block; diff --git a/app/styles/components/list-items.scss b/app/styles/components/list-items.scss index b042c028..0b715bac 100644 --- a/app/styles/components/list-items.scss +++ b/app/styles/components/list-items.scss @@ -35,6 +35,17 @@ h2 { @extend %large; } + .list-itemtype-project-data-wrapper { + display: flex; + } + .list-itemtype-project-image { + flex-shrink: 0; + margin-right: .5rem; + width: 3rem; + img { + width: 100%; + } + } .list-itemtype-project-members { align-self: flex-end; display: flex; diff --git a/app/styles/components/private.scss b/app/styles/components/private.scss index 00daaaad..943986c3 100644 --- a/app/styles/components/private.scss +++ b/app/styles/components/private.scss @@ -3,8 +3,7 @@ margin-left: .5rem; width: .5rem; svg { - height: .5rem; - width: .5rem; + @include svg-size(); } path { fill: $gray-light; diff --git a/app/styles/components/tag.scss b/app/styles/components/tag.scss index d1fcff0b..235c061f 100644 --- a/app/styles/components/tag.scss +++ b/app/styles/components/tag.scss @@ -40,7 +40,10 @@ input { margin-right: .25rem; padding: .4rem; - width: 10rem; + width: 14rem; + +.icon-floppy { + margin-left: .5rem; + } } .tag { @extend %small; diff --git a/app/styles/core/elements.scss b/app/styles/core/elements.scss index b74468c4..cfd2bbf5 100644 --- a/app/styles/core/elements.scss +++ b/app/styles/core/elements.scss @@ -84,3 +84,11 @@ svg { } } } + +.spin { + img { + @extend %loading-spinner; + max-height: 2rem; + max-width: 2rem; + } +} diff --git a/app/styles/core/typography.scss b/app/styles/core/typography.scss index 2b81dda0..f353c83c 100755 --- a/app/styles/core/typography.scss +++ b/app/styles/core/typography.scss @@ -36,14 +36,14 @@ h6 { } h1 { - @extend %xxlarge; - @extend %title; + @extend %xlarge; + @extend %light; line-height: 1.5; margin-bottom: 1rem; text-transform: uppercase; span { - @extend %xxlarge; + @extend %larger; margin-right: .5rem; overflow: hidden; text-overflow: ellipsis; @@ -77,8 +77,8 @@ h1 { } h2 { - @extend %xlarge; - @extend %title; + @extend %larger; + @extend %text; line-height: 1.2; margin-bottom: 1rem; } diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index 2eb9425e..b9101fad 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -109,7 +109,6 @@ @extend %small; color: $gray-light; display: flex; - flex-basis: 150px; flex-shrink: 0; justify-content: flex-end; .list-itemtype-track-likers { @@ -146,4 +145,24 @@ .in-progress { cursor: progress; } -} \ No newline at end of file +} + +@mixin centered { + margin: 1rem auto; + max-width: 1200px; + min-width: 768px; + @include breakpoint(tablet) { + width: 90%; + min-width: 0; + } +} + +@mixin svg-size($width: 1rem, $height: null) { + @if $height == null { + width: $width; + height: $width; + } @else { + width: $width; + height: $height; + } +} diff --git a/app/styles/dependencies/mixins/profile-form.scss b/app/styles/dependencies/mixins/profile-form.scss new file mode 100644 index 00000000..afdbbe2b --- /dev/null +++ b/app/styles/dependencies/mixins/profile-form.scss @@ -0,0 +1,73 @@ +@mixin profile-form { + form { + display: flex; + } + fieldset { + margin-bottom: 1rem; + } + label { + @extend %light; + display: block; + margin-bottom: .2rem; + } + .project-details-image { + flex-shrink: 0; + flex-grow: 0; + width: 180px; + margin-right: 2rem; + .image { + width: 100%; + } + .loading-spinner { + + } + } + + .image-container { + position: relative; + margin-bottom: 0; + } + .loading-overlay { + display: none; + &.active { + align-items: center; + background: rgba($blackish, .8); + bottom: 0; + display: flex; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + } + } + .loading-spinner { + @extend %loading-spinner; + border: 0; + transform-origin: center center; + } + .image-help { + @extend %xsmall; + line-height: 1rem; + margin-bottom: .5rem; + text-align: center; + } + .use-default-image { + @extend %xsmall; + text-align: center; + &:hover { + color: $red; + } + } + + .project-details-form-data { + flex: 1; + max-width: 500px; + } + + @include breakpoint(tablet) { + form { + display: block; + } + } +} diff --git a/app/styles/dependencies/mixins/project-card.scss b/app/styles/dependencies/mixins/project-card.scss new file mode 100644 index 00000000..731c6ca5 --- /dev/null +++ b/app/styles/dependencies/mixins/project-card.scss @@ -0,0 +1,75 @@ +@mixin project-card { + background: $white; + border: 1px solid $whitish; + margin: .5rem; + .tags-container { + display: flex; + height: .3rem; + } + .project-tag { + flex: 1; + } + .project-card-inner { + padding: 1rem; + display: flex; + flex-direction: column; + } + .project-card-description { + @extend %small; + @extend %light; + color: $gray; + } + .project-card-statistics { + display: flex; + margin-top: auto; + svg { + @include svg-size(.8rem); + fill: $gray-light; + } + .svg-eye-closed { + display: none; + } + } + .statistic { + @extend %small; + color: $gray-light; + display: inline-block; + margin-right: .5rem; + &.active { + color: $primary; + svg { + fill: $primary; + } + } + } + .project-card-header { + align-items: flex-start; + display: flex; + } + .project-card-logo { + flex-basis: 50px; + min-width: 50px; + margin-right: .5rem; + img { + width: 100%; + } + } + .project-card-name { + line-height: .9; + a { + @extend %large; + @extend %large; + color: $primary; + &:hover { + color: $primary-light; + } + } + } + .look-for-people { + svg { + @include svg-size(1rem); + fill: $gray-light; + margin: 0 .5rem; + } + } +} diff --git a/app/styles/layout/auth.scss b/app/styles/layout/auth.scss index 468ba9f2..1898df12 100644 --- a/app/styles/layout/auth.scss +++ b/app/styles/layout/auth.scss @@ -14,13 +14,11 @@ flex-basis: 400px; } .logo-svg { - max-height: 140px; - padding: 0 33%; text-align: center; width: 100%; svg { - max-height: 100%; - max-width: 100%; + height: 8rem; + width: 8rem; } } .logo { diff --git a/app/styles/layout/ticket-detail.scss b/app/styles/layout/ticket-detail.scss index 061a81f5..a2d5bedd 100644 --- a/app/styles/layout/ticket-detail.scss +++ b/app/styles/layout/ticket-detail.scss @@ -10,9 +10,11 @@ .us-title { @extend %large; @extend %text; + align-items: center; background: $whitish; + display: flex; flex: 1; - padding: 1rem; + padding: .5rem; position: relative; transition: all .2s linear; &.blocked { @@ -64,11 +66,14 @@ flex-grow: 1; } .us-title-text { + @extend %larger; + @extend %text; align-content: center; align-items: center; display: flex; + flex: 1; margin-bottom: 0; - max-width: 94%; + max-width: 92%; } .us-title-text:hover { .icon-edit { @@ -77,16 +82,14 @@ } } .us-number { - @extend %xlarge; - @extend %title; + @extend %text; color: $gray-light; flex-shrink: 0; line-height: 2.2rem; margin-right: .5rem; } .us-name { - @extend %xlarge; - color: $grayer; + color: $gray; display: inline-block; line-height: 2.2rem; padding-right: 1rem; diff --git a/app/styles/modules/admin/admin-project-profile.scss b/app/styles/modules/admin/admin-project-profile.scss index 044cdb76..5e4e0483 100644 --- a/app/styles/modules/admin/admin-project-profile.scss +++ b/app/styles/modules/admin/admin-project-profile.scss @@ -1,74 +1,106 @@ +@import '../dependencies/mixins/profile-form'; + .project-details { - form { - max-width: 700px; - width: 100%; + @include profile-form; + .looking-for-people { + @extend %light; + border-bottom: 1px solid $whitish; + border-top: 1px solid $whitish; + padding: 1rem 0; } - input, - textarea { - @extend %title; + .looking-for-people-selector { + align-items: center; + display: flex; + svg { + @include svg-size(); + fill: $gray-light; + margin-left: .5rem; + } + .check { + margin-left: auto; + } } - fieldset { - margin-bottom: 1rem; + .looking-for-people-reason { + display: block; + margin-top: 1rem; + &.ng-hide-remove-active { + animation: dropdownFade .3s; + } + &.ng-hide-add-active { + animation: dropdownFade .2s reverse; + animation-delay: .1s; + } + } + + .delete-project { + @extend %xsmall; + display: block; + margin-top: 1rem; + text-align: right; + &:hover { + color: $red; + } + } + .private-or-public { + @extend %xsmall; + color: $gray-light; + margin-bottom: 2rem; + svg { + @include svg-size(1.1rem); + fill: $gray-light; + margin-right: .5rem; + vertical-align: middle; + } + } + +} + +.project-privacy-settings { + display: flex; + margin-bottom: .5rem; + .privacy-option { + flex: 1; + transition: .2 linear; + &:first-child { + margin-right: .5rem; + } + } + input[type="radio"] { + display: none; + } + input[type="text"] { + display: none; } label { - @extend %title; - display: block; - margin-bottom: .2rem; - } - textarea { - height: 10rem; - } - .privacy-settings { - display: flex; - margin-bottom: 2rem; - > div { - flex-basis: 0; - flex-grow: 1; - overflow: hidden; - position: relative; - &:first-child { - margin-right: .5rem; + background: $whitish; + color: $grayer; + text-align: center; + transition: all .2s linear; + &:hover { + background: rgba($primary-light, .4); + color: $grayer; + svg { + fill: $grayer; } } - label { - @extend %title; - border: 1px solid $gray-light; - cursor: not-allowed; - display: block; - text-align: center; - transition: all .2s linear; - span { - color: $gray-light; - } + svg { + @include svg-size(1.1rem); + fill: $grayer; + margin-left: .5rem; + vertical-align: middle; } } - .privacy-project { - cursor: pointer; - height: 50px; - left: -10px; - opacity: 0; - position: absolute; - top: -10px; - width: 500px; - z-index: 999; - } .privacy-project:checked { + label { background: $primary-light; - border: 1px solid $primary-light; - span { - color: $white; + color: $white; + svg { + @include svg-size(1.1rem); + fill: $white; } } - } - .button-green { - color: $white; - display: block; - text-align: center; - } - .delete-project { - @extend %small; - display: block; - margin-top: 1rem; + ~input[type="text"] { + display: block; + } } } diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index 6b6b5983..dae0c4fb 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/app/styles/modules/backlog/taskboard-table.scss @@ -68,9 +68,11 @@ $column-margin: 0 10px 0 0; position: absolute; } .task-colum-name { - @extend %large; + @extend %medium; + align-items: center; background: $whitish; border-top: 3px solid $gray-light; + color: $gray; display: flex; flex-basis: $column-width; flex-grow: $column-flex; diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss index 187d441c..a58aab65 100644 --- a/app/styles/modules/home-project.scss +++ b/app/styles/modules/home-project.scss @@ -1,24 +1,35 @@ .single-project { .single-project-intro { + display: flex; margin-bottom: 2rem; } + .project-logo { + margin-right: 1rem; + width: 6rem; + img { + width: 100%; + } + } + .single-project-title-wrapper { + flex: 1; + } .intro-options { align-items: center; display: flex; justify-content: space-between; + margin-bottom: .5rem; + } + .intro-title { + align-items: center; + display: flex; } h1 { color: $primary; display: inline-block; line-height: 1.2; margin-bottom: 0; - margin-right: 3rem; vertical-align: middle; } - .private { - font-size: 1rem; - vertical-align: super; - } .like-watch-container { margin-left: auto; } @@ -34,6 +45,7 @@ .description { @extend %light; @extend %medium; + margin: 0; } .project-data { display: flex; @@ -60,6 +72,18 @@ max-width: 960px; width: 0; } + .looking-for-people { + img { + width: 100%; + } + h3 { + @extend %small; + } + p { + @extend %small; + @extend %light; + } + } .involved-data { flex-basis: 220px; width: 220px; @@ -70,8 +94,8 @@ flex-wrap: wrap; margin-bottom: 1rem; li { + flex-basis: 24%; margin-right: .14rem; - width: 24%; &:nth-child(4n) { margin-right: 0; } diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index 544e08f1..817c8a58 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/app/styles/modules/kanban/kanban-table.scss @@ -65,9 +65,11 @@ $column-margin: 0 10px 0 0; position: absolute; } .task-colum-name { - @extend %large; + @extend %medium; + align-items: center; background: $whitish; border-top: 3px solid $gray-light; + color: $gray; display: flex; flex-basis: $column-width; flex-grow: $column-flex; diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss index 1c10d313..16f492d1 100644 --- a/app/styles/modules/user-settings/user-profile.scss +++ b/app/styles/modules/user-settings/user-profile.scss @@ -1,81 +1,10 @@ +@import '../dependencies/mixins/profile-form'; + .user-profile { - form { - max-width: 700px; + @include profile-form; + max-width: 780px; + .submit-button { width: 100%; - .container { - display: flex; - } - .avatar-container { - flex-basis: 0; - flex-grow: 1; - margin-right: 1rem; - .image-container { - position: relative; - } - .avatar { - border-radius: 8%; - width: 100%; - } - .overlay { - align-items: center; - background: rgba($blackish, .8); - bottom: 0; - display: flex; - left: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - .loading-spinner { - @extend %loading-spinner; - border: 0; - min-height: 3rem; - min-width: 3rem; - transform-origin: center center; - } - p { - @extend %xsmall; - line-height: .8rem; - margin-bottom: .3rem; - text-align: center; - } - span { - @extend %bold; - } - .use-gravatar { - @extend %small; - cursor: pointer; - display: inline-block; - text-align: center; - width: 100%; - } - } - .data { - flex-basis: 0; - flex-grow: 3; - } - } - fieldset { - margin-bottom: 1rem; - } - .submit { - margin-top: 2rem; - } - label { - @extend %title; - display: block; - margin-bottom: .5rem; - } - textarea { - min-height: 7rem; - } - .button-green { - color: $white; - cursor: pointer; - display: block; - padding: 12px; - text-align: center; } .delete-account { @extend %small; diff --git a/app/svg/activity.svg b/app/svg/activity.svg new file mode 100644 index 00000000..66e8684f --- /dev/null +++ b/app/svg/activity.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/svg/discover.svg b/app/svg/discover.svg new file mode 100644 index 00000000..5334c1bb --- /dev/null +++ b/app/svg/discover.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/svg/help.svg b/app/svg/help.svg new file mode 100644 index 00000000..b822b8fd --- /dev/null +++ b/app/svg/help.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/svg/recruit.svg b/app/svg/recruit.svg new file mode 100644 index 00000000..fa8dcf32 --- /dev/null +++ b/app/svg/recruit.svg @@ -0,0 +1,4 @@ + + + diff --git a/app/svg/search.svg b/app/svg/search.svg new file mode 100644 index 00000000..8c58b6ec --- /dev/null +++ b/app/svg/search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/svg/team.svg b/app/svg/team.svg new file mode 100644 index 00000000..fc0fc652 --- /dev/null +++ b/app/svg/team.svg @@ -0,0 +1,4 @@ + + + diff --git a/app/themes/taiga/variables.scss b/app/themes/taiga/variables.scss index 4e92c60e..4de07219 100755 --- a/app/themes/taiga/variables.scss +++ b/app/themes/taiga/variables.scss @@ -34,7 +34,6 @@ $yellow-pear: #bbe831; $tribe-primary: #98e0eb; $tribe-secondary: #107a8a; - $top-icon-color: #11241f; $dropdown-color: rgba(darken($grayer, 20%), 1);