[PHP-WEBMASTER] [web-php] redesign-downloads-page-prototype: Update layout

Mailing Lists php.webmaster
1

Author: Sergey Panteleev (saundefined)
Date: 2025-07-03T12:12:36+03:00

Commit: Update layout · php/web-php@d8af525 · GitHub
Raw diff: https://github.com/php/web-php/commit/d8af52531797c39db7fbfb30c52cf443c36b2aa1.diff

Update layout

Changed paths:
  M downloads-get-instructions.php
  M downloads.php
  M styles/theme-base.css

Diff:

diff --git a/downloads-get-instructions.php b/downloads-get-instructions.php
index 768600cee4..ac232001ed 100644
--- a/downloads-get-instructions.php
+++ b/downloads-get-instructions.php
@@ -25,31 +25,31 @@
<p>
     On the OSX command line shell, enter:
</p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
brew install php{$version}
-</pre></div></div>
+</pre></div>
<p>
To enable PHP in Apache add the following to httpd.conf and restart Apache:
</p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
LoadModule php_module \$HOMEBREW_PREFIX/opt/php/lib/httpd/modules/libphp.so

&lt;FilesMatch \.php$>
SetHandler application/x-httpd-php
&lt;/FilesMatch>
-</pre></div></div>
+</pre></div>
<p>
Finally, check DirectoryIndex includes index.php
</p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
DirectoryIndex index.php index.html
-</pre></div></div>
+</pre></div>
<p>
The php.ini and php-fpm.ini file can be found in:
</p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
\$HOMEBREW_PREFIX/etc/php/{$versionDir}/
-</pre></div></div>
+</pre></div>
</p>
ENDOSX;
     return;
@@ -62,10 +62,10 @@
<p>
     On the command line shell, enter:
