Update layout: Color modes, jQuery removal, and more #186

robinheidrich · 2025-01-06T04:13:43Z

This improves the phpMyAdmin website. It updates the layout, many of the pages and cleans everything up a bit.

Changes

Updated Bootstrap to 5.3.3, which supports color modes, allowing selection between dark and light mode and auto-detection based on system preference. The color-modes.js script comes from the Bootstrap docs.
Removed jQuery and replaced colorbox with bs5-lightbox.
Removed Font Awesome and replaced it with SVG icons from Bootstrap Icons.
Updated the team page to use GitHub avatars and a better overview.
Updated the downloads page to make everything a little clearer, and show requirements of each version.
Updated the themes page to no longer use extra JavaScript code, removed the “All” filter and reversed the version listing.
And more...

Screenshots

Home page

Home page (light)

Download modal

Docs page

Team page

404 page

williamdes · 2025-01-06T21:09:38Z

data/awards.py

-<a href="https://digital.com/">Digital.com's</a></p>
-<p class="award"><a href="%(link)s">Best Database Management Software list</a></p>.
-<p>in January 2021.</p>
+<a href="https://digital.com/" target="_blank" rel="noopener noreferrer">Digital.com's</a>


You can remove the noreferrer from the awards page

williamdes · 2025-01-06T21:11:57Z

pmaweb/static/images/sponsors/github.png

could we have this one as svg ?

Sure. Unfortunately I was not able to find an SVG for Scrutinizer and Weblate 😕

@nijel can you provide a Weblate svg please ?

williamdes · 2025-01-06T21:12:41Z

pmaweb/static/images/sponsors/weblate.png

same, as svg would be great
ping @ nijel to have the asset if needed

This should be the one you have: https://github.com/WeblateOrg/graphics/blob/main/logo-text/Logo-Whitetext.svg

You are welcome to choose a different variant from that repo in case the white text is not the best fit.

williamdes · 2025-01-06T21:13:24Z

pmaweb/templates/_conservancy.html

-incorporated in New York, donors can often deduct the donation on their USA
-taxes.
+  phpMyAdmin is a member project of the 
+  <a href="https://sfconservancy.org" target="_blank" rel="noopener noreferrer">Software Freedom Conservancy</a>. 


same, remove noreferrer

Should I just remove noreferrer from all or only where you mentioned?

Honestly, I would say all

williamdes · 2025-01-06T21:14:04Z

pmaweb/templates/_download_button.html

+    id="downloadBtn"
+    class="btn btn-success" 
+    href="{{ file.get_absolute_url }}" 
+    download 


what is this attribute for ?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

Basically, it tells the browser to treat the URL as a download (and not to navigate there). But it can be removed, apparently this only works for same-origin URLs, and the downloads are on files.phpmyadmin.net.

Thank you !
I did learn something

williamdes · 2025-01-06T21:14:44Z

pmaweb/templates/_header_buttons.html

+{% endif %}
+
+<div class="d-flex gap-2">
+  <a class="btn btn-secondary flex-fill" href="https://demo.phpmyadmin.net/master-config/public/" target="_blank" rel="noopener noreferrer">


same, keep the referer

williamdes · 2025-01-06T21:17:40Z

pmaweb/templates/_sponsors.html

+  <div class="p-3 border rounded">
+    <div class="row {{ row_cols|default:'row-cols-1 row-cols-md-2' }} g-3">
+      <div class="col text-center">
+        <a href="https://www.vapehuset.se" target="_blank" rel="noopener noreferrer">


this is one of the most critical parts and lines of the website
please remove noreferrer
see bd92a98 and the commit message

pmaweb/templates/_sponsorship_conditions.html

williamdes · 2025-01-06T21:19:41Z

pmaweb/templates/_sponsorship_conditions.html

