From a6351e8c0552dde403e16f2a7b12b3af8aa4e022 Mon Sep 17 00:00:00 2001 From: myleneb Date: Thu, 28 Jan 2016 09:24:29 +0100 Subject: [PATCH] Add minimized modals --- css/style.css | 83 ++++++++++++++++++++++++++++++++--------- sass/base/_fonts.sass | 4 ++ sass/layout/_modal.sass | 46 ++++++++++++++++++++++- 3 files changed, 115 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index d620834..5f0237a 100644 --- a/css/style.css +++ b/css/style.css @@ -114,7 +114,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, font-weight: normal; font-style: normal; } -.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before, .ion-after:after, .isFollowing:after, .direct-messages-list .post:after { +.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .minimize-modal:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before, .ion-after:after, .isFollowing:after, .direct-messages-list .post:after { display: inline-block; font-family: "Ionicons"; speak: none; @@ -128,11 +128,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, -moz-osx-font-smoothing: grayscale; } -.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before { +.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .minimize-modal:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before { padding: 0 3px; } -.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:after, .mini-profile .post-area .modal-header span:after, .prompt-wrapper .switch-mode:after, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:after, .mini-profile .post-area.display .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-rt-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .mini-profile-indicators .userMenu-groupmessages a:after, .mini-profile-indicators .userMenu-collapsePosts a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .view-all-users:after, .ion-after:before, .isFollowing:before, .direct-messages-list .post:before { +.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:after, .mini-profile .post-area .modal-header span:after, .minimize-modal:after, .prompt-wrapper .switch-mode:after, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:after, .mini-profile .post-area.display .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-rt-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .mini-profile-indicators .userMenu-groupmessages a:after, .mini-profile-indicators .userMenu-collapsePosts a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .view-all-users:after, .ion-after:before, .isFollowing:before, .direct-messages-list .post:before { display: none; } @@ -176,6 +176,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, content: ""; } +.ion-minus:before, .minimize-modal:before { + content: ""; +} + .ion-back:before, .modal-header span.modal-back:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span.modal-back:before, .mini-profile .post-area .modal-header span.modal-back:before { content: ""; } @@ -243,7 +247,7 @@ html, body { html { font-size: 15px; background-color: #ddd; - background-image: url('../img/bg.png?1442230326'); + background-image: url('../img/bg.png?1453965385'); background-attachment: fixed; } @@ -446,12 +450,13 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { max-width: 100%; width: 1200px; margin: auto; - background: url('../img/logo.png?1442230326') no-repeat 50% 50%; + background: url('../img/logo.png?1453965385') no-repeat 50% 50%; background-size: 20px; } .userMenu > ul li { position: relative; - display: inline-block; + display: block; + float: left; margin: 0 10px; } .userMenu > ul li > a { @@ -570,6 +575,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { width: 150px; position: fixed; top: 70px; + z-index: 2000; } .dashboard.right { float: left; @@ -657,7 +663,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .modal-wrapper.new-user .secret-key { display: block; margin-top: 8px; - color: black; + color: #010000; font-weight: bold; font-size: 80%; } @@ -787,7 +793,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { display: none; } .modal-header span.modal-back, .direct-messages-thread + .group-messages-control .invite-form .modal-header span.modal-back, .mini-profile .post-area .modal-header span.modal-back { - right: 35px; + right: 70px; } /* Composants */ @@ -812,6 +818,51 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { display: none; } +/* Minimized */ +.minimize-modal { + position: absolute; + top: 0; + line-height: 52px; + font-size: 1rem; + cursor: pointer; + color: rgba(255, 255, 255, 0.7); + transition: color 0.1s linear; + right: 35px !important; +} +.minimize-modal:hover { + color: white; +} +.minimize-modal b { + display: none; +} + +#modals-minimized { + position: fixed; + z-index: 2000; + left: 0; + bottom: 0; + width: 168px; + text-align: right; +} +#modals-minimized li { + background: #3E3C42; + cursor: pointer; + margin-right: 10px; + font-weight: 600; + font-size: 0.8rem; + padding: 0.5rem 1rem; + margin-bottom: 10px; + color: rgba(255, 255, 255, 0.8); + -moz-transition: margin 0.2s; + -o-transition: margin 0.2s; + -webkit-transition: margin 0.2s; + transition: margin 0.2s; +} +#modals-minimized li:hover { + color: white; + margin-right: 0; +} + /*********** POPUP PROMPT ************ */ /*********** POPUP PROMPT ************ */ .prompt-wrapper, .direct-messages-thread + .group-messages-control .invite-form, .mini-profile .post-area.display { @@ -863,7 +914,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { line-height: 0.8rem; } -.confirm-popup.prompt-wrapper { +.confirm-popup.prompt-wrapper, .direct-messages-thread + .group-messages-control .confirm-popup.invite-form, .mini-profile .confirm-popup.post-area.display { margin-top: -100px; } @@ -1000,13 +1051,11 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .direct-messages-list .post:hover { background: white; } - .direct-messages-list .post .messages-qtd { display: none; top: 4px; left: 56px; } - .direct-messages-list li { position: relative; border-bottom: 1px solid #eee; @@ -1124,7 +1173,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { background: none; } .profile-modal .modal-content .members { - overflow-y: auto; + overflow-y: auto; } .profile-modal h2.profile-screen-name { @@ -1488,7 +1537,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { display: inline; } .post-rt-by .prep:before, .post-rt-by .prep:after { - content: ' '; + content: " "; } .post-rt-icon:before { @@ -1744,7 +1793,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { } .profile-card[data-screen-name^=\*] .profile-bio .group-description { display: inline-block; - border: 1px solid rgba(0, 0, 0, 0); + border: 1px solid transparent; background: none; text-align: center; width: 58%; @@ -1752,13 +1801,13 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { vertical-align: middle; } .profile-card[data-screen-name^=\*] .profile-bio .group-description:focus { - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 0.1); background: white; } .profile-card[data-screen-name^=\*] .profile-bio .group-description:hover { - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 0.1); } -.profile-card[data-screen-name^=\*] .profile-bio .save, .profile-card[data-screen-name^=\*] .profile-bio .cancel { +.profile-card[data-screen-name^=\*] .profile-bio .group-description .save, .profile-card[data-screen-name^=\*] .profile-bio .group-description .cancel { display: none; } diff --git a/sass/base/_fonts.sass b/sass/base/_fonts.sass index cf527ef..75e7a09 100644 --- a/sass/base/_fonts.sass +++ b/sass/base/_fonts.sass @@ -118,6 +118,10 @@ .ion-close:before content: "\f12a" +.ion-minus:before + content: "\f123" + + .ion-back:before content: "\f124" diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index 9c2dc4b..eed8ec9 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -183,7 +183,7 @@ $header-modal-height : $menu-height display: none &.modal-back @extend .ion-back - right: 35px + right: 70px @@ -207,6 +207,50 @@ $header-modal-height : $menu-height small display: none + + + +/* Minimized */ +.minimize-modal + @extend .ion + @extend .ion-minus + position: absolute + top: 0 + line-height: $header-modal-height + font-size: 1rem + cursor: pointer + color: rgba(white , 0.7) + transition: color .1s linear + right: 35px!important + &:hover + color: white + + b + display: none + + + +#modals-minimized + position: fixed + z-index: 2000 + left: 0 + bottom: 0 + width: $leftWidth + text-align: right + li + background: $dark-grey + cursor: pointer + margin-right: 10px + font-weight: 600 + font-size: .8rem + padding: .5rem 1rem + margin-bottom: 10px + color: rgba(white, .8) + +transition(margin .2s) + &:hover + color: white + margin-right: 0 + /*********** POPUP PROMPT *************/ @import '_prompt'