</p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
sudo apt-get update
sudo apt-get install php
-</pre></div></div>
+</pre></div>
ENDAPT;
     } else {
         $version = match($_GET['version']) {
@@ -79,12 +79,12 @@
<p>
     On the command line shell, enter:
</p>
-<div class="example"><div class="example-contents screen"><pre>
+<div class="phpcode"><pre>
sudo apt -y install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update
sudo apt install php{$version}
-</pre></div></div>
+</pre></div>
ENDAPT;
     }
     return;
diff --git a/downloads.php b/downloads.php
index ad5a1a118e..241644b9e6 100644
--- a/downloads.php
+++ b/downloads.php
@@ -56,65 +56,68 @@ function option(string $id, string $value, string $desc)
?>
<h1>Downloads &amp; Installation Instructions</h1>

-<form>
-Get PHP for
-<select id="os" name="os">
- <?= option('os', 'linux', 'Linux'); ?>
- <?= option('os', 'osx', 'OSX'); ?>
- <?= option('os', 'windows', 'Windows'); ?>
-</select>
-
-<select id="osvariant" name="osvariant">
- <?= option('osvariant', 'linux-deb-buster', 'Debian Buster'); ?>
- <?= option('osvariant', 'linux-deb-bullseye', 'Debian Bullseye'); ?>
- <?= option('osvariant', 'linux-deb-bookworm', 'Debian Bookworm'); ?>
- <?= option('osvariant', 'linux-rpm-fedora41', 'Fedora 41'); ?>
- <?= option('osvariant', 'linux-rpm-fedora42', 'Fedora 42'); ?>
- <?= option('osvariant', 'linux-rpm-redhat', 'RedHat'); ?>
- <?= option('osvariant', 'osx-latest', 'Latest'); ?>
- <?= option('osvariant', 'windows-wsl', 'with WSL'); ?>
- <?= option('osvariant', 'windows-normal', 'without WSL'); ?>
-</select>
-
-to work on
-<select id="usage" name="usage">
- <?= option('usage', 'web', 'Web Development'); ?>
- <?= option('usage', 'cli', 'Command Line Libraries'); ?>
- <?= option('usage', 'fw-drupal', 'Drupal'); ?>
- <?= option('usage', 'fw-laravel', 'Laravel'); ?>
- <?= option('usage', 'fw-symfony', 'Symfony'); ?>
-</select>
-
-with
-<select id="version" name="version">
- <?= option('version', 'php84', 'version 8.4'); ?>
- <?= option('version', 'php83', 'version 8.3'); ?>
- <?= option('version', 'php82', 'version 8.2'); ?>
- <?= option('version', 'php81', 'version 8.1'); ?>
- <?= option('version', 'default', 'OS default version'); ?>
-</select>
-
-<input type='submit' value="Go!"></input>
-
-<br/>
-
-I want to have multiple versions at the same time:
-<input type="checkbox" id="multiversion" name="multiversion" label="I want to have multiple versions at the same time">
-</input>
+<form class="instructions-form">
+ <div class="instructions-row">
+ I want to use PHP for
+ <select id="usage" name="usage">
+ <?= option('usage', 'web', 'Web Development'); ?>
+ <?= option('usage', 'cli', 'Command Line Libraries'); ?>
+ <?= option('usage', 'fw-drupal', 'Drupal'); ?>
+ <?= option('usage', 'fw-laravel', 'Laravel'); ?>
+ <?= option('usage', 'fw-symfony', 'Symfony'); ?>
+ </select>.
+ </div>
+
+ <div class="instructions-row">
+ I work with
+ <select id="os" name="os">
+ <?= option('os', 'linux', 'Linux'); ?>
+ <?= option('os', 'osx', 'OSX'); ?>
+ <?= option('os', 'windows', 'Windows'); ?>
+ </select>
+ <select id="osvariant" name="osvariant">
+ <?= option('osvariant', 'linux-deb-buster', 'Debian Buster'); ?>
+ <?= option('osvariant', 'linux-deb-bullseye', 'Debian Bullseye'); ?>
+ <?= option('osvariant', 'linux-deb-bookworm', 'Debian Bookworm'); ?>
+ <?= option('osvariant', 'linux-rpm-fedora41', 'Fedora 41'); ?>
+ <?= option('osvariant', 'linux-rpm-fedora42', 'Fedora 42'); ?>
+ <?= option('osvariant', 'linux-rpm-redhat', 'RedHat'); ?>
+ <?= option('osvariant', 'osx-latest', 'Latest'); ?>
+ <?= option('osvariant', 'windows-wsl', 'with WSL'); ?>
+ <?= option('osvariant', 'windows-normal', 'without WSL'); ?>
+ </select>,
+ and use
+ <select id="version" name="version">
+ <?= option('version', 'php84', 'version 8.4'); ?>
+ <?= option('version', 'php83', 'version 8.3'); ?>
+ <?= option('version', 'php82', 'version 8.2'); ?>
+ <?= option('version', 'php81', 'version 8.1'); ?>
+ <?= option('version', 'default', 'OS default version'); ?>
+ </select>
+ </div>
+
+ <label for="multiversion" class="instructions-label">
+ I want to be able to use multiple PHP versions:
+ <input type="checkbox" id="multiversion" name="multiversion" value="Y"
+ <?= array_key_exists('multiversion', $_GET) && $_GET['multiversion'] === 'Y' ? 'checked' : '' ?>/>
+ </label>
+
+ <label for="source" class="instructions-label">
+ I want to compile everything from source:
+ <input type="checkbox" id="source" name="source" value="Y"
+ <?= array_key_exists('source', $_GET) && $_GET['source'] === 'Y' ? 'checked' : '' ?>/>
+ </label>
+
+ <div>
+ <button type="submit" class="button">Get Instructions</button>
+ </div>
</form>

<h2>Instructions</h2>
-<div id="instructions">
+<div id="instructions" class="instructions">
<?php include 'downloads-get-instructions.php'; ?>
</div>

-<!--
-<p>
- <a href="/manual/install.general.php">Installing PHP</a> is covered
- thoroughly in the PHP documentation.
-</p>
--->
-
<h2>Binaries</h2>

<p>
diff --git a/styles/theme-base.css b/styles/theme-base.css
index cc3116c7eb..45bbea5a9c 100644
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -508,6 +508,41 @@ div.classsynopsisinfo_comment {
     margin-top:1.5rem;
}

+.phpcode {
+ background-color: #FFF;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+ border-radius: 0 0 2px 2px;
+ overflow-x: auto;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 0 1.5rem;
+ box-sizing: border-box;
+ margin: 0;
+}
+
+.instructions {
+ margin-bottom: 2rem;
+}
+
+.instructions p {
+ margin: 1rem 0;
+}
+
+.instructions-form {
+ display: flex;
+ flex-direction: column;
+ gap: .75rem;
+ margin-bottom: 2rem;
+}
+
+.instructions-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
.warn {
     padding: .75rem 1rem;
     margin: 1.5rem 0 1.5rem 1.5rem;