twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

modals views in fixed sidebar

nin-v2
myleneb 9 years ago
parent
35d34708b6
commit
a2d3ce178d
8 changed files with 164 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 107
      sass/style.sass

146
css/style.css
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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%

107
sass/style.sass
Unescape View File

@ -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
&.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 @@ @@ -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
@ -154,7 +156,7 @@ ul.userMenu-search-profiles @@ -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 @@ -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 @@ -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 *******/

Write Preview
Loading…
Cancel
Save