website icon indicating copy to clipboard operation
website copied to clipboard
verified publisher icon phpmyadmin

Update layout: Color modes, jQuery removal, and more

Open robinheidrich opened this issue 1 year ago • 12 comments

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

127 0 0 1_8000_

Home page (light)

127 0 0 1_8000_ (1)

Download modal

image

Docs page

127 0 0 1_8000_docs_

Team page

127 0 0 1_8000_team_

404 page

image

robinheidrich avatar Jan 06 '25 04:01 robinheidrich 

<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

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

Pick the one you want

williamdes avatar Jan 07 '25 00:01 williamdes

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/.

robinheidrich avatar Jan 07 '25 01:01 robinheidrich

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?

image

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?

robinheidrich avatar Jan 11 '25 05:01 robinheidrich

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 ?

williamdes avatar Jan 11 '25 16:01 williamdes

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 avatar Jan 11 '25 17:01 robinheidrich

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

Yes, remove everything about planet. We can discuss it in the separate PR

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?

~~Maybe we can have a section for "old themes" below the normal ones ?~~ Edit: let's add a 2.x option ?

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

Okay, on it.

williamdes avatar Jan 27 '25 12:01 williamdes

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

After some copy pasting from their website, and Inkscape work I did get a nice logo.

Final version to use (compressed with https://svgomg.net/): scrutinizer-full_modified_simple_compressed

Less compressed: scrutinizer-full_modified_simple

Inkscape version: scrutinizer-full_modified

williamdes avatar Jan 27 '25 13:01 williamdes

Not quite sure how to make a new PR for removing Planet, wouldn't there be conflicts with this PR?

robinheidrich avatar Jan 27 '25 19:01 robinheidrich

Not quite sure how to make a new PR for removing Planet, wouldn't there be conflicts with this PR?

Okay, you can remove it in this PR then Keep a separate commit for it

williamdes avatar Jan 27 '25 21:01 williamdes

Removed everything from Planet and updated the migrations. Is that all right?

robinheidrich avatar Jan 27 '25 23:01 robinheidrich

Removed everything from Planet and updated the migrations. Is that all right?

Probably yes, if @ibennetch can review this PR diff

If it ready for review ?

williamdes avatar Jan 27 '25 23:01 williamdes

Yes, I think it's ready for review. Other improvements can be made in new PRs, for example I think the screenshots from the demo could use an update. See https://www.phpmyadmin.net/try/.

And then there is test-data, which somehow has no use except to display TEST DATA. See https://www.phpmyadmin.net/test/data.

And contest.html which I think serves no historical purpose, unlike the 15-years page.

robinheidrich avatar Jan 27 '25 23:01 robinheidrich