#729 Make the Fedora Schedule pages prettier with custom CSS
Opened a year ago by mattdm. Modified a year ago

  • What's your deadline (could be date, could be Fedora release milestone)

No deadline.

  • Who's the developer writing the code (IRC nick + email + wiki profile page URL)

Code exists at https://github.com/RedHat-Eng-PGM/python-schedules-tools. This takes MS Project-format schedules and pushes them to html, json, and ical formats.

The result is a bunch of pages like this:

https://fedorapeople.org/groups/schedule/f-34/f-34-key-tasks.html
(see https://fedorapeople.org/groups/schedule/f-34/ for the raw files), which are functional but ugly.

  • If you can, please provide us with example URLs of web designs that are similar to the result you're looking for

I don't have examples. I would like it to be pretty and easy to read quickly.

  • What type of web project is this?

Ideally done all in CSS. Could also involve hacking the HTML generator scripts if you want to do that to make it better.

  • Wireframes or mockups for a website / web application

n/a

  • Is this for a new or existing site? (if existing, provide URL)

Existing: https://fedorapeople.org/groups/schedule/ (and the various version pages)

  • Do you need CSS/HTML for the design?

HTML

  • Information design diagrams and flow charts for planning or reorganizing a web site / app

This request is just for visuals; a conceptual redesign might be nice but I think would be a follow-on project.

  • Include a link to the existing designWeb application theming/skinning

hard-coded in the converter app

  • Provide a link to the application project page or github page

https://github.com/RedHat-Eng-PGM/python-schedules-tools

  • Provide a link to the theming documentation if available

basically the script can take a custom css file. See https://github.com/RedHat-Eng-PGM/python-schedules-tools/issues/17

  • Provide a link to the deployment to be themed, if available

https://fedorapeople.org/groups/schedule/ (and https://fedorapeople.org/groups/schedule/f-36/f-36-key-tasks.html and all other similar pages)

  • Set up a test server and provide connection/login information

I think you can just copy everything from https://fedorapeople.org/groups/schedule/


Bonus points would be to present some of the key dates on a timeline chart. But that is also a bigger project. :)

Isn't this something that the WebDev team can handle right?

CC. @jflory7 @ramyaparimi

Once the sig grows, an issue like this could a possibility.

Meanwhile, this is something I am interested in. I would like to help with this. @duffy @mattdm

This needs a design before it can be implemented. I would expect to start with some mockups/wireframes, iterate those, and then work on implementation when we have a workable design. Does that make sense?

Metadata Update from @duffy:
- Issue tagged with: triaged

a year ago

Yes makes total sense.

Is this still open to be worked on? I have some ideas for the visual design of the tables and the scheduling list to make it easy to scan and read. Shall I get on it?

Hello! As discussed on the mail, I have started off. Here is the heuristic evaluation of both the screens. Since there is no deadline, I was thinking if we could do the conceptual changes as well in addition to the UI. The yellow ones represent UX problems and the blue ones are UI-oriented.

eval_schedules_home.png

I wanted to ask if is it necessary to show all the older schedules on the same page or we can create a separate archive for them?

eval_schedules_key.png

Also, can we tag/colour code these events on the basis of beta release, final freeze, change checkpoint, etc?

I'll be working on these problems in the scope of this project to improve the design of the schedules page. Please let me know what do you think about it!

@mattdm @riecatnor @duffy

schedules_wireframe.png

Here is the iteration for the wireframe of the homepage of Fedora Schedules.
-I have highlighted the release of the latest Fedora version to let our users easily identify the current cycle in production. We can add a supporting illustration to enhance its visual appeal.
-The latest ones are given special attention for easy access and explorability.
-The past schedules are organised in a grid as clickable cards and can be searched through (the dash next to the heading of past schedules). We can even add filters in the search for say april or oct releases.
-The circle can represent the version number in some creative visually attractive way.
I have tried to solve all the problems I listed.

Since you are more aware of the user patterns for this website, I would love to know your views and any suggestions on this arrangement @mattdm :))

Once, we are through with the wireframe, I'll prepare the UI mockup.

Looking forward to your feedback @duffy @riecatnor ^.^

schedule_wf.png

Here is the wireframe for the schedule page.
-The top horizontal navbar has been converted into a vertical navbar since it is easy to navigate vertically rather than horizontally. Also, it's easier for the human eye to scan larger lengths up to down rather than left to right as it get's very tiring with the usual screen sizes.
-The highlighted heading in the vertical tabs indicate the active section.
-The arrows indicated at the sides, will help users navigate from one version to another. Right one will take you to the next version, say, F35 here and left one will take you to the previous version.
-I have added a filter and time period selection option so that the user can easily find out what they're looking for. The filters will be tag wise. As I have introduced tags to easily classify the events and make it more intuitive.
-I have turned the table into cards as they will be easier to scan and even be mobile responsive. The information is easy to gather from this kind of arrangement without the confusion of unneccesarily including start, end and duration in every column.

Eager to hear your feedback :))

Will start off work on the UI and the mobile version of the webpages soon :D

ui_schedules.pngui_schedule_home.png

Here are the UI mockups of both the schedule webpages.
I want some inputs on what can I do in the circle placeholders of the schedules homepage. Maybe we can discuss it in the design meet and come up with some ideas :))

For the front page:
- idea to replace the text with the wallpaper for the release
- link to the release notes
- think about putting date of release
- think about distinguishing upcoming and supported releases diff than old ones
- add a headline above the three top releases "upcoming and current releases"

Hello
I have worked on the draft. I have quite a few doubts.

schedules_iterated.pngschedules_homepage_iterated.png

-As discussed I added headings. Hope it looks better now!

-For the latest release, I have added the link to release notes as well as the release date and wallpaper. To highlight it, I think we should write 3 lines of content- maybe generic for every latest release or maybe specific if possible. Is it possible or shall I think of a new way to present this section?

-Since, the upcoming releases won't have their wallpaper released already, I designed the section by playing around with numbers. For them, the release date and link to notes is sufficient I believe.

-I am not sure how many versions are supported by Fedora for a current period and I have made a section with the wallpaper, release version and arrow to indicate schedules. I have made it as a row of 3 to match with the rest of the layout, but the layout can be adjusted as per the requirement and the actual data. I have not added the release date here since I think it will be of little importance here as these versions are already released.

-For the past releases, it's simply presented with their numbers and release versions. We can add the search functionality here to help the user find what they're looking for.

I did some UI changes in the schedule page too.

Please let me know your thoughts about this iteration.

Also, shall I start working on its mobile responsive version?

Login to comment on this ticket.

Metadata
Attachments 7
Attached a year ago View Comment
Attached a year ago View Comment
Attached a year ago View Comment
Attached a year ago View Comment
Attached a year ago View Comment