+        <td>250x250 logo on <a href="{% url 'home' %}" target="_blank" rel="noopener noreferrer">home page</a> and <a href="{% url 'sponsors' %}" target="_blank" rel="noopener noreferrer">sponsors page</a></td>
+      </tr>
+      <tr>
+        <td>Platinum</td>
+        <td>$10,000</td>
+        <td>250x130 logo on <a href="{% url 'home' %}" target="_blank" rel="noopener noreferrer">home page</a> and <a href="{% url 'sponsors' %}" target="_blank" rel="noopener noreferrer">sponsors page</a></td>
+      </tr>
+      <tr>
+        <td>Gold</td>
+        <td>$5,000</td>
+        <td>250x70 logo or text link on <a href="{% url 'home' %}" target="_blank" rel="noopener noreferrer">home page</a> and <a href="{% url 'sponsors' %}" target="_blank" rel="noopener noreferrer">sponsors page</a></td>
+      </tr>
+      <tr>
+        <td>Silver</td>
+        <td>$2,500</td>
+        <td>250x70 logo on <a href="{% url 'sponsors' %}" target="_blank" rel="noopener noreferrer">sponsors page</a></td>
+      </tr>
+      <tr>
+        <td>Bronze</td>
+        <td>$1,000</td>
+        <td>Text link on <a href="{% url 'sponsors' %}" target="_blank" rel="noopener noreferrer">sponsors page</a></td>


please remove all noreferrer on all links of the website to the website itself

williamdes · 2025-01-06T21:21:07Z

pmaweb/templates/base.html

+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://x.com/phpmya" target="_blank" rel="noopener noreferrer">


same, noreferrer does no good

williamdes · 2025-01-06T21:23:37Z

pmaweb/templates/sponsors.html

+<h3>Bronze Sponsors</h3>
+<div class="row mb-3 border rounded p-3">
+  <div class="col-12 col-md-6 col-lg-4">
+    <a href="https://www.loadview-testing.com" target="_blank" rel="noopener noreferrer">Load View Testing</a>


williamdes · 2025-01-07T00:52:01Z

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="scrutinizer-ci">
  <path d="m3.991 19.862.005-.004.002-.002zM22.2 12.943c.007.014.011.029.017.043l.005.008-.022-.051zm-4.304 10.944c-.131.004-.262.005-.393.008l-.003.001.396-.009z"></path>
  <path fill="#868E91" d="M22.101 19.055a8.207 8.207 0 0 0 .397-2.55 8.346 8.346 0 0 0-.775-3.519 8.583 8.583 0 0 0-2.307-2.859l-.017-.013a6.833 6.833 0 0 0-2.35-.976l-.045-.008c-.246-.06-4.052-.106-7.812-.121l.001-.002c-3.759-.015-7.472 0-7.532.06-.126.126-.06.798.06 1.35a5.66 5.66 0 0 0 1.834 2.753l.01.008a7.501 7.501 0 0 0 3.264 1.581l.049.009c.366.126 1.044.126 4.598.126 4.237 0 4.916.06 5.221.24.142.107.265.23.369.367l.003.005c.18.24.181.307.181.979s-.066.732-.186 1.044a1.48 1.48 0 0 1-.419.362l-.007.004c-.186.12-.307.119-4.358.179-4.671 0-5.156 0-6.321.432a6.458 6.458 0 0 0-2.463 1.352c-1.163 1.038-1.84 2.202-1.96 3.426l.06.611C3.891 23.962 6.591 24 9.3 24c2.577 0 5.146-.037 7.707-.105l.489-.119c.285-.069.531-.153.766-.256l-.029.011.367-.18a7.768 7.768 0 0 0 3.484-4.242l.017-.054z"></path>
  <path fill="#08458E" d="M22.461.12C22.401 0 21.421 0 14.863 0L6.877.06a6.172 6.172 0 0 0-3.732 2.488l-.013.02a6.328 6.328 0 0 0-1.348 2.596l-.009.044-.12.553-.119.857c-.06.799-.06 1.351.12 1.471h5.276c.06 0-.186-.246-.186-.672 0-.738.252-.924.552-1.23.552-.426 2.946-.12 4.729-.246 2.449 0 4.603-.06 4.849-.12 2.701-.427 5.031-2.388 5.524-4.536.121-.547.121-1.105.061-1.165z"></path>
