From d6512716ec9d10560760d59e0f80756d27a17329 Mon Sep 17 00:00:00 2001
From: Herwin <Herwin@DESKTOP-VH5FH4E.local>
Date: Wed, 13 Nov 2024 22:47:07 +0100
Subject: [PATCH] Added buttons page part, Patched docker compose file, Added
 clock display Update docker-compose.dev.yml, index.php, and 3 more files...

---
 docker-compose.dev.yml   |  2 +-
 htdocs/index.php         |  3 ++
 htdocs/parts/buttons.php | 74 ++++++++++++++++++++++++++++++++++++++++
 htdocs/parts/sidebar.php |  9 +++++
 scss/core/display.scss   |  4 +++
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 htdocs/parts/buttons.php

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 8ecdd24..85f92fd 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -9,7 +9,7 @@ services:
       - TZ=Europe/Brussels
     volumes:
       - ./htdocs:/var/www/html:ro
-      - ./apache2.conf:/etc/apache2/apache2.conf:ro
+      #- ./apache2.conf:/etc/apache2/apache2.conf:ro
     restart: unless-stopped
     stop_grace_period: 5s
     labels:
diff --git a/htdocs/index.php b/htdocs/index.php
index f50ba9f..4818cd0 100644
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -108,6 +108,9 @@
 
     <!-- Horizontal Rulers -->
     <?php include("./parts/horizontal_rulers.php"); ?>
+
+    <!-- Buttons -->
+    <?php include("./parts/buttons.php"); ?>
 </main>
 
 <footer class="d-flex flex-align-center w-full p-s py-xs">
diff --git a/htdocs/parts/buttons.php b/htdocs/parts/buttons.php
new file mode 100644
index 0000000..b7856f6
--- /dev/null
+++ b/htdocs/parts/buttons.php
@@ -0,0 +1,74 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+	header('HTTP/1.1 403 Forbidden'); die();
+}
+?>
+
+<a id="buttons"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Buttons
+        <i class="fa-solid fa-stop f-right"></i>
+        </h2>
+</div>
+<section class="p-s">
+    <p class="mb-s">
+        Buttons are components that can be formed using existing core classes and a couple of specific classes
+        for colors only.
+    </p>
+
+    <div class="grid col-2 grid-gap-xs">
+        <div>
+            <h3 class="t-w-500 t-size-12 mt-s">Unstyled button</h3>
+            <div class="m-s">
+                <button class="m-xs">My button</button>
+                <code class="d-block p-xxs border r-s mt-s">
+                    <b>button</b>
+                </code>
+            </div>
+        </div>
+        <div>
+            <h3 class="t-w-500 t-size-12 mt-s">Default styled button</h3>
+            <div class="m-s">
+                <button class="p-xs r-s border">Default button</button>
+                <code class="d-block p-xxs border r-s mt-s">
+                    button<b>.p-xs.r-s.border</b>
+                </code>
+            </div>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 mt-s">Colored buttons</h3>
+    <div class="m-s">
+        <p class="mb-s">
+            Buttons can also be colored in order to give direct visual feedback
+            on their intended action by simply giving them another class.
+        </p>
+        <div class="grid col-2 grid-gap-xs">
+            <div>
+                <button class="p-xs r-s border primary">Primary button</button>
+                <code class="d-block p-xxs border r-s mt-s">
+                    button.p-xs.r-s.border<b>.primary</b>
+                </code>
+            </div>
+            <div>
+                <button class="p-xs r-s border success">Success button</button>
+                <code class="d-block p-xxs border r-s mt-s">
+                    button.p-xs.r-s.border<b>.success</b>
+                </code>
+            </div>
+            <div>
+                <button class="p-xs r-s border warning">Warning button</button>
+                <code class="d-block p-xxs border r-s mt-s">
+                    button.p-xs.r-s.border<b>.warning</b>
+                </code>
+            </div>
+            <div>
+                <button class="p-xs r-s border error">Danger/Error button</button>
+                <code class="d-block p-xxs border r-s mt-s">
+                    button.p-xs.r-s.border<b>.error</b>
+                </code>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php
index 5ef15fa..0d16f63 100644
--- a/htdocs/parts/sidebar.php
+++ b/htdocs/parts/sidebar.php
@@ -96,4 +96,13 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             <span class="t-size-12">Horizontal Rulers</span>
         </p>
     </a>
+
+    <hr class="subtle">
+
+    <a class="a-hidden" href="#buttons">
+        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
+            <i class="fa-solid fa-stop pr-xs t-size-12 t-half-muted"></i>
+            <span class="t-size-12">Buttons</span>
+        </p>
+    </a>
 </nav>
diff --git a/scss/core/display.scss b/scss/core/display.scss
index 89daa59..b799770 100644
--- a/scss/core/display.scss
+++ b/scss/core/display.scss
@@ -6,6 +6,10 @@
 	display: none;
 }
 
+.d-block {
+	display: block;
+}
+
 .d-inline-block {
 	display: inline-block;
 }