diff --git a/css/profile.css b/css/profile.css index 93f82db..96dd839 100644 --- a/css/profile.css +++ b/css/profile.css @@ -265,12 +265,13 @@ { width: auto; } -.profile-modal .postboard-posts -{ + +.profile-modal .postboard-posts { display: block; - height: 90%; + height: 100%; overflow: auto; } + .profile-modal .profile-card-main { background: #45474d; diff --git a/css/style.css b/css/style.css index 0eb37ad..ff61c80 100644 --- a/css/style.css +++ b/css/style.css @@ -1412,7 +1412,6 @@ ol.toptrends-list { .modal-wrapper .modal-content { background: #fff; - height: 690px; overflow-y: auto; } @@ -1564,7 +1563,6 @@ ol.toptrends-list { } .new-user .modal-content { - height: 550px; padding: 25px; } diff --git a/js/interface_common.js b/js/interface_common.js index 459a8d8..ad4f5f9 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -28,6 +28,17 @@ function openModal(modal) { else modal.content = modal.self.find('.modal-content'); + if (modal.classBase === '.modal-wrapper') { + modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()); + + var windowHeight = $(window).height(); + if (modal.self.outerHeight() > windowHeight) { + modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight); + modal.self.outerHeight(windowHeight); + modal.self.css('margin-top', - windowHeight / 2); + } + } + modal.self.prependTo('body').fadeIn('fast'); return modal; @@ -94,14 +105,14 @@ function openProfileModalWithUsernameHandler(username) { content.find('.tox-ctc').attr('title', polyglot.t('Copy to clipboard')); content.find('.bitmessage-ctc').attr('title', polyglot.t('Copy to clipboard')); - content = openModal({ + var modal = openModal({ classAdd: 'profile-modal', content: content, title: polyglot.t('users_profile', {username: username}) - }).content; + }); // setup follow button in profile modal window - var button = content.find('.profile-card-buttons .follow'); + var button = modal.content.find('.profile-card-buttons .follow'); if (button) { if (followingUsers.indexOf(username) !== -1) toggleFollowButton(username, true, function() {setTimeout(loadModalFromHash, 500);}); @@ -109,8 +120,13 @@ function openProfileModalWithUsernameHandler(username) { button.on('click', userClickFollow); } - content.find('.postboard') // potentially dangerous fix because it's supposed for vertical oriented profile modals - .height(content.outerHeight() - content.find('.profile-card').outerHeight()); + var postboard = modal.content.find('.postboard'); + var postboardHeight = modal.content.outerHeight() - modal.content.find('.profile-card').outerHeight(); + if (postboardHeight > 0) { // FIXME actually it's here to exclude nin theme + postboard.outerHeight(postboardHeight) + .find('ol').outerHeight(postboard.outerHeight() - postboard.find('h2').outerHeight() - 20); // FIXME 20px for margin, need to fix CSS for it + } else + postboard.outerHeight(modal.content.outerHeight()); } function openHashtagModalFromSearchHandler(hashtag) { diff --git a/theme_calm/css/profile.css b/theme_calm/css/profile.css index 13f7120..adf7f4a 100644 --- a/theme_calm/css/profile.css +++ b/theme_calm/css/profile.css @@ -335,12 +335,13 @@ .profile-modal .postboard h2 { width: auto; } -.profile-modal .postboard-posts -{ + +.profile-modal .postboard-posts { display: block; - height: 90%; + height: 100%; overflow: auto; } + .profile-modal .postboard h2 span { font: 18px/40px 'Open Sans Condensed', sans-serif; padding-left: 10px; diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 29c185f..c91f8fc 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -1772,7 +1772,6 @@ textarea.splited-post { .modal-wrapper .modal-content { background: #fff; - height: 690px; overflow-y: auto; } @@ -1932,7 +1931,6 @@ textarea.splited-post { } .new-user .modal-content { - height: 550px; padding: 25px; } diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 8db763f..31d3d99 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -395,11 +395,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, /* line 17, ../sass/_profile.sass */ .modal-wrapper.profile-modal { - top: 50%; width: 980px; max-width: 98%; - height: 550px; - margin: -275px 0 0 -490px; + height: 580px; + margin: -290px 0 0 -490px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -431,7 +430,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } /* line 46, ../sass/_profile.sass */ .profile-modal .modal-content { - height: 100%; overflow: hidden; padding: 0; position: relative; @@ -452,8 +450,8 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, /* line 63, ../sass/_profile.sass */ .profile-modal .modal-content .postboard-posts { display: block; - height: 505px; - overflow: auto; + height: 100%; + overflow-y: auto; } /* line 67, ../sass/_profile.sass */ .profile-modal .modal-content .postboard-posts .post { @@ -1404,15 +1402,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, display: none !important; } -/* line 227, ../sass/_following.sass */ -.modal-wrapper.following-modal { - width: 200px; -} -/* line 229, ../sass/_following.sass */ -.following-modal h2 { - display: none; -} - /* line 232, ../sass/_following.sass */ .mini-following-info { width: 45px; @@ -2153,7 +2142,7 @@ ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-prof .who-follow { display: block; position: absolute; - bottom: 50px; + bottom: 10px; text-align: center; padding: 10px; font-size: 12px; @@ -2601,6 +2590,7 @@ ol.toptrends-list a:hover { /* line 588, ../sass/style.sass */ .modal-content { background: #f3f2f1; + overflow-y: auto; padding: 20px; } @@ -2615,7 +2605,6 @@ ol.toptrends-list a:hover { z-index: 2; margin-top: -60px; margin-left: -60px; - width: 100px; width: 520px; } /* line 599, ../sass/style.sass */ @@ -2800,17 +2789,12 @@ ol.toptrends-list a:hover { /****** DIRECT MESSAGES MODAL********* */ /* line 736, ../sass/style.sass */ .modal-wrapper.directMessages { - top: 10%; width: 520px; height: 600px; - overflow-x: hidden; - margin: 0 0 0 -260px; + margin: -300px 0 0 -260px; } /* line 743, ../sass/style.sass */ .directMessages .modal-content { - width: 520px; - height: 560px; - overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -2989,16 +2973,10 @@ ol.toptrends-list a:hover { /******** HASHTAG MODAL********** */ /* line 884, ../sass/style.sass */ .modal-wrapper.hashtag-modal { - top: 10%; width: 520px; height: 600px; overflow: hidden; - margin: 0 0 0 -260px; -} -/* line 890, ../sass/style.sass */ -.hashtag-modal .modal-content { - overflow-y: auto; - height: 500px; + margin: -300px 0 0 -260px; } /* line 895, ../sass/style.sass */ @@ -3010,16 +2988,9 @@ ol.toptrends-list a:hover { /* line 901, ../sass/style.sass */ .modal-wrapper.conversation-modal { background: white; - top: 10%; width: 520px; - height: 575px; - overflow: hidden; - margin: 0 0 0 -260px; -} -/* line 909, ../sass/style.sass */ -.conversation-modal .modal-content { - overflow-y: auto; - height: 90%; + height: 580px; + margin: -290px 0 0 -260px; } /* line 914, ../sass/style.sass */ @@ -3030,19 +3001,20 @@ ol.toptrends-list a:hover { /****** FOLLOWING MODAL****** */ /* line 920, ../sass/style.sass */ .modal-wrapper.following-modal { - top: 10%; width: 520px; height: 400px; - overflow-x: hidden; - margin: 0 0 0 -260px; + margin: -200px 0 0 -260px; } /* line 926, ../sass/style.sass */ .following-modal .modal-content { - height: 300px; - overflow-y: auto; padding: 0; } +/* line 229, ../sass/_following.sass */ +.following-modal .postboard h2 { + display: none; +} + /* line 932, ../sass/style.sass */ .following-modal ol { margin: 5px; @@ -3055,17 +3027,13 @@ ol.toptrends-list a:hover { /******* WHO TO FOLLOW MODAL****** */ /* line 943, ../sass/style.sass */ .modal-wrapper.who-to-follow-modal { - top: 50%; width: 520px; - height: 555px; - overflow-x: hidden; - margin: -275px 0 0 -260px; + height: 580px; + margin: -290px 0 0 -260px; } /* line 949, ../sass/style.sass */ .who-to-follow-modal .modal-content { padding: 15px; - height: 480px; - overflow-y: auto; } /* line 955, ../sass/style.sass */ diff --git a/theme_nin/sass/_following.sass b/theme_nin/sass/_following.sass index ec5798c..3f27a82 100755 --- a/theme_nin/sass/_following.sass +++ b/theme_nin/sass/_following.sass @@ -1,4 +1,4 @@ -.following +.following width: 100%!important .following-list li @@ -89,7 +89,7 @@ transition: padding-top .1s linear background: $main-color-dark z-index: 3 - + &:hover @@ -222,21 +222,14 @@ .swarm-status display: none!important - -.following-modal - .modal-wrapper - width: 200px - h2 - display: none - .mini-following-info width: 45px height: 45px - text-align: center + text-align: center background: $bloc-background-color margin: 1% float: left - &:after + &:after @extend .clear-fix .mini-screen-name, .mini-following-name display: none diff --git a/theme_nin/sass/_profile.sass b/theme_nin/sass/_profile.sass index 70f62b0..411c428 100755 --- a/theme_nin/sass/_profile.sass +++ b/theme_nin/sass/_profile.sass @@ -2,12 +2,12 @@ // variables for width $modal-width: 980px -$modal-height: 550px +$modal-height: 580px $modal-gut: 15px $modal-postboard-height: $modal-height - 3*$modal-gut $modal-left-col: 400px $modal-right-col: ($modal-width - 2*$modal-gut) - $modal-left-col - $modal-gut -$modal-postboard-post-height: $modal-height - 45px +$modal-postboard-post-height: 100% /************************************* ******************* PROFILE MODAL @@ -17,8 +17,6 @@ $modal-postboard-post-height: $modal-height - 45px .modal-wrapper width: $modal-width max-width: 98% - position: absolute - top: 50% +box-sizing(border-box) height: $modal-height margin: 0-($modal-height/2) 0 0 0-($modal-width/2) @@ -42,9 +40,7 @@ $modal-postboard-post-height: $modal-height - 45px display: inline-block padding-right: 5px - .modal-content - height: 100% overflow: hidden padding: 0 position: relative @@ -58,12 +54,11 @@ $modal-postboard-post-height: $modal-height - 45px position: relative float: right width: $modal-right-col!important - .postboard-posts display: block height: $modal-postboard-post-height - overflow: auto + overflow-y: auto .postboard-posts .post padding: 0 .post-interactions @@ -78,13 +73,13 @@ $modal-postboard-post-height: $modal-height - 45px letter-spacing: 0 text-transform: none color: lighten($dark-grey, 30%) - padding: 5px 0 + padding: 5px 0 margin: 0 font-size: 13px line-height: 13px -/* Profile card*/ +/* Profile card*/ .profile-card height: 100% @@ -168,7 +163,7 @@ $modal-postboard-post-height: $modal-height - 45px clear: both width: 100% - + #msngrswr display: none text-align: center @@ -190,7 +185,7 @@ $modal-postboard-post-height: $modal-height - 45px color: $main-color-dark &:hover color: $main-color-color - + .bitmessage-ctc:after, .tox-ctc:after font-family: $symbol-font-family content: '' @@ -204,7 +199,7 @@ $modal-postboard-post-height: $modal-height - 45px font-variant: normal text-transform: none line-height: 1em - + .profile-modal .profile-tox, .profile-bitmessage display: inline-block @@ -255,7 +250,7 @@ $modal-postboard-post-height: $modal-height - 45px .input-tox, .input-bitmessage width: 90% margin-top: 10px - h2 + h2 text-transform: none font-weight: 700 font-size: .9em diff --git a/theme_nin/sass/style.sass b/theme_nin/sass/style.sass index 9af9103..79aa579 100755 --- a/theme_nin/sass/style.sass +++ b/theme_nin/sass/style.sass @@ -302,7 +302,7 @@ ul.userMenu-search-profiles .who-follow display: block position: absolute - bottom: 50px + bottom: 10px text-align: center padding: 10px font-size: 12px @@ -633,13 +633,13 @@ ol.toptrends-list .modal-content @extend .clear-fix background: $background-light + overflow-y: auto padding: 20px .postboard h2 position: fixed z-index: 2 margin-top: -60px margin-left: -60px - width: 100px width: $postboard-modal-width span display: none @@ -779,11 +779,9 @@ ol.toptrends-list /****** DIRECT MESSAGES MODAL**********/ .modal-wrapper.directMessages - top: 10% width: $postboard-modal-width - height: 490px - overflow-x: hidden - margin: 0 0 0 0-($postboard-modal-width/2) + height: 600px + margin: -300px 0 0 0-($postboard-modal-width/2) .post-area-new display: none margin: 0 -20px @@ -796,9 +794,6 @@ ol.toptrends-list display: inline!important .modal-content - overflow-y: auto - height: 300px - +box-sizing(border-box) width: $postboard-modal-width @@ -932,14 +927,10 @@ ol.toptrends-list /******** HASHTAG MODAL***********/ .modal-wrapper.hashtag-modal - top: 10% width: $postboard-modal-width height: 600px overflow: hidden - margin: 0 0 0 0-($postboard-modal-width/2) - .modal-content - overflow-y: auto - height: 500px + margin: -300px 0 0 0-($postboard-modal-width/2) .postboard padding: 0 @@ -947,49 +938,38 @@ ol.toptrends-list .modal-wrapper.conversation-modal background: white - top: 10% width: $postboard-modal-width - height: 575px - overflow: hidden - margin: 0 0 0 0-($postboard-modal-width/2) - .modal-content - overflow-y: auto - height: 90% + height: 580px + margin: -290px 0 0 0-($postboard-modal-width/2) .postboard padding: 0 /****** FOLLOWING MODAL*******/ .modal-wrapper.following-modal - top: 10% width: $postboard-modal-width height: 400px - overflow-x: hidden - margin: 0 0 0 0-($postboard-modal-width/2) + margin: -200px 0 0 0-($postboard-modal-width/2) .modal-content - height: 300px - overflow-y: auto padding: 0 ol margin: 5px .open-profile-modal &:hover text-decoration: none - + .postboard + h2 + display: none /******* WHO TO FOLLOW MODAL*******/ .modal-wrapper.who-to-follow-modal - top: 50% width: $postboard-modal-width - height: 555px - overflow-x: hidden - margin: -275px 0 0 0-($postboard-modal-width/2) + height: 580px + margin: -290px 0 0 0-($postboard-modal-width/2) .modal-content padding: 15px - height: 480px - overflow-y: auto ol margin: 5px .open-profile-modal