make modal inline warning optional for modal; fix modal content height; add CSS for `calm` and `nin`

css/style.css

@@ -1577,22 +1577,6 @@ ol.toptrends-list {
     font-weight: bold;
 }
 
-.modal-warn {
-    display: none;
-    background: #fffbc3;
-    font-size: 0.8em;
-    padding: 10px;
-    border: 3px solid #fff;
-}
-
-.modal-warn-close {
-    float:right;
-    font-size: 1.2em;
-    color: #e34f42;
-    cursor: pointer;
-    margin: -8px;
-}
-
 .modal-wrapper .modal-content {
     background: #fff;
     overflow-y: auto;
@@ -1662,6 +1646,23 @@ ol.toptrends-list {
     padding: 10px 15px;
 }
 
+.inline-warn {
+    background-color: #FEFEDF;
+    padding: 10px;
+}
+
+.inline-warn .close {
+    float: right;
+    font-size: 1.2em;
+    color: #e34f42;
+    cursor: pointer;
+    margin: -8px 2px 8px 8px;
+}
+
+.inline-warn .text {
+    font-size: 0.8em;
+}
+
 /*************************************
 ******** DIRECT MESSAGES MODAL *******
 **************************************/

home.html

@@ -422,14 +422,17 @@
             <span class="modal-back">&lt;</span>
             <span class="mark-all-as-read"></span>
         </div>
-        <div class="modal-warn">
-            <span class="modal-warn-close">&times;</span>
-            <span class="warn-text"></span>
-        </div>
         <div class="modal-content"></div>
         <div class="modal-blackout"></div>
     </div>
 
+    <div id="template-inline-warn">
+        <div class="inline-warn">
+            <div class="close">&times;</div>
+            <div class="text"></div>
+        </div>
+    </div>
+
     <div class="prompt-wrapper">
       <div class="modal-header">
         <h3></h3>

js/interface_common.js

@@ -57,16 +57,18 @@ function openModal(modal) {
 
     if (modal.title)
         modal.self.find('.modal-header h3').html(modal.title);
-    if (modal.warn)
-        modal.self.find('.modal-warn')
-            .show()
-            .find('.warn-text').html(modal.warn);
     if (modal.content)
         modal.content = modal.self.find('.modal-content')
             .append(modal.content);
     else
         modal.content = modal.self.find('.modal-content');
 
+    if (modal.warn)
+        twister.tmpl.modalComponentWarn.clone(true)
+            .insertBefore(modal.content)
+            .find('.text').html(modal.warn)
+        ;
+
     modal.self.appendTo('body').fadeIn('fast');  // FIXME maybe it's better to append it to some container inside body
 
     if (modal.classBase === '.modal-wrapper') {
@@ -75,7 +77,8 @@ function openModal(modal) {
 
         modal.drapper = $('<div>').appendTo(twister.html.detached);  // here modal goes instead detaching
 
-        modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
+        modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()
+            - modal.self.find('.inline-warn').outerHeight());
 
         var windowHeight = $(window).height();
         if (modal.self.outerHeight() > windowHeight) {
@@ -2460,6 +2463,27 @@ function replaceDashboards() {
 }
 
 function initInterfaceCommon() {
+    twister.tmpl.modalComponentWarn = extractTemplate('#template-inline-warn');
+    twister.tmpl.modalComponentWarn.find('.close').on('click',
+        function(event) {
+            var i = $(event.target).closest('.modal-wrapper').attr('data-modal-id');
+
+            if (!i || !twister.modal[i]) return;
+
+            var modal = twister.modal[i];
+
+            modal.self.find('.inline-warn').hide();
+
+            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);
+            }
+        }
+    );
     twister.tmpl.commonDMsList = extractTemplate('#template-direct-messages-list');
     twister.tmpl.uriShortenerMC = extractTemplate('#template-uri-shortener-modal-content');
     twister.tmpl.uriShortenerMC
@@ -2520,8 +2544,6 @@ function initInterfaceCommon() {
 
     $('.modal-back').on('click', function() {history.back();});
 
-    $('.modal-warn-close').on('click', function() {$(this).closest('.modal-warn').hide()});
-
     $('.prompt-close').on('click', closePrompt);
 
     $('button.follow').on('click', clickFollow);

theme_calm/css/style.css

@@ -2019,6 +2019,23 @@ textarea.splited-post {
     padding: 10px 15px;
 }
 
+.inline-warn {
+    background-color: #FEFEDF;
+    padding: 10px;
+}
+
+.inline-warn .close {
+    float: right;
+    font-size: 1.2em;
+    color: #e34f42;
+    cursor: pointer;
+    margin: -8px 2px 8px 8px;
+}
+
+.inline-warn .text {
+    font-size: 0.8em;
+}
+
 /*************************************
 ******** DIRECT MESSAGES MODAL *******
 **************************************/

theme_nin/css/style.css

@@ -2582,6 +2582,24 @@ ol.toptrends-list a:hover {
     margin: 4px;
 }
 
+
+.inline-warn {
+    background-color: #FEFEDF;
+    padding: 10px;
+}
+
+.inline-warn .close {
+    float: right;
+    font-size: 1.2em;
+    color: #e34f42;
+    cursor: pointer;
+    margin: -8px 2px 8px 8px;
+}
+
+.inline-warn .text {
+    font-size: 0.8em;
+}
+
 /*************************************
 *********** CONFIRM POPUP ************
 **************************************/