use JS to enforce dynamically equal panel heights

comses · Sep 2, 2016 · d16323e · d16323e
1 parent bb69d42
commit d16323e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/catalog/citation/templates/includes/note_form.html b/catalog/citation/templates/includes/note_form.html
@@ -1,5 +1,5 @@
 <script type="text/html" id="note_form">
-<div class='panel panel-default assigned-panel'>
+<div id='notes' class='panel panel-default assigned-panel-group' data-mh='assigned-panel-group'>
     <div class='panel-heading'>
         <h4 class='panel-title'>Notes <button type="button" class="pull-right btn btn-xs btn-primary" data-bind="click: addNote"><i class="fa fa-plus-square"></i> Add Note </button></h4>
     </div>
@@ -106,6 +106,7 @@ <h4 class="modal-title">Add Note</h4>
             });
         };
     },
+    synchronous: true,
     template: { element: 'note_form' }
 });
 </script>
diff --git a/catalog/citation/templates/workflow/curator_publication_detail.html b/catalog/citation/templates/workflow/curator_publication_detail.html
@@ -12,7 +12,7 @@ <h4><span class='label label-as-badge label-primary'><b>STATUS:</b>
 <form id='curatorPublicationDetailForm' method="post" role="form">
     <div class="row">
         <div class="col-md-6">
-            <div class='panel panel-default assigned-panel'>
+            <div class='panel panel-default assigned-panel-group' data-mh='assigned-panel-group'>
                 <div class='panel-heading'>
                     <h4 class='panel-title'>Assigned to
                         <mark>
@@ -197,6 +197,8 @@ <h4 class='panel-title'>Assigned to
 
 {% block javascript %}
     {% include "includes/note_form.html" %}
+
+    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js'></script>
 
     <script type="text/javascript">
         var viewModelJson = $.parseJSON("{{ json | escapejs }}");
@@ -457,6 +459,7 @@ <h4 class='panel-title'>Assigned to
             };
             var model = new PublicationDetail(viewModelJson);
             ko.applyBindings(model);
+            $('.assigned-panel-group').matchHeight();
         });
     </script>
 {% endblock javascript %}
diff --git a/catalog/static/css/style.css b/catalog/static/css/style.css
@@ -9,8 +9,12 @@ body {
 .dashboard-box {
     height: 150px;
 }
-.assigned-panel {
-    height: 470px;
+.row-eq-height {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: -moz-box;
+    display: flex;
 }
 .google-blue {
     color: #4d90fe;