So, we don't yet have a backend system that models this... but PDC will be that database/API.

Hubs can then just re-display the data in a widget for this.

TODO first - stand up and populate PDC.

This is my design process behind this infograph, I tried to incorporate the major milestones in this time line design. For the purpose of indicating the various stages, I used the breadcrumbs navigation pattern. Further, I followed this (https://fedoraproject.org/wiki/Releases/24/Schedule) documentation for the purpose of designing this info-graph. The font and color palette are all according to the fedora standard guidelines.
Any feedback and suggestions welcome.

This is my design process behind this infograph, I tried to incorporate the major milestones in this time line design. For the purpose of indicating the various stages, I used the breadcrumbs navigation pattern. Further, I followed this (https://fedoraproject.org/wiki/Releases/24/Schedule) documentation for the purpose of designing this info-graph. The font and color palette are all according to the fedora standard guidelines.
Any feedback and suggestions welcome.

Further, thinking in terms of mobile responsiveness, I believe this time line can be condensed vertically to allow for more effective representation in smaller screen sizes

Further, thinking in terms of mobile responsiveness, I believe this time line can be condensed vertically to allow for more effective representation in smaller screen sizes

What if we made the time line vertical on mobile? just throwing out some ideas

I am actually mocking up the design for the smaller screen sizes and will upload the same shortly. For smaller screen sizes, I believe the vertical time line pattern will suit better.Perhaps a visual mobile mockup would provide more information

https://pagure.io/fedora-hubs/issue/63#comment-3256 looks quite nice but looking at it it's like the release and the freeze are right behind each other, while there is time in between.

The release is punctual (one day) while freeze and there is time between the release and the next freeze which I find missing from the current view.

Maybe the green arrow with the green circle could be replaced by just a green circle and following it there would be a blue arrow representing the time period between a release and the next freeze.

Does that make sense?

Correct me if I am wrong, my understanding is that you want to show the timeline between the alpha release and beta freeze? Perhaps inserting the blue arrow in between would make the timeline more understandable ?

If that is what you meant, then I believe there is some space gap between the two currently, but making it more prominent would be better ? Perhaps a date timeline indicating the time period in between makes sense ?

For example there are 3 weeks between the alpha freeze and the alpha release and then another 3 weeks between alpha release and beta freeze.

So depending on how you look at it, either you consider the second 3 weeks as being "This is the alpha release time period" or you consider them as "the time between the alpha release and the beta freeze". I normally see things as the later while the graph currently looks more like the former.

I made some improvements to the original mockup

1. The made the arrow for release smaller so as to signify the release time period to be a day
2. I also made the master branch smaller so that the emphasis on Fedora 24 Branch is more.

Further, I have also included the mobile view mockup with the vertical pattern.

I made some improvements to the original mockup

1. The made the arrow for release smaller so as to signify the release time period to be a day
2. I also made the master branch smaller so that the emphasis on Fedora 24 Branch is more.

Further, I have also included the mobile view mockup with the vertical pattern.

Hey Radhika, this looks nice! The blue/orange/green look great. I would use the Fedora magenta for the rocket and the lightbulb though - although maybe the lightbulb is extraneous.

To pingou's point - I think it would make more sense to have the circles in between the arrow/lines (maybe right at the arrow head?) When the circle is centered on the line, it makes the whole line seem to represent the circle I think where if the circle is inbetween then the time represented by the arrow is more clear. I'm not sure shrinking the alpha/beta in relation to the freezes reads correctly - I'm not sure how to interpret it.

Hi Mo,

I got your point about the circle being in between the arrows to make the release, freeze stand out more . I however feel it would be useful if we just kept the release cycle circles in between (instead of shrinking) as it is a one day event and rest the of the time line remains same. That way it will represent the circle in between as one day and the rest as a long time period (specially freeze).

Hi Radhika,

Having the circle in between wouldn't just be to make them stand out more - the issue is that right now the line between the two circles is broken, so it's unclear that there's a significant amount of time inbetween them. If there was a longer contiguous line between circles, that would address pingou's concern that right now the graphic reads as having little to no time between milestones.

Based on the feedback, I have made some improvements to the existing design

Based on the feedback, I have made some improvements to the existing design

I like that, and the dark grey/light grey indicates where we're at?

Yes , it does

Maybe have it fill in Fedora blue since it's the "path to Fedora" to get released? and the track behind it would be the light grey?

Yes I thought of it but it would contrast with the blue freezes, branch?

You can use the dark Fedora blue, then there should be enough contrast

Hi Mo:

I had changed the track to light Grey and dark blue for the slider. See the image attached below.

Pingou :

Some ideas I have for implementing this widget are as follows ( I am discussing these ideas just for the visual purposes as I am aware using these js features would have some licensing issue)

1. A simple js which can fill in the circles as the slider moves along along with the description
   https://codyhouse.co/demo/horizontal-timeline/index.html

2. Another rain like feature for implementing the time line, though frankly it requires the user to click for further information. (Perhaps for the vertical /mobile view)
   http://codecanyon.net/item/timelinzjs-lightweight-timeline-maker/full_screen_preview/13847677?ref=jqueryrain

3. I could probably lose the extra slider on scroll
   http://cidcode.net/timeline/flik-timeline-5.html

4. I like this one as well but would like the timeline to be automatic
   http://cidcode.net/timeline/flik-timeline-8.html

5. This time line could be a good option too, but we could just slow it down a bit
   http://www.jqueryrain.com/2013/06/dasky-jquery-timeline-slider/

6. More useful vertical and horizontal themes can be seen here
   http://codecanyon.net/item/flik-timeline-10-style-with-generator/full_screen_preview/15080536?ref=jqueryrain

Hi Mo:

I had changed the track to light Grey and dark blue for the slider. See the image attached below.

Pingou :

Some ideas I have for implementing this widget are as follows ( I am discussing these ideas just for the visual purposes as I am aware using these js features would have some licensing issue)

1. A simple js which can fill in the circles as the slider moves along along with the description
   https://codyhouse.co/demo/horizontal-timeline/index.html

2. Another rain like feature for implementing the time line, though frankly it requires the user to click for further information. (Perhaps for the vertical /mobile view)
   http://codecanyon.net/item/timelinzjs-lightweight-timeline-maker/full_screen_preview/13847677?ref=jqueryrain

3. I could probably lose the extra slider on scroll
   http://cidcode.net/timeline/flik-timeline-5.html

4. I like this one as well but would like the timeline to be automatic
   http://cidcode.net/timeline/flik-timeline-8.html

5. This time line could be a good option too, but we could just slow it down a bit
   http://www.jqueryrain.com/2013/06/dasky-jquery-timeline-slider/

6. More useful vertical and horizontal themes can be seen here
   http://codecanyon.net/item/flik-timeline-10-style-with-generator/full_screen_preview/15080536?ref=jqueryrain

Update first version of the interactive prototype

https://radhikamani88.fedorapeople.org/release/i.html

Feedback according to today's meeting :

1. Make the user aware where he is at currently
2. Think about how this might distract the viewers from other widgets in hub and improve accordingly

Second Version of the prototype : https://radhikamani88.fedorapeople.org/release/i.html

1. Made the text static so as to the make the user aware where is at currently

I've modified the mockups from Radhika to fit the widget format. Here that is:

I also mocked up an additional widget that shows status across releases, which I think the reporter was looking for as well:

Opening this one up for review and for a developer to take on. Any / all constructive feedback greatly appreciated.

I've modified the mockups from Radhika to fit the widget format. Here that is:

I also mocked up an additional widget that shows status across releases, which I think the reporter was looking for as well:

Opening this one up for review and for a developer to take on. Any / all constructive feedback greatly appreciated.

@ralph How was your plan on integrating this with PDC?

@sayanchowdhury told me this morning that @vivekanand1101 was discussing with @ralph how to integrate this widget properly -- whether with PDC or something else. Vivek, can you please update this ticket with some information on the alternatives, and any decision you guys reached about how to do it?

As said by @ralph , PDC doesn't have the data yet and it's better to rely on other release schedule data sources for the purpose. The problem is we didn't reach to any conclusion about which data sources.

Prototype for the release cycle widget: http://saptaks.me/prototypes/fedora_hubs/widget.html
I am yet to make it in the widget format.

With help from @jflory7 , the project we should be looking for the data is: https://pagure.io/fedora-project-schedule/

Also, there is this one: https://fedorapeople.org/groups/schedule/f-25/f-25-all-tasks.html

Thanks @ralph and @decause for their time.

Note also, that there is a machine-readable ics file here: https://fedorapeople.org/groups/schedule/f-25/f-25-all-milestones.ics

And a directory full of other stuff here: https://fedorapeople.org/groups/schedule/f-25/

Here's the icons!

Here's the icons!

Updated the front-end design in PR #274

Just a quick update fro today's meeting - mizmo will review the front end UI on this and give saptaks feedback, and vivek is looking into the backend questions.

I just reviewed this and discussed w saptaks - he has a very impressive start here. there are a few css niggles on my end (might be my env's fault) but it's very accurate to the mockup. We talked about making it more responsive for narrow layouts. It's my TODO to mock up a narrow version.

Here are narrow layouts to show how the widget should behave when in a narrow situation:

Here are narrow layouts to show how the widget should behave when in a narrow situation:

@saptaks ^^ hope these help? Can you make the widget responsive as shown in these narrow mockups?

@duffy I will make it responsive to match with the narrow mockups.

thanks @saptaks! keep us posted of your progress here, and let me know as soon as I can review the front end again.