From 444ae91ed3ac291481c1f041eeccfd38c072c7f6 Mon Sep 17 00:00:00 2001 From: myleneb Date: Fri, 21 Aug 2015 04:28:55 +0200 Subject: [PATCH 1/3] fixing .post-info-sent position --- css/style.css | 17 ++++++++++------- sass/layout/_postboard.sass | 18 +++++++++++------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 519c100..945c6ca 100644 --- a/css/style.css +++ b/css/style.css @@ -1389,8 +1389,8 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .post-info-sent { display: block; position: absolute; - top: 0; - left: 3px; + top: -10px; + right: 0; font-size: 15px; } @@ -1400,7 +1400,9 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { line-height: 0.8rem; text-decoration: none; top: 12px; - right: 15px; + right: 0; + padding-right: 15px; + text-align: right; color: #8a8691; } .post-info-time:hover { @@ -1420,7 +1422,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .post-context { font-size: 0.8rem; line-height: 0.8rem; - margin: 2px 10px 4px 60px; + margin: 2px 0 4px 60px; color: #8a8691; } .post-context.post-retransmited-by-container { @@ -1576,7 +1578,6 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { margin-top: 10px; position: relative; border: 1px solid #eee; - font-size: 11px !important; } .post-rt-reference:hover { background-color: #FFF; @@ -1593,17 +1594,19 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { height: auto; } .post-rt-reference .post-info-name { - font-size: 11px; + font-size: 12px; } .post-rt-reference .post-text { margin: 0; clear: both; + font-size: 12px; + line-height: 130%; } .post-rt-reference .post-info-time { - font-size: 9px; color: #B3B5B7; top: 5px; right: 5px; + font-size: 12px; } .forEdition.profile-card { diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index f181fc8..035c7e2 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -145,8 +145,8 @@ .post-info-sent display: block position: absolute - top: 0 - left: 3px + top: -10px + right: 0 font-size: 15px @@ -156,7 +156,9 @@ line-height: .8rem text-decoration: none top: 12px - right: 15px + right: 0 + padding-right: 15px + text-align: right color: lighten($dark-grey,30%) &:hover color: lighten($dark-grey,5%) @@ -173,7 +175,7 @@ .post-context font-size: .8rem line-height: .8rem - margin: 2px 10px 4px 60px + margin: 2px 0 4px 60px color: lighten($dark-grey,30%) &.post-retransmited-by-container margin: 0 0 1em @@ -332,7 +334,7 @@ margin-top: 10px position: relative border: 1px solid #eee - font-size: 11px!important + &:hover background-color: #FFF cursor: pointer @@ -345,12 +347,14 @@ width: 16px height: auto .post-info-name - font-size: 11px + font-size: 12px .post-text margin: 0 clear: both + font-size: 12px + line-height: 130% .post-info-time - font-size: 9px color: #B3B5B7 top: 5px right: 5px + font-size: 12px From 0487f381fd4f3f53a784a10944d722d326bdcad8 Mon Sep 17 00:00:00 2001 From: myleneb Date: Fri, 21 Aug 2015 04:49:11 +0200 Subject: [PATCH 2/3] fixing .post-info-sent position --- css/style.css | 23 ++++++++--------------- sass/layout/_postboard.sass | 21 ++++++--------------- 2 files changed, 14 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 945c6ca..1f48666 100644 --- a/css/style.css +++ b/css/style.css @@ -1401,7 +1401,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { text-decoration: none; top: 12px; right: 0; - padding-right: 15px; + padding-right: 11px; text-align: right; color: #8a8691; } @@ -1574,39 +1574,32 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { } .post-rt-reference { - padding: 5px; + padding: 10px; margin-top: 10px; position: relative; border: 1px solid #eee; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; } .post-rt-reference:hover { background-color: #FFF; cursor: pointer; } .post-rt-reference .post-photo { - width: 16px; - height: 16px; - margin-right: 4px; - margin-bottom: 4px; -} -.post-rt-reference .post-photo img { - width: 16px; - height: auto; + display: none; } .post-rt-reference .post-info-name { font-size: 12px; } .post-rt-reference .post-text { - margin: 0; + margin: 5px 0 0 0; clear: both; font-size: 12px; line-height: 130%; } .post-rt-reference .post-info-time { - color: #B3B5B7; - top: 5px; - right: 5px; - font-size: 12px; + display: none; } .forEdition.profile-card { diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 035c7e2..6a4baa6 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -157,7 +157,7 @@ text-decoration: none top: 12px right: 0 - padding-right: 15px + padding-right: 11px text-align: right color: lighten($dark-grey,30%) &:hover @@ -330,31 +330,22 @@ .post-rt-reference - padding: 5px + padding: 10px margin-top: 10px position: relative border: 1px solid #eee - + +border-radius(3px) &:hover background-color: #FFF cursor: pointer .post-photo - width: 16px - height: 16px - margin-right: 4px - margin-bottom: 4px - img - width: 16px - height: auto + display: none .post-info-name font-size: 12px .post-text - margin: 0 + margin: 5px 0 0 0 clear: both font-size: 12px line-height: 130% .post-info-time - color: #B3B5B7 - top: 5px - right: 5px - font-size: 12px + display: none From ca4c33bedb97f215d15e831a77f4975cfe8fa46b Mon Sep 17 00:00:00 2001 From: myleneb Date: Fri, 21 Aug 2015 06:10:45 +0200 Subject: [PATCH 3/3] 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