New website UI #137

AdrianoCahete · 2020-10-27T04:36:04Z

Fixes #92.

AdrianoCahete · 2020-10-27T04:37:58Z

By now it's usable, but not so great if anyone wants to see in a live environment. My plan is to finish, at least the first usable version at the end of the week,

codecov · 2020-10-27T05:31:07Z

Codecov Report

Merging #137 (63ffe13) into master (33e59a0) will decrease coverage by 0.28%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master     #137      +/-   ##
==========================================
- Coverage   63.28%   63.00%   -0.29%     
==========================================
  Files          65       65              
  Lines        1419     1419              
==========================================
- Hits          898      894       -4     
- Misses        521      525       +4

pmaweb/static/images/brand/phpMyAdmin-logo-preview.svg

AdrianoCahete · 2020-10-30T21:18:49Z

Home is finished on desktop. I'm moving to internal pages to make them usable on the new UI (and do some rewrites when it's applicable) and then move to mobile.

There's no style for nav pills, paginations and tables yet.

Feel free to give me feedbacks :)

AdrianoCahete · 2020-11-05T22:28:45Z

I have just a few fixes to do, but I think that it's easier to make this PR for a desktop version and, after merged, go to mobile.

Since the mobile is wrong in some places on the current UI (menu, code block, some tables) and no one opened an issue, I think that most people don't really see the website on mobile... ¯\(ツ)/¯

williamdes · 2020-11-06T17:15:30Z

Would you mind posting screenshots please ?

AdrianoCahete · 2020-11-07T17:21:23Z

I still need to fix Books (inside Docs), Donate, and History layouts (they are working, but not with the best visual).

A "small" changelog before:

Docs URLs to Django 1.7 are removed from the Django site. I found the readthedocs mirrors and changed when I found them.
Changed the Download link on the header to move to the Download page since we don't have a link to that page. CTA button on page stills points to download directly.
Try button points to the Try page, so the user can see all the warnings before starts. Inside the page, there's a button to Demo env.
Added a Download button on Docs page for people who visit with mobile, since the Header CTA buttons will not appear on small resolutions.
Removed bootstrap since I don't think that you use neither 30% of the package. I made custom css instead that matches your current use (and may match your future needs). I may write internal documentation for those styles later.
Removed FontAwesome too, since all the icons now are SVG's.
Move from to element to match new specs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content)
Made some styles specific so you don't need to read documentation all the time, doesn't break the style guide unintentionally neither use classes where is not needed. (you just can use the .footer-link class inside the footer element. You can just use .btn-big inside .btn element. You will never see a footer-link on navbar without some strangeness -- easier to spot on future PR)
Moved components to a component folder to better differentiate component/include from templates files
I made an alert component, just use alert in conjunction with some alert definition (alert-info, alert-error, alert-success, alert-warning). You can see it on the Download popup.
Fixed the modal style
Fixed the progress bar styles
Add the Logo history text
Removed unused (and fully deprecated) Google Code from 404 page

Problems that I faced on local env:

Cannot run News and Security page, so I made changes directly on html and didn't test on live code itself, only in generated HTML (maaaaaybe because I'm using Windows?)
We need an if on line 134 (index.html) to not show the year if it's the current. I don't know how to do this on Django.
I may have broken the Announcement list accordion on the Security page (Support > Security) (need to view on a more stable env)
Download popup here just flashes, but I think that it's because I don't have anything to download. Needs a proper env to test.
Some screenshots doesn't have data because I don't have that data on my local env. I don't know why.

AdrianoCahete · 2020-11-07T17:24:11Z

On Mobile works, but it's pretty broken right now (gray block is the menu that I didn't put the icon yet, so made gray just to find the click area).

williamdes · 2020-11-07T22:05:39Z

Very good work !

I will print this logo on a t-shirt ASAP when it is uploaded to the data repo 😍

AdrianoCahete · 2020-11-10T04:21:48Z

Fixed the mobile now just... why not?

AdrianoCahete · 2020-11-10T04:42:16Z

I think that we can proceed with review and fixes, then wait for the new brand to become available (I hope that the end of this week) to update it and merge.

We already finished the logo as a symbol itself, we're trying a few OSS typographies to match a better visual.

Conflicting files are because I changed the path and the elements inside, but the content is the same.

