WIP - new content in tiles, with flipping disabled... about to change the flip behaviour to require a click

src/routes/+page.svelte

@@ -2,6 +2,8 @@
     export let data;
     const { webservices } = data;
 
+
+
     function processData(webservices) {
         let instances = 0;
         let current = {};
@@ -63,12 +65,12 @@
             }
 
         });
-        /*console.log('categories: ', categories);
+        //console.log('categories: ', categories);
-        console.log('analogues: ', analogues);
+        //console.log('analogues: ', analogues);
-        console.log('licenses: ', licenses);
+        //console.log('licenses: ', licenses);
-        console.log('statuses: ', statuses);
+        //console.log('statuses: ', statuses);
-        console.log('affiliates: ', affiliates);
+        //console.log('affiliates: ', affiliates);
-        console.log('hosts: ', hosts); */
+        //console.log('hosts: ', hosts);
 
         return {
             total_instances: instances,
@@ -102,6 +104,14 @@
         return keys;
     }
 
+    function toOxfordCommaString(arr) {
+        if (arr.length == 1) return arr;
+        else {
+            var last = arr.pop();
+            return arr.join(', ') + ', and ' + last;
+        }
+    }
+
     const results = processData(webservices);
    // console.log('results: ', results);
     /*console.log('stats = ' + results.total_instances);
@@ -116,13 +126,13 @@
     const statuses = results.instance_tags.statuses);
     const affiliates = results.instance_tags.affiliates);
     const hosts = results.instance_tags.hosts);*/
-    const categories = getKeys(results.tech_tags.categories);
+    const categories = getKeys(results.tech_tags.categories).sort();
     //const categories = results.tech_tags.categories);
-    const analogues = getKeys(results.tech_tags.analogues);
+    const analogues = getKeys(results.tech_tags.analogues).sort();
-    const licenses = getKeys(results.tech_tags.licenses);
+    const licenses = getKeys(results.tech_tags.licenses).sort();
-    const statuses = getKeys(results.instance_tags.statuses);
+    const statuses = getKeys(results.instance_tags.statuses).sort();
-    const affiliates = getKeys(results.instance_tags.affiliates);
+    const affiliates = getKeys(results.instance_tags.affiliates).sort();
-    const hosts = getKeys(results.instance_tags.hosts);
+    const hosts = getKeys(results.instance_tags.hosts).sort();
 
     //console.log('categories array: ', results.tech_tags.categories);
     //console.log('categories keys: ', categories);
@@ -139,43 +149,26 @@
     </div>
     <div class="filters">
         <div class="tag-list tech">
-            <div class="tags tech categories">
+            <div class="tags tech categories">{#each categories as category}<span class="tag category">{category}</span> {/each}</div>
-            {#each categories as category}<span class="tag category">{category}</span> {/each}
+            <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
-            </div>
+            <div class="tags tech licenses">{#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
-            <div class="tags tech analogues">
-            {#each analogues as analogue}
-                <span class="tag analogue">{analogue}</span>
-            {/each}
-            </div>
-            <div class="tags tech licenses">
-            {#each licenses as license}
-                <span class="tag license">{license}</span>
-            {/each}
-            </div>
         </div>
         <div class="tag-list instance">
-            <div class="tags instance statuses">
+            <div class="tags instance statuses">{#each statuses as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">{#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
-            {#each statuses as status}
+            <div class="tags instance hosts">{#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
-                <span class="tag status">{status}</span>
-            {/each}
-            </div>
-            <div class="tags instance affiliates">
-            {#each affiliates as affiliate}
-                <span class="tag affilate">{affiliate}</span>
-            {/each}
-            </div>
-            <div class="tags instance hosts">
-            {#each hosts as host}
-                <span class="tag host">{host}</span>
-            {/each}
-            </div>
         </div>
     </div>
     <div class="tiles">
         {#each technologies as technology}
         <div class="tile technology">
+            <div class="tile-inner">
+                <div class="tile-front">
                     <h2><a href="{technology.website}">{technology.name}</a></h2>
-            <!--<p>{technology.description}</p>-->
+                    {#if (technology.license)}<p class="license" title="The libre license for this project">License: <span class="value">{technology.license}</span></p>{/if}
+                    {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
+                    <p class="description">{technology.description}</p>
+                </div>
+                <div class="tile-back">
                     {#if hasInstances(technology)}
                     <div class="instances">
                         <ul class="instances">
@@ -192,6 +185,8 @@
                     </div>
                     {/if}
                 </div>
+            </div>
+        </div>
         {/each}
     </div>
 </div>
@@ -240,15 +235,62 @@
         grid-gap: 15px;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }
+    /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
     .tile {
-        box-sizing: border-box;
+        height: 460px;
-        box-shadow: 5px 5px 3px #71ba71;
         min-width: 250px;
         max-width: 400px;
-        padding: 0.8em 1.2em;
+        /*padding: 0.8em 1.2em;*/
         overflow: hidden;
+        perspective: 1000px; /* remove to remove 3D effect */
+    }
+    .tile-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        transition: transform 0.8s;
+        transform-style: preserve-3d;
+    }
+  /*  .tile:hover .tile-inner {
+        transform: rotateY(180deg);
+    } */
+    .tile-front, .tile-back {
+        position: absolute;
+        top: 30px;
+        width: 100%;
+        height: 90%;
+        -webkit-backface-visibility: hidden; /* Safari */
+        backface-visibility: hidden;
+        box-sizing: border-box;
+        box-shadow: 5px 5px 3px #71ba71;
         border: solid 3px #1e6831;
         background-color: #fff;
     }
+    .tile-front {
+        background-color: #ddd;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .tile-back {
+        background-color: #3b559;
+        transform: rotateY(180deg);
+    }
+    .tile-front h2 {
+        background-color: #999;
+        text-align: center;
+        padding: 0.5em;
+        margin: 0;
+    }
+    .tile-front h2 a { color: #eee; }
+    .tile-front h2 a:visited { color: #ddd; }
+    .tile-front .description {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 100%;
+    }
+    .tile-front p {
+        padding: 0 1em 0.2em 1em;
+    }
     .webservices li { list-style-type: none; }
+    .value { font-weight: bold; }
 </style>