From ca4c33bedb97f215d15e831a77f4975cfe8fa46b Mon Sep 17 00:00:00 2001 From: myleneb Date: Fri, 21 Aug 2015 06:10:45 +0200 Subject: [PATCH] postboard-top always visible --- css/style.css | 37 ++++++++++++++++++++++++++++++------ js/theme_option.js | 3 +++ sass/layout/_modal.sass | 9 +++++++-- sass/layout/_postboard.sass | 15 +++++++++++++++ sass/layout/_responsive.sass | 5 +++-- 5 files changed, 59 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 1f48666..eb18d02 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, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user 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, .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user 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, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user 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, .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user 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, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-retransmited-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .show-more-followers:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user 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, .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-retransmited-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .show-more-followers:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user 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; } @@ -148,7 +148,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, content: ""; } -.ion-shuffle:before, .post-retransmited-icon:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { +.ion-shuffle:before, .switch-mode:before, .post-retransmited-icon:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { content: ""; } @@ -782,6 +782,13 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { right: 35px; } +.switch-mode { + cursor: pointer; + color: #A1B775; + position: absolute; + left: 0; +} + /* Composants */ .twister-user { position: relative; @@ -1263,6 +1270,24 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { #postboard-top .post-area .post-area-new textarea { margin: 0 0 10px 0; } +#postboard-top.onTop { + position: fixed; + bottom: 0; + left: 0; + top: auto; + z-index: 2000; + -moz-box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2); + -webkit-box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2); + box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2); + width: 320px; + max-width: 100%; +} +#postboard-top.onTop .profile-photo { + display: none !important; +} +#postboard-top.onTop .post-area { + padding-left: 0; +} /************* POSTBOARD ************ */ .postboard { @@ -2707,7 +2732,7 @@ ul.dropdown-menu li > li > a { padding: 0; } - .postboard, #postboard-top.onTop { + .postboard { position: absolute; left: 168px; right: 20px; @@ -2800,7 +2825,7 @@ ul.dropdown-menu li > li > a { } #postboard-top { - position: fixed; + position: fixed !important; bottom: 0; top: auto; margin: 0; diff --git a/js/theme_option.js b/js/theme_option.js index 1c435d8..3355faa 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -50,6 +50,9 @@ $(document).ready(function() $(window).scroll(function(){ window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals + if ( (window_scrollY >= 300) && (!$('#postboard-top').hasClass('.onTop')) ) {$('#postboard-top').addClass('onTop')} // switch #postboard-top when scrolling + else + {$('#postboard-top').removeClass('onTop')} }); }); diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index ead2b69..9290485 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -187,8 +187,13 @@ $header-modal-height : $menu-height - - +.switch-mode + cursor: pointer + color: $main-color-color + position: absolute + left: 0 + @extend .ion + @extend .ion-shuffle /* Composants */ diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 6a4baa6..fd72af9 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -38,6 +38,21 @@ textarea margin: 0 0 10px 0 + &.onTop + position: fixed + bottom: 0 + left: 0 + top: auto + z-index: 2000 + +box-shadow(0 -5px 13px rgba(#111, 0.2)) + width: 320px + max-width: 100% + .profile-photo + display: none!important + .post-area + padding-left: 0 + + /************* POSTBOARD *************/ diff --git a/sass/layout/_responsive.sass b/sass/layout/_responsive.sass index a86588a..0f392ec 100644 --- a/sass/layout/_responsive.sass +++ b/sass/layout/_responsive.sass @@ -5,12 +5,13 @@ .userMenu ul padding: 0 - .postboard, #postboard-top.onTop + .postboard position: absolute left: $leftWidth right: 20px width: auto!important + .modal-wrapper width: 85% .postboard @@ -81,7 +82,7 @@ .modal-wrapper & top: auto #postboard-top - position: fixed + position: fixed!important bottom: 0 top: auto margin: 0