Edit: Can we deploy to a test environment with the actual server configs? My local has a lot of bugs (windows? hmmm -- yes, didn't install docker again :( )...

AdrianoCahete · 2020-11-10T05:41:36Z

Doing a lot of nothing these months, I made a preview Dark Theme (that respects browser definitions!) for the website, but since it's heavily untested, I prefer to leave commented out. if you want to proceed with that in the future, it's already in the code :)

AdrianoCahete · 2020-11-10T05:49:27Z

Menu @ Mobile (to be honest, every screen below than 900px wide)

williamdes

LGTM
mobile previews looks great !

AdrianoCahete · 2020-11-10T18:35:43Z

Default Logo

Symbol (when there's no space to use the default logo, like favicons)

There's another one to use in dark backgrounds, but is only the symbol with a circle behind it. We don't have the full logo for use in dark backgrounds yet, but I don't think that it's the main concern right now.

The typography used was Montserrat, but I'll make the update with all the infos in the Brand Guide that we'll be made availiable later.

I'll update that PR and the data repository with the new logos by the end of the day.

AdrianoCahete · 2020-11-12T13:47:44Z

Ok, all brand is updated. Just waiting for you to test and merge! :)

AdrianoCahete · 2020-11-23T03:22:35Z

JFYI: I don't how do you handle the conflicts and merge strategies, but I don't have access to either.

pmaweb/templates/themes.html

williamdes · 2020-11-25T11:48:16Z

pmaweb/templates/components/_dlbox.html

@@ -1,3 +1,4 @@
+<!-- TODO: May be removed after the redesign since it's part of header/navbar -->


I left because I don't know if you want me to remove or let in there. I didn't find any other place that uses this component.

pmaweb/templates/components/_icon-library.html

pmaweb/templates/downloads.html

williamdes · 2020-11-25T11:51:11Z

pmaweb/templates/index.html

+              {{ item.date|date:"mm" }}
+            </div>
+            <div class="news-year">
+              <!-- TODO: Needs a if(item.date|date:'yyyy' == current_year) {display:none;} -->


I left this as TODO because I don't know how to do this on Django (and that news block isn't working on my local machine).

The idea is to hide the year if it's the current one. I may leave it here so you can fix it later.

williamdes

I added more comments, but all the diffs LGTM
I think you could add this repository as a remote and rebase onto latest commit to fix the conflicts

AdrianoCahete · 2020-11-25T14:59:47Z

