Added gallery, Fixed lscom page, Compressed images

Update content.php, index.php, and 14 more files...

commons/content.php

@@ -218,6 +218,31 @@ function createElementNode(mixed $elementNode, string $prepend="", string $appen
 			} else {
 				echo('<div class="sidebar-divider"></div>');
 			}
+			break;
+		case "image":
+			// Parsing properties.
+			$_imgAlt = "";
+			$_imgSource = "/resources/Azias/imgs/placeholder.png";
+			if(array_key_exists("alt", $elementNode)) {
+				$_imgAlt = $elementNode["alt"];
+			}
+			if(array_key_exists("src", $elementNode)) {
+				$_imgSource = $elementNode["src"];
+			}
+			
+			// Reading and processing the modifiers.
+			$_modFillHeight = false;
+			if(array_key_exists("modifiers", $elementNode)) {
+				for ($i = 0; $i < count($elementNode["modifiers"]); $i++) {
+					if ($elementNode["modifiers"][$i] == "fill-height") {
+						$_modFillHeight = true;
+					}
+				}
+			}
+			
+			// Adding element.
+			echo('<img class="'.($_modFillHeight?'fill-height':'').'" src="'.$_imgSource.'" alt="'.$_imgAlt.'">');
+			
 			break;
 		case "h1":
 		case "h2":
@@ -389,7 +414,7 @@ function createElementNode(mixed $elementNode, string $prepend="", string $appen
 			
 			// Adding link if needed.
 			if(array_key_exists("link", $elementNode)) {
-				echo('<a href="'.$elementNode["link"].'">');
+				echo('<a href="'.$elementNode["link"].'" class="button-link">');
 			}
 			
 			// Opening button.
@@ -399,7 +424,7 @@ function createElementNode(mixed $elementNode, string $prepend="", string $appen
 					(array_key_exists("color", $elementNode)?' btn-'.$elementNode["color"]:'').
 					($_modRoundShape?' btn-rounded':'').
 					($_modCircleShape?' rounded-circle':'').
-					' mr-15"').'>');
+					'"').'>');
 			
 			// Adding content.
 			processStandardContentSubNode($elementNode);

content/index.php

@@ -269,6 +269,20 @@ if($content_has_error) {
 				</div>
 			</div>
 		</div>
+        
+        <!-- Custom modal, see: https://dev.to/nicm42/fading-in-and-fading-out-with-css-transitions-3lc1 -->
+        
+        <div class="modal" id="modal-content-image-viewer" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content modal-content-media w-three-quarter">
+                    <a id="modal-img-close" href="#" class="close" role="button" aria-label="Close">
+                        <span aria-hidden="true"><i class="fad fa-times"></i></span>
+                    </a>
+                    <img id="modal-img" src="/resources/Azias/imgs/placeholder.png" class="img-fluid ml-auto mr-auto" alt="modal-img">
+                </div>
+            </div>
+        </div>
+        
 		<?php include 'footer.php'; ?>
 	</div>
     <script src="/resources/HalfMoon/1.1.1/js/halfmoon.min.js"></script>

content/items/lscom-cli.json

@@ -111,15 +111,21 @@
       }
     },
 
-    {"type": "spacer", "size": 2},
-
     {
-      "type": "collapse",
+      "type": "container", "padding": 10,
-      "title": {"key": "content.commons.version.current"},
+      "modifiers": ["no-top-margin"],
-      "subtitle": {"en": "<i class=\"fab fa-windows mr-20\"></i>v2.1.0"},
+      "content": {
-      "modifiers": ["no-rounding", "no-padding-content", "horizontal-scroll"],
         "parts": [
           {
+            "type": "h1", "modifiers": ["no-top-margin"],
+            "content": {"key": "content.commons.version.current"}
+          },{
+            "type": "spacer", "size": 1
+          },{
+            "type": "container", "padding": 0,
+            "modifiers": ["no-bottom-padding", "no-top-margin", "card"],
+            "content": {
+              "parts": [{
                 "type": "table",
                 "modifiers": ["striped", "inner-bordered"],
                 "head": [
@@ -168,16 +174,28 @@
                     }
                   ]
                 ]
+              }]
+            }
           }
         ]
+      }
     },
 
     {
-      "type": "collapse",
+      "type": "container", "padding": 10,
-      "title": {"key": "content.commons.version.previous.multiple"},
+      "modifiers": ["no-top-margin"],
-      "modifiers": ["no-rounding", "no-padding-content", "no-top-margin", "closed", "horizontal-scroll"],
+      "content": {
         "parts": [
           {
+            "type": "h1", "modifiers": ["no-top-margin"],
+            "content": {"key": "content.commons.version.previous.multiple"}
+          },{
+            "type": "spacer", "size": 1
+          },{
+            "type": "container", "padding": 0,
+            "modifiers": ["no-bottom-padding", "no-top-margin", "card"],
+            "content": {
+              "parts": [{
                 "type": "table",
                 "modifiers": ["striped", "inner-bordered"],
                 "head": [
@@ -270,14 +288,27 @@
                     }
                   ]
                 ]
+              }]
+            }
           }
         ]
