#77 coreos-download: add tab view for coreos download page
Merged 10 months ago by bcotton. Opened 10 months ago by abai.
fedora-web/ abai/websites coreos-download  into  master

@@ -21,7 +21,7 @@ 

          </p>

        </div>

      </div>

-     <hr>

+     <br>

      <div id="coreos-download-app">

      </div>

    </div>

@@ -84,6 +84,12 @@ 

        bareMetal: {},

        virtualized: {},

        cloud: {}

+     },

+     // innerText of tab button

+     tabInnerText: {

+       cloud_launchable: "Cloud Launchable",

+       metal_virt: "Bare Metal & Virtualized",

+       cloud_operator: "For Cloud Operators"

      }

    },

    created: function() { this.refreshStream() },
@@ -238,6 +244,36 @@ 

        } else {

          return stringize(Math.floor(elapsed/msPerYear), "year");

        }

+     },

+     toggleHidden: function(e) {

+       const id_list = ['cloud-launchable', 'metal-virt', 'cloud-operator'];

+       switch(e.target.innerText) {

+         case this.tabInnerText.cloud_launchable:

+           show_id = 'cloud-launchable';

+           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

+           break;

+         case this.tabInnerText.metal_virt:

+           show_id = 'metal-virt';

+           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

+           break;

+         case this.tabInnerText.cloud_operator:

+           show_id = 'cloud-operator';

+           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

+           break;

+       }

+     },

+     getNavbar: function(h) {

+       nav_cloud_launchable_btn = h('button', { class: "nav-link active", attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, this.tabInnerText.cloud_launchable);

+       nav_cloud_launchable = h('li', { class: "nav-item mr-3 ml-3" }, [ nav_cloud_launchable_btn ]);

+ 

+       nav_metal_virt_btn = h('button', { class: "nav-link", attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, this.tabInnerText.metal_virt);

+       nav_metal_virt = h('li', { class: "nav-item mr-3" }, [ nav_metal_virt_btn ]);

+ 

+       nav_cloud_operator_btn = h('button', { class: "nav-link", attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, this.tabInnerText.cloud_operator);

+       nav_cloud_operator = h('li', { class: "nav-item" }, [ nav_cloud_operator_btn ]);

+ 

+       navbar = h('ul', { class: "nav nav-tabs" }, [ nav_cloud_launchable, nav_metal_virt, nav_cloud_operator ]);

+       return navbar

      }

    },

    render: function(h) {
@@ -426,22 +462,20 @@ 

          ])

        ]);

  

+       let navbar = this.getNavbar(h);

+ 

+       let bare_metal_container = h('div', { class: "col-12 p-0" }, [ bareMetalTitle, verifyBlurb, bareMetal ]);

+       let virtualized_container = h('div', { class: "col-12 p-0" }, [ virtualizedTitle, verifyBlurb, virtualized ]);

+ 

+       let cloud_launchable_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: "cloud-launchable", hidden: false} }, [ cloudLaunchableTitle, streamName, cloudLaunchable ]);

+       let metal_virt_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: "metal-virt", hidden: true } }, [ bare_metal_container, virtualized_container ]);

+       let cloud_operators_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: "cloud-operator", hidden: true } }, [ cloudTitle, verifyBlurb, cloud ]);

+ 

        return h('div', {}, [

-         streamName,

-         cloudLaunchableTitle,

-         cloudLaunchable,

-         h('hr'),

-         bareMetalTitle,

-         verifyBlurb,

-         bareMetal,

-         h('hr'),

-         virtualizedTitle,

-         verifyBlurb,

-         virtualized,

-         h('hr'),

-         cloudTitle,

-         verifyBlurb,

-         cloud

+         navbar,

+         cloud_launchable_container,

+         metal_virt_container,

+         cloud_operators_container

        ]);

      }

      else {

The current view for coreos download page requires users scrolling a
lot in order to view cloud operators download because of the long list of
cloud launchable instances. To improve this, tab view is added.

Related to: https://pagure.io/fedora-websites/issue/964
Signed-off-by: Allen Bai abai@redhat.com

cc @rfairley @jlebon @dustymabe
Could you take a quick look to see if this looks reasonable? Thanks :smile:

LGTM. I'll merge if we don't get any objections.

Metadata Update from @bcotton:
- Request assigned

10 months ago

Metadata Update from @bcotton:
- Pull-request tagged with: content, design

10 months ago

Minor: the three tab inner text strings e.g. "For Cloud Operators" could be made constants (perhaps cloudTabInnerText, defined globally for this file) - and refer to the constant elsewhere (e.g. on https://pagure.io/fork/abai/fedora-web/websites/blob/826f0773a947171fe2d1b32483f6d2724c03c673/f/sites/static/js/coreos-download.js#_253). Not a major issue as it'd be clear the tab doesn't work if one of the inner text string definitions got changed without changing the place it's used - but thinking it'd be cleaner to define it once, if the two definitions are expected to match.

One minor comment, otherwise LGTM! Ran it locally and the page looks good.

1 new commit added

  • coreos-download: use global constant for innertext of tabs
10 months ago

@rfairley Thanks for the review! Updated with global constants for tab inner text.

Pull-Request has been merged by bcotton

10 months ago