Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New website UI #137

Draft
wants to merge 66 commits into
base: master
Choose a base branch
from
Draft

New website UI #137

wants to merge 66 commits into from

Conversation

AdrianoCahete
Copy link

Fixes #92.

@AdrianoCahete
Copy link
Author

AdrianoCahete commented Oct 27, 2020

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
Copy link

codecov bot commented Oct 27, 2020

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     

@AdrianoCahete
Copy link
Author

AdrianoCahete commented Oct 30, 2020

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 AdrianoCahete changed the title New website UI New website UI - Desktop version Nov 5, 2020
@AdrianoCahete
Copy link
Author

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
Copy link
Member

Would you mind posting screenshots please ?

@AdrianoCahete
Copy link
Author

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.

Screen Shot 2020-11-07 at 17 05 35-fullpage


image


Screen Shot 2020-11-07 at 17 05 59-fullpage


Screen Shot 2020-11-07 at 17 06 03-fullpage


Screen Shot 2020-11-07 at 17 06 29-fullpage


Screen Shot 2020-11-07 at 17 06 52-fullpage


Screen Shot 2020-11-07 at 17 07 09-fullpage


Screen Shot 2020-11-07 at 17 08 16-fullpage


Screen Shot 2020-11-07 at 17 08 23-fullpage


Screen Shot 2020-11-07 at 17 08 29-fullpage


Screen Shot 2020-11-07 at 17 09 40-fullpage

@AdrianoCahete
Copy link
Author

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

Screen Shot 2020-11-07 at 17 22 46-fullpage

@williamdes
Copy link
Member

Very good work !

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

@AdrianoCahete
Copy link
Author

Fixed the mobile now just... why not?

Screen Shot 2020-11-10 at 04 18 25-fullpage

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

AdrianoCahete commented Nov 10, 2020

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
Copy link
Author

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 :)

127 0 0 1_8000_

@AdrianoCahete
Copy link
Author

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

menu

Copy link
Member

@williamdes williamdes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
mobile previews looks great !

@AdrianoCahete
Copy link
Author

Default Logo
phpMyAdmin-Logo-Default

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

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
Copy link
Author

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

@AdrianoCahete AdrianoCahete changed the title New website UI - Desktop version New website UI Nov 12, 2020
@AdrianoCahete
Copy link
Author

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

todo ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@williamdes williamdes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Author

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
Copy link
Member

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 ^^

@MauricioFauth
Copy link
Member

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

('news', 'News'),
('security/', 'Security'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +65 to 69
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I probably broke this when rebasing.

Comment on lines +27 to +42
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is broken as well after the rebase.

Comment on lines +127 to +128
<div class="news-month" title="{{ item.date|date:'mmmm' }}">
{{ item.date|date:"mm" }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pmaweb/templates/index.html Outdated Show resolved Hide resolved
Comment on lines -6 to 8
<div class="row">
<div class="content">

<div class="col-md-6">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The layout here no longer has two columns. 😞

@MauricioFauth
Copy link
Member

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
Copy link
Member

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
Copy link
Author

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
Copy link
Author

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
Copy link
Member

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
Copy link
Member

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New website UI
4 participants