From 735fbd3abebf7beb584e5ba8e4ae8687311fdfb6 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Fri, 1 Dec 2017 22:39:24 -0700
Subject: [PATCH] Fix tile padding and margins to be nice and consistent

---
 lib/gencontent.php     | 3 ++-
 static/css/content.css | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/gencontent.php b/lib/gencontent.php
index d360a61..2e8e7d9 100644
--- a/lib/gencontent.php
+++ b/lib/gencontent.php
@@ -32,7 +32,7 @@ if (defined("EDIT_MODE") && EDIT_MODE == true) {
 <?php echo $pubcss; ?>
     }
     
-    <?php $pagesize = $database->get("page_sizes", ["sizewidth (width)", "sizeheight (height)"], ["sizeid" => $pubdata["page_size"]]); ?>
+<?php $pagesize = $database->get("page_sizes", ["sizewidth (width)", "sizeheight (height)"], ["sizeid" => $pubdata["page_size"]]); ?>
     .pub-content {
         max-width: <?php echo ($pubdata["landscape"] == 0 ? $pagesize["width"] : $pagesize["height"]); ?>;
         min-height: <?php echo ($pubdata["landscape"] == 0 ? $pagesize["height"] : $pagesize["width"]); ?>;
@@ -57,6 +57,7 @@ foreach ($tiles as $tile) {
             order: <?php echo $tile["order"]; ?>;
             width: <?php echo round((($tile["width"] * 1.0) / ($pubdata["columns"] * 1.0) * 100)); ?>%;
             flex-basis: <?php echo round((($tile["width"] * 1.0) / ($pubdata["columns"] * 1.0) * 100)); ?>%;
+            flex: 0 0 calc(<?php echo round((($tile["width"] * 1.0) / ($pubdata["columns"] * 1.0) * 100)); ?>% - 10px);
         }
     <?php
 }
diff --git a/static/css/content.css b/static/css/content.css
index 9e5b13e..d913e99 100644
--- a/static/css/content.css
+++ b/static/css/content.css
@@ -2,6 +2,8 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 5px;
 }
 
 .pub-content {
@@ -11,7 +13,7 @@
 }
 
 .tile {
-    padding: 10px;
+    margin: 5px;
 }
 
 .tile-html {
@@ -19,6 +21,10 @@
     min-height: 10px;
 }
 
+.tile-html img {
+    max-width: 100%;
+}
+
 @media print {
     .pub-content {
         height: 100%;