aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added buttons page part, Patched docker compose file, Added clock display

Browse Source 
Update docker-compose.dev.yml, index.php, and 3 more files...
This commit is contained in:
Herwin 2024-11-13 22:47:07 +01:00
parent 4097bcca67
commit d6512716ec
5 changed files with 91 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.dev.yml
View File

@ -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:

3
htdocs/index.php
View File

@ -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">

74
htdocs/parts/buttons.php Normal file
View File

@ -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>

9
htdocs/parts/sidebar.php
View File

@ -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>

4
scss/core/display.scss
View File

@ -6,6 +6,10 @@
display: none;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}