diff --git a/css/profile.css b/css/profile.css index 96dd839..93f82db 100644 --- a/css/profile.css +++ b/css/profile.css @@ -265,13 +265,12 @@ { width: auto; } - -.profile-modal .postboard-posts { +.profile-modal .postboard-posts +{ display: block; - height: 100%; + height: 90%; overflow: auto; } - .profile-modal .profile-card-main { background: #45474d; diff --git a/css/style.css b/css/style.css index ff61c80..0eb37ad 100644 --- a/css/style.css +++ b/css/style.css @@ -1412,6 +1412,7 @@ ol.toptrends-list { .modal-wrapper .modal-content { background: #fff; + height: 690px; overflow-y: auto; } @@ -1563,6 +1564,7 @@ ol.toptrends-list { } .new-user .modal-content { + height: 550px; padding: 25px; } diff --git a/js/interface_common.js b/js/interface_common.js index ad4f5f9..459a8d8 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -28,17 +28,6 @@ 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; @@ -105,14 +94,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')); - var modal = openModal({ + content = openModal({ classAdd: 'profile-modal', content: content, title: polyglot.t('users_profile', {username: username}) - }); + }).content; // setup follow button in profile modal window - var button = modal.content.find('.profile-card-buttons .follow'); + var button = content.find('.profile-card-buttons .follow'); if (button) { if (followingUsers.indexOf(username) !== -1) toggleFollowButton(username, true, function() {setTimeout(loadModalFromHash, 500);}); @@ -120,13 +109,8 @@ function openProfileModalWithUsernameHandler(username) { button.on('click', userClickFollow); } - 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()); + content.find('.postboard') // potentially dangerous fix because it's supposed for vertical oriented profile modals + .height(content.outerHeight() - content.find('.profile-card').outerHeight()); } function openHashtagModalFromSearchHandler(hashtag) { diff --git a/theme_calm/css/profile.css b/theme_calm/css/profile.css index adf7f4a..13f7120 100644 --- a/theme_calm/css/profile.css +++ b/theme_calm/css/profile.css @@ -335,13 +335,12 @@ .profile-modal .postboard h2 { width: auto; } - -.profile-modal .postboard-posts { +.profile-modal .postboard-posts +{ display: block; - height: 100%; + height: 90%; 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 c91f8fc..29c185f 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -1772,6 +1772,7 @@ textarea.splited-post { .modal-wrapper .modal-content { background: #fff; + height: 690px; overflow-y: auto; } @@ -1931,6 +1932,7 @@ 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 31d3d99..8db763f 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -395,10 +395,11 @@ 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: 580px; - margin: -290px 0 0 -490px; + height: 550px; + margin: -275px 0 0 -490px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -430,6 +431,7 @@ 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; @@ -450,8 +452,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: 100%; - overflow-y: auto; + height: 505px; + overflow: auto; } /* line 67, ../sass/_profile.sass */ .profile-modal .modal-content .postboard-posts .post { @@ -1402,6 +1404,15 @@ 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; @@ -2142,7 +2153,7 @@ ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-prof .who-follow { display: block; position: absolute; - bottom: 10px; + bottom: 50px; text-align: center; padding: 10px; font-size: 12px; @@ -2590,7 +2601,6 @@ ol.toptrends-list a:hover { /* line 588, ../sass/style.sass */ .modal-content { background: #f3f2f1; - overflow-y: auto; padding: 20px; } @@ -2605,6 +2615,7 @@ ol.toptrends-list a:hover { z-index: 2; margin-top: -60px; margin-left: -60px; + width: 100px; width: 520px; } /* line 599, ../sass/style.sass */ @@ -2789,12 +2800,17 @@ ol.toptrends-list a:hover { /****** DIRECT MESSAGES MODAL********* */ /* line 736, ../sass/style.sass */ .modal-wrapper.directMessages { + top: 10%; width: 520px; height: 600px; - margin: -300px 0 0 -260px; + overflow-x: hidden; + margin: 0 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; @@ -2973,10 +2989,16 @@ 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: -300px 0 0 -260px; + margin: 0 0 0 -260px; +} +/* line 890, ../sass/style.sass */ +.hashtag-modal .modal-content { + overflow-y: auto; + height: 500px; } /* line 895, ../sass/style.sass */ @@ -2988,9 +3010,16 @@ ol.toptrends-list a:hover { /* line 901, ../sass/style.sass */ .modal-wrapper.conversation-modal { background: white; + top: 10%; width: 520px; - height: 580px; - margin: -290px 0 0 -260px; + height: 575px; + overflow: hidden; + margin: 0 0 0 -260px; +} +/* line 909, ../sass/style.sass */ +.conversation-modal .modal-content { + overflow-y: auto; + height: 90%; } /* line 914, ../sass/style.sass */ @@ -3001,20 +3030,19 @@ ol.toptrends-list a:hover { /****** FOLLOWING MODAL****** */ /* line 920, ../sass/style.sass */ .modal-wrapper.following-modal { + top: 10%; width: 520px; height: 400px; - margin: -200px 0 0 -260px; + overflow-x: hidden; + margin: 0 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; @@ -3027,13 +3055,17 @@ 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: 580px; - margin: -290px 0 0 -260px; + height: 555px; + overflow-x: hidden; + margin: -275px 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 3f27a82..ec5798c 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,14 +222,21 @@ .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 411c428..70f62b0 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: 580px +$modal-height: 550px $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: 100% +$modal-postboard-post-height: $modal-height - 45px /************************************* ******************* PROFILE MODAL @@ -17,6 +17,8 @@ $modal-postboard-post-height: 100% .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) @@ -40,7 +42,9 @@ $modal-postboard-post-height: 100% display: inline-block padding-right: 5px + .modal-content + height: 100% overflow: hidden padding: 0 position: relative @@ -54,11 +58,12 @@ $modal-postboard-post-height: 100% position: relative float: right width: $modal-right-col!important + .postboard-posts display: block height: $modal-postboard-post-height - overflow-y: auto + overflow: auto .postboard-posts .post padding: 0 .post-interactions @@ -73,13 +78,13 @@ $modal-postboard-post-height: 100% 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% @@ -163,7 +168,7 @@ $modal-postboard-post-height: 100% clear: both width: 100% - + #msngrswr display: none text-align: center @@ -185,7 +190,7 @@ $modal-postboard-post-height: 100% color: $main-color-dark &:hover color: $main-color-color - + .bitmessage-ctc:after, .tox-ctc:after font-family: $symbol-font-family content: '' @@ -199,7 +204,7 @@ $modal-postboard-post-height: 100% font-variant: normal text-transform: none line-height: 1em - + .profile-modal .profile-tox, .profile-bitmessage display: inline-block @@ -250,7 +255,7 @@ $modal-postboard-post-height: 100% .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 79aa579..9af9103 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: 10px + bottom: 50px 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,9 +779,11 @@ ol.toptrends-list /****** DIRECT MESSAGES MODAL**********/ .modal-wrapper.directMessages + top: 10% width: $postboard-modal-width - height: 600px - margin: -300px 0 0 0-($postboard-modal-width/2) + height: 490px + overflow-x: hidden + margin: 0 0 0 0-($postboard-modal-width/2) .post-area-new display: none margin: 0 -20px @@ -794,6 +796,9 @@ ol.toptrends-list display: inline!important .modal-content + overflow-y: auto + height: 300px + +box-sizing(border-box) width: $postboard-modal-width @@ -927,10 +932,14 @@ ol.toptrends-list /******** HASHTAG MODAL***********/ .modal-wrapper.hashtag-modal + top: 10% width: $postboard-modal-width height: 600px overflow: hidden - margin: -300px 0 0 0-($postboard-modal-width/2) + margin: 0 0 0 0-($postboard-modal-width/2) + .modal-content + overflow-y: auto + height: 500px .postboard padding: 0 @@ -938,38 +947,49 @@ ol.toptrends-list .modal-wrapper.conversation-modal background: white + top: 10% width: $postboard-modal-width - height: 580px - margin: -290px 0 0 0-($postboard-modal-width/2) + height: 575px + overflow: hidden + margin: 0 0 0 0-($postboard-modal-width/2) + .modal-content + overflow-y: auto + height: 90% .postboard padding: 0 /****** FOLLOWING MODAL*******/ .modal-wrapper.following-modal + top: 10% width: $postboard-modal-width height: 400px - margin: -200px 0 0 0-($postboard-modal-width/2) + overflow-x: hidden + margin: 0 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: 580px - margin: -290px 0 0 0-($postboard-modal-width/2) + height: 555px + overflow-x: hidden + margin: -275px 0 0 0-($postboard-modal-width/2) .modal-content padding: 15px + height: 480px + overflow-y: auto ol margin: 5px .open-profile-modal