Improved tables, Separated tables into core and site segments, rules and pages
Update index.php, sidebar.php, and 7 more files...
This commit is contained in:
parent
0a08a16f0b
commit
2d1b2eb8fd
@ -92,7 +92,7 @@
|
||||
<?php include("./parts/grids.php"); ?>
|
||||
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/tables.php"); ?>
|
||||
<?php include("./parts/tables_core.php"); ?>
|
||||
|
||||
<!-- Horizontal Rulers -->
|
||||
<?php include("./parts/horizontal_rulers.php"); ?>
|
||||
@ -102,6 +102,9 @@
|
||||
|
||||
<!-- Buttons -->
|
||||
<?php include("./parts/buttons.php"); ?>
|
||||
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/tables_site.php"); ?>
|
||||
</main>
|
||||
|
||||
<footer class="d-flex flex-align-center w-full p-s py-xs">
|
||||
|
||||
@ -75,7 +75,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables">
|
||||
<a class="a-hidden" href="#tables-core">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
@ -101,6 +101,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-site">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
182
htdocs/parts/tables_core.php
Normal file
182
htdocs/parts/tables_core.php
Normal file
@ -0,0 +1,182 @@
|
||||
<?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="tables-core"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Tables
|
||||
<i class="fa-solid fa-table f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles may slightly change again before the 1.0.0 release ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
Tables have no border, cell gap and other form of styling by default.<br>
|
||||
The cell's content are just aligned in the top of the cell.
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="debug">Cell 1.1</td>
|
||||
<td class="debug">Cell 1.2</td>
|
||||
<td class="debug">Cell 1.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug">Cell 2.1</td>
|
||||
<td class="debug">Cell 2.2</td>
|
||||
<td class="debug" rowspan="2">Cell 2.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug" colspan="2">Cell 3.1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-l">Cell content alignment</h3>
|
||||
<div class="p-xs">
|
||||
<p class="mb-s">
|
||||
The content of a table's cells can be uniformly changed via the
|
||||
<span class="code">.table-v-center</span> and <span class="code">.table-v-bottom</span> classes.
|
||||
</p>
|
||||
<div class="grid grid-col-3 grid-gap-s">
|
||||
<div>
|
||||
<p>Top (Default)</p>
|
||||
<table class="table-p-xs">
|
||||
<tr>
|
||||
<td class="debug">1.1</td>
|
||||
<td class="debug" rowspan="2">1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug">2.1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<p>Middle</p>
|
||||
<table class="table-p-xs table-v-center">
|
||||
<tr>
|
||||
<td class="debug">1.1</td>
|
||||
<td class="debug" rowspan="2">1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug">2.1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<p>End</p>
|
||||
<table class="table-p-xs table-v-bottom">
|
||||
<tr>
|
||||
<td class="debug">1.1</td>
|
||||
<td class="debug" rowspan="2">1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug">2.1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-l">Cell padding</h3>
|
||||
<p class="mb-s">
|
||||
All of a given table's cells can be padded uniformly by using the
|
||||
<span class="code">.table-p-X</span> class where <span class="code">X</span>
|
||||
can be replaced by any of the standard sizes.<br>
|
||||
Usable sizes:
|
||||
<span class="code">xxs</span>, <span class="code">xs</span>,
|
||||
<span class="code">s</span>, <span class="code">m</span>,
|
||||
<span class="code">l</span>, <span class="code">xl</span>
|
||||
</p>
|
||||
<div class="p-xs">
|
||||
<div class="grid grid-col-3 grid-col-medium-2 grid-gap-s">
|
||||
<div>
|
||||
<table class="table-p-xxs mb-s">
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 1.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 1.2</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 2.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 2.2</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="code">.table-p-xxs</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table-p-xs mb-s">
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 1.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 1.2</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 2.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 2.2</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="code">.table-p-xs</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table-p-s mb-s">
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 1.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 1.2</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 2.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 2.2</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="code">.table-p-s</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table-p-m mb-s">
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 1.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 1.2</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 2.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 2.2</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="code">.table-p-m</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table-p-l mb-s">
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 1.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 1.2</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 2.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 2.2</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="code">.table-p-l</span>
|
||||
</div>
|
||||
<div>
|
||||
<table class="table-p-xl mb-s">
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 1.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 1.2</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="debug"><div class="debug">Cell 2.1</div></td>
|
||||
<td class="debug"><div class="debug">Cell 2.2</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="code">.table-p-xl</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -5,7 +5,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="tables"></a>
|
||||
<a id="tables-site"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Tables
|
||||
<i class="fa-solid fa-table f-right"></i>
|
||||
@ -17,27 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
⚠️ These styles will change before the 1.0.0 release ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Unstyled table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
Unstyled tables have no cell gap, no border and no other form of styling.
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Cell 1.1</td>
|
||||
<td>Cell 1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 2.1</td>
|
||||
<td>Cell 2.2</td>
|
||||
</tr>
|
||||
</table>
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
<b>table>tr*2>td*2</b>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Stylish table</h3>
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the following classes:
|
||||
@ -68,7 +48,5 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
@ -13,3 +13,11 @@ $nibblepoker-background-root: "./";
|
||||
$include-grid-backgrounds: true;
|
||||
|
||||
$use-b64-backgrounds: true;
|
||||
|
||||
// Toggles the generation of any table cell padding rules.
|
||||
// See: core/table.scss
|
||||
$generate-table-padding-rules: true;
|
||||
|
||||
// Toggles the generation of the header and cell specific padding rules for tables. (Disabled by default)
|
||||
// See: core/table.scss
|
||||
$generate-table-header-cell-padding-rules: true;
|
||||
|
||||
40
scss/core/table.scss
Normal file
40
scss/core/table.scss
Normal file
@ -0,0 +1,40 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Tables */
|
||||
|
||||
tr, td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table-v-center {
|
||||
tr, td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-v-bottom {
|
||||
tr, td {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Core > Tables > Cell Padding */
|
||||
|
||||
@mixin table-padding-maker($size-key, $size-value) {
|
||||
.table-p-#{$size-key} {
|
||||
td, th {
|
||||
padding: #{$size-value};
|
||||
}
|
||||
}
|
||||
// TODO: Add header and cell padding rules
|
||||
}
|
||||
|
||||
@if($generate-table-padding-rules) {
|
||||
@include table-padding-maker("xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include table-padding-maker("xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include table-padding-maker("s", calc(#{$margin-base-size} * 0.75));
|
||||
@include table-padding-maker("m", #{$margin-base-size});
|
||||
@include table-padding-maker("l", calc(#{$margin-base-size} * 1.5));
|
||||
@include table-padding-maker("xl", calc(#{$margin-base-size} * 2.0));
|
||||
}
|
||||
@ -60,6 +60,7 @@
|
||||
@import 'core/position'; // /!\ Needs improvement !!!
|
||||
@import 'core/overflow'; // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
|
||||
@import 'core/lists';
|
||||
@import 'core/table';
|
||||
|
||||
/* Core > Rounding */
|
||||
@import 'core/rounding/global';
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
tr, td {
|
||||
vertical-align: top;
|
||||
}
|
||||
/* Site > Tables */
|
||||
|
||||
table.stylish {
|
||||
th {
|
||||
@ -27,31 +25,3 @@ table.stylish {
|
||||
|
||||
// See 'site/border.scss' for border fix.
|
||||
}
|
||||
|
||||
// Applying .p-xs and .p-s to all cells if needed
|
||||
// See 'core/spacing' for more info.
|
||||
.table-p-xs {
|
||||
td, th {
|
||||
padding: calc(#{$margin-base-size} * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.table-h-p-s {
|
||||
th {
|
||||
padding: calc(#{$margin-base-size} * 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.table-p-s {
|
||||
td, th {
|
||||
padding: calc(#{$margin-base-size} * 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: Move this out in its own alignment section...
|
||||
// Centers the cells' content vertically
|
||||
.table-v-center {
|
||||
tr, td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user