Upgrade style on single contexts

site2/css/mystyle.css

@@ -2,6 +2,11 @@
   box-sizing: border-box;
 }
 
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
 html {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -130,14 +135,16 @@ html {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  min-width: 900px;
+  min-width: 780px;
   display: flex !important;
+  transition: all .5s linear;
 }
 
 #result {
   width: 100%;
   margin-bottom: 1rem;
   color: #212529;
+  height: fit-content;
 }
 
 #result .row {
@@ -193,6 +200,16 @@ padding: 15px 0px 0px 0px;
 font-weight: 500;
 }
 
+.toggle-buttons {
+  position: absolute;
+left: -60px;
+top: 0px;
+background-color: brown;
+color: #fff;
+font-weight: bold;
+padding: 15px;
+}
+
 /*
 
 #result .row:nth-child(even){
@@ -222,12 +239,19 @@ font-weight: 500;
 }
 
 #single-context-box {
-  margin-top: 3%;
-  width: 560px;
-background: #fff;
-border-radius: 3px;
-position: relative;
-margin-left: 20px;
+    background-color: #fff;
+    position: absolute;
+    margin-left: 20px;
+    overflow-y: scroll;
+    top: 570px;
+    right: 15px;
+    width: 40%;
+    max-width: 700px;
+}
+
+#single-context-box::before {
+  width:50px;
+  background-color: red;
 }
 
 .box {
@@ -237,8 +261,10 @@ margin-left: 20px;
   border-top-width: 1px;
 color: #777;
 border-top: none;
+background-color: #fff;
 }
 
+
 #context-title {
 font-size: 20px;
 font-size-adjust: 0.5;
@@ -262,7 +288,6 @@ border-top-right-radius: 3px;
 overflow: hidden;
 padding: 30px 15px;
 background-color: #efefef;
-border-radius: 15px 15px 0px 0px;
 border: 1px solid #777;
 color: #777;
 }
@@ -307,6 +332,11 @@ footer img {
   width: auto;
 }
 
+.container {
+  overflow: hidden;
+  max-width: 100%
+}
+
 
 /* The container must be positioned relative: */
 .custom-select {
@@ -403,3 +433,49 @@ footer img {
     display: block;
   }
 }
