From 7d831da6b2409530e3fe802d2e053b5af583fd09 Mon Sep 17 00:00:00 2001 From: myleneb Date: Mon, 3 Aug 2015 19:36:37 +0200 Subject: [PATCH] fixes + responsive --- css/style.css | 130 +++++++++++++++++++++++------------ js/theme_option.js | 3 +- sass/base/_fonts.sass | 3 + sass/layout/_dm.sass | 15 ++-- sass/layout/_menu.sass | 2 +- sass/layout/_modal.sass | 2 +- sass/layout/_postboard.sass | 9 +-- sass/layout/_prompt.sass | 2 +- sass/layout/_responsive.sass | 85 ++++++++++++++++------- 9 files changed, 161 insertions(+), 90 deletions(-) diff --git a/css/style.css b/css/style.css index c33155d..321cf71 100644 --- a/css/style.css +++ b/css/style.css @@ -107,7 +107,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-context span: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 { +.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-context span: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; @@ -125,7 +125,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, 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-context span: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 { +.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-context span: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; } @@ -205,6 +205,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, content: ""; } +.ion-right:after, .direct-messages-list .post:after { + content: ""; +} + /* FONTS */ * { outline: none !important; @@ -418,7 +422,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { left: 0; margin: 0; background-color: #3E3C42; - z-index: 40; + z-index: 20; } .userMenu > ul { -moz-box-sizing: border-box; @@ -583,7 +587,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .modal-wrapper { background: #F3F2F0; - z-index: 4; + z-index: 100; width: 34%; position: fixed; -moz-box-sizing: border-box; @@ -779,7 +783,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { /*********** POPUP PROMPT ************ */ .prompt-wrapper { background: #FDFCFA; - z-index: 5; + z-index: 200; position: fixed; top: 50%; left: 50%; @@ -915,19 +919,30 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { cursor: pointer; } .direct-messages-list .post:after { - content: ""; - font-family: "Ionicons"; position: absolute; - right: 5px; + right: 25px; top: 50%; font-size: 1.1em; margin: -6px 0 0 0; color: rgba(0, 0, 0, 0.4); - display: none; + opacity: 0; + -moz-transition-property: right, opacity; + -o-transition-property: right, opacity; + -webkit-transition-property: right, opacity; + transition-property: right, opacity; + -moz-transition-duration: 0.2s; + -o-transition-duration: 0.2s; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + -moz-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; } .direct-messages-list .post:hover:after { - display: block; + opacity: 1; + right: 5px; } .direct-messages-list .post:hover { background: white; @@ -1249,17 +1264,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; top: 0; - z-index: 120; -} -#postboard-top.on, #postboard-top, #postboard-top.fixed { -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); -} -#postboard-top.fixed { - position: fixed; - width: 362px; - top: 52px; + z-index: 120; } #postboard-top .profile-photo { position: absolute; @@ -2602,61 +2610,93 @@ ul.dropdown-menu li > li > a { margin-right: auto; } + .userMenu > ul { + background-image: none; + } + .userMenu .userMenu-profile { + display: none; + } + + .userMenu li.userMenu-search > input { + width: 150px; + } + + .prompt-wrapper { + width: 98%; + left: 1%; + margin-left: 0; + } + .dashboard.left { - top: 52px; - float: none; + top: 0; + margin-top: 0; + min-height: 122px; width: 100%; } .dashboard.left > .module { + top: 52px; + float: none; width: 100%; position: fixed; - top: 52px; - z-index: 2; + z-index: 10; } - - .promoted-posts-only { + .dashboard.left .mini-profile-info { display: none; } - .postboard { - float: none; - width: 100%; + .mini-profile-indicators li { + width: 25%; margin: 0; - top: 122px; - left: 0; - z-index: 1; + float: left; } - .modal-wrapper .postboard { - top: auto; + + .who-follow { + display: none; } - .mini-profile-info { + .promoted-posts-only { display: none; } - .mini-profile-indicators li { - width: 25%; - float: left; + .wrapper { + padding-top: 0; + } + + .postboard { + width: 100%; + float: none; + left: 0; + z-index: 5; + top: 0; position: relative; - z-index: 2; + margin-top: 0; + } + .modal-wrapper .postboard { + top: auto; } #postboard-top { position: fixed; bottom: 0; - width: 100%; top: auto; margin: 0; - -moz-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2); - -webkit-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2); - box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2); + width: 100%; + -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); } - .userMenu .userMenu-profile { - display: none; + .modal-wrapper { + width: 90%; + } +} +@media (max-width: 360px) { + .userMenu li.userMenu-search > input { + width: 100px; } - .userMenu ul { - background-image: none; + .dialog-modal { + right: -50px; + width: 290px; } } diff --git a/js/theme_option.js b/js/theme_option.js index afdb305..cd65936 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -12,8 +12,7 @@ $(document).ready(function() reOrganizeTemplates() - $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');}); - $('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');}); + $( '.userMenu-home.current a' ).on( 'click', function() { $('html, body').animate({scrollTop:0},300); diff --git a/sass/base/_fonts.sass b/sass/base/_fonts.sass index ccfe776..900a860 100644 --- a/sass/base/_fonts.sass +++ b/sass/base/_fonts.sass @@ -133,3 +133,6 @@ .ion-search:after content: "\f21f" + +.ion-right:after + content: "\f125" \ No newline at end of file diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass index a8b039e..3c675a2 100644 --- a/sass/layout/_dm.sass +++ b/sass/layout/_dm.sass @@ -51,20 +51,23 @@ .direct-messages-list .post padding: 20px cursor: pointer + @extend .ion-after + @extend .ion-right &:after - content: "" - font-family: $symbol-font-family position: absolute - right: 5px + right: 25px top: 50% font-size: 1.1em margin: -6px 0 0 0 color: rgba(0, 0, 0, 0.4) - display: none - + opacity: 0 + +transition-property(right, opacity) + +transition-duration(.2s) + +transition-timing-function(ease-out) .direct-messages-list .post:hover:after - display: block + opacity: 1 + right: 5px .post:hover background: white li diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass index ba6eedf..c1843a6 100644 --- a/sass/layout/_menu.sass +++ b/sass/layout/_menu.sass @@ -12,7 +12,7 @@ $menuBgColor : $dark-grey //background-color: #FFAF1C //+background-image(linear-gradient(to right , $color-green, #5E80A2) ) background-color: $menuBgColor - z-index: 40 + z-index: 20 > ul @extend .clear-fix +box-sizing(border-box) diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index 2f3480b..686e076 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -13,7 +13,7 @@ $header-modal-height : $menu-height .modal-wrapper background: $bloc-background-color - z-index: 4 + z-index: 100 width: 34% position: fixed +box-sizing(border-box) diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 787dbde..8cb19a7 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -8,20 +8,13 @@ background: white overflow: hidden background: $bloc-light-color - @extend .on +transition-property( top) +transition-duration(.1s) +transition-timing-function(ease-out) top: 0 - &.on - +box-shadow(1px 2px 2px rgba(#111, 0.1)) + +box-shadow(1px 2px 2px rgba(#111, 0.1)) z-index: 120 - &.fixed - position: fixed - width: $rightWidth - top: $menu-height - @extend .on .profile-photo position: absolute top: 10px diff --git a/sass/layout/_prompt.sass b/sass/layout/_prompt.sass index f193a09..1ea2818 100644 --- a/sass/layout/_prompt.sass +++ b/sass/layout/_prompt.sass @@ -3,7 +3,7 @@ .prompt-wrapper background: $bloc-light-color - z-index: 5 + z-index: 200 position: fixed top: 50% left: 50% diff --git a/sass/layout/_responsive.sass b/sass/layout/_responsive.sass index 3cc0de2..86651af 100644 --- a/sass/layout/_responsive.sass +++ b/sass/layout/_responsive.sass @@ -29,42 +29,75 @@ margin: 0 auto 50px auto float: none margin-right: auto + + .userMenu + > ul + background-image: none + + .userMenu-profile + display: none + + .userMenu li.userMenu-search > input + width: 150px + + .prompt-wrapper + width: 98% + left: 1% + margin-left: 0 + .dashboard &.left - top: $menu-height - float: none - width: 100% + top: 0 + margin-top: 0 + min-height: $menu-height + 70px + width: 100% > .module - width: 100% - position: fixed top: $menu-height - z-index: 2 - .promoted-posts-only + float: none + width: 100% + position: fixed + z-index: 10 + + .mini-profile-info + display: none + .mini-profile-indicators li + width: 25% + margin: 0 + float: left + .who-follow + display: none + .promoted-posts-only display: none + + .wrapper + padding-top: 0 .postboard - float: none width: 100% - margin: 0 - top: $menu-height +70 + float: none left: 0 - z-index: 1 + z-index: 5 + top: 0 + position: relative + margin-top: 0 .modal-wrapper & top: auto - .mini-profile-info - display: none - .mini-profile-indicators li - width: 25% - float: left - position: relative - z-index: 2 #postboard-top - position: fixed + position: fixed bottom: 0 - width: 100% - top: auto + top: auto margin: 0 - +box-shadow(0px -5px 13px rgba(17, 17, 17, 0.2)) - .userMenu .userMenu-profile - display: none - .userMenu ul - background-image: none \ No newline at end of file + width: 100% + +box-shadow(0 -5px 13px rgba(#111, 0.2)) + .modal-wrapper + width: 90% + + + +@media (max-width: 360px) + + + .userMenu li.userMenu-search > input + width: 100px + .dialog-modal + right: -50px + width: 290px \ No newline at end of file