</svg>

https://iconscout.com/free-icon/scrutinizer-ci-3521695
Scrutinizer Ci by Icon 54

Or https://github.com/avmaisak/ngx-simple-icons/blob/develop/ngx-simple-icons/src/lib/icons/scrutinizerci.ts
https://github.com/NoneTheFewer/logoes/blob/main/S/scrutinizer-ci.com%20icon.svg?plain=1

Ref: https://github.com/search?q=%22scrutinizer%22+%22%3Csvg%22&type=code

Pick the one you want

robinheidrich · 2025-01-07T01:10:26Z

I think one with the name in the logo would be better, to match the others.

Also found more things to check:

Michal is linked on https://phpmyadmin.net/about-website/, but he is not on the team page. Should I add him to the previous team members?
Microformats is mentioned there too. Is it still up to date? I couldn't really find out what it does. Also, the PAD website seems to be outdated, it comes up with their sitemap.

One more thing, on https://www.phpmyadmin.net/try/ the link to the stable release seems to be broken. It links to https://demo.phpmyadmin.net/STABLE/.

nijel · 2025-01-07T07:42:25Z

pmaweb/templates/team.html

-with databases. One of his passions is to lower the barrier so new contributors can feel comfortable submitting a new pull request and he
-enjoys coaching prospective contributors through seeing their work merged. William lives in France.
-</p>
+<h2>Previous Team Members</h2>


I've randomly noticed this section while looking and new website screenshots after being mentioned for the Weblate logo, and it seems unfair to me. Listing one randomly chosen previous team member and omitting people who spent years on the project is not the best approach. Better to remove previous members here and keep them only on https://docs.phpmyadmin.net/en/latest/credits.html.

Listing one randomly chosen previous team member and omitting people who spent years on the project is not the best approach.

I think this is mostly due to the fact that Dan never announced leaving the team. So that was me requesting to move him to a new section
But you are right, let's make a nice page for all of them that spent a lifetime maintaining phpMyAdmin
The link should be right after the team members in a visible way

Edit: it would be great to pick some of them an make a page ? or just use credits ?

robinheidrich · 2025-01-11T05:23:38Z

I think the pull request is ready for review now.

I changed the themes page so it doesn't need any extra JavaScript code. I have removed “All” and reversed the list. I noticed that there are still themes for version 2 in themes.py, but since “All” is gone now I think they can be removed?

An SVG logo for Scrutinizer is still missing, preferably one with white text. Unfortunately I couldn't find anything.

Furthermore, should I remove all links to planet.phpmyadmin.net?

williamdes · 2025-01-11T16:32:41Z

pmaweb/static/images/sponsors/scrutinizer.png

Couldn't find one with white text :(

williamdes · 2025-01-11T16:38:58Z

pmaweb/templates/license.html

-You should have received a copy of the GNU General Public License
-along with this program; if not, write to the Free Software
-Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+  You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.


https://www.gnu.org/licenses/old-licenses/gpl-2.0.txt
https://www.fsf.org/blogs/community/fsf-office-closing-party

maybe the text could be updated or linked to the GNU website

There is a link to https://www.gnu.org/licenses/gpl-2.0.html already, should I still update the text or just remove it?

williamdes

The diff looks good
Thank you for all the work !

williamdes · 2025-01-11T16:41:55Z

Furthermore, should I remove all links to planet.phpmyadmin.net?

Yes, please do in a separate commit. I can cherry-pick it right away

I changed the themes page so it doesn't need any extra JavaScript code. I have removed “All” and reversed the list.

Very cool !

I noticed that there are still themes for version 2 in themes.py, but since “All” is gone now I think they can be removed?

