From a561d1b63368c52c8b643e5134392961a45b81ff Mon Sep 17 00:00:00 2001
From: Lauri Ojansivu <x@xet7.org>
Date: Thu, 15 Dec 2022 06:06:27 +0200
Subject: [PATCH] For export/print print board/card, added some CSS better. Use
 browser print preview %20 etc setting to fit to page. Next: Card CSS.

Thanks to xet7 !

Related #4197,
related #1173
---
 client/components/cards/minicard.css      | 48 ++++++++++++++---------
 client/components/forms/forms.css         |  5 +++
 client/components/lists/list.css          | 11 ++++++
 client/components/main/header.css         | 13 ++++++
 client/components/swimlanes/swimlanes.css |  5 +++
 5 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/client/components/cards/minicard.css b/client/components/cards/minicard.css
index 0e05c260b..e92d0fa76 100644
--- a/client/components/cards/minicard.css
+++ b/client/components/cards/minicard.css
@@ -28,18 +28,20 @@
 .minicard-wrapper .multi-selection-checkbox + .minicard {
   margin-left: 8px;
 }
-.minicard {
-  padding: 6px 8px 2px;
-  position: relative;
-  flex: 1;
-  flex-wrap: wrap;
-  background-color: #fff;
-  min-height: 20px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-  border-radius: 2px;
-  color: #4d4d4d;
-  overflow: hidden;
-  transition: transform 0.2s, border-radius 0.2s;
+@media only screen {
+  .minicard {
+    padding: 6px 8px 2px;
+    position: relative;
+    flex: 1;
+    flex-wrap: wrap;
+    background-color: #fff;
+    min-height: 20px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    border-radius: 2px;
+    color: #4d4d4d;
+    overflow: hidden;
+    transition: transform 0.2s, border-radius 0.2s;
+  }
 }
 .minicard-details-menu-with-handle {
   float: right;
@@ -50,6 +52,12 @@
   float: right;
   font-size: 14px;
 }
+@media print {
+  .minicard-details-menu,
+  .minicard-details-menu-with-handle {
+    display: none;
+  }
+}
 .minicard.linked-board .linked-icon,
 .minicard.linked-card .linked-icon {
   display: inline-block;
@@ -134,13 +142,15 @@
   display: inline-block;
   margin-right: 5px;
 }
-.minicard .minicard-title p:last-child {
-  margin-bottom: 0;
-}
-.minicard .minicard-title .viewer {
-  display: block;
-  word-wrap: break-word;
-  max-width: 230px;
+@media only screen {
+  .minicard .minicard-title p:last-child {
+    margin-bottom: 0;
+  }
+  .minicard .minicard-title .viewer {
+    display: block;
+    word-wrap: break-word;
+    max-width: 230px;
+  }
 }
 .minicard .dates {
   display: flex;
diff --git a/client/components/forms/forms.css b/client/components/forms/forms.css
index 603d1552b..ee3480996 100644
--- a/client/components/forms/forms.css
+++ b/client/components/forms/forms.css
@@ -269,6 +269,11 @@ textarea::-moz-placeholder {
   margin-top: 0px;
   margin-bottom: 12px;
 }
+@media print {
+  .add-controls {
+    display: none;
+  }
+}
 .edit-controls button[type=submit],
 .add-controls button[type=submit],
 .edit-controls input[type=button],
diff --git a/client/components/lists/list.css b/client/components/lists/list.css
index 501940b06..a237c600a 100644
--- a/client/components/lists/list.css
+++ b/client/components/lists/list.css
@@ -88,6 +88,12 @@
 .list-header .list-header-menu {
   float: right;
 }
+@media print {
+  .list-header .list-header-menu,
+  .list-header .list-header-menu-icon {
+    display: none;
+  }
+}
 .list-header .list-header-plus-top {
   color: #a6a6a6;
   margin-right: 15px;
@@ -129,6 +135,11 @@
   text-decoration: none;
   animation: fadeIn 0.3s;
 }
+@media print {
+  .list-body .open-minicard-composer {
+    display: none;
+  }
+}
 .list-body .open-minicard-composer i.fa {
   margin-right: 7px;
 }
diff --git a/client/components/main/header.css b/client/components/main/header.css
index adb00b310..815260db4 100644
--- a/client/components/main/header.css
+++ b/client/components/main/header.css
@@ -252,6 +252,19 @@
     margin: -8px 0 -10px -10px;
   }
 }
+@media print {
+  #header-quick-access .allBoards,
+  #header-quick-access ul,
+  #header-quick-access .js-toggle-desktop-drag-handles,
+  #header-quick-access #notifications,
+  #header-quick-access #header-new-board-icon,
+  #header #header-main-bar .board-header-btns {
+    display: none;
+  }
+  #header #header-user-bar {
+    float: right;
+  }
+}
 .announcement .viewer {
   display: inline-block;
 }
diff --git a/client/components/swimlanes/swimlanes.css b/client/components/swimlanes/swimlanes.css
index 96cad9fe1..39aa42031 100644
--- a/client/components/swimlanes/swimlanes.css
+++ b/client/components/swimlanes/swimlanes.css
@@ -86,6 +86,11 @@
   padding: 5px 5px;
   font-size: 22px;
 }
+@media print {
+  .swimlane .swimlane-header-wrap .swimlane-header-menu {
+    display: none;
+  }
+}
 .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
   margin-left: 5px;
   padding-right: 20px;