twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-02-05 11:34:25 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #259 from miguelfreitas/revert-258-tasty-fixes-8

Browse Source 
Revert "dynamic setting of content's height of modal windows on openn…
This commit is contained in:
miguelfreitas 2015-06-10 16:20:06 -03:00
commit edb0b64338
9 changed files with 123 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/profile.css
View File

@ -265,13 +265,12 @@
{ {
width: auto; width: auto;
} }
.profile-modal .postboard-posts
.profile-modal .postboard-posts { {
display: block; display: block;
height: 100%; height: 90%;
overflow: auto; overflow: auto;
} }
.profile-modal .profile-card-main .profile-modal .profile-card-main
{ {
background: #45474d; background: #45474d;

2
css/style.css
View File

@ -1412,6 +1412,7 @@ ol.toptrends-list {
.modal-wrapper .modal-content { .modal-wrapper .modal-content {
background: #fff; background: #fff;
height: 690px;
overflow-y: auto; overflow-y: auto;
} }
@ -1563,6 +1564,7 @@ ol.toptrends-list {
} }
.new-user .modal-content { .new-user .modal-content {
height: 550px;
padding: 25px; padding: 25px;
} }

26
js/interface_common.js
View File

@ -28,17 +28,6 @@ function openModal(modal) {
else else
modal.content = modal.self.find('.modal-content'); 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'); modal.self.prependTo('body').fadeIn('fast');
return modal; return modal;
@ -105,14 +94,14 @@ function openProfileModalWithUsernameHandler(username) {
content.find('.tox-ctc').attr('title', polyglot.t('Copy to clipboard')); content.find('.tox-ctc').attr('title', polyglot.t('Copy to clipboard'));
content.find('.bitmessage-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', classAdd: 'profile-modal',
content: content, content: content,
title: polyglot.t('users_profile', {username: username}) title: polyglot.t('users_profile', {username: username})
}); }).content;
// setup follow button in profile modal window // 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 (button) {
if (followingUsers.indexOf(username) !== -1) if (followingUsers.indexOf(username) !== -1)
toggleFollowButton(username, true, function() {setTimeout(loadModalFromHash, 500);}); toggleFollowButton(username, true, function() {setTimeout(loadModalFromHash, 500);});
@ -120,13 +109,8 @@ function openProfileModalWithUsernameHandler(username) {
button.on('click', userClickFollow); button.on('click', userClickFollow);
} }
var postboard = modal.content.find('.postboard'); content.find('.postboard') // potentially dangerous fix because it's supposed for vertical oriented profile modals
var postboardHeight = modal.content.outerHeight() - modal.content.find('.profile-card').outerHeight(); .height(content.outerHeight() - 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) { function openHashtagModalFromSearchHandler(hashtag) {

7
theme_calm/css/profile.css
View File

@ -335,13 +335,12 @@
.profile-modal .postboard h2 { .profile-modal .postboard h2 {
width: auto; width: auto;
} }
.profile-modal .postboard-posts
.profile-modal .postboard-posts { {
display: block; display: block;
height: 100%; height: 90%;
overflow: auto; overflow: auto;
} }
.profile-modal .postboard h2 span { .profile-modal .postboard h2 span {
font: 18px/40px 'Open Sans Condensed', sans-serif; font: 18px/40px 'Open Sans Condensed', sans-serif;
padding-left: 10px; padding-left: 10px;

2
theme_calm/css/style.css
View File

@ -1772,6 +1772,7 @@ textarea.splited-post {
.modal-wrapper .modal-content { .modal-wrapper .modal-content {
background: #fff; background: #fff;
height: 690px;
overflow-y: auto; overflow-y: auto;
} }
@ -1931,6 +1932,7 @@ textarea.splited-post {
} }
.new-user .modal-content { .new-user .modal-content {
height: 550px;
padding: 25px; padding: 25px;
} }

68
theme_nin/css/style.css
View File

@ -395,10 +395,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
/* line 17, ../sass/_profile.sass */ /* line 17, ../sass/_profile.sass */
.modal-wrapper.profile-modal { .modal-wrapper.profile-modal {
top: 50%;
width: 980px; width: 980px;
max-width: 98%; max-width: 98%;
height: 580px; height: 550px;
margin: -290px 0 0 -490px; margin: -275px 0 0 -490px;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-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 */ /* line 46, ../sass/_profile.sass */
.profile-modal .modal-content { .profile-modal .modal-content {
height: 100%;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: relative; position: relative;
@ -450,8 +452,8 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
/* line 63, ../sass/_profile.sass */ /* line 63, ../sass/_profile.sass */
.profile-modal .modal-content .postboard-posts { .profile-modal .modal-content .postboard-posts {
display: block; display: block;
height: 100%; height: 505px;
overflow-y: auto; overflow: auto;
} }
/* line 67, ../sass/_profile.sass */ /* line 67, ../sass/_profile.sass */
.profile-modal .modal-content .postboard-posts .post { .profile-modal .modal-content .postboard-posts .post {
@ -1402,6 +1404,15 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
display: none !important; 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 */ /* line 232, ../sass/_following.sass */
.mini-following-info { .mini-following-info {
width: 45px; width: 45px;
@ -2142,7 +2153,7 @@ ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-prof
.who-follow { .who-follow {
display: block; display: block;
position: absolute; position: absolute;
bottom: 10px; bottom: 50px;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
@ -2590,7 +2601,6 @@ ol.toptrends-list a:hover {
/* line 588, ../sass/style.sass */ /* line 588, ../sass/style.sass */
.modal-content { .modal-content {
background: #f3f2f1; background: #f3f2f1;
overflow-y: auto;
padding: 20px; padding: 20px;
} }
@ -2605,6 +2615,7 @@ ol.toptrends-list a:hover {
z-index: 2; z-index: 2;
margin-top: -60px; margin-top: -60px;
margin-left: -60px; margin-left: -60px;
width: 100px;
width: 520px; width: 520px;
} }
/* line 599, ../sass/style.sass */ /* line 599, ../sass/style.sass */
@ -2789,12 +2800,17 @@ ol.toptrends-list a:hover {
/****** DIRECT MESSAGES MODAL********* */ /****** DIRECT MESSAGES MODAL********* */
/* line 736, ../sass/style.sass */ /* line 736, ../sass/style.sass */
.modal-wrapper.directMessages { .modal-wrapper.directMessages {
top: 10%;
width: 520px; width: 520px;
height: 600px; height: 600px;
margin: -300px 0 0 -260px; overflow-x: hidden;
margin: 0 0 0 -260px;
} }
/* line 743, ../sass/style.sass */ /* line 743, ../sass/style.sass */
.directMessages .modal-content { .directMessages .modal-content {
width: 520px;
height: 560px;
overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -2973,10 +2989,16 @@ ol.toptrends-list a:hover {
/******** HASHTAG MODAL********** */ /******** HASHTAG MODAL********** */
/* line 884, ../sass/style.sass */ /* line 884, ../sass/style.sass */
.modal-wrapper.hashtag-modal { .modal-wrapper.hashtag-modal {
top: 10%;
width: 520px; width: 520px;
height: 600px; height: 600px;
overflow: hidden; 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 */ /* line 895, ../sass/style.sass */
@ -2988,9 +3010,16 @@ ol.toptrends-list a:hover {
/* line 901, ../sass/style.sass */ /* line 901, ../sass/style.sass */
.modal-wrapper.conversation-modal { .modal-wrapper.conversation-modal {
background: white; background: white;
top: 10%;
width: 520px; width: 520px;
height: 580px; height: 575px;
margin: -290px 0 0 -260px; 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 */ /* line 914, ../sass/style.sass */
@ -3001,20 +3030,19 @@ ol.toptrends-list a:hover {
/****** FOLLOWING MODAL****** */ /****** FOLLOWING MODAL****** */
/* line 920, ../sass/style.sass */ /* line 920, ../sass/style.sass */
.modal-wrapper.following-modal { .modal-wrapper.following-modal {
top: 10%;
width: 520px; width: 520px;
height: 400px; height: 400px;
margin: -200px 0 0 -260px; overflow-x: hidden;
margin: 0 0 0 -260px;
} }
/* line 926, ../sass/style.sass */ /* line 926, ../sass/style.sass */
.following-modal .modal-content { .following-modal .modal-content {
height: 300px;
overflow-y: auto;
padding: 0; padding: 0;
} }
/* line 229, ../sass/_following.sass */
.following-modal .postboard h2 {
display: none;
}
/* line 932, ../sass/style.sass */ /* line 932, ../sass/style.sass */
.following-modal ol { .following-modal ol {
margin: 5px; margin: 5px;
@ -3027,13 +3055,17 @@ ol.toptrends-list a:hover {
/******* WHO TO FOLLOW MODAL****** */ /******* WHO TO FOLLOW MODAL****** */
/* line 943, ../sass/style.sass */ /* line 943, ../sass/style.sass */
.modal-wrapper.who-to-follow-modal { .modal-wrapper.who-to-follow-modal {
top: 50%;
width: 520px; width: 520px;
height: 580px; height: 555px;
margin: -290px 0 0 -260px; overflow-x: hidden;
margin: -275px 0 0 -260px;
} }
/* line 949, ../sass/style.sass */ /* line 949, ../sass/style.sass */
.who-to-follow-modal .modal-content { .who-to-follow-modal .modal-content {
padding: 15px; padding: 15px;
height: 480px;
overflow-y: auto;
} }
/* line 955, ../sass/style.sass */ /* line 955, ../sass/style.sass */

15
theme_nin/sass/_following.sass
View File

@ -1,4 +1,4 @@
.following .following
width: 100%!important width: 100%!important
.following-list li .following-list li
@ -89,7 +89,7 @@
transition: padding-top .1s linear transition: padding-top .1s linear
background: $main-color-dark background: $main-color-dark
z-index: 3 z-index: 3
&:hover &:hover
@ -222,14 +222,21 @@
.swarm-status .swarm-status
display: none!important display: none!important
.following-modal
.modal-wrapper
width: 200px
h2
display: none
.mini-following-info .mini-following-info
width: 45px width: 45px
height: 45px height: 45px
text-align: center text-align: center
background: $bloc-background-color background: $bloc-background-color
margin: 1% margin: 1%
float: left float: left
&:after &:after
@extend .clear-fix @extend .clear-fix
.mini-screen-name, .mini-following-name .mini-screen-name, .mini-following-name
display: none display: none

23
theme_nin/sass/_profile.sass
View File

@ -2,12 +2,12 @@
// variables for width // variables for width
$modal-width: 980px $modal-width: 980px
$modal-height: 580px $modal-height: 550px
$modal-gut: 15px $modal-gut: 15px
$modal-postboard-height: $modal-height - 3*$modal-gut $modal-postboard-height: $modal-height - 3*$modal-gut
$modal-left-col: 400px $modal-left-col: 400px
$modal-right-col: ($modal-width - 2*$modal-gut) - $modal-left-col - $modal-gut $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 ******************* PROFILE MODAL
@ -17,6 +17,8 @@ $modal-postboard-post-height: 100%
.modal-wrapper .modal-wrapper
width: $modal-width width: $modal-width
max-width: 98% max-width: 98%
position: absolute
top: 50%
+box-sizing(border-box) +box-sizing(border-box)
height: $modal-height height: $modal-height
margin: 0-($modal-height/2) 0 0 0-($modal-width/2) margin: 0-($modal-height/2) 0 0 0-($modal-width/2)
@ -40,7 +42,9 @@ $modal-postboard-post-height: 100%
display: inline-block display: inline-block
padding-right: 5px padding-right: 5px
.modal-content .modal-content
height: 100%
overflow: hidden overflow: hidden
padding: 0 padding: 0
position: relative position: relative
@ -54,11 +58,12 @@ $modal-postboard-post-height: 100%
position: relative position: relative
float: right float: right
width: $modal-right-col!important width: $modal-right-col!important
.postboard-posts .postboard-posts
display: block display: block
height: $modal-postboard-post-height height: $modal-postboard-post-height
overflow-y: auto overflow: auto
.postboard-posts .post .postboard-posts .post
padding: 0 padding: 0
.post-interactions .post-interactions
@ -73,13 +78,13 @@ $modal-postboard-post-height: 100%
letter-spacing: 0 letter-spacing: 0
text-transform: none text-transform: none
color: lighten($dark-grey, 30%) color: lighten($dark-grey, 30%)
padding: 5px 0 padding: 5px 0
margin: 0 margin: 0
font-size: 13px font-size: 13px
line-height: 13px line-height: 13px
/* Profile card*/ /* Profile card*/
.profile-card .profile-card
height: 100% height: 100%
@ -163,7 +168,7 @@ $modal-postboard-post-height: 100%
clear: both clear: both
width: 100% width: 100%
#msngrswr #msngrswr
display: none display: none
text-align: center text-align: center
@ -185,7 +190,7 @@ $modal-postboard-post-height: 100%
color: $main-color-dark color: $main-color-dark
&:hover &:hover
color: $main-color-color color: $main-color-color
.bitmessage-ctc:after, .tox-ctc:after .bitmessage-ctc:after, .tox-ctc:after
font-family: $symbol-font-family font-family: $symbol-font-family
content: '' content: ''
@ -199,7 +204,7 @@ $modal-postboard-post-height: 100%
font-variant: normal font-variant: normal
text-transform: none text-transform: none
line-height: 1em line-height: 1em
.profile-modal .profile-modal
.profile-tox, .profile-bitmessage .profile-tox, .profile-bitmessage
display: inline-block display: inline-block
@ -250,7 +255,7 @@ $modal-postboard-post-height: 100%
.input-tox, .input-bitmessage .input-tox, .input-bitmessage
width: 90% width: 90%
margin-top: 10px margin-top: 10px
h2 h2
text-transform: none text-transform: none
font-weight: 700 font-weight: 700
font-size: .9em font-size: .9em

46
theme_nin/sass/style.sass
View File

@ -302,7 +302,7 @@ ul.userMenu-search-profiles
.who-follow .who-follow
display: block display: block
position: absolute position: absolute
bottom: 10px bottom: 50px
text-align: center text-align: center
padding: 10px padding: 10px
font-size: 12px font-size: 12px
@ -633,13 +633,13 @@ ol.toptrends-list
.modal-content .modal-content
@extend .clear-fix @extend .clear-fix
background: $background-light background: $background-light
overflow-y: auto
padding: 20px padding: 20px
.postboard h2 .postboard h2
position: fixed position: fixed
z-index: 2 z-index: 2
margin-top: -60px margin-top: -60px
margin-left: -60px margin-left: -60px
width: 100px
width: $postboard-modal-width width: $postboard-modal-width
span span
display: none display: none
@ -779,9 +779,11 @@ ol.toptrends-list
/****** DIRECT MESSAGES MODAL**********/ /****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages .modal-wrapper.directMessages
top: 10%
width: $postboard-modal-width width: $postboard-modal-width
height: 600px height: 490px
margin: -300px 0 0 0-($postboard-modal-width/2) overflow-x: hidden
margin: 0 0 0 0-($postboard-modal-width/2)
.post-area-new .post-area-new
display: none display: none
margin: 0 -20px margin: 0 -20px
@ -794,6 +796,9 @@ ol.toptrends-list
display: inline!important display: inline!important
.modal-content .modal-content
overflow-y: auto
height: 300px
+box-sizing(border-box) +box-sizing(border-box)
width: $postboard-modal-width width: $postboard-modal-width
@ -927,10 +932,14 @@ ol.toptrends-list
/******** HASHTAG MODAL***********/ /******** HASHTAG MODAL***********/
.modal-wrapper.hashtag-modal .modal-wrapper.hashtag-modal
top: 10%
width: $postboard-modal-width width: $postboard-modal-width
height: 600px height: 600px
overflow: hidden 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 .postboard
padding: 0 padding: 0
@ -938,38 +947,49 @@ ol.toptrends-list
.modal-wrapper.conversation-modal .modal-wrapper.conversation-modal
background: white background: white
top: 10%
width: $postboard-modal-width width: $postboard-modal-width
height: 580px height: 575px
margin: -290px 0 0 0-($postboard-modal-width/2) overflow: hidden
margin: 0 0 0 0-($postboard-modal-width/2)
.modal-content
overflow-y: auto
height: 90%
.postboard .postboard
padding: 0 padding: 0
/****** FOLLOWING MODAL*******/ /****** FOLLOWING MODAL*******/
.modal-wrapper.following-modal .modal-wrapper.following-modal
top: 10%
width: $postboard-modal-width width: $postboard-modal-width
height: 400px 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 .modal-content
height: 300px
overflow-y: auto
padding: 0 padding: 0
ol ol
margin: 5px margin: 5px
.open-profile-modal .open-profile-modal
&:hover &:hover
text-decoration: none text-decoration: none
.postboard
h2
display: none
/******* WHO TO FOLLOW MODAL*******/ /******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal .modal-wrapper.who-to-follow-modal
top: 50%
width: $postboard-modal-width width: $postboard-modal-width
height: 580px height: 555px
margin: -290px 0 0 0-($postboard-modal-width/2) overflow-x: hidden
margin: -275px 0 0 0-($postboard-modal-width/2)
.modal-content .modal-content
padding: 15px padding: 15px
height: 480px
overflow-y: auto
ol ol
margin: 5px margin: 5px
.open-profile-modal .open-profile-modal