Browse Source

fixing modal/prompt for new post

nin-v2
myleneb 9 years ago
parent
commit
0f7b7100fb
  1. 49
      css/style.css
  2. 9
      js/theme_option.js
  3. 7
      sass/layout/_responsive.sass
  4. 8
      sass/style.sass

49
css/style.css

@ -114,7 +114,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, .mini-profile .post-area.display .modal-header span:before, .prompt-wrapper .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon: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 { .ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon: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;
@ -128,11 +128,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area.display .modal-header span:before, .prompt-wrapper .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon: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:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon: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 {
padding: 0 3px; padding: 0 3px;
} }
.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .mini-profile .post-area.display .modal-header span:after, .prompt-wrapper .switch-mode:after, .mini-profile .post-area.display .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-retransmited-icon: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 { .ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .mini-profile .post-area .modal-header span:after, .prompt-wrapper .switch-mode:after, .mini-profile .post-area.display .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-retransmited-icon: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;
} }
@ -140,7 +140,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; content: "";
} }
.ion-checkmark:after, .isFollowing:after, .modal-header span.mark-all-as-read:after, .mini-profile .post-area.display .modal-header span.mark-all-as-read:after, .ion-checkmark:before, .isFollowing:before, .modal-header span.mark-all-as-read:before, .mini-profile .post-area.display .modal-header span.mark-all-as-read:before { .ion-checkmark:after, .isFollowing:after, .modal-header span.mark-all-as-read:after, .mini-profile .post-area .modal-header span.mark-all-as-read:after, .ion-checkmark:before, .isFollowing:before, .modal-header span.mark-all-as-read:before, .mini-profile .post-area .modal-header span.mark-all-as-read:before {
content: ""; content: "";
} }
@ -172,11 +172,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; content: "";
} }
.ion-close:before, .modal-header span.modal-close:before, .mini-profile .post-area.display .modal-header span.modal-close:before, .twister-user-remove:before { .ion-close:before, .modal-header span.modal-close:before, .mini-profile .post-area .modal-header span.modal-close:before, .twister-user-remove:before {
content: ""; content: "";
} }
.ion-back:before, .modal-header span.modal-back:before, .mini-profile .post-area.display .modal-header span.modal-back:before { .ion-back:before, .modal-header span.modal-back:before, .mini-profile .post-area .modal-header span.modal-back:before {
content: ""; content: "";
} }
@ -342,7 +342,7 @@ h3 .isFollowing:after, .login .module p span .isFollowing:after {
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, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .mini-profile .post-area.display .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .forEdition.profile-card:after, .forEdition.profile-card .profile-card-main:after, .following .following-list li a:after, .login .module:after, .network.singleBlock:after, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after { .clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .mini-profile .post-area .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .forEdition.profile-card:after, .forEdition.profile-card .profile-card-main:after, .following .following-list li a:after, .login .module:after, .network.singleBlock:after, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
@ -735,7 +735,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
z-index: 2000; z-index: 2000;
} }
.modal-header, .prompt-wrapper .modal-header, .mini-profile .post-area.display .modal-header { .modal-header, .prompt-wrapper .modal-header, .mini-profile .post-area .modal-header {
position: relative; position: relative;
background: #212121; background: #212121;
height: 52px; height: 52px;
@ -743,7 +743,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.modal-header h3, .prompt-wrapper .modal-header h3, .mini-profile .post-area.display .modal-header h3, .modal-header .login .module p span, .login .module p .modal-header span { .modal-header h3, .prompt-wrapper .modal-header h3, .mini-profile .post-area .modal-header h3, .modal-header .login .module p span, .login .module p .modal-header span {
padding-left: 20px; padding-left: 20px;
line-height: 52px; line-height: 52px;
font-weight: 500; font-weight: 500;
@ -751,10 +751,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
float: left; float: left;
color: white; color: white;
} }
.modal-header h3 span, .prompt-wrapper .modal-header h3 span, .mini-profile .post-area.display .modal-header h3 span, .modal-header .login .module p span span, .login .module p .modal-header span span { .modal-header h3 span, .prompt-wrapper .modal-header h3 span, .mini-profile .post-area .modal-header h3 span, .modal-header .login .module p span span, .login .module p .modal-header span span {
position: relative; position: relative;
} }
.modal-header span, .prompt-wrapper .modal-header span, .mini-profile .post-area.display .modal-header span { .modal-header span, .prompt-wrapper .modal-header span, .mini-profile .post-area .modal-header span {
position: absolute; position: absolute;
top: 0; top: 0;
line-height: 52px; line-height: 52px;
@ -763,22 +763,22 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
transition: color 0.1s linear; transition: color 0.1s linear;
} }
.modal-header span:hover, .mini-profile .post-area.display .modal-header span:hover { .modal-header span:hover, .mini-profile .post-area .modal-header span:hover {
color: white; color: white;
} }
.modal-header span b, .prompt-wrapper .modal-header span b, .mini-profile .post-area.display .modal-header span b { .modal-header span b, .prompt-wrapper .modal-header span b, .mini-profile .post-area .modal-header span b {
display: none; display: none;
} }
.modal-header span.modal-close, .mini-profile .post-area.display .modal-header span.modal-close { .modal-header span.modal-close, .mini-profile .post-area .modal-header span.modal-close {
right: 10px; right: 10px;
} }
.modal-header span.mark-all-as-read, .mini-profile .post-area.display .modal-header span.mark-all-as-read { .modal-header span.mark-all-as-read, .mini-profile .post-area .modal-header span.mark-all-as-read {
position: static; position: static;
float: left; float: left;
margin-left: 10px; margin-left: 10px;
display: none; display: none;
} }
.modal-header span.modal-back, .mini-profile .post-area.display .modal-header span.modal-back { .modal-header span.modal-back, .mini-profile .post-area .modal-header span.modal-back {
right: 35px; right: 35px;
} }
@ -834,7 +834,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
padding: 10px; padding: 10px;
background: white; background: white;
} }
.prompt-wrapper .modal-header h3 span, .mini-profile .post-area.display .modal-header h3 span, .prompt-wrapper .modal-header .login .module p span span, .login .module p .prompt-wrapper .modal-header span span, .mini-profile .post-area.display .modal-header .login .module p span span, .login .module p .mini-profile .post-area.display .modal-header span span { .prompt-wrapper .modal-header h3 span, .prompt-wrapper .mini-profile .post-area .modal-header h3 span, .mini-profile .post-area .prompt-wrapper .modal-header h3 span, .mini-profile .post-area.display .modal-header h3 span, .prompt-wrapper .modal-header .login .module p span span, .login .module p .prompt-wrapper .modal-header span span, .mini-profile .post-area.display .modal-header .login .module p span span, .login .module p .mini-profile .post-area.display .modal-header span span {
padding-left: 5px; padding-left: 5px;
color: white; color: white;
} }
@ -2159,13 +2159,15 @@ ul.userMenu-search-profiles button, ul.userMenu-search-profiles .show-more-follo
.mini-profile .post-area { .mini-profile .post-area {
margin-top: 1px; margin-top: 1px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0.5em; }
.mini-profile .post-area .modal-header h3, .mini-profile .post-area .modal-header .login .module p span, .login .module p .mini-profile .post-area .modal-header span {
padding: 0 0 0 20px;
} }
.mini-profile .post-area-new { .mini-profile .post-area-new {
padding: 20px;
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
padding: 0;
margin: 0; margin: 0;
} }
.mini-profile .post-area-new textarea { .mini-profile .post-area-new textarea {
@ -2835,14 +2837,7 @@ ul.dropdown-menu li > li > a {
} }
#postboard-top { #postboard-top {
position: fixed !important; display: none;
bottom: 0;
top: auto;
margin: 0;
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);
} }
.modal-wrapper { .modal-wrapper {

9
js/theme_option.js

@ -114,11 +114,18 @@ function reOrganizeTemplates() { // for nin's templating
else {$('.mini-profile .post-area').removeClass('display');} else {$('.mini-profile .post-area').removeClass('display');}
return false; return false;
}); });
// new post prompt
$('<div><h3>New post</h3><span class="modal-close prompt-close"></span></div>')
.addClass('modal-header')
.prependTo('.mini-profile .post-area');
$('.mini-profile .post-area .post-submit').bind( 'click', function() { $('.mini-profile .post-area .post-submit').bind( 'click', function() {
$('.mini-profile .post-area').removeClass('display'); $('.mini-profile .post-area').removeClass('display');
}); });
$('.mini-profile .post-area .modal-close').bind( 'click', function() {
$('.mini-profile .post-area').removeClass('display');
});
} }
function reAppendModules() { // avoid w1200 things function reAppendModules() { // avoid w1200 things

7
sass/layout/_responsive.sass

@ -84,12 +84,7 @@
.modal-wrapper & .modal-wrapper &
top: auto top: auto
#postboard-top #postboard-top
position: fixed!important display: none
bottom: 0
top: auto
margin: 0
width: 100%
+box-shadow(0 -5px 13px rgba(#111, 0.2))
.modal-wrapper .modal-wrapper
width: 90% width: 90%

8
sass/style.sass

@ -173,12 +173,16 @@ ul.userMenu-search-profiles
.post-area .post-area
margin-top: 1px margin-top: 1px
margin-bottom: 20px margin-bottom: 20px
padding: .5em
@extend .clear-fix @extend .clear-fix
.modal-header
@extend .modal-header
h3
padding: 0 0 0 20px
.post-area-new .post-area-new
@extend .open @extend .open
padding: 20px
+box-shadow(none) +box-shadow(none)
padding: 0
margin: 0 margin: 0
textarea textarea
width: 100% width: 100%

Loading…
Cancel
Save