diff options
author | Richard Steinmetz <richard@steinmetz.cloud> | 2023-04-18 14:23:59 +0200 |
---|---|---|
committer | Richard Steinmetz <richard@steinmetz.cloud> | 2023-04-24 14:32:00 +0200 |
commit | 7a7a95e4e428f33a7cd4969961832b786806ee42 (patch) | |
tree | 640d5526576adbfda0cf078a2cb0cab2fbc3192f /css | |
parent | e24fb28686802e022fa504fa582b7a080d987037 (diff) |
feat(contacts): implement single column layout
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
Diffstat (limited to 'css')
-rw-r--r-- | css/Properties/Properties.scss | 124 | ||||
-rw-r--r-- | css/Properties/PropertyTitle.scss | 36 | ||||
-rw-r--r-- | css/contacts.scss | 5 |
3 files changed, 55 insertions, 110 deletions
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index e2a7973c..8290e988 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -2,6 +2,7 @@ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> * * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Richard Steinmetz <richard@steinmetz.cloud> * * @license GNU AGPL version 3 or any later version * @@ -19,47 +20,62 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ -$property-label-min-width: 60px; -$property-label-max-width: 2 * $property-label-min-width; -$property-value-max-width: 250px; + +$property-label-min-width: 100px; +$property-label-max-width: 200px; +$property-label-width: calc(($property-label-min-width + $property-label-max-width) / 2); + +$property-value-min-width: 200px; +$property-value-max-width: 300px; +$property-value-width: calc(($property-value-min-width + $property-value-max-width) / 2); + $property-ext-padding-right: 8px; +$property-row-gap: 15px; .property { - position: relative; width: 100%; - // we need this to keep the alignment of the ext and delete/action button - // The flex grow will never go over those values. Therefore we can set - // the max width and keep the right alignment - max-width: $property-label-max-width + $property-value-max-width + 44px; - justify-self: center; - - &--last { - margin-bottom: $grid-height-unit; - } - // no delete/action icon on addressbook selector - &--addressbooks &__actions { - display: none !important; - } + // property title row + &--title { + display: flex; + align-items: center; + gap: $property-row-gap; - &--without-actions { - padding-right: 44px; // actions menu / button + .property__actions { + // placeholder for the actions menu + &__empty { + width: 44px; + } + } } // property row &__row { - position: relative; display: flex; align-items: center; + gap: $property-row-gap; + + &--without-actions { + .property__value { + margin-right: $property-row-gap + 44px; // actions menu / button + } + } + + // fix default margin from server stylesheet causing slight misalignment + input { + margin-right: 0; + } } // property label or multiselect within row - &__label, - &__label.multiselect { - flex: 1 0; // min width is 60px, let's grow until 120px - width: $property-label-min-width; - min-width: $property-label-min-width !important; // override multiselect - max-width: $property-label-max-width; + &__label { + display: flex; + justify-content: end; + flex: 1 auto; + + width: $property-label-width !important; + min-width: $property-label-min-width !important; + max-width: $property-label-max-width !important; &:not(.multiselect) { overflow: hidden; @@ -68,35 +84,6 @@ $property-ext-padding-right: 8px; text-overflow: ellipsis; opacity: .7; } - - // mouse feedback - .multiselect__tags { - opacity: .7; - } - &:hover, - &:focus, - &:active { - .multiselect__tags { - opacity: 1; - border-color: var(--color-border-dark); - } - } - - // read-only mode - &.multiselect--disabled { - &, .multiselect__single { - &, &:hover, &:focus &:active { - border-color: transparent !important; - background-color: var(--color-main-background) !important; - } - } - } - } - - &__label.multiselect { - .multiselect__tags { - border: none !important; // override multiselect - } } // Hide delete buttons initially @@ -106,7 +93,12 @@ $property-ext-padding-right: 8px; // Property value within row, after label &__value { - flex: 1 1; + flex: 1 auto; + + width: $property-value-width !important; + //min-width: $property-value-min-width !important; + min-width: unset !important; + max-width: $property-value-max-width !important; textarea { align-self: flex-start; @@ -123,21 +115,19 @@ $property-ext-padding-right: 8px; padding-right: 24px; } - // Show ext and delete icon permanently on focus + // Show ext icon permanently on focus &:hover, &:focus, &:active { - ~ .property__ext, - ~ .action-item.icon-delete { + ~ .property__ext { opacity: .5; } } } - // Show ext and delete buttons on full row hover + // Show ext buttons on full row hover &:hover { - .property__ext, - .action-item { + .property__ext { opacity: .5; } } @@ -162,15 +152,5 @@ $property-ext-padding-right: 8px; // Delete property button + actions &__actions { z-index: 10; - margin-left: auto !important; - // floating actions next to the title - &--floating { - position: absolute !important; - right: 0; - bottom: 0; - } - } - .property__value { - margin-right: 0; } } diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss deleted file mode 100644 index b4a579d8..00000000 --- a/css/Properties/PropertyTitle.scss +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> - * - * @author John Molakvoæ <skjnldsv@protonmail.com> - * - * @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 <http://www.gnu.org/licenses/>. - * - */ - -.property__title { - display: flex; - align-items: center; - margin: 0; - user-select: none; - - .property__title--right { - display: flex; - justify-content: space-between; - } - .property__title--icon { - background-position: center right; - } -} diff --git a/css/contacts.scss b/css/contacts.scss index b569d718..60e0513f 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -3,6 +3,7 @@ * * @author John Molakvoæ <skjnldsv@protonmail.com> * @author Team Popcorn <teampopcornberlin@gmail.com> + * @author Richard Steinmetz <richard@steinmetz.cloud> * * @license GNU AGPL version 3 or any later version * @@ -32,7 +33,6 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; @import 'Settings/SettingsAddressbookSharee'; @import 'ContactsListItem'; @import 'Properties/Properties'; -@import 'Properties/PropertyTitle'; @import 'ImportScreen'; // various @@ -41,7 +41,8 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; .app-content-details { - padding: 0 44px 80px 44px; + padding: calc(var(--default-grid-baseline) * 2); + padding-top: 0; height: 100%; overflow: auto; } |