| |
@@ -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 {
|
| |
abai
commented 5 years ago
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