Style in progress

site2/css/mystyle.css

@@ -1,3 +1,13 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.15;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
 #lauchSearch{
   margin:auto;
 }
@@ -11,14 +21,89 @@
 
 }
 
+.search_form::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
 #logo {
   width:100px;
   height:auto;
 }
 
+.search_params {
+  display: -ms-flexbox;
+  /*display: flex;*/
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 15px;
+  font-family: roboto,sans-serif;
+  -webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
+  -moz-box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
+  box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
+  background: #fff;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+.input-large, .input-medium {
+  position: relative;
+    margin-bottom: 23px;
+    padding: 16px 20px;
+    padding-bottom: 10px;
+    float: left;
+    margin-right: 10px;
+}
+
+.input-large {
+  width: 400px;
+}
+
+.input-medium {
+  width: 170px;
+  display: block;
+  text-transform: uppercase;
+  margin-left:20px;
+}
+
+.input-small {
+  width: 100px;
+  padding-top:15px;
+}
+
+.choose_param {
+  margin: 0 auto;
+}
+
+/*
+.row.input-options {
+  align-items: center;
+  margin-bottom: 20px;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-left: 25px;
+}
+
+.input-field {
+  width: calc(33.3333% - 30px);
+  position: relative;
+  text-transform: uppercase;
+  font-size: 12px;
+  border-bottom: 2px solid gray;
+  padding: 1rem 1.25rem 1rem 0rem;
+}
+
 .choose_param {
   margin-bottom: 2%;
 }
+*/
 
 .barraDiRicerca {
   width:70%;
@@ -38,15 +123,78 @@
   border: 1px solid grey;
   padding: 5px;
 }
+
+.table-responsive {
+  margin: 3% 0%;
+  font-size: 14px;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  min-width: 900px;
+  display: flex !important;
+}
+
 #result {
-  margin:3%;
-  font-size: 12px;
+  width: 100%;
+  margin-bottom: 1rem;
+  color: #212529;
 }
 
 #result .row {
   padding: 1%;
+  position: relative;
+  -webkit-transition: .3s all ease;
+  -o-transition: .3s all ease;
+  transition: .3s all ease;
+  color: #777;
+  font-weight: 400;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  font-weight: 300;
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+}
+
+#result .row::before {
+  top: -1px;
+}
+
+#result .row::after {
+  bottom: -1px;
+}
+
+#result .row:hover {
+  background-color: #f9fbff;
+  border: 1px solid #3498db;
+}
+
+.box-text {
+  width: 100%;
+display: -webkit-box;
+display: -webkit-flex;
+display: -moz-box;
+display: -ms-flexbox;
+display: flex;
+flex-wrap: wrap;
+justify-content: space-between;
+padding: 20px 35px 28px;
+font-size: 18px;
+}
+
+.box-label {
+  text-transform: uppercase;
+color: #fff;
+font-size: 18px;
+text-align: center;
+width: 100%;
+background-color: #4f4f4f;
+padding: 15px 0px 0px 0px;
+font-weight: 500;
 }
 
+/*
+
 #result .row:nth-child(even){
   background-color: #fff;
 }
@@ -55,8 +203,17 @@
   background-color: #efefef;
 }
 
+*/
+
 #first_row {
-  font-weight: bold;
+  font-weight: bold !important;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+#first_row:hover {
+  background-color: #fff !important;
+  border: none !important;
 }
 
 .highlight {
@@ -66,15 +223,48 @@
 
 #single-context-box {
   margin-top: 3%;
+  width: 560px;
+background: #fff;
+border-radius: 3px;
+position: relative;
+margin-left: 20px;
 }
 
 .box {
-  border: 1px solid black;
-  padding: 1% 3%;
+  border: 1px solid #777;
+  border-top-color: rgb(119, 119, 119);
+  border-top-style: solid;
+  border-top-width: 1px;
+color: #777;
+border-top: none;
 }
 
 #context-title {
