From 54b0b1a2dac3f9cdfc77355ce28f90be70530c47 Mon Sep 17 00:00:00 2001
From: fr34k <fr34k@zom.bi>
Date: Wed, 11 Nov 2020 22:54:30 +0100
Subject: [PATCH] Css modified, added description and material

---
 css/projects.css    | 60 ++++++++++++++++++++++++++++++++++++++++-----
 show_collection.php | 18 ++++++++++----
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/css/projects.css b/css/projects.css
index 50db88c..1f75d6c 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -364,12 +364,6 @@ div.collection h1 {
     font-size: 36pt;
 }
 
-div.collection div.col-desc {
-    display: none;
-    padding: 10px;
-    text-align: justify;
-}
-
 /* Img Collections 
 =====================*/
 
@@ -396,6 +390,60 @@ div.collection div.col-desc {
     cursor: pointer;
 }
 
+/* Collection Items
+===================*/
+
+#collection_padding{
+    padding-top: 50px;
+}
+
+.ci_container{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+h1.collection_name{
+    font-size: 32pt;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+section.description{
+    text-align: justify;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.collection_item{
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 50px;
+    text-align: center;
+}
+
+.collection_item img{
+    object-fit: cover;
+    object-position: center;
+    width: 400px;
+    height: 400px;
+}
+
+.collection_item img:hover{
+    filter: brightness(50%);
+    cursor: pointer;
+}
+
+.collection_item h1{
+    margin-bottom: 10px;
+}
+
+p.ci_material{
+    font-size: 10pt;
+    margin-bottom: 5px;
+}
+
 /* Contacts
 ================== */
 
diff --git a/show_collection.php b/show_collection.php
index 679e010..a6a8ef3 100644
--- a/show_collection.php
+++ b/show_collection.php
@@ -3,7 +3,7 @@
   $db = new PDO('sqlite:projects_data/projects.db') or die('database error');
   include('header.tpl');
 ?>
-<div id="content_padding">
+<div id="collection_padding">
 <?php
 // get collection parameters
 $query = 'select id, name, description, cover_image from collections where id = :id';
@@ -14,13 +14,13 @@ $col_query->execute();
 $collection_info = $col_query->fetch();
 
 // get collection items
-$query = 'select name, material, description, cover_image from collection_items where collection_id = :id';
+$query = 'select name, material, description, cover_image, id from collection_items where collection_id = :id';
 $ci_query = $db->prepare($query);
 $ci_query->bindParam(':id', $_REQUEST['id']);
 $ci_query->execute();
 ?>
 
-<h1>
+<h1 class="collection_name">
     <? print($collection_info['name']); ?>
 </h1>
 <section class="description">
@@ -36,9 +36,17 @@ foreach($ci_query->fetchAll() as $ci) {
     }
     $ci_img_url = 'projects_data/img/' . $ci['cover_image'];
     print("
-        <div class='collection-item'>
-            <img src='{$ci_img_url}' alt='Cover picture of {$ci['name']}' />
+        <div class='collection_item'>
+            <a href='show_ci.php?id={$ci['id']}'>
+                <img src='{$ci_img_url}' alt='Cover picture of {$ci['name']}' />
+            </a>
             <h1>{$ci['name']}</h1>
+            <p class='ci_material'>
+                {$ci['material']}
+            </p>
+            <p>
+                {$ci['description']}
+            </p>
         </div>
     ");
 }