Browse Source

modals views in fixed sidebar

nin-v2
myleneb 9 years ago
parent
commit
a2d3ce178d
  1. 146
      css/style.css
  2. 20
      js/theme_option.js
  3. 1
      sass/base/_commons.sass
  4. 6
      sass/layout/_dm.sass
  5. 4
      sass/layout/_menu.sass
  6. 3
      sass/layout/_modal.sass
  7. 7
      sass/layout/_postboard.sass
  8. 101
      sass/style.sass

146
css/style.css

@ -364,13 +364,13 @@ h3 .isFollowing:after { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;
}

20
js/theme_option.js

@ -4,30 +4,34 @@ @@ -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() @@ -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");
});

1
sass/base/_commons.sass

@ -17,7 +17,6 @@ html @@ -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

6
sass/layout/_dm.sass

@ -5,7 +5,7 @@ @@ -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 @@ @@ -17,10 +17,6 @@
padding: 5px
width: 100%!important
.post-area-extras
span
color: white
.modal-header
h3 span

4
sass/layout/_menu.sass

@ -17,8 +17,10 @@ $menu-font-color: white @@ -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

3
sass/layout/_modal.sass

@ -19,8 +19,7 @@ $header-modal-height : $menu-height @@ -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

7
sass/layout/_postboard.sass

@ -6,9 +6,9 @@ @@ -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 @@ @@ -79,6 +79,7 @@
display: inline-block
float: left
vertical-align: middle
overflow: hidden
width: $mini-usr-img
img
width: 100%

101
sass/style.sass

@ -27,25 +27,25 @@ @@ -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
cursor: default
&:hover, &.disabled:hover
color: $main-color-dark
&.disabled
color: $main-color-light
background: $light-grey
background: #F4F3F2
&.active, &.active span
color: $defaut-font-color
cursor: default
&:hover span, &.disabled:hover span
color: $defaut-font-color
&.disabled span
color: rgba($defaut-font-color, .3)
@ -66,9 +66,10 @@ @@ -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 @@ @@ -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 @@ -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
@ -203,8 +205,6 @@ ul.userMenu-search-profiles @@ -203,8 +205,6 @@ ul.userMenu-search-profiles
.mini-profile
@extend .box-shadow
.mini-profile-info
a.button
background: $main-color-light
@ -227,20 +227,15 @@ ul.userMenu-search-profiles @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 *******/

Loading…
Cancel
Save