Author: Jim Winstead (jimwins) Committer: GitHub (web-flow) Pusher: jimwins Date: 2024-11-26T14:13:56-08:00
Commit: https://github.com/php/web-shared/commit/6bf31bc98429079bc9876a57c16b807316e2e881 Raw diff: https://github.com/php/web-shared/commit/6bf31bc98429079bc9876a57c16b807316e2e881.diff Add page for testing shared styles and apply minor style cleanups (#12) Changed paths: A .gitignore A index.php M README.md M styles/defaults.css Diff: diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8a205e8 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +shared diff --git a/README.md b/README.md index 739947e..76410f3 100644 --- a/README.md +++ b/README.md @@ -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/` diff --git a/index.php b/index.php new file mode 100644 index 0000000..571a2c4 --- /dev/null +++ b/index.php @@ -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: : */ diff --git a/styles/defaults.css b/styles/defaults.css index e5110e5..eac58fc 100644 --- a/styles/defaults.css +++ b/styles/defaults.css @@ -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;