To be honest, I always have problems with the rebase, :(
I don't know if I want to proceed or prefer that you resolve this.... hahaha

williamdes · 2020-11-25T21:53:30Z

To be honest, I always have problems with the rebase, :(
I don't know if I want to proceed or prefer that you resolve this.... hahaha

We can rebase or merge locally with resolving conflicts, maybe another or 2 review would be okay so I can proceed with a merge.
Maybe @ibennetch would be able to fix #137 (comment) ?
I do not charm pythons 🐍 sorry ^^

…age + Fix css variables + Prepare for future dark mode

Co-authored-by: William Desportes <[email protected]>

Signed-off-by: Maurício Meneghini Fauth <[email protected]>

MauricioFauth · 2021-04-24T03:37:48Z

Hi @AdrianoCahete, I rebased your pull request and I also fixed an issue with the template include paths.

MauricioFauth · 2021-04-24T04:04:44Z

data/menu.py

    ('news', 'News'),
-    ('security/', 'Security'),


I think we should keep the Security link at the main menu.

My first idea was to move "Security" to the "Support" submenu, but when I was implementing I saw that it will be adding more work than I was planning and move out for this. We can try to go back to this idea again.

Stated here:

Moved "Security" to the "Support" submenu. "Security" as a (main) menu gives the idea that the product has a lot of Security Flaws. If we have it on "Support", gives the idea for the people who search for some support that we have attention to security, but for the main public doesn't need to have that attention, because it's the default behavior (to design a safe system).

MauricioFauth · 2021-04-24T04:07:28Z

pmaweb/templates/base.html

+        <button id="menu-handle" class="menuHandle navbar-toggler collapsed" type="button" data-toggle="collapse"
+          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+          aria-label="Toggle navigation" title="Menu">
          <span class="fa fa-bars"></span>
        </button>


I probably broke this when rebasing.

MauricioFauth · 2021-04-24T04:10:18Z

pmaweb/templates/components/_sponsors.html

+      <div class="sponsor-list">
+        <a href="http://www.trialpro.com/" class="link-external"><img src="{% static 'images/trialpro.png' %}" alt="TrialPro" /></a>
+        <a href="https://www.vapehuset.se/" class="link-external"><img src="{% static 'images/vapehuset.png' %}" alt="Vapehuset" /></a>
+      </div>
+
+      <div>
+        <a href="https://www.vapehuset.se/"><img src="{% static 'images/vapehuset.png' %}" alt="Vapehuset" /></a>
+      </div>
+
+      <div>
+        <a href="https://www.4kdownload.com/"><img src="{% static 'images/4kdownload.png' %}" alt="4K Download" /></a>
+      </div>
+
+      <div>
+        <a href="https://goread.io/"><img src="{% static 'images/goread.png' %}" alt="goread" /></a>
+      </div>


That is broken as well after the rebase.

MauricioFauth · 2021-04-24T04:12:21Z

pmaweb/templates/index.html

+            <div class="news-month" title="{{ item.date|date:'mmmm' }}">
+              {{ item.date|date:"mm" }}


These date formats are wrong, see: https://docs.djangoproject.com/en/1.8/ref/templates/builtins/#date

pmaweb/templates/index.html

MauricioFauth · 2021-04-24T04:20:08Z

pmaweb/templates/donate.html

-<div class="row">
+<div class="content">

 <div class="col-md-6">


The layout here no longer has two columns. 😞

MauricioFauth · 2021-04-24T04:27:58Z

I may have broken the Announcement list accordion on the Security page (Support > Security) (need to view on a more stable env)

Yes, it is broken.

Some screenshots doesn't have data because I don't have that data on my local env. I don't know why.

Maybe you forgot to load the test data:

./manage.py migrate
./manage.py loaddata pmaweb/fixtures/test_data.json

See: https://github.com/phpmyadmin/website#development

MauricioFauth · 2021-04-24T04:36:34Z

I think you should add a section on the home page for the Software Freedom Conservancy logo.

Co-authored-by: Maurício Meneghini Fauth <[email protected]>

AdrianoCahete · 2021-04-24T22:40:08Z

I may have broken the Announcement list accordion on the Security page (Support > Security) (need to view on a more stable env)

Yes, it is broken.

Some screenshots doesn't have data because I don't have that data on my local env. I don't know why.

Maybe you forgot to load the test data:
./manage.py migrate
./manage.py loaddata pmaweb/fixtures/test_data.json
See: https://github.com/phpmyadmin/website#development

I tried, but it cannot run on Windows (ModuleNotFoundError: No module named 'urllib2'). But, to be honest, I'm receiving an error now when I try to run the website on my machine (not happened before or I managed to fix it on my end).

I'm a little busy right now, but I'll try to fix that in the next weeks.

AdrianoCahete · 2021-04-24T22:41:01Z

I think you should add a section on the home page for the Software Freedom Conservancy logo.

Right aligned on the same line/row as the Sponsors, maybe?

williamdes · 2021-04-24T23:09:25Z

I tried, but it cannot run on Windows (ModuleNotFoundError: No module named 'urllib2'). But, to be honest, I'm receiving an error now when I try to run the website on my machine (not happened before or I managed to fix it on my end).

Could be a python3 issue instead you would probably need to use python2

MauricioFauth · 2021-04-24T23:14:53Z

I think you should add a section on the home page for the Software Freedom Conservancy logo.

Right aligned on the same line/row as the Sponsors, maybe?

I thought about a full width banner with the logo and some text.

AdrianoCahete · 2021-08-25T20:11:38Z

Sorry for my disappearance. I had a completely broken computer (and a completely new one!) and two new jobs in the past few months...

I'll try to run the project again (and maybe make a PoC in another language too) as soon as possible!

williamdes reviewed Oct 27, 2020

View reviewed changes

pmaweb/static/images/brand/phpMyAdmin-logo-preview.svg Show resolved Hide resolved

ibennetch added the hacktoberfest-accepted label Oct 27, 2020

williamdes added the enhancement label Oct 30, 2020

AdrianoCahete changed the title ~~New website UI~~ New website UI - Desktop version Nov 5, 2020

AdrianoCahete marked this pull request as ready for review November 10, 2020 04:38

williamdes approved these changes Nov 10, 2020

View reviewed changes

AdrianoCahete changed the title ~~New website UI - Desktop version~~ New website UI Nov 12, 2020

williamdes reviewed Nov 23, 2020

View reviewed changes

pmaweb/templates/themes.html Outdated Show resolved Hide resolved

williamdes reviewed Nov 25, 2020

View reviewed changes

pmaweb/templates/components/_icon-library.html Show resolved Hide resolved

williamdes reviewed Nov 25, 2020

View reviewed changes

pmaweb/templates/downloads.html Outdated Show resolved Hide resolved

williamdes reviewed Nov 25, 2020

View reviewed changes

williamdes approved these changes Nov 25, 2020

View reviewed changes

AdrianoCahete and others added 16 commits April 24, 2021 00:07

Fix Try page

42a15d1

Fix Try page

566beb3

Remove unused code

5b3c49d

Mobile base

e024b69

Mobile fixes + Docs updates + Demo alerts

e9b3edd

Update Theme Page

a10aabe

Add Team link to About Page

4c48964

Remove unused code

c61c77d

Fix Donate, Docs and About page layouts + Add History view to About p…

1d008a5

…age + Fix css variables + Prepare for future dark mode

Fix typos + Fix menu on mobile + Fix footer on small mobile

b5c31de

Update favicons with preview v2

d5dcaf5

Dark Theme Preview :)

70ca83a

Update Brand assets

ce31e8a

Remove leftover for themes

a0467d2

Update pmaweb/templates/downloads.html

546229f

Co-authored-by: William Desportes <[email protected]>

Fix broken template include paths

d53b860

Signed-off-by: Maurício Meneghini Fauth <[email protected]>

MauricioFauth force-pushed the new-ui branch from 675f024 to d53b860 Compare April 24, 2021 03:30

MauricioFauth requested changes Apr 24, 2021

View reviewed changes

Update pmaweb/templates/index.html

63ffe13

Co-authored-by: Maurício Meneghini Fauth <[email protected]>

This was referenced Sep 21, 2021

PhpMyAdmin Icon request simple-icons/simple-icons#6013

Closed

Add phpMyAdmin icon simple-icons/simple-icons#6579

Merged

williamdes marked this pull request as draft August 20, 2024 15:29

		@@ -1,3 +1,4 @@
		<!-- TODO: May be removed after the redesign since it's part of header/navbar -->

		<div class="news-month" title="{{ item.date\|date:'mmmm' }}">
		{{ item.date\|date:"mm" }}

New website UI #137

Are you sure you want to change the base?

New website UI #137

Conversation

AdrianoCahete commented Oct 27, 2020

AdrianoCahete commented Oct 27, 2020 • edited Loading

codecov bot commented Oct 27, 2020 • edited Loading

Codecov Report

AdrianoCahete commented Oct 30, 2020 • edited Loading

AdrianoCahete commented Nov 5, 2020

williamdes commented Nov 6, 2020

AdrianoCahete commented Nov 7, 2020

AdrianoCahete commented Nov 7, 2020

williamdes commented Nov 7, 2020

AdrianoCahete commented Nov 10, 2020

AdrianoCahete commented Nov 10, 2020 • edited Loading

AdrianoCahete commented Nov 10, 2020

AdrianoCahete commented Nov 10, 2020

williamdes left a comment

Choose a reason for hiding this comment

AdrianoCahete commented Nov 10, 2020

AdrianoCahete commented Nov 12, 2020

AdrianoCahete commented Nov 23, 2020

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

AdrianoCahete commented Nov 25, 2020

williamdes commented Nov 25, 2020

MauricioFauth commented Apr 24, 2021

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

MauricioFauth commented Apr 24, 2021

MauricioFauth commented Apr 24, 2021

AdrianoCahete commented Apr 24, 2021

AdrianoCahete commented Apr 24, 2021

williamdes commented Apr 24, 2021

MauricioFauth commented Apr 24, 2021

AdrianoCahete commented Aug 25, 2021

AdrianoCahete commented Oct 27, 2020 •

edited

Loading

codecov bot commented Oct 27, 2020 •

edited

Loading

AdrianoCahete commented Oct 30, 2020 •

edited

Loading

AdrianoCahete commented Nov 10, 2020 •

edited

Loading