mirror of https://github.com/nextcloud/contacts
Fix actions design
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
ad1caeb04a
commit
62202045cd
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transform: rotate(180deg);
|
||||
margin-top: 44px; // under the show navigation button
|
||||
cursor: pointer;
|
||||
transform: rotate(180deg);
|
||||
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;
|
||||
}
|
||||
// same as app-content-list-item
|
||||
height: 68px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
*/
|
||||
|
||||
.import-screen {
|
||||
margin: 50px;
|
||||
width: auto;
|
||||
min-width: 30vw;
|
||||
margin: 50px;
|
||||
&__header {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
opacity: .6;
|
||||
|
||||
.property__title--right {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue