瀏覽代碼

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
Lauri Ojansivu 2 年之前
父節點
當前提交
a561d1b633

+ 29 - 19
client/components/cards/minicard.css

@@ -28,18 +28,20 @@
 .minicard-wrapper .multi-selection-checkbox + .minicard {
 .minicard-wrapper .multi-selection-checkbox + .minicard {
   margin-left: 8px;
   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 {
 .minicard-details-menu-with-handle {
   float: right;
   float: right;
@@ -50,6 +52,12 @@
   float: right;
   float: right;
   font-size: 14px;
   font-size: 14px;
 }
 }
+@media print {
+  .minicard-details-menu,
+  .minicard-details-menu-with-handle {
+    display: none;
+  }
+}
 .minicard.linked-board .linked-icon,
 .minicard.linked-board .linked-icon,
 .minicard.linked-card .linked-icon {
 .minicard.linked-card .linked-icon {
   display: inline-block;
   display: inline-block;
@@ -134,13 +142,15 @@
   display: inline-block;
   display: inline-block;
   margin-right: 5px;
   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 {
 .minicard .dates {
   display: flex;
   display: flex;

+ 5 - 0
client/components/forms/forms.css

@@ -269,6 +269,11 @@ textarea::-moz-placeholder {
   margin-top: 0px;
   margin-top: 0px;
   margin-bottom: 12px;
   margin-bottom: 12px;
 }
 }
+@media print {
+  .add-controls {
+    display: none;
+  }
+}
 .edit-controls button[type=submit],
 .edit-controls button[type=submit],
 .add-controls button[type=submit],
 .add-controls button[type=submit],
 .edit-controls input[type=button],
 .edit-controls input[type=button],

+ 11 - 0
client/components/lists/list.css

@@ -88,6 +88,12 @@
 .list-header .list-header-menu {
 .list-header .list-header-menu {
   float: right;
   float: right;
 }
 }
+@media print {
+  .list-header .list-header-menu,
+  .list-header .list-header-menu-icon {
+    display: none;
+  }
+}
 .list-header .list-header-plus-top {
 .list-header .list-header-plus-top {
   color: #a6a6a6;
   color: #a6a6a6;
   margin-right: 15px;
   margin-right: 15px;
@@ -129,6 +135,11 @@
   text-decoration: none;
   text-decoration: none;
   animation: fadeIn 0.3s;
   animation: fadeIn 0.3s;
 }
 }
+@media print {
+  .list-body .open-minicard-composer {
+    display: none;
+  }
+}
 .list-body .open-minicard-composer i.fa {
 .list-body .open-minicard-composer i.fa {
   margin-right: 7px;
   margin-right: 7px;
 }
 }

+ 13 - 0
client/components/main/header.css

@@ -252,6 +252,19 @@
     margin: -8px 0 -10px -10px;
     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 {
 .announcement .viewer {
   display: inline-block;
   display: inline-block;
 }
 }

+ 5 - 0
client/components/swimlanes/swimlanes.css

@@ -86,6 +86,11 @@
   padding: 5px 5px;
   padding: 5px 5px;
   font-size: 22px;
   font-size: 22px;
 }
 }
+@media print {
+  .swimlane .swimlane-header-wrap .swimlane-header-menu {
+    display: none;
+  }
+}
 .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
 .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
   margin-left: 5px;
   margin-left: 5px;
   padding-right: 20px;
   padding-right: 20px;