flex grid su card

index.html

@@ -40,7 +40,7 @@
         <!--button id="print">Pdf "Desidera un mercato"</button-->
     </p>
     <p class="noprint" >
-        <button type="button" id="toggleinfo" onclick='$(".menoinfo").toggleClass("hide")'>Più o meno info</button>
+        <button type="button" id="toggleinfo" onclick='$(".card-hidden").toggleClass("hide")'>Più o meno info</button>
         <button type="button" onclick="myFunction()">Stampa PDF dettagliato</button>
         <button type="button" onclick="schedeBanco()">Stampa PDF schede Banco</button>
         <button type="button" id="exportcsv" onclick="exportCsv()" alt="Solo Nome, Referente, Nome referente di visita di ingresso, Località">Esporta CSV x sito</button>

software_export/css/main.css

@@ -1,118 +1,142 @@
 /*
  * Codice css per l'applicazione
  */
-
-
-body{
-   /* background-image: url(../images/agricoltura_bene_comune.png);*/
-        background-position: center;
-    background-repeat: space;
+body {
+  /* background-image: url(../images/agricoltura_bene_comune.png);*/
+  background-position: center;
+  background-repeat: space;
 }
+
 header.page-header {
-	margin-top: 0;
+  margin-top: 0;
 }
 
 header.page-header img {
-	margin-top: 9px;
-	background-color: white;
-	border-radius: 5px;
-	border-top-left-radius: 50px;
-	border-top-right-radius: 50px;
+  margin-top: 9px;
+  background-color: white;
+  border-radius: 5px;
+  border-top-left-radius: 50px;
+  border-top-right-radius: 50px;
 }
 
 header.page-header nav {
-	margin-top: 15px;
+  margin-top: 15px;
 }
 
 section.page-body {
-	margin-top: 20px;
-	margin-bottom: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
+
 .card.accordion.shuffle-item.filtered {
-    border: solid 1px goldenrod;
+  border: solid 1px goldenrod;
 }
-    .col-sm-12.card.accordion.shuffle-item.filtered {}
-h5{
-margin: 1.5em 0em;
-    font-weight: 600;
-text-transform: uppercase;
-    
+
+/*grid per schermi grandi ed orizzontali*/
+.card {
+  display: flex;
 }
+
+.card-body {
+  order: 1;
+}
+
+.card-header {
+  order: 2;
+}
+
+h5 {
+  margin: 1.5em 0em;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 2.6em;
+}
+
 span {
-    line-height: 1;
+  line-height: 1;
 }
+
 span.info {
-    line-height: 1;
-    margin-bottom: 1em;
-    display: inline-block;
+  line-height: 1;
+  margin-bottom: 1em;
+  display: inline-block;
 }
 
 div.comics-container {
-	padding: 5px;
-	text-align: center;
-	height: auto;
-    background:white;
+  padding: 5px;
+  text-align: center;
+  height: auto;
+  background: white;
 }
 
 article.comics {
-	border: 1px solid #ccc;
+  border: 1px solid #ccc;
 }
 
 img.cover {
-	max-height: 253px;
+  max-height: 253px;
 }
 
 footer.page-footer,
 header.page-header.aziende {
-	background-color:goldenrod;
+  background-color: goldenrod;
 }
+
 header.page-header.ingressi {
-	background-color:forestgreen;
+  background-color: forestgreen;
 }
+
 header.page-header.scartati {
-	background-color:grey;
+  background-color: grey;
+}
+
+hide {
+  display: none !important;
+  height: 0;
 }
 
-    hide{
-        display:none !important;
-                height: 0;
-    }
-    
 .container-fluid {
-   /* max-width: 1048px;*/
+  /* max-width: 1048px;*/
 }
 
-@page default{
-margin: 2cm;
+@page default {
+  margin: 2cm;
 }
 
 @page :left {
-margin: 0.8cm;
+  margin: 0.8cm;
 }
 
 @page :right {
-margin: 0.8cm;
+  margin: 0.8cm;
 }
 
 @media print {
-    div.card{
-        font-size:12pt !important;
-        line-height: 1;
-    }
-    h5{
-margin: 10px 0px;
+  div.card {
+    font-size: 12pt !important;
+    line-height: 1;
+  }
+
+  h5 {
+    margin: 10px 0px;
     font-weight: 600;
-text-transform: uppercase;
-}
-input, .noprint{display:none !important;}
-    
-    div.card {page-break-after: always !important;
-        page-break-inside: avoid !important;}
-    
-    .card.accordion.shuffle-item.filtered {
+    text-transform: uppercase;
+  }
+
+  input, .noprint {
+    display: none !important;
+  }
+
+  div.card {
+    page-break-after: always !important;
+    page-break-inside: avoid !important;
+  }
+
+  .card.accordion.shuffle-item.filtered {
     border: none;
+  }
+
+  /* div.card{page-break-after: always}*/
+  /*div.filtered { }*/
+  /*div.card.accordion.shuffle-item.filtered { display:none !important;}*/
 }
-   /* div.card{page-break-after: always}*/
-/*div.filtered { }*/
-/*div.card.accordion.shuffle-item.filtered { display:none !important;}*/
-}

software_export/js/main.js

@@ -133,7 +133,7 @@ function Aziende(stringexel) {
       .attr("class", "card-body");
 
       var schede_infoprivate = schede.append("div")
-        .attr("class", "card-hidden");
+        .attr("class", "card-hidden, hide");
 
 /*hidden*/