+
+.selected {
+  animation: slide-in 0.5s forwards;
+  -webkit-animation: slide-in 0.5s forwards;
+}
+
+.dismiss {
+  animation: slide-out 0.5s forwards;
+  -webkit-animation: slide-out 0.5s forwards;
+}
+
+@keyframes slide-in {
+  0% {
+    -webkit-transform: translateX(100%);
+  }
+  100% {
+    -webkit-transform: translateX(0%);
+  }
+}
+
+@-webkit-keyframes slide-in {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@-webkit-keyframes slide-out {
+  0% {
+    -webkit-transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform: translateX(100%);
+  }
+}

site2/index.html

@@ -156,40 +156,45 @@
       <span id="params"></span><br />
       <div class="row table-responsive">
          <div id="result" class="col"></div>
+      </div>
 
-         <div id="single-context-box" class="col-4" style="display: none;">
-            <div class="row box" id="context-title">
+      <div id="single-context-box" class="selected" style="display: none;">
+         <div class="toggle-buttons">
+            <a id="showFilePanel" style="display: none;">&lt;&lt;</a>
+            <a id="closeFilePanel">&gt;&gt;</a>
+         </div>
+         <div class="row box" id="context-title">
+         </div>
+         <div class="row box addin_box" id="additional_info" style="display: none;"></div>
+         <div class="row box" id="context-box">
+            <div class="box-label">
+               <p>Contesto</p>
             </div>
-            <div class="row box addin_box" id="additional_info" style="display: none;"></div>
-            <div class="row box" id="context-box">
-               <div class="box-label">
-                  <p>Contesto</p>
-               </div>
-               <div class="box-text">
-                  <div id="context-text"></div>
-               </div>
+            <div class="box-text">
+               <div id="context-text"></div>
             </div>
+         </div>
 
-            <div class="row box" id="notes_box" style="display: none;">
-               <div class="box-label">
-                  <p>Note</p>
-               </div>
-               <div class="box-text">
-                  <p id="notes-text"></p>
-               </div>
+         <div class="row box" id="notes_box" style="display: none;">
+            <div class="box-label">
+               <p>Note</p>
             </div>
-
-            <div class="row box" id="associated-text-box" style="display: none;">
-               <div class="box-label">
-                  <p>Testi associati</p>
-               </div>
-               <div class="box-text">
-                  <p id="associated-text"></p>
-               </div>
+            <div class="box-text">
+               <p id="notes-text"></p>
             </div>
+         </div>
 
+         <div class="row box" id="associated-text-box" style="display: none;">
+            <div class="box-label">
+               <p>Testi associati</p>
+            </div>
+            <div class="box-text">
+               <p id="associated-text"></p>
+            </div>
          </div>
+
       </div>
+
       <div class="row">
          <div id="navPagination"></div>
       </div>

site2/js/createSingleContext.js

@@ -2,7 +2,18 @@ import {getFormattedContext} from './format.js'
 
 export function createPage(elem) {
 
-    $("#single-context-box").css("display", "block");
+    $('#single-context-box').css("height", "");
+    $('#result').css("height", "");
+
+    $("#single-context-box").css("display", "table");
+    $(".table-responsive").css("width", "60%");
+
+    if ($('#single-context-box').hasClass('dismiss')) {
+      $('#single-context-box').removeClass('dismiss').addClass('selected').show();
+      $('#showFilePanel').css("display", "none");
+      $('#closeFilePanel').css("display", "block");
+      $('.table-responsive').css("width", "60%");
+    }
   
     var contesto = elem["contesto"];
     var titolo_abbreviato = "";
@@ -106,60 +117,25 @@ export function createPage(elem) {
     var container_div = document.getElementsByClassName('search_params');
     var count = container_div.length;
     console.log(count);
-    //let highlights = elem['highlights_combined'];
-    //let firstNum = highlights[0];
-    //let ind = parseInt(firstNum);
     let arrayStrings = [];
     let contesto_formattato = elem['contesto formattato'];
     var contesto = getFormattedContext(contesto_formattato);
   
-    /*let split_index = [ind];
-  
-    if (count>0) {
-      for (var i=1; i<count; i++) {
-        var hh = highlights[i][0];
-        var ii = parseInt(hh);
-        split_index.push(ii);
-      }
-    }
-  
-    split_index.sort(function(a, b){return a-b});
-  
-    var ll = split_index.length;
-    var tmp = 0;
-  
-    for (var j=0; j<split_index.length; j++) {
-      var num = split_index[j];
-      var snip = contesto.substring(tmp, num);
-      tmp = num;
-      arrayStrings.push(snip);
-    }
-  
-    var lastSnip = contesto.substring(split_index[ll-1]);
-    arrayStrings.push(lastSnip);
-  
-    console.log(arrayStrings);
-  
-    var la = arrayStrings.length;
-  
-    var newString = arrayStrings[0] + "<span class='highlight'>";
-  
-    
-      for (var x=1; x<arrayStrings.length; x++) {
-        var stringToAdd = arrayStrings[x].replace(" ", "</span> ");
-        newString = newString + stringToAdd + "<span class='highlight'>";
-      }
-    
-  
-    newString = newString.replace(/\n/g, "<br />");*/
-  
     document.getElementById("context-text").innerHTML = contesto;
     document.getElementById("context-title").innerHTML = title_box;
     document.getElementById("additional_info").innerHTML = add_info;
   
     document.getElementById("notes-text").innerHTML = note;
     document.getElementById("associated-text").innerHTML = testo_associato;
-    
+
+    var right=document.getElementById('single-context-box').offsetHeight;
+    var left=document.getElementById('result').offsetHeight;
+    console.log(right);
+    console.log(left);
+    if(left<right)
+    {
+        document.getElementById('single-context-box').style.height=left +"px";
+    }
   }
 
   export function writeStanza(stanza) {

site2/js/index.js

@@ -121,4 +121,24 @@ $("#btnGroupAddon").click(function() {
       
     }
   
+  });
+
+  $('#showFilePanel').click(function(event) {
+    if ($('#single-context-box').hasClass('dismiss')) {
+      $('#single-context-box').removeClass('dismiss').addClass('selected').show();
+      $('#showFilePanel').css("display", "none");
+      $('#closeFilePanel').css("display", "block");
+      $('.table-responsive').css("width", "60%");
+    }
+    event.preventDefault();
+  });
+  
+  $('#closeFilePanel').click(function(event) {
+    if ($('#single-context-box').hasClass('selected')) {
+      $('#single-context-box').removeClass('selected').addClass('dismiss');
+      $('#showFilePanel').css("display", "block");
+      $('#closeFilePanel').css("display", "none");
+      $('.table-responsive').css("width", "100%");
+    }
+    event.preventDefault();
   });

site2/js/toExport.js

@@ -22,6 +22,7 @@ export let queryDTO = {};
 
 export function funzioneRicerca(){
     $("#result").html("");
+    $("#single-context-box").css("display", "none");
     $("#loader").css("display", "block");
     let collection_elementoDaRicercare = document.getElementsByClassName("barraDiRicerca");
     var collection_types = document.getElementsByClassName("flViewBy");