twisterarmy/theme_nin
1
0
Fork 0
mirror of https://github.com/twisterarmy/theme_nin.git synced 2025-01-30 16:44:31 +00:00
Code Issues Projects Releases Wiki Activity

fixes + responsive

Browse Source
This commit is contained in:
myleneb 2015-08-03 19:36:37 +02:00
parent 8d70e256bd
commit 7d831da6b2
9 changed files with 165 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
css/style.css
View File

@ -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;
}
.dashboard.left .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: 122px;
float: none;
left: 0;
z-index: 1;
z-index: 5;
top: 0;
position: relative;
margin-top: 0;
}
.modal-wrapper .postboard {
top: auto;
}
.mini-profile-info {
display: none;
}
.mini-profile-indicators li {
width: 25%;
float: left;
position: relative;
z-index: 2;
}
#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;
}
.userMenu ul {
background-image: none;
.modal-wrapper {
width: 90%;
}
}
@media (max-width: 360px) {
.userMenu li.userMenu-search > input {
width: 100px;
}
.dialog-modal {
right: -50px;
width: 290px;
}
}

3
js/theme_option.js
View File

@ -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);

3
sass/base/_fonts.sass
View File

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

15
sass/layout/_dm.sass
View File

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

2
sass/layout/_menu.sass
View File

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

2
sass/layout/_modal.sass
View File

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

9
sass/layout/_postboard.sass
View File

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

2
sass/layout/_prompt.sass
View File

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

89
sass/layout/_responsive.sass
View File

@ -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
display: none
.postboard
float: none
width: 100%
float: none
width: 100%
position: fixed
z-index: 10
.mini-profile-info
display: none
.mini-profile-indicators li
width: 25%
margin: 0
top: $menu-height +70
float: left
.who-follow
display: none
.promoted-posts-only
display: none
.wrapper
padding-top: 0
.postboard
width: 100%
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
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