diff options
-rw-r--r-- | css/_details.scss | 234 | ||||
-rw-r--r-- | css/_details.scss.orig | 460 | ||||
-rw-r--r-- | templates/contactDetails.html | 2 |
3 files changed, 138 insertions, 558 deletions
diff --git a/css/_details.scss b/css/_details.scss index 08a3065a..e4168533 100644 --- a/css/_details.scss +++ b/css/_details.scss @@ -223,12 +223,16 @@ avatar.maximized .avatar-options > [class^="icon-"] { padding: 20px 20px 100px; } -@media screen and (min-width: 1380px) { - section { - display: grid; - grid-template-columns: 50fr 50fr; - grid-column-gap: 20px; - } +/* GRID */ +$grid-height-unit: 40px; +$grid-input-padding: 7px; +$grid-input-margin: 3px; +$grid-input-height-with-margin: calc(#{$grid-height-unit} - (#{$grid-input-margin} * 2)); + +section { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-column-gap: 20px; } /* General details item styles */ @@ -253,30 +257,50 @@ contactdetails { propertygroup { display: block; - padding-bottom: 36px; -} - -.propertyGroup__title { - display: inline-block; - padding: 12px; - margin: 0; - margin-left: 68px; - opacity: .6; + &:not(.property-adr){ + /* adr detailsitem already have bottom padding */ + padding-bottom: $grid-height-unit; + } + .propertyGroup__title { + display: flex; + align-items: center; + height: $grid-height-unit; + padding: calc(#{$grid-height-unit} / 4); + margin: 0; + margin-left: 68px; + opacity: .6; + i { + display: block; + vertical-align: middle; + background-size: 16px 16px; + margin-right: 8px; + opacity: .5; + } + } } -.propertyGroup__title i { - display: inline-block; - vertical-align: middle; - background-size: 16px 16px; - margin-right: 8px; - opacity: .5; +@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 calc(2 + #{$i} * #{$default-unit}); + } + } } -detailsitem { - display: flex; - flex-wrap: wrap; - position: relative; - width: 380px; +/* GRID SETTINGS*/ +propertygroup { + @include generate-grid-span(1); + &.property-adr { + @include generate-grid-span(8); + } + &.property-n { + @include generate-grid-span(7); + } + &.property-note { + @include generate-grid-span(5); + } } detailsitem input[type="tel"], @@ -288,35 +312,23 @@ detailsitem textarea, .add-field { width: 245px; flex-grow: 1; + margin: $grid-input-margin; + height: $grid-input-height-with-margin; + padding: $grid-input-padding; } .add-field { margin-left: 106px; } -detailsitem select { - width: 100px; - border: none; - text-align: right; - text-align-last: right; - opacity: .5; - color: $color-main-text; - outline: none; -} - -detailsitem select:hover, -detailsitem select:focus, -detailsitem select:active { - opacity: 1; -} - detailsitem label, .select-addressbook label { - margin: 3px 3px 3px 0; - + margin: $grid-input-margin; + margin-left: 0; display: inline-block; width: 100px; - padding: 7px 0; + height: $grid-input-height-with-margin; + padding: $grid-input-padding 0; text-align: right; opacity: .5; white-space: nowrap; @@ -326,66 +338,94 @@ detailsitem label, vertical-align: middle; } -detailsitem .icon-delete { +detailsitem { + display: flex; + flex-wrap: wrap; position: relative; - vertical-align: top; - padding: 16px 10px; - background-color: transparent; - border: none; - opacity: 0; -} - -detailsitem input:hover + .icon-delete, -detailsitem input:focus + .icon-delete, -detailsitem input:active + .icon-delete, -detailsitem select:hover + .icon-delete, -detailsitem select:focus + .icon-delete, -detailsitem select:active + .icon-delete, -detailsitem:hover .icon-delete { - opacity: .2; -} - -detailsitem .icon-delete:hover, -detailsitem .icon-delete:focus, -detailsitem .icon-delete:active { - opacity: 1; -} + width: 380px; + > div { + display: inline-flex; + } + select { + width: 100px; + height: $grid-input-height-with-margin; + padding: $grid-input-padding; + margin: $grid-input-margin; + margin-left: 0; + border: none; + text-align: right; + text-align-last: right; + opacity: .5; + color: $color-main-text; + outline: none; + &:hover, + &:focus, + &:active { + opacity: 1; + } + } -detailsitem .item-action { - position: absolute; - padding: 10px 5px; - opacity: .5; - right: 30px; -} + & .icon-delete { + position: relative; + vertical-align: top; + padding: 16px 10px; + background-color: transparent; + border: none; + opacity: 0; + } -detailsitem .item-action ~ input { - padding-right: 30px; - text-overflow: ellipsis; -} + & input:hover + .icon-delete, + & input:focus + .icon-delete, + & input:active + .icon-delete, + & select:hover + .icon-delete, + & select:focus + .icon-delete, + & select:active + .icon-delete, + &:hover .icon-delete { + opacity: .2; + } -detailsitem .item-action i { - display: block; - height: 20px; - width: 20px; -} + & .icon-delete:hover, + & .icon-delete:focus, + & .icon-delete:active { + opacity: 1; + } -detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete { - vertical-align: middle; - left: 251px; -} + & .item-action { + position: absolute; + padding: 10px 5px; + opacity: .5; + right: 30px; + ~ input { + padding-right: 30px; + text-overflow: ellipsis; + } + i { + display: block; + height: 20px; + width: 20px; + } + } -detailsitem.details-item-adr, -detailsitem.details-item-n { - padding-bottom: 20px; -} + &.details-item-adr, + &.details-item-n { + padding-bottom: $grid-height-unit; + .icon-delete { + vertical-align: middle; + left: 251px; + } + } -detailsitem.details-item-note label { - vertical-align: top; -} + &.details-item-note label { + vertical-align: top; + } -/* Failed props */ -detailsitem.failed { - box-shadow: inset 2px 0 $color-error; + /* Failed props */ + &.failed { + box-shadow: inset 2px 0 $color-error; + } + textarea { + height: calc(#{$grid-input-height-with-margin} + (#{$grid-height-unit} * 4)); + } } avatar .icon-error { diff --git a/css/_details.scss.orig b/css/_details.scss.orig deleted file mode 100644 index 9a659452..00000000 --- a/css/_details.scss.orig +++ /dev/null @@ -1,460 +0,0 @@ -.contact-details-wrapper { - position: relative; - background: $color-main-background; - min-height: 100%; -} - -.wrapper-show { - z-index: 201; -} - -@media only screen and (max-width: 768px) { - .wrapper-show:not(.mobile-show) { - display: none; - } -} - -.contactdetails__header { - height: 100px; - padding-left: 44px; - display: flex; - font-weight: bold; - align-items: center; -} - -.contactdetails__header #details-contact-infos { - width: 80%; - margin: 2px 6px 0; - flex-grow: 1; -} - -.contactdetails__header h2 { - margin: 0; -} - -.contactdetails__header #details-org-container { - display: flex; - flex-wrap: wrap; -} - -.contactdetails__header input[type=text]:active { - background: transparent !important; /* remove :active effect */ -} - -.contactdetails__header .contactdetails__name, -.contactdetails__header .contactdetails__org, -.contactdetails__header .contactdetails__title { - font-size: inherit; - /* Override focus, active & hover! */ - color: #fff !important; /* No vars used on purpose since we use custom BGs */ - text-shadow: 0 0 2px rgba(0, 0, 0, .2); // better readability on bright background colors - background: transparent; - border: none; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: 100%; - margin: 0; - padding: 4px 5px; -} - -.contactdetails__header .contactdetails__org, -.contactdetails__header .contactdetails__title { - max-width: 50%; - min-width: 150px; -} - -.contactdetails__header .contactdetails__name { - width: 100%; -} - -.contactdetails__header #details-actions { - display: flex; - flex-shrink: 0; -} - -.contactdetails__header #contact-failed-save { - animation: pulse 1.5s infinite; - border-radius: 50%; -} - -/* fix placeholder color */ -.contactdetails__header .contactdetails__name::-webkit-input-placeholder, -.contactdetails__header .contactdetails__org::-webkit-input-placeholder, -.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: #fff; /* No vars used on purpose since we use custom BGs */ - opacity: .8; -} - -.contactdetails__header .contactdetails__name::-moz-placeholder, -.contactdetails__header .contactdetails__org::-moz-placeholder, -.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: #fff; /* No vars used on purpose since we use custom BGs */ - opacity: .8; -} - -.contactdetails__header .contactdetails__name:-ms-input-placeholder, -.contactdetails__header .contactdetails__org:-ms-input-placeholder, -.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #fff; /* No vars used on purpose since we use custom BGs */ - opacity: .8; -} - -.contactdetails__header .contactdetails__name:placeholder-shown, -.contactdetails__header .contactdetails__org:placeholder-shown, -.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ - color: #fff; /* No vars used on purpose since we use custom BGs */ - opacity: .8; -} - -.contactdetails__header #details-actions a, -.contactdetails__header #details-actions button { - padding: 15px; - background-color: transparent; - border: none; - opacity: .5; - margin: 3px; -} - -.contactdetails__header #details-actions a:hover, -.contactdetails__header #details-actions button:hover, -.contactdetails__header #details-actions a:focus, -.contactdetails__header #details-actions button:focus { - opacity: .7; -} - -avatar { - position: relative; - height: 75px; - width: 75px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; -} - -.contactdetails__logo { - height: 75px; - width: 75px; - object-fit: cover; - background-color: transparent; - margin: 0; - cursor: pointer; -} - -.avatar-options { - top: 0; - background-color: rgba(0, 0, 0, 0.2); - display: none; - width: 100%; - height: 100%; - overflow: hidden; -} - -.avatar-options > [class^="icon-"] { - display: none; - opacity: 0.5; - cursor: pointer; - min-width: 20px; - min-height: 20px; -} - -.avatar-options:hover > [class^="icon-"] { - opacity: 0.6; -} - -.avatar-options > [class^="icon-"]:hover { - opacity: 0.8; -} - -avatar.avatar--missing .avatar-options { - display: flex; - border-radius: 50%; -} - -avatar:not(.maximized).avatar--missing .avatar-options .icon-upload-white { - display: block; - width: 100%; - height: 100%; -} - -avatar.maximized { - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - border-radius: 0; - padding: 20px; - background-color: rgba(0, 0, 0, 0.9); - display: flex; - justify-content: center; - z-index: 200; - padding-top: 65px; /* Nextcloud header */ -} - -avatar.maximized img { - width: auto; - height: auto; - border-radius: 0; - max-height: calc(100% - 40px); - max-width: 100%; - align-self: center; - margin-bottom: 40px; -} - -avatar.maximized .avatar-options { - height: 40px; - position: absolute; - top: calc(100% - 40px); - left: 0; - display: flex; - opacity: 1; - padding: 0; - flex-wrap: wrap; - justify-content: space-around; -} - -avatar.maximized .avatar-options > [class^="icon-"] { - min-width: 25%; - display: block; -} - -.contactdetails__header + section { - padding: 20px 20px 100px; -} - -/* GRID */ -$grid-height-unit: 40px; -$grid-input-padding: 7px; -$grid-input-margin: 3px; -$grid-input-height-with-margin: calc(#{$grid-height-unit} - (#{$grid-input-margin} * 2)); - -@media screen and (min-width: 1380px) { - section { - display: grid; - grid-template-columns: 1fr 1fr; - grid-column-gap: 20px; - } -} - -/* General details item styles */ -contactdetails { - select, button, input, textarea { - &:disabled { - background-color: transparent !important; - border-color: transparent !important; - opacity: 1 !important; - color: #545454 !important; - } - } - - detailsitem > select:disabled { - background-image: none !important; - &:first-child { - opacity: 0.5 !important; - color: inherit !important; - } - } -} - -propertygroup { - display: block; - padding-bottom: $grid-height-unit; - .propertyGroup__title { - display: flex; - align-items: center; - height: $grid-height-unit; - padding: calc(#{$grid-height-unit} / 4); - margin: 0; - margin-left: 68px; - opacity: .6; - i { - display: block; - vertical-align: middle; - background-size: 16px 16px; - margin-right: 8px; - opacity: .5; - } - } -} - - -detailsitem input[type="tel"], -detailsitem input[type="email"], -detailsitem input[type="text"], -detailsitem input[type="url"], -detailsitem textarea, -.select-addressbook select, -.add-field { - width: 245px; - flex-grow: 1; - margin: $grid-input-margin; - height: $grid-input-height-with-margin; - padding: $grid-input-padding; -} - -.add-field { - margin-left: 106px; -} - -detailsitem label, -.select-addressbook label { - margin: $grid-input-margin; - margin-left: 0; - display: inline-block; - width: 100px; - 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; -} - -detailsitem { - display: flex; - flex-wrap: wrap; - position: relative; - width: 380px; - > div { - display: inline-flex; - } - select { - width: 100px; - height: $grid-input-height-with-margin; - padding: $grid-input-padding; - margin: $grid-input-margin; - margin-left: 0; - border: none; - text-align: right; - text-align-last: right; - opacity: .5; - color: $color-main-text; - outline: none; - &:hover, - &:focus, - &:active { - opacity: 1; - } - } - -<<<<<<< HEAD -detailsitem .item-action { - position: absolute; - padding: 10px 5px; - opacity: .5; - right: 30px; -} -======= - & .icon-delete { - position: relative; - vertical-align: top; - padding: 16px 10px; - background-color: transparent; - border: none; - opacity: 0; - } ->>>>>>> Unify grid height with 40px - - & input:hover + .icon-delete, - & input:focus + .icon-delete, - & input:active + .icon-delete, - & select:hover + .icon-delete, - & select:focus + .icon-delete, - & select:active + .icon-delete, - &:hover .icon-delete { - opacity: .2; - } - - & .icon-delete:hover, - & .icon-delete:focus, - & .icon-delete:active { - opacity: 1; - } - - & .item-action { - position: absolute; - padding: 8px 5px; - opacity: .5; - right: 30px; - ~ input { - padding-right: 30px; - text-overflow: ellipsis; - } - i { - display: block; - height: 20px; - width: 20px; - } - } - - &.details-item-adr, - &.details-item-n { - padding-bottom: $grid-height-unit; - .icon-delete { - vertical-align: middle; - left: 251px; - } - } - - &.details-item-note label { - vertical-align: top; - } - - /* Failed props */ - &.failed { - box-shadow: inset 2px 0 $color-error; - } - textarea { - height: calc(#{$grid-input-height-with-margin} + (#{$grid-height-unit} * 4)); - } -} - -avatar .icon-error { - position: absolute; - width: 100%; - height: 100%; -} - -avatar:not(.maximized) .icon-error + img { - opacity: 0.5; -} - -/* Prevent delete for last adr/mail/tel item */ -.last-details > detailsitem.details-item-adr .icon-delete, -.last-details > detailsitem.details-item-email .icon-delete, -.last-details > detailsitem.details-item-tel .icon-delete { - display: none; -} - -/* SELECT2 styling */ -detailsitem .select2-container { - width: 245px; -} - -/* Fix for #81 */ -.select2-container-multi .select2-choices .select2-search-choice { - padding-right: 20px; -} - -.select2-container.select2-container-multi .select2-choices span { - display: flex; - flex-wrap: wrap; -} - -.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { - display: block !important; - right: 4px; - left: auto; - top: 7px; -} - -/* Fix disabled select2 state */ -detailsitem .select2-container[disabled] .select2-choices { - border-color: transparent; - min-height: 100%; - background-color: transparent !important; -} diff --git a/templates/contactDetails.html b/templates/contactDetails.html index bd773fb3..b8a44d08 100644 --- a/templates/contactDetails.html +++ b/templates/contactDetails.html @@ -42,7 +42,7 @@ </div> </header> <section> - <propertyGroup ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'" model="ctrl.contact" data="prop" name="prop.$key"></propertyGroup> + <propertyGroup ng-repeat="prop in ctrl.contact.props | toArray | orderDetailItems:'$key'" model="ctrl.contact" data="prop" name="prop.$key" class="property-{{prop.$key}} grid-span-{{prop.length}}"></propertyGroup> <div class="select-addressbook" ng-if="ctrl.addressBooks.length > 1 && !ctrl.addressBook.readOnly"> <label for="details-addressbook">{{ctrl.t.addressBook}}</label> |