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

fixes + responsive

nin-v2
myleneb 9 years ago
parent
8d70e256bd
commit
7d831da6b2
9 changed files with 161 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      css/style.css
  2. 3
      js/theme_option.js
  3. 3
      sass/base/_fonts.sass
  4. 15
      sass/layout/_dm.sass
  5. 2
      sass/layout/_menu.sass
  6. 2
      sass/layout/_modal.sass
  7. 9
      sass/layout/_postboard.sass
  8. 2
      sass/layout/_prompt.sass
  9. 85
      sass/layout/_responsive.sass

130
css/style.css
Unescape View File

@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
font-weight: normal; font-weight: normal;
font-style: 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; display: inline-block;
font-family: "Ionicons"; font-family: "Ionicons";
speak: none; speak: none;
@ -125,7 +125,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
padding: 0 3px; 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; display: none;
} }
@ -205,6 +205,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; content: "";
} }
.ion-right:after, .direct-messages-list .post:after {
content: "";
}
/* FONTS */ /* FONTS */
* { * {
outline: none !important; outline: none !important;
@ -418,7 +422,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
left: 0; left: 0;
margin: 0; margin: 0;
background-color: #3E3C42; background-color: #3E3C42;
z-index: 40; z-index: 20;
} }
.userMenu > ul { .userMenu > ul {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -583,7 +587,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.modal-wrapper { .modal-wrapper {
background: #F3F2F0; background: #F3F2F0;
z-index: 4; z-index: 100;
width: 34%; width: 34%;
position: fixed; position: fixed;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -779,7 +783,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
/*********** POPUP PROMPT ************ */ /*********** POPUP PROMPT ************ */
.prompt-wrapper { .prompt-wrapper {
background: #FDFCFA; background: #FDFCFA;
z-index: 5; z-index: 200;
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -915,19 +919,30 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
cursor: pointer; cursor: pointer;
} }
.direct-messages-list .post:after { .direct-messages-list .post:after {
content: "";
font-family: "Ionicons";
position: absolute; position: absolute;
right: 5px; right: 25px;
top: 50%; top: 50%;
font-size: 1.1em; font-size: 1.1em;
margin: -6px 0 0 0; margin: -6px 0 0 0;
color: rgba(0, 0, 0, 0.4); 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 { .direct-messages-list .post:hover:after {
display: block; opacity: 1;
right: 5px;
} }
.direct-messages-list .post:hover { .direct-messages-list .post:hover {
background: white; background: white;
@ -1249,17 +1264,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-webkit-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out; transition-timing-function: ease-out;
top: 0; 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); -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
-webkit-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); box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
} z-index: 120;
#postboard-top.fixed {
position: fixed;
width: 362px;
top: 52px;
} }
#postboard-top .profile-photo { #postboard-top .profile-photo {
position: absolute; position: absolute;
@ -2602,61 +2610,93 @@ ul.dropdown-menu li > li > a {
margin-right: auto; 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 { .dashboard.left {
top: 52px; top: 0;
float: none; margin-top: 0;
min-height: 122px;
width: 100%; width: 100%;
} }
.dashboard.left > .module { .dashboard.left > .module {
top: 52px;
float: none;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 52px; z-index: 10;
z-index: 2;
} }
.dashboard.left .mini-profile-info {
.promoted-posts-only {
display: none; display: none;
} }
.postboard { .mini-profile-indicators li {
float: none; width: 25%;
width: 100%;
margin: 0; margin: 0;
top: 122px; float: left;
left: 0;
z-index: 1;
} }
.modal-wrapper .postboard {
top: auto; .who-follow {
display: none;
} }
.mini-profile-info { .promoted-posts-only {
display: none; display: none;
} }
.mini-profile-indicators li { .wrapper {
width: 25%; padding-top: 0;
float: left; }
.postboard {
width: 100%;
float: none;
left: 0;
z-index: 5;
top: 0;
position: relative; position: relative;
z-index: 2; margin-top: 0;
}
.modal-wrapper .postboard {
top: auto;
} }
#postboard-top { #postboard-top {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%;
top: auto; top: auto;
margin: 0; margin: 0;
-moz-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2); width: 100%;
-webkit-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2); -moz-box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2);
box-shadow: 0px -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 { .modal-wrapper {
display: none; width: 90%;
}
}
@media (max-width: 360px) {
.userMenu li.userMenu-search > input {
width: 100px;
} }
.userMenu ul { .dialog-modal {
background-image: none; right: -50px;
width: 290px;
} }
} }

3
js/theme_option.js
Unescape View File