-  font-weight: bold;
+font-size: 20px;
+font-size-adjust: 0.5;
+line-height: 1.2;
+text-transform: uppercase;
+min-height: 128px;
+position: relative;
+z-index: 1;
+display: -webkit-box;
+display: -webkit-flex;
+display: -moz-box;
+display: -ms-flexbox;
+display: flex;
+justify-content: center;
+align-items: center;
+background-repeat: no-repeat;
+background-size: cover;
+background-position: center;
+border-top-left-radius: 3px;
+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;
 }
 
 .page:not(#pag_1) {
@@ -198,3 +388,18 @@ footer img {
 .underlinethrough {
     text-decoration-line: underline line-through;
 }
+
+@media screen and (max-width: 767px) {
+  .row.input-options {
+    display: block;
+    width: 100%;
+  }
+
+  .input-field {
+    width:100%;
+  }
+
+  .table-responsive {
+    display: block;
+  }
+}

site2/index.html

@@ -60,7 +60,7 @@
             <div class="col search_params">
                
                <div class="row choose_param">
-                  <div class="col-5">
+                  <div class="input-large basic-search">
                      <div class="input-group form-check">
                         <input class="barraDiRicerca form-control" type="text" aria-label="Text input with dropdown button">
                            <select class="flViewBy">
@@ -69,39 +69,42 @@
                            </select>
                      </div>
                   </div>
-                  <div class="col-2">
-                     <div class="form-check">
-                        <input class="ricercaEx form-check-input" value="ricerca_espansa" type="checkbox" name="espansa" >
-                        <label class="form-check-label" for="checkbox1">
-                        Ricerca espansa
-                        </label>
-                     </div>
-                  </div>
-                  <div class="col-2">
-                     <div class="form-check">
-                        <input class="raddoppiata form-check-input" value="raddoppiata" type="checkbox" name="raddoppiata">
-                        <label class="form-check-label" for="checkbox2">
-                        Iniziale raddoppiata
-                        </label>
-                     </div>
-                  </div>
-                  <div id="mostra_altro" class="col-2">
-                     <div id="inner_altro" class="form-check">
-                        <input class="showOther form-check-input" value="mostra" type="checkbox" name="altro">
-                        <label class="form-check-label" for="showOther">
-                        Mostra <span id="mostraFormaLemma">lemmi</span>
-                        </label>
-                     </div>
-                     <div id="inner_lemmatizzato" class="form-check" style="display:none;">
-                        <input class="showLem form-check-input lemmatizzata" value="lemmatizzata" type="checkbox" name="lemmatizzata" disabled="true">
-                        <label class="form-check-label" for="showLem">
-                        Cerca solo lemmatizzate
-                        </label>
-                     </div>
-                  </div>
 
+                     
+                     
+                        <div class="input-medium input-field">
+                           <div class="form-check">
+                              <input class="ricercaEx form-check-input" value="ricerca_espansa" type="checkbox" name="espansa" >
+                              <label class="form-check-label" for="checkbox1">
+                              Ricerca espansa
+                              </label>
+                           </div>
+                        </div>
+                        <div class="input-medium input-field">
+                           <div class="form-check">
+                              <input class="raddoppiata form-check-input" value="raddoppiata" type="checkbox" name="raddoppiata">
+                              <label class="form-check-label" for="checkbox2">
+                              Iniziale raddoppiata
+                              </label>
+                           </div>
+                        </div>
+                        <div id="mostra_altro" class="input-medium input-field">
+                           <div id="inner_altro" class="form-check">
+                              <input class="showOther form-check-input" value="mostra" type="checkbox" name="altro">
+                              <label class="form-check-label" for="showOther">
+                              Mostra <span id="mostraFormaLemma">lemmi</span>
+                              </label>
+                           </div>
+                           <div id="inner_lemmatizzato" class="form-check" style="display:none;">
+                              <input class="showLem form-check-input lemmatizzata" value="lemmatizzata" type="checkbox" name="lemmatizzata" disabled="true">
+                              <label class="form-check-label" for="showLem">
+                              Cerca solo lemmatizzate
+                              </label>
+                           </div>
+                        </div>
+                       
+                  
                </div>
-
             </div>
 
          </div>
@@ -151,7 +154,7 @@
       </div>
 
       <span id="params"></span><br />
-      <div class="row">
+      <div class="row table-responsive">
          <div id="result" class="col"></div>
 
          <div id="single-context-box" class="col-4" style="display: none;">
@@ -160,7 +163,7 @@
             <div class="row box addin_box" id="additional_info" style="display: none;"></div>
             <div class="row box" id="context-box">
                <div class="box-label">
-                  <h3>Contesto</h3>
+                  <p>Contesto</p>
                </div>
                <div class="box-text">
                   <div id="context-text"></div>
@@ -169,7 +172,7 @@
 
             <div class="row box" id="notes_box" style="display: none;">
                <div class="box-label">
-                  <h3>Note</h3>
+                  <p>Note</p>
                </div>
                <div class="box-text">
                   <p id="notes-text"></p>
@@ -178,7 +181,7 @@
 
             <div class="row box" id="associated-text-box" style="display: none;">
                <div class="box-label">
-                  <h3>Testi associati</h3>
+                  <p>Testi associati</p>
                </div>
                <div class="box-text">
                   <p id="associated-text"></p>

site2/js/cercaContesti.js

@@ -1,6 +1,7 @@
 import {arrayResponse} from './processData.js'
-import {queryDTO, flask_be_address, getData} from './toExport.js'
+import {queryDTO, getData} from './toExport.js'
 import {processOccData, processSingleContext} from './processData.js' 
+import {flask_be_address} from './config.js'
 
 
 export function checkContext() {

site2/js/config.js

@@ -0,0 +1 @@
+export const flask_be_address = 'http://127.0.0.1:5000';

site2/js/createCooccorrenza.js

@@ -12,7 +12,7 @@ export function createNewCC(occ) {
     choose_param.className = "row choose_param";
   
     var col_6 = document.createElement('div');
-    col_6.className = "col-5";
+    col_6.className = "input-large basic-search";
   
     var input_group = document.createElement('div');
     input_group.className = "input-group form-check";
@@ -38,7 +38,7 @@ export function createNewCC(occ) {
     selectList.appendChild(optionLemma);
   
     var col_form = document.createElement("div");
-    col_form.className = "col-2";
+    col_form.className = "input-medium input-field";
   
     var form_check = document.createElement("div");
     form_check.className = "form-check";
@@ -54,7 +54,7 @@ export function createNewCC(occ) {
     label_ricerca_espansa.innerHTML = "Ricerca espansa";
   
     var col_form2 = document.createElement("div");
-    col_form2.className = "col-2";
+    col_form2.className = "input-medium input-field";
   
     var form_check2 = document.createElement("div");
     form_check2.className = "form-check";
@@ -70,7 +70,7 @@ export function createNewCC(occ) {
     label_ricerca_raddoppiata.innerHTML = "Iniziale raddoppiata";
   
     var col_form3 = document.createElement("div");
-    col_form3.className = "col-2";
+    col_form3.className = "input-medium input-field";
   
     var form_check3 = document.createElement("div");
     form_check3.className = "form-check";
@@ -87,7 +87,7 @@ export function createNewCC(occ) {
     label_ricerca_lemmatizzata.innerHTML = "Cerca solo lemmatizzate";
   
     var col_form4 = document.createElement("div");
-    col_form4.className = "col-1";
+    col_form4.className = "input-small input-field";
   
     var form_check4 = document.createElement("div");
     form_check4.className = "form-check deleteCC";

site2/js/index.js

@@ -5,6 +5,7 @@ import {createNewCC} from './createCooccorrenza.js'
 document.querySelector('#lauchSearch').addEventListener('click', funzioneRicerca);
 document.querySelector('#lauchSearchContext').addEventListener('click', checkContext);
 
+
 $(document).on("click", ".singleContext", function (ev) {
     var num = this.id;
     var parole = 31;

site2/js/toExport.js

@@ -1,6 +1,5 @@
 import {processData, processOccData} from './processData.js'
-
-export const flask_be_address = 'http://127.0.0.1:5000';
+import {flask_be_address} from './config.js'
 
 export function getData(endpoint, queryDTO){