From 586ea759404e2905fe53ad9c1dad8e563a5cde7f Mon Sep 17 00:00:00 2001
From: Allen Bai <abai@redhat.com>
Date: Dec 17 2019 15:48:28 +0000
Subject: [PATCH 1/2] coreos-download: add tab view for coreos download page


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>

---

diff --git a/sites/getfedora.org/site/coreos/download/index.html b/sites/getfedora.org/site/coreos/download/index.html
index a39b66d..5954170 100644
--- a/sites/getfedora.org/site/coreos/download/index.html
+++ b/sites/getfedora.org/site/coreos/download/index.html
@@ -21,7 +21,7 @@
         </p>
       </div>
     </div>
-    <hr>
+    <br>
     <div id="coreos-download-app">
     </div>
   </div>
diff --git a/sites/static/js/coreos-download.js b/sites/static/js/coreos-download.js
index 1d4aa0e..826f077 100644
--- a/sites/static/js/coreos-download.js
+++ b/sites/static/js/coreos-download.js
@@ -238,6 +238,36 @@ var coreos_download_app = new Vue({
       } 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 "Cloud Launchable":
+          show_id = 'cloud-launchable';
+          id_list.map(id => document.getElementById(id).hidden = (id !== show_id));
+          break;
+        case "Bare Metal & Virtualized":
+          show_id = 'metal-virt';
+          id_list.map(id => document.getElementById(id).hidden = (id !== show_id));
+          break;
+        case "For Cloud Operators":
+          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 } }, "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 } }, "Bare Metal & Virtualized");
+      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 } }, "For Cloud Operators");
+      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 +456,20 @@ var coreos_download_app = new Vue({
         ])
       ]);
 
+      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 {

From f54b98a9b863804c59fb323e94713b5759931d8e Mon Sep 17 00:00:00 2001
From: Allen Bai <abai@redhat.com>
Date: Dec 17 2019 19:32:30 +0000
Subject: [PATCH 2/2] coreos-download: use global constant for innertext of tabs


Signed-off-by: Allen Bai <abai@redhat.com>

---

diff --git a/sites/static/js/coreos-download.js b/sites/static/js/coreos-download.js
index 826f077..9812aae 100644
--- a/sites/static/js/coreos-download.js
+++ b/sites/static/js/coreos-download.js
@@ -84,6 +84,12 @@ var coreos_download_app = new Vue({
       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() },
@@ -242,28 +248,28 @@ var coreos_download_app = new Vue({
     toggleHidden: function(e) {
       const id_list = ['cloud-launchable', 'metal-virt', 'cloud-operator'];
       switch(e.target.innerText) {
-        case "Cloud Launchable":
+        case this.tabInnerText.cloud_launchable:
           show_id = 'cloud-launchable';
           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));
           break;
-        case "Bare Metal & Virtualized":
+        case this.tabInnerText.metal_virt:
           show_id = 'metal-virt';
           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));
           break;
-        case "For Cloud Operators":
+        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 } }, "Cloud Launchable");
+      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 } }, "Bare Metal & Virtualized");
+      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 } }, "For Cloud Operators");
+      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 ]);