@ -12,8 +12,7 @@ $(document).ready(function()
reOrganizeTemplates() 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() { $( '.userMenu-home.current a' ).on( 'click', function() {
$('html, body').animate({scrollTop:0},300); $('html, body').animate({scrollTop:0},300);

3
sass/base/_fonts.sass
Unescape View File

@ -133,3 +133,6 @@
.ion-search:after .ion-search:after
content: "\f21f" content: "\f21f"
.ion-right:after
content: "\f125"

15
sass/layout/_dm.sass
Unescape View File

@ -51,20 +51,23 @@
.direct-messages-list .post .direct-messages-list .post
padding: 20px padding: 20px
cursor: pointer cursor: pointer
@extend .ion-after
@extend .ion-right
&:after &:after
content: ""
font-family: $symbol-font-family
position: absolute position: absolute
right: 5px right: 25px
top: 50% top: 50%
font-size: 1.1em font-size: 1.1em
margin: -6px 0 0 0 margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4) 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 .direct-messages-list
.post:hover:after .post:hover:after
display: block opacity: 1
right: 5px
.post:hover .post:hover
background: white background: white
li li

2
sass/layout/_menu.sass
Unescape View File

@ -12,7 +12,7 @@ $menuBgColor : $dark-grey
//background-color: #FFAF1C //background-color: #FFAF1C
//+background-image(linear-gradient(to right , $color-green, #5E80A2) ) //+background-image(linear-gradient(to right , $color-green, #5E80A2) )
background-color: $menuBgColor background-color: $menuBgColor
z-index: 40 z-index: 20
> ul > ul
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)

2
sass/layout/_modal.sass
Unescape View File

@ -13,7 +13,7 @@ $header-modal-height : $menu-height
.modal-wrapper .modal-wrapper
background: $bloc-background-color background: $bloc-background-color
z-index: 4 z-index: 100
width: 34% width: 34%
position: fixed position: fixed
+box-sizing(border-box) +box-sizing(border-box)

9
sass/layout/_postboard.sass
Unescape View File

@ -8,20 +8,13 @@
background: white background: white
overflow: hidden overflow: hidden
background: $bloc-light-color background: $bloc-light-color
@extend .on
+transition-property( top) +transition-property( top)
+transition-duration(.1s) +transition-duration(.1s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
top: 0 top: 0
&.on +box-shadow(1px 2px 2px rgba(#111, 0.1))
+box-shadow(1px 2px 2px rgba(#111, 0.1))
z-index: 120 z-index: 120
&.fixed
position: fixed
width: $rightWidth
top: $menu-height
@extend .on
.profile-photo .profile-photo
position: absolute position: absolute
top: 10px top: 10px

2
sass/layout/_prompt.sass
Unescape View File

@ -3,7 +3,7 @@
.prompt-wrapper .prompt-wrapper
background: $bloc-light-color background: $bloc-light-color
z-index: 5 z-index: 200
position: fixed position: fixed
top: 50% top: 50%
left: 50% left: 50%

85
sass/layout/_responsive.sass
Unescape View File

@ -29,42 +29,75 @@
margin: 0 auto 50px auto margin: 0 auto 50px auto
float: none float: none
margin-right: auto 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 .dashboard
&.left &.left
top: $menu-height top: 0
float: none margin-top: 0
width: 100% min-height: $menu-height + 70px
width: 100%
> .module > .module
width: 100%
position: fixed
top: $menu-height top: $menu-height
z-index: 2 float: none
.promoted-posts-only 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 display: none
.wrapper
padding-top: 0
.postboard .postboard
float: none
width: 100% width: 100%
margin: 0 float: none
top: $menu-height +70
left: 0 left: 0
z-index: 1 z-index: 5
top: 0
position: relative
margin-top: 0
.modal-wrapper & .modal-wrapper &
top: auto top: auto
.mini-profile-info
display: none
.mini-profile-indicators li
width: 25%
float: left
position: relative
z-index: 2
#postboard-top #postboard-top
position: fixed position: fixed
bottom: 0 bottom: 0
width: 100% top: auto
top: auto
margin: 0 margin: 0
+box-shadow(0px -5px 13px rgba(17, 17, 17, 0.2)) width: 100%
.userMenu .userMenu-profile +box-shadow(0 -5px 13px rgba(#111, 0.2))
display: none .modal-wrapper
.userMenu ul width: 90%
background-image: none
@media (max-width: 360px)
.userMenu li.userMenu-search > input
width: 100px
.dialog-modal
right: -50px
width: 290px
Write Preview
Loading…
Cancel
Save