From 82ecf80ffeb3cbe9a59f8df961e4406fa282e71d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 15 Aug 2018 15:35:12 +0200 Subject: Details order, label, design and structure fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/details.scss | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) (limited to 'css') diff --git a/css/details.scss b/css/details.scss index b55fe867..09807a9b 100644 --- a/css/details.scss +++ b/css/details.scss @@ -147,7 +147,8 @@ top: 0; right: 0; width: 44px; - height: 44px; + height: 100%; + margin: 0; border: 0; background-color: transparent; opacity: .5; @@ -168,22 +169,35 @@ } .contact-details-label { margin: $grid-input-margin; - margin-left: 0; - display: inline-block; - width: 100px; + margin: $grid-input-margin 5px $grid-input-margin 0; + width: 120px; height: $grid-input-height-with-margin; padding: $grid-input-padding 0; - text-align: right; - opacity: .5; - white-space: nowrap; - overflow: hidden; - overflow-x: hidden; - text-overflow: ellipsis; - vertical-align: middle; + opacity: .7; + &, .multiselect__input::placeholder { + text-align: right; + } + &:not(.multiselect-vue) { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + overflow-x: hidden; + } + &.multiselect-vue { + &:hover, + &:focus { + opacity: 1; + } + } } .contact-details-property-row { display: flex; align-items: center; + margin-right: 44px; + input { + flex: 1 1; + } } + } } \ No newline at end of file -- cgit v1.2.3 From 36b9a168810bc4b5997a653b3e91fa2c717b5063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 16 Aug 2018 08:23:58 +0200 Subject: Grid fixes and title update MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/Properties/Properties.scss | 99 +++++++++++++++++++++++++++++++++++++++ css/Properties/PropertyTitle.scss | 33 +++++++++++++ css/contacts.scss | 19 ++++++++ css/details.scss | 78 ------------------------------ 4 files changed, 151 insertions(+), 78 deletions(-) create mode 100644 css/Properties/Properties.scss create mode 100644 css/Properties/PropertyTitle.scss (limited to 'css') diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss new file mode 100644 index 00000000..bddf8edf --- /dev/null +++ b/css/Properties/Properties.scss @@ -0,0 +1,99 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +.property { + @include generate-grid-span(1); + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: relative; + width: $grid-column-width; + margin-bottom: $grid-height-unit; + + &__delete { + position: absolute; + top: 0; + right: 0; + width: $grid-height-unit; + height: $grid-height-unit; + margin: 0; + border: 0; + background-color: transparent; + opacity: .5; + display: none; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + + &:hover &__delete, + a:active &__delete, + a:focus &__delete { + display: block; + } + + // property row + &__row { + display: flex; + align-items: center; + padding-right: 44px; + height: $grid-height-unit; + position: relative; + + input { + flex: 1 1; + } + + } + + // label or multiselect + &__label, + &__label.multiselect { + margin: $grid-input-margin; + margin: $grid-input-margin 5px $grid-input-margin 0; + height: $grid-input-height-with-margin; + padding: $grid-input-padding 0; + width: 120px; + opacity: .7; + + &, + .multiselect__input::placeholder { + text-align: right; + } + + &:not(.multiselect) { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + overflow-x: hidden; + } + + &.multiselect { + &:hover, + &:focus { + opacity: 1; + } + } + } +} diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss new file mode 100644 index 00000000..c70ba855 --- /dev/null +++ b/css/Properties/PropertyTitle.scss @@ -0,0 +1,33 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +.property__title { + display: flex; + align-items: center; + margin: 0; + opacity: 0.6; + user-select: none; + + .property__title--icon { + background-origin: center right; + } +} \ No newline at end of file diff --git a/css/contacts.scss b/css/contacts.scss index d1b2da3e..0d8ed0e6 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -1,2 +1,21 @@ +$grid-height-unit: 40px; +$grid-input-padding: 7px; +$grid-input-margin: 3px; +$grid-column-width: 380px; +$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; + +@mixin generate-grid-span($default-unit) { + // we only supports 10 props of the same type + @for $i from 1 through 10 { + &.grid-span-#{$i} { + // default unit + title + bottom padding + grid-row-start: span #{$i * $default-unit}; + } + } +} + + @import 'settings'; @import 'details'; +@import './Properties/Properties'; +@import './Properties/PropertyTitle'; \ No newline at end of file diff --git a/css/details.scss b/css/details.scss index 09807a9b..c8c8a31e 100644 --- a/css/details.scss +++ b/css/details.scss @@ -113,21 +113,7 @@ } } - $grid-height-unit: 40px; - $grid-input-padding: 7px; - $grid-input-margin: 3px; $grid-column-width: 380px; - $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; - - @mixin generate-grid-span($default-unit) { - /* we only supports 10 props of the same type */ - @for $i from 1 through 10 { - &.grid-span-#{$i} { - /* default unit + title + bottom padding */ - grid-row-start: span #{$i * $default-unit}; - } - } - } // contact details section.contact-details { @@ -135,69 +121,5 @@ /* unquote is a strange hack to avoid removal of the comma by the scss compiler */ grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr)); grid-column-gap: 20px; - .contact-details-property { - @include generate-grid-span(1); - display: flex; - flex-wrap: wrap; - flex-direction: column; - position: relative; - width: $grid-column-width; - .icon-delete { - position: absolute; - top: 0; - right: 0; - width: 44px; - height: 100%; - margin: 0; - border: 0; - background-color: transparent; - opacity: .5; - display: none; - &:hover, - a:active, - a:focus { - opacity: .7; - } - } - &:hover, - a:active, - a:focus { - .icon-delete { - display: block; - } - } - } - .contact-details-label { - margin: $grid-input-margin; - margin: $grid-input-margin 5px $grid-input-margin 0; - width: 120px; - height: $grid-input-height-with-margin; - padding: $grid-input-padding 0; - opacity: .7; - &, .multiselect__input::placeholder { - text-align: right; - } - &:not(.multiselect-vue) { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - overflow-x: hidden; - } - &.multiselect-vue { - &:hover, - &:focus { - opacity: 1; - } - } - } - .contact-details-property-row { - display: flex; - align-items: center; - margin-right: 44px; - input { - flex: 1 1; - } - } - } } \ No newline at end of file -- cgit v1.2.3