From ff5347795ced18d2f0ec0e005ccc1cc3bbb69a24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 30 Jul 2018 13:35:35 +0200 Subject: Details header fix, tooltip, sorting optimisations and improved contact model + store MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/details.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) (limited to 'css') diff --git a/css/details.scss b/css/details.scss index 545c21c4..b99c534c 100644 --- a/css/details.scss +++ b/css/details.scss @@ -25,17 +25,19 @@ // header header { height: 100px; - padding-left: 44px; display: flex; font-weight: bold; align-items: center; - #contact-avatar { + + // AVATAR + #contact-header-avatar { position: relative; height: 75px; width: 75px; border-radius: 50%; overflow: hidden; flex-shrink: 0; + margin: 0 22px 0 44px; .contact-avatar-background { background-color: var(--color-background-dark); opacity: .2; @@ -64,6 +66,51 @@ height: 100%; } } + + // ORG-TITLE-NAME + #contact-header-infos { + display: flex; + flex-direction: column; + flex: 1 1; + h2, + #details-org-container { + display: flex; + margin: 0; + } + input { + font-size: inherit; + color: #fff !important; + text-shadow: 0 0 2px var(--color-box-shadow); + background: transparent; + border: none; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + margin: 0; + padding: 4px 5px; + flex: 1 1; + &::placeholder { + color: #fff !important; + opacity: .8; + } + } + #contact-org { + max-width: 20%; + min-width: 10vw; + } + } + + // ACTIONS + #contact-header-actions { + position: relative; + .icon-more { + height: 44px; + width: 44px; + padding: 14px; + cursor: pointer; + } + } } -- cgit v1.2.3