twisterarmy
/
twister-html
mirror of https://github.com/twisterarmy/twister-html.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

dynamic setting of content height of modal windows on openning, fix of CSS

master
Simon Grim 10 years ago
parent
cab3fe85b0
commit
e377325a07
9 changed files with 73 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      css/profile.css
  2. 2
      css/style.css
  3. 26
      js/interface_common.js
  4. 7
      theme_calm/css/profile.css
  5. 2
      theme_calm/css/style.css
  6. 68
      theme_nin/css/style.css
  7. 15
      theme_nin/sass/_following.sass
  8. 23
      theme_nin/sass/_profile.sass
  9. 46
      theme_nin/sass/style.sass

7
css/profile.css
Unescape View File

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

2
css/style.css
Unescape View File

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

26
js/interface_common.js
Unescape View File

@ -28,6 +28,17 @@ 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;
@ -94,14 +105,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'));
content = openModal({ var modal = 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 = content.find('.profile-card-buttons .follow'); var button = modal.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);});
@ -109,8 +120,13 @@ function openProfileModalWithUsernameHandler(username) {
button.on('click', userClickFollow); button.on('click', userClickFollow);
} }
content.find('.postboard') // potentially dangerous fix because it's supposed for vertical oriented profile modals var postboard = modal.content.find('.postboard');
.height(content.outerHeight() - content.find('.profile-card').outerHeight()); 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) { function openHashtagModalFromSearchHandler(hashtag) {

7
theme_calm/css/profile.css
Unescape View File

@ -335,12 +335,13 @@
.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: 90%; height: 100%;
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
Unescape View File

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

68
theme_nin/css/style.css
Unescape View File

@ -395,11 +395,10 @@ 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: 550px; height: 580px;
margin: -275px 0 0 -490px; margin: -290px 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;
@ -431,7 +430,6 @@ 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;
@ -452,8 +450,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: 505px; height: 100%;
overflow: auto; overflow-y: 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 {
@ -1404,15 +1402,6 @@ 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;
@ -2153,7 +2142,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: 50px; bottom: 10px;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
@ -2601,6 +2590,7 @@ 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;
} }
@ -2615,7 +2605,6 @@ 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 */
@ -2800,17 +2789,12 @@ 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;
overflow-x: hidden; margin: -300px 0 0 -260px;
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;
@ -2989,16 +2973,10 @@ 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: 0 0 0 -260px; margin: -300px 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 */
@ -3010,16 +2988,9 @@ 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: 575px; height: 580px;
overflow: hidden; margin: -290px 0 0 -260px;
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 */
@ -3030,19 +3001,20 @@ 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;
overflow-x: hidden; margin: -200px 0 0 -260px;
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;
@ -3055,17 +3027,13 @@ 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: 555px; height: 580px;
overflow-x: hidden; margin: -290px 0 0 -260px;
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
Unescape 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,21 +222,14 @@
.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
Unescape View File

@ -2,12 +2,12 @@
// variables for width // variables for width
$modal-width: 980px $modal-width: 980px
$modal-height: 550px $modal-height: 580px
$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: $modal-height - 45px $modal-postboard-post-height: 100%
/************************************* /*************************************
******************* PROFILE MODAL ******************* PROFILE MODAL
@ -17,8 +17,6 @@ $modal-postboard-post-height: $modal-height - 45px
.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)
@ -42,9 +40,7 @@ $modal-postboard-post-height: $modal-height - 45px
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
@ -58,12 +54,11 @@ $modal-postboard-post-height: $modal-height - 45px
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: auto overflow-y: auto
.postboard-posts .post .postboard-posts .post
padding: 0 padding: 0
.post-interactions .post-interactions
@ -78,13 +73,13 @@ $modal-postboard-post-height: $modal-height - 45px
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%
@ -168,7 +163,7 @@ $modal-postboard-post-height: $modal-height - 45px
clear: both clear: both
width: 100% width: 100%
#msngrswr #msngrswr
display: none display: none
text-align: center text-align: center
@ -190,7 +185,7 @@ $modal-postboard-post-height: $modal-height - 45px
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: ''
@ -204,7 +199,7 @@ $modal-postboard-post-height: $modal-height - 45px
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
@ -255,7 +250,7 @@ $modal-postboard-post-height: $modal-height - 45px
.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
Unescape View File

@ -302,7 +302,7 @@ ul.userMenu-search-profiles
.who-follow .who-follow
display: block display: block
position: absolute position: absolute
bottom: 50px bottom: 10px
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,11 +779,9 @@ 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: 490px height: 600px
overflow-x: hidden margin: -300px 0 0 0-($postboard-modal-width/2)
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
@ -796,9 +794,6 @@ 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
@ -932,14 +927,10 @@ 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: 0 0 0 0-($postboard-modal-width/2) margin: -300px 0 0 0-($postboard-modal-width/2)
.modal-content
overflow-y: auto
height: 500px
.postboard .postboard
padding: 0 padding: 0
@ -947,49 +938,38 @@ 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: 575px height: 580px
overflow: hidden margin: -290px 0 0 0-($postboard-modal-width/2)
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
overflow-x: hidden margin: -200px 0 0 0-($postboard-modal-width/2)
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: 555px height: 580px
overflow-x: hidden margin: -290px 0 0 0-($postboard-modal-width/2)
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

Write Preview
Loading…
Cancel
Save