diff --git a/app/partials/admin/admin-project-values-us-extras.jade b/app/partials/admin/admin-project-values-us-extras.jade index 88649141..d5674a0b 100644 --- a/app/partials/admin/admin-project-values-us-extras.jade +++ b/app/partials/admin/admin-project-values-us-extras.jade @@ -11,8 +11,8 @@ div.wrapper(tg-project-values, ng-controller="ProjectValuesController as ctrl", include ../includes/components/mainTitle p.admin-subtitle Specify here user story custom fields. The new field will appear on your user story detail. - div.webhooks-options - a.button.button-green.hidden.add-custom-us(href="",title="Add a custom field in user stories") Add custom field + div.custom-field-options + a.button.button-green.add-custom-field(href="",title="Add a custom field in user stories") Add custom field include ../includes/modules/admin/admin-us-extras diff --git a/app/partials/includes/modules/admin/admin-us-extras.jade b/app/partials/includes/modules/admin/admin-us-extras.jade index 37a24a0f..a844a656 100644 --- a/app/partials/includes/modules/admin/admin-us-extras.jade +++ b/app/partials/includes/modules/admin/admin-us-extras.jade @@ -6,13 +6,13 @@ section.custom-fields-table.basic-table div.custom-options div.table-body div.row.single-custom-field - div.custom-name Name - div.custom-description Description + div.custom-name Custom field name + div.custom-description Custom field looong Description div.custom-options div.custom-options-wrapper a.edit-webhook.icon.icon-edit(href="", title="Edit Custom Field") a.delete-webhook.icon.icon-delete(href="", title="Delete Custom Field") - form.row + form.row.single-custom-field fieldset.custom-name input(type="text", placeholder="Set your custom field name") fieldset.custom-description diff --git a/app/styles/modules/admin/admin-custom-fields.scss b/app/styles/modules/admin/admin-custom-fields.scss index b7cfb36f..93017908 100644 --- a/app/styles/modules/admin/admin-custom-fields.scss +++ b/app/styles/modules/admin/admin-custom-fields.scss @@ -1,3 +1,8 @@ +.custom-field-options { + margin-bottom: 1rem; + text-align: right; +} + .custom-fields-table { .row { border-bottom: 0; @@ -23,18 +28,38 @@ margin-right: .5rem; } .custom-name { - flex-grow: 1; + flex-basis: 25%; + flex-shrink: 0; } .custom-description { - flex-grow: 2; + @include ellipsis(100%); + flex-basis: 90%; + flex-grow: 8; } .custom-options { - flex-basis: 200px; + flex-basis: 100px; flex-grow: 0; + flex-shrink: 0; + text-align: center; + a { + color: $gray-light; + margin-right: 0.5rem; + transition: color .2s linear; + vertical-align: middle; + &:hover { + color: $green-taiga; + transition: color .2s linear; + } + } } .custom-options-wrapper { opacity: 0; transition: opacity .3s linear; } + form { + .custom-options-wrapper { + opacity: 1; + } + } }