made panes in entry view resizable

Katarzyna Krasnowska
1 parent 13420a2f
Showing 8 changed files with 66 additions and 8 deletions
entries/static/entries/css/entries.css
entries/static/entries/img/gutter-h.png
entries/static/entries/img/gutter-v.png
entries/static/entries/img/lemma.png
entries/static/entries/js/entries.js
entries/templates/entries.html
entries/templates/entry_display.html
entries/urls.py
@@ -177,3 +177,24 @@ legend {
     background-image: url("/static/entries/img/lemma.png");
     background-repeat: repeat;
 }
+
+.gutter {
+    background-color: #9e9e9e;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url("/static/entries/img/gutter-h.png");
+    cursor: col-resize;
+}
+
+.gutter.gutter-vertical {
+    background-image: url("/static/entries/img/gutter-v.png");
+    cursor: row-resize;
+}
+
+/* https://datatables.net/forums/discussion/56716/table-header-is-not-resizing-when-sidebar-is-hidden */
+.dataTables_scrollHeadInner, .table {
+    width:100% !important;
+}
@@ -1020,6 +1020,40 @@ function initialize_entries_list() {
  
 $(document).ready(function() {
  
+    Split(['#entries-list', '#entry-display'], {
+        sizes: [20, 80],
+        minSize: 300,
+        gutterSize: 4,
+        elementStyle: (dimension, size, gutterSize) => {
+            return {
+                'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+            }
+        },
+    });
+    
+    Split(['#semantics-top-pane', '#semantics-bottom-pane'], {
+        direction: 'vertical',
+        sizes: [75, 25],
+        gutterSize: 4,
+    });
+    
+    Split(['#syntax-schemata', '#syntax-examples-pane'], {
+        direction: 'vertical',
+        sizes: [75, 25],
+        gutterSize: 4,
+    });
+    
+    Split(['#semantics-frames', '#semantics-schemata'], {
+        sizes: [40, 60],
+        minSize: 400,
+        gutterSize: 4,
+        elementStyle: (dimension, size, gutterSize) => {
+            return {
+                'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+            }
+        },
+    });
+    
     adjust_heights();
  
     $(window).resize(adjust_heights);
@@ -17,6 +17,8 @@
 {% endblock %}
  
 {% block scripts %}
+    <!-- https://www.cssscript.com/split-view/ -->
+    <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
     <!-- https://datatables.net/ -->
     <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.22/sc-2.0.3/datatables.min.js"></script>
     <script src="{% static 'common/js/csrf.js' %}"></script>
@@ -59,7 +61,7 @@
  
 <div class="row h-100 m-0 p-0 bg-secondary">
     <!-- left panel: list of entries -->
-    <div id="entries-list" class="col-2 h-100 w-100 px-0 border-right border-primary">
+    <div id="entries-list" class="col h-100 w-100 px-0">
         <div id="filter-div" class="col p-0 bg-primary">
             <button type="button" id='filter-button' class="btn btn-primary" data-toggle="modal" data-target="#entry-filters">
             {% trans "Filtrowanie" %}
@@ -20,11 +20,11 @@
  
 <div class="tab-content h-100 w-100 p-0" id="entryTabsContent">
     <div class="col h-100 w-100 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab">
-        <div class="row h-75 p-0">
-            <div class="col-5 h-100 py-2 px-3 overflow-auto border-right border-primary" id="semantics-frames"></div>
-            <div class="col-7 h-100 py-2 px-3 overflow-auto" id="semantics-schemata"></div>
+        <div class="row p-0" id="semantics-top-pane">
+            <div class="col h-100 py-2 px-3 overflow-auto" id="semantics-frames"></div>
+            <div class="col h-100 py-2 px-3 overflow-auto" id="semantics-schemata"></div>
         </div>
-        <div class="row h-25 p-2 overflow-auto border-top border-primary">
+        <div class="row p-2 overflow-auto" id="semantics-bottom-pane">
             <table id="semantics-examples" class="table table-sm table-hover">
                 <thead>
                     <tr>
@@ -40,8 +40,8 @@
         </div>
     </div>
     <div class="col h-100 w-100 p-0 tab-pane" id="syntax" role="tabpanel" aria-labelledby="syntax-tab">
-        <div class="col h-75 w-100 py-2 px-3 overflow-auto" id="syntax-schemata"></div>
-        <div class="col h-25 w-100 p-2 overflow-auto border-top border-primary">
+        <div class="col w-100 py-2 px-3 overflow-auto" id="syntax-schemata"></div>
+        <div class="col w-100 p-2 overflow-auto" id="syntax-examples-pane">
             <table id="syntax-examples" class="table table-sm table-hover table-responsive">
                 <thead>
                     <tr>
@@ -13,6 +13,7 @@ urlpatterns = [
  
     path('autocomplete/', autocompletes.autocomplete, name='autocomplete'),
  
-    path('test/', views.test, name='test'),
+    # TODO remove!
+    #path('test/', views.test, name='test'),
     path('', views.entries, name='entries'),
 ]