summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/ContactDetails.scss51
-rw-r--r--css/ContactDetailsAvatar.scss21
-rw-r--r--css/ContactsList.scss16
-rw-r--r--css/ContactsListItem.scss6
-rw-r--r--css/ImportScreen.scss2
-rw-r--r--css/Properties/Properties.scss56
-rw-r--r--css/Properties/PropertyTitle.scss2
-rw-r--r--css/SettingsSection.scss7
-rw-r--r--css/contacts.scss2
9 files changed, 84 insertions, 79 deletions
diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss
index 6c4e53f7..85796c73 100644
--- a/css/ContactDetails.scss
+++ b/css/ContactDetails.scss
@@ -21,19 +21,20 @@
*/
#contact-details {
-
+ $grid-column-gap: 20px;
+ $grid-column-width: 350px;
// header
header {
- height: 100px;
display: flex;
- font-weight: bold;
align-items: center;
+ height: 100px;
+ font-weight: bold;
// ORG-TITLE-NAME
#contact-header-infos {
display: flex;
- flex-direction: column;
flex: 1 1 auto; // shrink avatar before this one
+ flex-direction: column;
h2,
#details-org-container {
display: flex;
@@ -41,22 +42,22 @@
margin: 0;
}
input {
- font-size: inherit;
- color: #fff !important;
- text-shadow: 0 0 2px var(--color-box-shadow);
- background: transparent;
- text-overflow: ellipsis;
overflow: hidden;
- white-space: nowrap;
- border: none;
- margin: 0;
- padding: 4px 5px;
flex: 1 1;
min-width: 100px;
max-width: 100%;
+ margin: 0;
+ padding: 4px 5px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: #fff !important;
+ border: none;
+ background: transparent;
+ text-shadow: 0 0 2px var(--color-box-shadow);
+ font-size: inherit;
&::placeholder {
- color: #fff !important;
opacity: .8;
+ color: #fff !important;
}
}
#contact-org {
@@ -76,45 +77,43 @@
}
}
.header-icon {
- height: 44px;
width: 44px;
+ height: 44px;
padding: 14px;
- border-radius: 22px;
cursor: pointer;
- background-size: 16px;
opacity: .7;
+ border-radius: 22px;
+ background-size: 16px;
&:hover,
&:focus {
opacity: 1;
}
&.header-icon--pulse {
- margin: 8px;
width: 16px;
height: 16px;
+ margin: 8px;
}
}
}
}
- $grid-column-gap: 20px;
- $grid-column-width: 350px;
-
// 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;
- padding: 20px $grid-column-gap;
- min-height: 200px;
}
// 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;
- padding: 10px;
}
}
}
@@ -124,9 +123,9 @@
right: 22px;
bottom: 0;
height: 44px;
- line-height: 44px;
- color: var(--color-text-lighter);
opacity: .5;
+ color: var(--color-text-lighter);
+ line-height: 44px;
}
#qrcode-modal {
diff --git a/css/ContactDetailsAvatar.scss b/css/ContactDetailsAvatar.scss
index 6ec6cfe8..d2fa69bc 100644
--- a/css/ContactDetailsAvatar.scss
+++ b/css/ContactDetailsAvatar.scss
@@ -37,37 +37,37 @@
margin-left: auto;
}
&__background {
- opacity: .2;
z-index: 0;
- left: 0;
top: 50px;
+ left: 0;
+ opacity: .2;
}
&__photo,
&__options {
+ overflow: hidden;
width: 100%;
height: 100%;
border-radius: 50%;
- overflow: hidden;
}
&__photo {
z-index: 10;
- background-size: cover;
+ cursor: pointer;
background-repeat: no-repeat;
background-position: center;
- cursor: pointer;
+ background-size: cover;
}
&__options {
- top: 0;
- z-index: 2;
position: absolute;
- background-color: rgba(0, 0, 0, 0.2);
+ z-index: 2;
+ top: 0;
+ background-color: rgba(0, 0, 0, .2);
}
.contact-avatar-options {
+ display: block;
width: 100%;
height: 100%;
- display: block;
opacity: .5;
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, .2);
&:hover,
&:active,
&:focus {
@@ -103,4 +103,3 @@
}
}
}
-
diff --git a/css/ContactsList.scss b/css/ContactsList.scss
index 0851c447..670c1231 100644
--- a/css/ContactsList.scss
+++ b/css/ContactsList.scss
@@ -22,16 +22,16 @@
#app-details-toggle {
position: fixed;
- display: inline-block;
+ z-index: 149;
left: 0;
+ display: inline-block;
width: 44px;
height: 44px;
- z-index: 149;
- background-color: var(--color-background-darker);
+ margin-top: 44px; // under the show navigation button
cursor: pointer;
- opacity: 0.6;
transform: rotate(180deg);
- margin-top: 44px; // under the show navigation button
+ opacity: .6;
+ background-color: var(--color-background-darker);
}
@@ -41,10 +41,10 @@
}
.vue-recycle-scroller__item-view {
- // same as app-content-list-item
- height: 68px;
// TODO: find better solution?
// https://github.com/Akryum/vue-virtual-scroller/issues/70
// hack to not show the transition
overflow: hidden;
-} \ No newline at end of file
+ // same as app-content-list-item
+ height: 68px;
+}
diff --git a/css/ContactsListItem.scss b/css/ContactsListItem.scss
index 4fcad0df..87e1cb06 100644
--- a/css/ContactsListItem.scss
+++ b/css/ContactsListItem.scss
@@ -45,7 +45,7 @@
left: 0;
width: 100%;
}
-
+
&.delete-slide-left-enter,
&.delete-slide-left-leave-to {
left: 100%;
@@ -58,9 +58,9 @@
position: absolute;
top: 0;
left: 0;
- height: inherit;
width: inherit;
- background-size: cover;
+ height: inherit;
cursor: pointer;
+ background-size: cover;
}
}
diff --git a/css/ImportScreen.scss b/css/ImportScreen.scss
index 4899060f..0eb9cd25 100644
--- a/css/ImportScreen.scss
+++ b/css/ImportScreen.scss
@@ -21,9 +21,9 @@
*/
.import-screen {
- margin: 50px;
width: auto;
min-width: 30vw;
+ margin: 50px;
&__header {
padding-top: 20px;
}
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index 9ba2f0d3..318a7451 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -24,15 +24,15 @@ $property-label-max-width: 2 * $property-label-min-width;
$property-value-max-width: 250px;
.property {
- @include generate-grid-span(1);
position: relative;
- padding-right: 44px; // actions menu / button
+ 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;
+
+ @include generate-grid-span(1);
justify-self: center;
- width: 100%;
&--last {
margin-bottom: $grid-height-unit;
@@ -42,25 +42,30 @@ $property-value-max-width: 250px;
display: none !important;
}
+ &--without-actions {
+ padding-right: 44px; // actions menu / button
+ }
+
// property row
&__row {
+ position: relative;
display: flex;
align-items: center;
- position: relative;
}
// property label or multiselect within row
&__label,
&__label.multiselect {
- margin: $grid-input-margin 5px $grid-input-margin 0 !important; // override multiselect
flex: 1 0; // min width is 60px, let's grow until 120px
- height: $grid-input-height-with-margin;
width: $property-label-min-width;
min-width: $property-label-min-width !important; // override multiselect
max-width: $property-label-max-width;
-
+ height: $grid-input-height-with-margin;
+ margin: $grid-input-margin 5px $grid-input-margin 0 !important; // override multiselect
user-select: none;
+ text-align: right;
background-size: 16px;
+ line-height: $grid-input-height-with-margin + 1px;
&,
.multiselect__input {
@@ -68,17 +73,18 @@ $property-value-max-width: 250px;
text-align: right;
}
+ .multiselect__single {
+ overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- overflow: hidden;
}
}
&:not(.multiselect) {
- text-overflow: ellipsis;
- white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ opacity: .7;
}
// mouse feedback
@@ -89,8 +95,8 @@ $property-value-max-width: 250px;
&:focus,
&:active {
.multiselect__tags {
- border-color: var(--color-border-dark);
opacity: 1;
+ border-color: var(--color-border-dark);
}
}
@@ -98,8 +104,8 @@ $property-value-max-width: 250px;
&.multiselect--disabled {
&, .multiselect__single {
&, &:hover, &:focus &:active {
- background-color: var(--color-main-background) !important;
border-color: transparent !important;
+ background-color: var(--color-main-background) !important;
}
}
}
@@ -109,29 +115,28 @@ $property-value-max-width: 250px;
.multiselect__tags {
border: none !important; // override multiselect
.multiselect__single {
+ padding-right: 24px;
background-repeat: no-repeat;
background-position: center right 4px;
- padding-right: 24px;
}
}
.multiselect__content-wrapper {
- min-width: $property-label-max-width; // improve readability on narrow screens
- width: auto !important; // grow bigger if content is bigger than the original 100%
right: 0; // align right
+ width: auto !important; // grow bigger if content is bigger than the original 100%
+ min-width: $property-label-max-width; // improve readability on narrow screens
}
@media only screen and (max-width: 768px) {
// align left of screen on narrow views
.multiselect__content-wrapper {
- left: 0;
right: auto;
+ left: 0;
}
}
}
// Property value within row, after label
&__value {
- flex: 1 1 $property-value-max-width;
- max-width: $property-value-max-width;
+ flex: 1 1;
textarea& {
align-self: flex-start;
@@ -157,7 +162,7 @@ $property-value-max-width: 250px;
}
// show ext button on full row hover
- &:hover &__ext{
+ &:hover &__ext {
opacity: .5;
}
@@ -176,13 +181,14 @@ $property-value-max-width: 250px;
// Delete property button + actions
&__actions {
- position: absolute !important;
- top: 0;
- left: 100%;
- margin: -2px 2px; // align with line because of the 44x44px size
- border: 0;
- background-color: transparent;
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
index aaa92304..eed16496 100644
--- a/css/Properties/PropertyTitle.scss
+++ b/css/Properties/PropertyTitle.scss
@@ -24,8 +24,8 @@
display: flex;
align-items: center;
margin: 0;
- opacity: 0.6;
user-select: none;
+ opacity: .6;
.property__title--right {
display: flex;
diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss
index 09953f39..0f01dff3 100644
--- a/css/SettingsSection.scss
+++ b/css/SettingsSection.scss
@@ -45,9 +45,10 @@
margin: 0;
.multiselect__single {
padding-right: 24px !important;
- @include icon-color('triangle-s', 'actions', $color-black, 1, true);
background-repeat: no-repeat;
background-position: right 4px center;
+
+ @include icon-color('triangle-s', 'actions', $color-black, 1, true);
}
}
}
@@ -57,13 +58,13 @@
display: flex;
flex-direction: column;
&__multiselect-label {
+ z-index: 2;
width: 100%;
+ margin: 0;
padding: 6px 12px;
padding-left: 34px;
- margin: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
background-position: left 9px center;
- z-index: 2;
&--no-select {
border-radius: var(--border-radius);
}
diff --git a/css/contacts.scss b/css/contacts.scss
index 0b458fd4..55602537 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -25,7 +25,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};
+$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
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-26 15:31:15 +0000