From 417448cac5e1ebac691a8fc417a578f45e9bf08e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 21 Aug 2020 09:46:20 +0200 Subject: Implement masonry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/ContactDetails.scss | 151 ----------------------------------------- css/ContactsList.scss | 35 ---------- css/Properties/Properties.scss | 1 - css/contacts.scss | 13 ---- 4 files changed, 200 deletions(-) delete mode 100644 css/ContactDetails.scss delete mode 100644 css/ContactsList.scss (limited to 'css') diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss deleted file mode 100644 index 6cf09749..00000000 --- a/css/ContactDetails.scss +++ /dev/null @@ -1,151 +0,0 @@ -/** - * @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 . - * - */ - -#contact-details { - $grid-column-gap: 20px; - $grid-column-width: 350px; - flex: 1 1 524px; - // header - header { - display: flex; - align-items: center; - padding: 50px 0 20px; - font-weight: bold; - - // ORG-TITLE-NAME - #contact-header-infos { - display: flex; - flex: 1 1 auto; // shrink avatar before this one - flex-direction: column; - h2, - #details-org-container { - display: flex; - flex-wrap: wrap; - margin: 0; - } - input { - overflow: hidden; - flex: 1 1; - min-width: 100px; - max-width: 100%; - margin: 0; - padding: 4px 5px; - white-space: nowrap; - text-overflow: ellipsis; - border: none; - background: transparent; - font-size: inherit; - &#contact-fullname { - font-weight: bold; - } - } - #contact-org:placeholder-shown { - max-width: 20%; - } - } - - // ACTIONS - #contact-header-actions { - position: relative; - display: flex; - .header-menu { - margin-right: 10px; - } - .header-icon { - width: 44px; - height: 44px; - padding: 14px; - cursor: pointer; - opacity: .7; - border-radius: 22px; - background-size: 16px; - &:hover, - &:focus { - opacity: 1; - } - &.header-icon--pulse { - width: 16px; - height: 16px; - margin: 8px; - } - } - } - } - - // contact details - section.contact-details { - display: grid; - min-height: 200px; - padding: 20px $grid-column-gap; - /* 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: $grid-column-gap; - } - - // single column fix, better visual - @media only screen and (max-width: $navigation-width + $list-min-width + 2 * $grid-column-gap +$grid-column-width) { - section.contact-details { - padding: 10px; - - grid-template-columns: 1fr; - grid-column-gap: 10px; - } - } -} - -.property--rev { - position: absolute; - right: 22px; - bottom: 0; - height: 44px; - opacity: .5; - color: var(--color-text-lighter); - line-height: 44px; -} - -#qrcode-modal { - .modal-container { - display: flex; - padding: 10px; - background-color: #fff; - .qrcode { - max-width: 100%; - } - } -} - -#pick-addressbook-modal { - .modal-container { - display: flex; - overflow: visible; - flex-wrap: wrap; - justify-content: space-evenly; - margin-bottom: 20px; - padding: 10px; - background-color: #fff; - .multiselect { - flex: 1 1 100%; - width: 100%; - margin-bottom: 20px; - } - } -} diff --git a/css/ContactsList.scss b/css/ContactsList.scss deleted file mode 100644 index 43e8f17c..00000000 --- a/css/ContactsList.scss +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @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 . - * - */ - -#app-details-toggle { - position: fixed; - z-index: 1500; - left: 0; - display: inline-block; - width: 44px; - height: 44px; - cursor: pointer; - transform: rotate(180deg); - background-color: var(--color-main-background); - border-radius: 50%; - opacity: 1; -} diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 5a9aca79..788a3c81 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -32,7 +32,6 @@ $property-ext-padding-right: 8px; // the max width and keep the right alignment max-width: $property-label-max-width + $property-value-max-width + 44px; - @include generate-grid-span(1); justify-self: center; &--last { diff --git a/css/contacts.scss b/css/contacts.scss index 82c96a89..78288b20 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -24,19 +24,8 @@ $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}; - } - } -} - #app-content-wrapper { display: flex; } @@ -46,9 +35,7 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; @import 'Settings/SettingsAddressbook'; @import 'Settings/SettingsAddressbookShares'; @import 'Settings/SettingsAddressbookSharee'; -@import 'ContactDetails'; @import 'ContactDetailsAvatar'; -@import 'ContactsList'; @import 'ContactsListItem'; @import 'Properties/Properties'; @import 'Properties/PropertyTitle'; -- cgit v1.2.3