From a2d3ce178d3dabe4d50fa02c274507f18819c561 Mon Sep 17 00:00:00 2001 From: myleneb Date: Wed, 29 Jul 2015 06:05:10 +0200 Subject: [PATCH] modals views in fixed sidebar --- css/style.css | 146 +++++++++++++++++++++--------------- js/theme_option.js | 20 +++-- sass/base/_commons.sass | 1 - sass/layout/_dm.sass | 6 +- sass/layout/_menu.sass | 4 +- sass/layout/_modal.sass | 3 +- sass/layout/_postboard.sass | 7 +- sass/style.sass | 107 ++++++++++++++------------ 8 files changed, 164 insertions(+), 130 deletions(-) diff --git a/css/style.css b/css/style.css index 9688274..50877f2 100644 --- a/css/style.css +++ b/css/style.css @@ -364,13 +364,13 @@ h3 .isFollowing:after { display: none; } -.box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ol.toptrends-list a, ul.dropdown-menu { +.box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ul.dropdown-menu { -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0); -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0); box-shadow: 0 8px 13px rgba(17, 17, 17, 0); } -.clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twister-user:after { +.clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .dashboard > .module:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twister-user:after { content: ""; display: table; clear: both; @@ -462,8 +462,10 @@ button.light:hover, a.button.light:hover { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; - max-width: 70%; + max-width: 100%; + padding: 0 20px; margin: 0; + margin: auto; background: url('../img/logo.png?1437893891') no-repeat 50% 50%; background-size: 20px; } @@ -566,12 +568,9 @@ button.light:hover, a.button.light:hover { right: 0; bottom: 0; overflow: hidden; - -moz-border-radius: 20px 0 0 0; - -webkit-border-radius: 20px; - border-radius: 20px 0 0 0; - -moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); - -webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); - box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); + -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2); + -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2); + box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2); } .modal-wrapper .postboard { border: none; @@ -743,7 +742,7 @@ button.light:hover, a.button.light:hover { .modal-wrapper.directMessages .post-area-new { display: none; z-index: 5; - background: #EBEBEB !important; + background: #FDFCFA !important; position: absolute; bottom: 0; width: 100% !important; @@ -758,9 +757,6 @@ button.light:hover, a.button.light:hover { padding: 5px; width: 100% !important; } -.modal-wrapper.directMessages .post-area-extras span { - color: white; -} .modal-wrapper.directMessages .modal-header h3 span { display: inline-block !important; padding-left: 5px; @@ -1227,9 +1223,9 @@ button.light:hover, a.button.light:hover { /************* POST BOARD ************ */ .postboard { - width: 40%; - margin-left: 30%; - padding: 20px; + width: 55%; + margin-left: 15%; + padding: 7px 20px; } .postboard h2 { display: none; @@ -1317,6 +1313,7 @@ button.light:hover, a.button.light:hover { display: inline-block; float: left; vertical-align: middle; + overflow: hidden; width: 40px; } .post-photo img { @@ -1833,27 +1830,29 @@ button.light:hover, a.button.light:hover { .promoted-posts-only { margin: 0 0; - float: right; } .promoted-posts-only li { cursor: pointer; display: block; margin: 0; - padding: 5px 15px; + padding: 5px; + border-bottom: 1px solid #EBEBEB; + text-align: center; font-size: 0.9em; transition: color 0.1s linear; } -.promoted-posts-only li.active { - color: #222; - background: white; +.promoted-posts-only li.disabled { + background: #F4F3F2; +} +.promoted-posts-only li.active, .promoted-posts-only li.active span { + color: #444; cursor: default; } -.promoted-posts-only li:hover, .promoted-posts-only li.disabled:hover { - color: #222; +.promoted-posts-only li:hover span, .promoted-posts-only li.disabled:hover span { + color: #444; } -.promoted-posts-only li.disabled { - color: #aaa; - background: #C3C3C3; +.promoted-posts-only li.disabled span { + color: rgba(68, 68, 68, 0.3); } /* Wrapper and blocks */ @@ -1870,10 +1869,11 @@ button.light:hover, a.button.light:hover { position: absolute; top: 50px; left: 0; - width: 30%; + width: 15%; } .dashboard.left > .module { float: right; + width: 128px; } .dashboard.right { position: fixed; @@ -1951,7 +1951,7 @@ ul.userMenu-search-profiles li a { padding: 0; color: #444; } -ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b { +ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b, ul.userMenu-search-profiles li a span:hover, ul.userMenu-search-profiles li a b:hover { display: inline-block; color: #444; font-weight: 400; @@ -2028,8 +2028,7 @@ ul.userMenu-search-profiles button { margin: 0; text-align: center; border-top: 1px solid #EBEBEB; - border-bottom: 1px solid #EBEBEB; - background: white; + background: #F4F3F2; } .mini-profile-indicators li { -moz-box-sizing: border-box; @@ -2038,13 +2037,8 @@ ul.userMenu-search-profiles button { display: block; position: relative; font-size: 0.8em; - width: 25%; - float: left; text-align: center; - border-right: 1px solid #EBEBEB; -} -.mini-profile-indicators li:last-child { - border: none; + border-bottom: 1px solid #EBEBEB; } .mini-profile-indicators li a { color: #777777; @@ -2053,6 +2047,7 @@ ul.userMenu-search-profiles button { } .mini-profile-indicators li a:hover { color: #444; + background: #FDFCFA; } .mini-profile-indicators li a:before { display: block !important; @@ -2084,24 +2079,22 @@ ul.userMenu-search-profiles button { .mini-profile-name { color: #444; - font-size: 1.3em; - font-weight: 700; + font-size: 1em; + font-weight: 500; padding: 10px 0; display: block; + text-align: center; margin: auto; } .mini-profile-name:hover { color: #aaa; } -.mini-profile-photo { +.mini-profile-photo img { width: 64px; height: auto; display: block; - margin: auto; -} -.mini-profile-photo img { - width: 100%; + margin: 32px auto 0 auto; } .profile-data { @@ -2132,6 +2125,16 @@ ul.userMenu-search-profiles button { padding-right: 5px; } +.mini-profile a span.following-count { + display: block; + font-weight: 900; + font-size: 1.2rem; + color: #777777; +} +.mini-profile a:hover span.following-count { + color: #444; +} + .mini-profile-info a:hover { text-decoration: none; } @@ -2197,20 +2200,41 @@ ul.userMenu-search-profiles button { border-bottom: solid 1px #A1B775; } +.mini-profile .post-area { + display: none; +} + #postboard-top { clear: both; - position: fixed; - top: 50px; - width: 30%; - margin-bottom: 1px; - left: 0; + position: relative; + margin-bottom: 10px; transition: height 0.3s linear; - padding: 10px 10px 5px 10px; + padding: 10px; background: white; overflow: hidden; - display: none; + background: #FDFCFA; + -moz-box-shadow: 0 0 13px rgba(17, 17, 17, 0); + -webkit-box-shadow: 0 0 13px rgba(17, 17, 17, 0); + box-shadow: 0 0 13px rgba(17, 17, 17, 0); + -moz-transition-property: box-shadow; + -o-transition-property: box-shadow; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -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; z-index: 120; } +#postboard-top.on, #postboard-top { + -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2); + -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2); + box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2); +} #postboard-top.hide { display: none !important; } @@ -2235,6 +2259,7 @@ ul.userMenu-search-profiles button { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + background: none; float: right; } #postboard-top .post-area .post-area-new { @@ -2411,8 +2436,7 @@ img.twister-user-photo { letter-spacing: 0; float: right; display: block; - padding: 4px; - margin: 0 0 0 15px; + margin: 5px; position: relative; } @@ -2425,8 +2449,7 @@ img.twister-user-photo { letter-spacing: 0; float: right; display: block; - padding: 4px; - margin: 0 0 0 15px; + margin: 5px; position: relative; } @@ -2437,15 +2460,16 @@ img.twister-user-photo { } /***********TOP TRENDS************** */ -ol.toptrends-list { +.toptrends-list { margin: 0; - margin-bottom: 10px; clear: both; + border-top: 1px solid #EBEBEB; + padding: 10px; } -ol.toptrends-list li { +.toptrends-list li { display: inline-block; } -ol.toptrends-list a { +.toptrends-list a { color: #aaa; padding: 3px 8px; display: inline-block; @@ -2454,9 +2478,11 @@ ol.toptrends-list a { margin: 3px; font-weight: 500; background: white; + -moz-box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2); + -webkit-box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2); + box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2); } -ol.toptrends-list a:hover { - background: rgba(255, 255, 255, 0.4); +.toptrends-list a:hover { color: #222; } diff --git a/js/theme_option.js b/js/theme_option.js index 6f20a70..4dd9760 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -4,30 +4,34 @@ $(window).resize(function() { - + $('.module.toptrends').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); }); - - $(document).ready(function() { - + $('.module.toptrends').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); + + $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');}); + $('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');}); + + + var windowHeight = $(window).height(); $('.modal-close').html(''); - //$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); + $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); $('.modal-back').html(''); $('.twister-user-remove').html(''); $('.profile-card-main').attr('style', ''); $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow')); $('.mini-profile-actions span').html(''); - $('.promoted-posts-only').detach().appendTo($('.dashboard.left')); + $('.promoted-posts-only').detach().appendTo($('.left .mini-profile')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.post-context').each(function(){ $(this).prependTo($(this).parent()); @@ -47,11 +51,11 @@ $(document).ready(function() //active promoted posts tab $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled"); $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active"); - //$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide"); + $('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide"); //active normal posts $(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active"); $(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled"); - //$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); + $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); }); diff --git a/sass/base/_commons.sass b/sass/base/_commons.sass index 6ae6a82..3e058d1 100644 --- a/sass/base/_commons.sass +++ b/sass/base/_commons.sass @@ -17,7 +17,6 @@ html background-color: $main-background-color //+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) ) background-attachment: fixed - body font-size: $main-font-size line-height : $main-line-height diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass index 208a786..31cef58 100644 --- a/sass/layout/_dm.sass +++ b/sass/layout/_dm.sass @@ -5,7 +5,7 @@ .post-area-new display: none z-index: 5 - background: $bloc-background-color !important + background: $bloc-light-color !important position: absolute bottom: 0 width: 100% !important @@ -17,10 +17,6 @@ padding: 5px width: 100%!important - .post-area-extras - span - color: white - .modal-header h3 span diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass index ab76cbd..71edf37 100644 --- a/sass/layout/_menu.sass +++ b/sass/layout/_menu.sass @@ -17,8 +17,10 @@ $menu-font-color: white @extend .clear-fix +box-sizing(border-box) width: 100% - max-width: 70% + max-width: 100% + padding: 0 20px margin: 0 + margin: auto background: image-url("logo.png") no-repeat 50% 50% background-size: 20px li diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index a2c1b4a..bd5bb74 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -19,8 +19,7 @@ $header-modal-height : $menu-height right: 0 bottom: 0 overflow: hidden - +border-radius(20px 0 0 0) - +box-shadow(-8px 0 13px rgba(#111, 0.2)) + +box-shadow(0 8px 13px rgba(#111, 0.2)) .postboard border: none padding: 0 diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 57995d8..3c16313 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -6,9 +6,9 @@ .postboard - width: 40% - margin-left: 30% - padding: 20px + width: 55% + margin-left: 15% + padding: 7px 20px h2 display: none .postboard-posts @@ -79,6 +79,7 @@ display: inline-block float: left vertical-align: middle + overflow: hidden width: $mini-usr-img img width: 100% diff --git a/sass/style.sass b/sass/style.sass index 809b85f..7fd2469 100755 --- a/sass/style.sass +++ b/sass/style.sass @@ -27,25 +27,25 @@ .promoted-posts-only margin: 0 0 - @extend .clear-fix - float: right - + li cursor: pointer display: block margin: 0 - padding: 5px 15px + padding: 5px + border-bottom: 1px solid $main-background-color + text-align: center font-size: .9em transition: color .1s linear - &.active - color: $main-color-dark - background: white + &.disabled + background: #F4F3F2 + &.active, &.active span + color: $defaut-font-color cursor: default - &:hover, &.disabled:hover - color: $main-color-dark - &.disabled - color: $main-color-light - background: $light-grey + &:hover span, &.disabled:hover span + color: $defaut-font-color + &.disabled span + color: rgba($defaut-font-color, .3) @@ -66,9 +66,10 @@ position: absolute top: $menu-height left: 0 - width: 30% + width: 15% > .module float: right + width: $usr-img * 2 &.right position: fixed right: 0 @@ -82,6 +83,7 @@ background: $bloc-light-color width: 100% @extend .box-shadow + @extend .clear-fix h3 float: left padding: 20px @@ -145,7 +147,7 @@ ul.userMenu-search-profiles margin: 0 padding: 0 color: $defaut-font-color - span, b + span, b, span:hover, b:hover display: inline-block color: $defaut-font-color font-weight: 400 @@ -154,7 +156,7 @@ ul.userMenu-search-profiles .mini-screen-name b, .mini-screen-name font-weight: 500 - .mini-profile-photo + .mini-profile-photo width: $mini-usr-img height: auto margin: 10px @@ -203,9 +205,7 @@ ul.userMenu-search-profiles .mini-profile @extend .box-shadow - .mini-profile-info - - + a.button background: $main-color-light margin: 1em auto @@ -227,20 +227,15 @@ ul.userMenu-search-profiles text-align: center @extend .clear-fix border-top: 1px solid $main-background-color - border-bottom: 1px solid $main-background-color - background: white + background: #F4F3F2 li +box-sizing(border-box) display: block position: relative font-size: .8em - width: 25% - float: left text-align: center - border-right: 1px solid $main-background-color - &:last-child - border: none + border-bottom: 1px solid $main-background-color a color: lighten($dark-grey,20%) @@ -248,6 +243,7 @@ ul.userMenu-search-profiles padding: 1rem 0 &:hover color: $dark-grey + background: $bloc-light-color &:before display: block!important width: 100%!important @@ -283,22 +279,21 @@ ul.userMenu-search-profiles .mini-profile-name color: $dark-grey - font-size: 1.3em - font-weight: 700 + font-size: 1em + font-weight: 500 padding: 10px 0 display: block + text-align: center margin: auto &:hover color: $main-color-light -.mini-profile-photo +.mini-profile-photo img width: $usr-img height: auto display: block - margin: auto - img - width: 100% + margin: 32px auto 0 auto @@ -325,7 +320,15 @@ ul.userMenu-search-profiles &.posts-count, &.following-count, &.followers-count display: inline-block padding-right: 5px - +.mini-profile + a + span.following-count + display: block + font-weight: 900 + font-size: 1.2rem + color: lighten($dark-grey,20%) + &:hover span.following-count + color: $dark-grey .mini-profile-info a:hover text-decoration: none @@ -364,6 +367,7 @@ ul.userMenu-search-profiles /***************** POST AREA ***************/ .post-area-new + textarea resize: none +box-sizing(border-box) @@ -383,19 +387,26 @@ ul.userMenu-search-profiles &:focus border-bottom: solid 1px $main-color-color +.mini-profile .post-area + display: none + #postboard-top clear: both - position: fixed - top: $menu-height - width: 30% + position: relative @extend .clear-fix - margin-bottom: 1px - left: 0 + margin-bottom: 10px transition: height .3s linear - padding: 10px 10px 5px 10px + padding: 10px background: white overflow: hidden - display: none + background: $bloc-light-color + +box-shadow(0 0 13px rgba(#111, 0)) + +transition-property(box-shadow) + +transition-duration(.2s) + +transition-timing-function(ease-out) + @extend .on + &.on + +box-shadow(0 8px 13px rgba(#111, 0.2)) z-index: 120 &.hide display: none!important @@ -417,6 +428,7 @@ ul.userMenu-search-profiles padding-right: 0 display: inline +box-sizing(border-box) + background: none float: right .post-area-new @extend .open @@ -580,8 +592,7 @@ img.twister-user-photo letter-spacing: 0 float: right display: block - padding: 4px - margin: 0 0 0 15px + margin: 5px position: relative .view-all-users @@ -593,8 +604,7 @@ img.twister-user-photo letter-spacing: 0 float: right display: block - padding: 4px - margin: 0 0 0 15px + margin: 5px position: relative .refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover @@ -604,13 +614,11 @@ img.twister-user-photo /***********TOP TRENDS***************/ -.toptrends - - -ol.toptrends-list +.toptrends-list margin: 0 - margin-bottom: 10px clear: both + border-top: 1px solid $main-background-color + padding: 10px li display: inline-block @@ -624,9 +632,8 @@ ol.toptrends-list margin: 3px font-weight: 500 background: white - @extend .box-shadow + +box-shadow(0 5px 8px rgba(#555, 0.2)) &:hover - background: rgba(white,.4) color: $main-color-dark /********* TWISTDAY REMINDER *******/