+      }
     },
 
     {
-      "type": "collapse",
+      "type": "container", "padding": 10,
-      "title": {"key": "content.commons.version.source"},
+      "modifiers": ["no-top-margin"],
-      "modifiers": ["no-rounding", "no-padding-content", "no-top-margin", "closed", "horizontal-scroll"],
+      "content": {
+        "parts": [
+          {
+            "type": "h1", "modifiers": ["no-top-margin"],
+            "content": {"key": "content.commons.version.source"}
+          },{
+            "type": "spacer", "size": 1
+          },{
+            "type": "container", "padding": 0,
+            "modifiers": ["no-bottom-padding", "no-top-margin", "card"],
+            "content": {
               "parts": [{
                 "type": "table", "modifiers": ["striped", "inner-bordered"],
                 "head": [{"key": "content.commons.version"}, {"key": "content.commons.download.multiple"}],
@@ -328,7 +359,12 @@
                 ]]
               }]
             }
+          }
+        ]
+      }
+    },
 
+    {"type": "spacer", "size": 1}
   ],
   "tags": ["application", "lscom", "purebasic", "windows"]
 }

content/items/test.json

@@ -48,16 +48,14 @@
             "content": {
               "parts": [
                 {
-                  "type": "paragraph", "modifiers": ["no-top-margin"],
+                  "type": "image", "modifiers": ["fill-height"],
-                  "content": {"en": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tempus nisl."}
+                  "alt": "Alt text", "src": "/resources/Azias/imgs/lscom/screen-cli-csv-2x-xBR.png"
-                },
+                },{
-                {
+                  "type": "image", "modifiers": ["fill-height"],
-                  "type": "paragraph", "modifiers": ["no-top-margin"],
+                  "alt": "Alt text", "src": "/resources/Azias/imgs/lscom/screen-cli-full-2x-xBR.png"
-                  "content": {"en": "Donec et sollicitudin tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."}
+                },{
-                },
+                  "type": "image", "modifiers": ["fill-height"],
-                {
+                  "alt": "Alt text", "src": "/resources/Azias/imgs/lscom/screen-cli-stylish-2x-xBR.png"
-                  "type": "paragraph", "modifiers": ["no-top-margin"],
-                  "content": {"en": "Nullam iaculis nec ex quis tincidunt. Cras mattis magna magna, id laoreet elit pharetra in. Cras lacinia tempus tincidunt."}
                 }
               ]
             }

resources/Azias/css/nibblepoker.lu.css

@@ -135,6 +135,15 @@ hr, hr.dark-mde, hr.subtle {
 	cursor: pointer;
 	height: 100%;
 }
+div.glider-slide > * {
+	border: var(--card-border-width) solid var(--dm-card-border-color);
+	box-shadow: inset 1px 0 25px 5px rgba(0, 0, 0, 0.1);
+}
+img.fill-height {
+	height: 100%;
+	object-fit: cover;
+	object-position: 0 0;
+}
 
 /* Content */
 /* Content > Search */
@@ -186,6 +195,10 @@ h3.content-search-title {
 div.content-tag-container a:not(:first-child) {
 	margin-left: 10px;
 }
+/* Adding a margin to buttons present right after another one */
+button + button, .button-link + .button-link > button {
+	margin-left: 1.5rem !important;
+}
 
 /* Gradient used on home page's applications card */
 @media (min-width: 993px) {
@@ -236,17 +249,3 @@ div.last-inner-collapse-border-fix {
 code.w-full {
 	white-space: pre;
 }
-
-/* Temporary */
-/*.glider >div {
-	border: 1px solid yellow;
-}
-.t01 > div {
-	border: 1px solid cyan;
-}
-.glider > div > * {
-	border: 1px solid green;
-}
-.glider, .t01 {
-	border: 1px solid deeppink !important;
-}/**/

resources/Azias/js/nibblepoker.lu.js

@@ -29,7 +29,7 @@ window.addEventListener('load', function(){
     document.querySelectorAll(".glider").forEach(element => {
         new Glider(element, {
             slidesToShow: 1,
-            draggable: true,
+            //draggable: true,
             scrollLock: true,
             scrollLockDelay: 125,
             rewind: true,
@@ -53,5 +53,24 @@ window.addEventListener('load', function(){
                 }
             ]
         });
+        element.childNodes[0].childNodes.forEach(childElement => {
+            if(childElement.childNodes[0].tagName === "IMG") {
+                childElement.childNodes[0].onclick = function() {
+                    let imageElement = document.getElementById("modal-img");
+                    imageElement.src = childElement.childNodes[0].src;
+                    imageElement.alt = childElement.childNodes[0].alt;
+                    halfmoon.toggleModal('modal-content-image-viewer');
+                    console.log("Opening image...");
+                };
+            }
         });
+    });
+
+    // It looks like ass, jesus...
+    let eImgModalCloseButton = document.getElementById("modal-img-close");
+    if(eImgModalCloseButton != null) {
+        eImgModalCloseButton.onclick = function() {
+            halfmoon.toggleModal('modal-content-image-viewer');
+        }
+    }
 })