Removed from where ? the files. server ?

An SVG logo for Scrutinizer is still missing, preferably one with white text. Unfortunately I couldn't find anything.

Okay, can you give me one that is okay and I can change the text color with Inkscape ?

robinheidrich · 2025-01-11T17:13:47Z

Yes, please do in a separate commit. I can cherry-pick it right away

Alright, will do! Should I also remove all the code and the migration?

Removed from where ? the files. server ?

In the version list on the Themes page there is no tab for version 2. Since “All” is now gone, these are no longer visible. Or should I add version 2 there?

Okay, can you give me one that is okay and I can change the text color with Inkscape ?

Unfortunately I could not find any SVG from Scrutinizer where text is included.

robinheidrich added 7 commits January 6, 2025 02:16

Update Bootstrap files to 5.3.3

3b2af41

Remove Font Awesome

99ff58e

Remove colorbox

a7cfe3c

Remove jQuery

91e96f5

Add bs5-lightbox as replacement for colorbox

38e976a

Overhaul base layout, pages, components, and assets (CSS/JS)

9da4465

Update robots tag

d0ac04d

williamdes reviewed Jan 6, 2025

View reviewed changes

pmaweb/templates/_sponsorship_conditions.html Show resolved Hide resolved

williamdes reviewed Jan 6, 2025

View reviewed changes

nijel reviewed Jan 7, 2025

View reviewed changes

robinheidrich added 4 commits January 11, 2025 05:43

Continue overhaul of layout, pages, components, and assets

b93f8d8

Remove noreferrer from all links

84a25d3

Remove previous team members section

94fafbf

Use SVG logos for CDN77, GitHub, BrowserStack, and Weblate

b06fc48

robinheidrich added 2 commits January 11, 2025 06:33

Update licenses and fix typo in README

b2ff912

Update .editorconfig

8311015

williamdes reviewed Jan 11, 2025

View reviewed changes

williamdes approved these changes Jan 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update layout: Color modes, jQuery removal, and more #186

Update layout: Color modes, jQuery removal, and more #186

robinheidrich commented Jan 6, 2025 •

edited

Loading

williamdes Jan 6, 2025

williamdes Jan 6, 2025

robinheidrich Jan 6, 2025

williamdes Jan 7, 2025

williamdes Jan 6, 2025

nijel Jan 7, 2025

williamdes Jan 6, 2025

robinheidrich Jan 6, 2025

williamdes Jan 6, 2025

williamdes Jan 6, 2025

robinheidrich Jan 6, 2025

williamdes Jan 6, 2025

williamdes Jan 6, 2025

williamdes Jan 6, 2025

williamdes Jan 6, 2025

williamdes Jan 6, 2025

williamdes Jan 6, 2025

williamdes commented Jan 7, 2025

robinheidrich commented Jan 7, 2025 •

edited

Loading

nijel Jan 7, 2025

williamdes Jan 7, 2025 •

edited

Loading

robinheidrich commented Jan 11, 2025

williamdes Jan 11, 2025

robinheidrich Jan 11, 2025

williamdes Jan 11, 2025

robinheidrich Jan 15, 2025

williamdes left a comment

williamdes commented Jan 11, 2025

robinheidrich commented Jan 11, 2025

Update layout: Color modes, jQuery removal, and more #186

Are you sure you want to change the base?

Update layout: Color modes, jQuery removal, and more #186

Conversation

robinheidrich commented Jan 6, 2025 • edited Loading

Changes

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williamdes commented Jan 7, 2025

robinheidrich commented Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

williamdes Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

robinheidrich commented Jan 11, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williamdes left a comment

Choose a reason for hiding this comment

williamdes commented Jan 11, 2025

robinheidrich commented Jan 11, 2025

robinheidrich commented Jan 6, 2025 •

edited

Loading

robinheidrich commented Jan 7, 2025 •

edited

Loading

williamdes Jan 7, 2025 •

edited

Loading