Merge pull request #258 from slr/tasty-fixes-8

dynamic setting of content's height of modal windows on openning

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;

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;
 }
 

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) {

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;

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;
 }
 

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 */

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

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

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