Browse Source

fixes + responsive

nin-v2
myleneb 9 years ago
parent
commit
7d831da6b2
  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. 7
      sass/layout/_postboard.sass
  8. 2
      sass/layout/_prompt.sass
  9. 75
      sass/layout/_responsive.sass

130
css/style.css

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

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

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

15
sass/layout/_dm.sass

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

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

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

7
sass/layout/_postboard.sass

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

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

75
sass/layout/_responsive.sass

@ -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
min-height: $menu-height + 70px
width: 100% width: 100%
> .module > .module
width: 100%
position: fixed
top: $menu-height top: $menu-height
z-index: 2
.promoted-posts-only
display: none
.postboard
float: none float: none
width: 100% width: 100%
margin: 0 position: fixed
top: $menu-height +70 z-index: 10
left: 0
z-index: 1
.modal-wrapper &
top: auto
.mini-profile-info .mini-profile-info
display: none display: none
.mini-profile-indicators li .mini-profile-indicators li
width: 25% width: 25%
margin: 0
float: left float: left
.who-follow
display: none
.promoted-posts-only
display: none
.wrapper
padding-top: 0
.postboard
width: 100%
float: none
left: 0
z-index: 5
top: 0
position: relative position: relative
z-index: 2 margin-top: 0
.modal-wrapper &
top: auto
#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
Loading…
Cancel
Save