Add page for testing shared styles and apply minor style cleanups (#12)

This commit is contained in:
Jim Winstead
2024-11-26 14:13:56 -08:00
committed by GitHub
parent ae7e8958e1
commit 6bf31bc984
4 changed files with 231 additions and 1 deletions

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
shared

View File

@@ -8,5 +8,14 @@ so there is no submodule required.
When running locally, you have to clone this repo and put it into your
web root as 'shared'.
To see the styles that are defined, you can run the standalone PHP server and
access the test page:
```sh
$ ln -s . shared
$ php -S localhost:9000
# view http://localhost:9000
```
If you are running a local version of one of the sites that uses
web-shared, you can also just access `http://localhost:PORT/shared/`

205
index.php Normal file
View File

@@ -0,0 +1,205 @@
<?php
/*
* This is a very simple page to demonstrate the layout features of the shared
* stylesheets.
*/
$available_styles = [ 'doc', 'master', 'people', 'qa', 'snaps', 'svn', 'wiki' ];
$requested_style = @$_REQUEST['style'];
$TITLE = "PHP Shared Test";
$LINKS = [
[ 'href' => '//www.php.net', 'text' => 'Main website' ],
[ 'href' => './', 'text' => 'Current' ],
[ 'href' => '//example.com', 'text' => 'Example' ],
];
$HEAD_WIKI = '';
$HEAD_RAND = '';
if (in_array($requested_style, $available_styles)) {
$SUBDOMAIN = "{$requested_style}(test)";
$CSS[] = "/styles/{$requested_style}.css";
} else {
$SUBDOMAIN = "test";
$CSS = [ ];
}
$SEARCH = [
'method' => 'get',
'action' => '//php.net/search.php',
'placeholder' => 'Text to search',
'name' => 'pattern',
'hidden' => [],
];
$CURRENT_PAGE = 'Current';
$lipsum = <<<LIPSUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
LIPSUM;
$short_lipsum = implode('', array_slice(preg_split('/([.\?!])/', $lipsum, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE), 0, 6));
$very_short_lipsum = implode('', array_slice(preg_split('/([.\?!])/', $lipsum, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE), 0, 2));
require_once 'templates/header.inc';
?>
<section class="mainscreen">
<h1>This is the H1</h1>
<p><?= $lipsum ?>
<h2>This is an H2</h2>
<p><?= $short_lipsum ?>
<h3>This is an H3</h3>
<p>Text with a <sup>superscript</sup> and a <sub>subscript</sub>.
<h4>This is an H4</h4>
<p>This is a <a href="//www.php.net">link to the PHP website</a>.
<h5>This is an H5</h5>
<p><?= $short_lipsum ?>
<h6>This is an H6</h6>
<p><?= $very_short_lipsum ?>
<h2>Warning</h2>
<div class="warning">
<?= $short_lipsum ?>
</div>
<h2>Lists</h2>
<h3>Ordered List</h3>
<ol>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<ol>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
</ol>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
</ol>
<h3>Unordered List</h3>
<ul>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<ul>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
</ul>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
<li><?= $very_short_lipsum ?>
</ul>
<h3>Definition List</h3>
<dl>
<dt>Definition term
<dd><?= $short_lipsum; ?>
<dt>Another definition
<dd><?= $short_lipsum; ?>
</dl>
<h2>Horizontal Rule</h2>
<hr>
<h2>Code</h2>
<pre><?php highlight_file('templates/footer.inc'); ?></pre>
<h2>Table</h2>
<table>
<caption>Table caption</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Table footer</th>
</tr>
</tfoot>
</table>
<h2>More text</h2>
<p><?=$lipsum?>
</section>
<section class="secondscreen">
<p><?= $short_lipsum ?>
<h2>Styles</h2>
<ul>
<li><a href="<?= $_SERVER['PHP_SELF'] ?>">Default</a>
<?php foreach ($available_styles as $style):?>
<li><a href="<?= $_SERVER['PHP_SELF'] . '?style=' . $style ?>"><?= $style ?></a>
<?php endforeach ?>
</ul>
<h2>Another H2</h2>
<p><?= $short_lipsum ?>
</section>
<?php
require_once 'templates/footer.inc';
/* vim: set ft=php et ts=2 sw=2: : */

View File

@@ -165,10 +165,16 @@ p {
margin: 0 0 1.5rem;
padding: 0 0.5em;
}
pre {
padding: 0 0.5em;
}
ul, ol {
margin: 0 0 1.5rem;
padding:0 0 0 2.5rem;
}
li > ul, li > ol {
margin: 0;
}
.clearfix:before,
.clearfix:after {
display:table;
@@ -237,7 +243,7 @@ section.fullscreen .current:before {
border: 1px solid #eecdde;
padding: 1em;
margin: 0px;
margin: 0 0 1.5rem;
text-align: center;
font-weight: bold;
@@ -250,6 +256,12 @@ section.fullscreen .current:before {
table {
border-spacing: 0;
width: 100%;
margin: 0 0 1.5rem;
}
table caption {
font-size: larger;
font-weight: bold;
margin-bottom: 0.5em;
}
tbody tr:nth-child(odd) {
background-color: #bbd;
@@ -398,6 +410,9 @@ th {
border: 1px solid #ccc;
border-radius: 2px;
}
.secondscreen p {
padding: 0.75em 0 0 0.75em;
}
.secondscreen > nav {
background-color: #e6e6e6;
border: 1px solid #ccc;