Improve look/feel
Closed this issue · 34 comments
Look and feel overall remains something that could be improved for the project. While effort has been made towards this over the years, no serious UI/design help has ever been available, so we have done what we can. Ideally we need a professional web designer to help us or at least someone that knows graphics, CSS, HTML, JavaScript, PrimeFaces, Faces, etc very well.
This item is for looking at the following and evaluating how look/feel could be improved.
- The application itself: https://cargo-tracker.j.scaleforce.net
- The website: https://eclipse-ee4j.github.io/cargotracker
- The wiki (can/should this be incorporated into the website?): https://github.com/eclipse-ee4j/cargotracker/wiki
- The repository: https://github.com/eclipse-ee4j/cargotracker
@yashTEF is exploring working on this issue.
The wiki (can/should this be incorporated into the website?)
I assume that instead of redirecting to the github wiki, we would want to integrate the docs inside the project website interface itself?
If it is the case, then it should be a better option.
As for improving the project website look and feel, I have made some changes to the github pages.
I can open a pull request against the gh-pages branch maybe?
Yes, the website is just GitHub pages, PRs work fine. For the rest of the decisions, feel free to apply creative leeway. I am no UI expert. I can only kind of tell if something doesn’t look good :-). If you have major changes, I advise we first iterate on a mock-up? No need for simple improvements though.
Also I wonder if @ivargrimstad and @TanjaObradovic have opinions on what the project website should be. Maybe there is something we should do to align with the Foundation or Jakarta EE better?
If you have major changes, I advise we first iterate on a mock-up? No need for simple improvements though
No major changes, however some files were not idented or properly formatted so that has increased the no of additions.
@m-reza-rahman , As part of the Getting Started/About section for the project website we could also embed a video demo of the cargotracker application.
I actually found a pretty good demo for the application on the official jakarta ee youtube page:
https://www.youtube.com/watch?v=Rht9QkrqBE4
Really not sure what you mean. It has been there for some time now already. What specific change are you suggesting?
The video demo could be included as a part of website UI itself.
However, the current website has a lot of content present in a single webpage itself. So, I have been separating it into individual web pages.
It’s hard to comment without looking at a mock-up first. This sounds like an extensive change.
If you mean putting a video in the application, I don’t understand the point of that. Someone using the application should already be aware of what it does. I don’t see real world applications doing anything like that.
I am referring to the above changes w.r.t the project website https://eclipse-ee4j.github.io/cargotracker
It’s hard to comment without looking at a mock-up first
Yeah, I will try to make these changes on my end and get your feedback.
Link to the hosted application demo seems to be broken: https://cargo-tracker.j.scaleforce.net/
Yes, I know. I will work with the cloud hosting provider to understand what is going on.
A sample preview of the documentations page that possibly could be linked with the project website.
This will need to be further improved and designed to align well with the current website
I am trying to understand this. Is the idea just to move it to GitHub pages from the Wiki? Other than a slightly different layout, what would this accomplish really? If it's not fully integrated into the main site, I would rather stick with just the Wiki or maybe GitBook (it has a layout very similar to what you seem to be proposing). Both those mechanisms are much easier to maintain than HTML, CSS, etc. What am I missing?
This would be part of the main website only, the contents below the nav bar would be replaced by the content shown above. I should have named the header for the menu bar as Documentation.
Is this what you mean by fully integrating or you are suggesting that some content changes be made also along with moving to the website.
This would be an example of what I was thinking of:
https://vertx.io/docs/
I want to make sure - do you realize the Vert.x example above is actually GitBook with a custom header and footer to match the main website? If that's what you are proposing, yes it's fine.
No I did not realise that, but now I get what you meant by easier to maintain, better to publish/export changes instead of constantly working with html/css files when updating the docs.
Also, We would need to update the Developer Standards section in the contributing.md file after the recent changes?
If there is need to include info for formatting related to html/css/js files that could be added too.
I added the updated conventions to the README on the project root. Feel free to make a PR to update the contribution doc?
Some samples for components after styling in the application.
Seems to be an improvement so far.
@m-reza-rahman , I made some changes to the home page for the cargotracker application including some restructuring and adding visual effects. Should I open a PR directly or would you like to checkout the changes on my fork for reviewing?
Your work has been generally good. Just issue a PR please.
Hey @glassfishrobot Please assign me I will try to Enchance this. With My creativity and skills.
Please suggest specific improvements. We can then consider a PR.
Please suggest specific improvements. We can then consider a PR.
Sure
@m-reza-rahman, do we have the freedom to add managed beans/service to the existing application hierarchy for configuring component rendering and custom event handling i.e. adding some wrapper classes to manipulate the JSF view using FacesContext etc.
If yes, what would be the location for the same?
I was thinking something like "/application/internal/" or "/application/internal/listeners"
Hard to tell without seeing the specific changes. I would say issue a PR and let’s see.
On a perhaps related note, how is the PrimeFaces upgrade coming along? Looks like we will need that for the Jakarta EE 10/Payara 6 upgrade.
I have made the necessary modifications pertaining to component rendering to accomodate the changes brought in by the upgrade to primefaces 12.0.0.
Here's a snapshot:
There are some primefaces components specific to the newer version which I was working on adding which could be great addition to the existing UI.
Do you suppose that I just raise a PR for the base model changes for now, and maybe keep iterating to support new features from the latest version?
Yes, since we have other contributors, more frequent merges, as long as they don’t break anything, are definitely better. I would say a successful, non-breaking PrimeFaces upgrade is definitely PR worthy on its own right.
Hi @yashTEF, I have been noticing that the website revamp introduced some spacing/alignment issues in the header and footer. Please look at the screenshot below. Can you please take a look?
Hi @yashTEF, I have been noticing that the website revamp introduced some spacing/alignment issues in the header and footer. Please look at the screenshot below. Can you please take a look?
Yes, will do.
Any updates, @yashTEF?
@m-reza-rahman, I was preoccupied with some other work.
Will open a fix for the above ASAP.
@m-reza-rahman , I was able to fix the problem related to the footer.
As far as header is concerned I see the spacing issue when testing on Firefox but it seems okay on Chrome is this what you are referring to?
Here's a snip of how it looks on chrome
Can you please share a screenshot? Is there some miscommunication here? Did you note the marked up portions of the screenshot I shared? That's where I think the UI experience is not good still.
