Tabs for official and unofficial ports

openSUSE · Jul 4, 2017 · 20f5a08 · 20f5a08
1 parent 337dfba
commit 20f5a08
Showing 1 changed file with 116 additions and 93 deletions.
diff --git a/app/views/distributions/leap.html.erb b/app/views/distributions/leap.html.erb
@@ -11,101 +11,124 @@
 
 <section class="my-5">
   <div class="container">
-    <h3 class="my-3">x86_64</h3>
-    <div class="card-deck">
-      <div class="card">
-        <div class="card-block">
-          <h4 class="card-title">
-            <span class="typcn typcn-download-outline"></span>
-            <%= _("DVD Image") %> (4.7GB)
-          </h4>
-          <h6 class="card-subtitle mb-2 text-muted"><%= _("For DVD and USB stick") %></h6>
-          <p class="card-text text-muted"><%= _("Contains a large collection of software for desktop or server use. Suitable for installation or upgrade.") %></p>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso" class="card-link"><%= _('Direct Link') %></a>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso.meta4" class="card-link"><%= _('Metalink') %></a>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso.sha256" class="card-link"><%= _('Checksum') %></a>
-        </div>
-      </div><!-- /.card -->
-      <div class="card">
-        <div class="card-block">
-          <h4 class="card-title">
-            <span class="typcn typcn-download-outline"></span>
-            <%= _("Network Image") %> (85MB)
-          </h4>
-          <h6 class="card-subtitle mb-2 text-muted"><%= _("For CD and USB stick") %></h6>
-          <p class="card-text text-muted"><%= _("Downloads the installation system and all packages from online repositories. Suitable for installation or upgrade.") %></p>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso" class="card-link"><%= _('Direct Link') %></a>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso.meta4" class="card-link"><%= _('Metalink') %></a>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
-          <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso.sha256" class="card-link"><%= _('Checksum') %></a>
-        </div>
-      </div><!-- /.card -->
-    </div><!-- /.card-deck -->
+    <!-- Nav tabs -->
+    <ul class="nav nav-tabs nav-justified" role="tablist">
+      <li class="nav-item">
+        <a class="nav-link active" data-toggle="tab" href="#official-ports" role="tab">
+          <%= _("Official") %>
+          <span class="badge badge-success">x86_64</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#unofficial-ports" role="tab">
+          <%= _("Unofficial") %>
+          <span class="badge badge-warning">ppc64le</span>
+          <span class="badge badge-warning">aarch64</span>
+        </a>
+      </li>
+    </ul>
 
-    <h3 class="my-3">ppc64le</h3>
-    <div class="card-deck">
-      <div class="card">
-        <div class="card-block">
-          <h4 class="card-title">
-            <span class="typcn typcn-download-outline"></span>
-            <%= _("DVD Image") %> (4.7GB)
-          </h4>
-          <h6 class="card-subtitle mb-2 text-muted"><%= _("For DVD and USB stick") %></h6>
-          <p class="card-text text-muted"><%= _("Contains a large collection of software for desktop or server use. Suitable for installation or upgrade.") %></p>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso" class="card-link"><%= _('Direct Link') %></a>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
-        </div>
-      </div><!-- /.card -->
-      <div class="card">
-        <div class="card-block">
-          <h4 class="card-title">
-            <span class="typcn typcn-download-outline"></span>
-            <%= _("Network Image") %> (85MB)
-          </h4>
-          <h6 class="card-subtitle mb-2 text-muted"><%= _("For CD and USB stick") %></h6>
-          <p class="card-text text-muted"><%= _("Downloads the installation system and all packages from online repositories. Suitable for installation or upgrade.") %></p>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso" class="card-link"><%= _('Direct Link') %></a>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
-          <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
-        </div>
-      </div><!-- /.card -->
-    </div><!-- /.card-deck -->
+    <div class="tab-content">
+      <div class="tab-pane active" id="official-ports" role="tabpanel">
+        <h3 class="my-3">x86_64</h3>
+        <div class="card-deck">
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">
+                <span class="typcn typcn-download-outline"></span>
+                <%= _("DVD Image") %> (4.7GB)
+              </h4>
+              <h6 class="card-subtitle mb-2 text-muted"><%= _("For DVD and USB stick") %></h6>
+              <p class="card-text text-muted"><%= _("Contains a large collection of software for desktop or server use. Suitable for installation or upgrade.") %></p>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso" class="card-link"><%= _('Direct Link') %></a>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso.meta4" class="card-link"><%= _('Metalink') %></a>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-x86_64.iso.sha256" class="card-link"><%= _('Checksum') %></a>
+            </div>
+          </div><!-- /.card -->
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">
+                <span class="typcn typcn-download-outline"></span>
+                <%= _("Network Image") %> (85MB)
+              </h4>
+              <h6 class="card-subtitle mb-2 text-muted"><%= _("For CD and USB stick") %></h6>
+              <p class="card-text text-muted"><%= _("Downloads the installation system and all packages from online repositories. Suitable for installation or upgrade.") %></p>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso" class="card-link"><%= _('Direct Link') %></a>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso.meta4" class="card-link"><%= _('Metalink') %></a>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
+              <a href="http://download.opensuse.org/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-x86_64.iso.sha256" class="card-link"><%= _('Checksum') %></a>
+            </div>
+          </div><!-- /.card -->
+        </div><!-- /.card-deck -->
+      </div><!-- /#official-ports.tab-pane -->
 
-    <h3 class="my-3">aarch64</h3>
-    <div class="card-deck">
-      <div class="card">
-        <div class="card-block">
-          <h4 class="card-title">
-            <span class="typcn typcn-download-outline"></span>
-            <%= _("DVD Image") %> (4.7GB)
-          </h4>
-          <h6 class="card-subtitle mb-2 text-muted"><%= _("For DVD and USB stick") %></h6>
-          <p class="card-text text-muted"><%= _("Contains a large collection of software for desktop or server use. Suitable for installation or upgrade.") %></p>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso" class="card-link"><%= _('Direct Link') %></a>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
-        </div>
-      </div><!-- /.card -->
-      <div class="card">
-        <div class="card-block">
-          <h4 class="card-title">
-            <span class="typcn typcn-download-outline"></span>
-            <%= _("Network Image") %> (85MB)
-          </h4>
-          <h6 class="card-subtitle mb-2 text-muted"><%= _("For CD and USB stick") %></h6>
-          <p class="card-text text-muted"><%= _("Downloads the installation system and all packages from online repositories. Suitable for installation or upgrade.") %></p>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso" class="card-link"><%= _('Direct Link') %></a>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
-          <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
-        </div>
-      </div><!-- /.card -->
-    </div><!-- /.card-deck -->
+      <div class="tab-pane" id="unofficial-ports" role="tabpanel">
+        <h3 class="my-3">ppc64le</h3>
+        <div class="card-deck">
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">
+                <span class="typcn typcn-download-outline"></span>
+                <%= _("DVD Image") %> (4.7GB)
+              </h4>
+              <h6 class="card-subtitle mb-2 text-muted"><%= _("For DVD and USB stick") %></h6>
+              <p class="card-text text-muted"><%= _("Contains a large collection of software for desktop or server use. Suitable for installation or upgrade.") %></p>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso" class="card-link"><%= _('Direct Link') %></a>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-ppc64le-Build0156-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
+            </div>
+          </div><!-- /.card -->
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">
+                <span class="typcn typcn-download-outline"></span>
+                <%= _("Network Image") %> (85MB)
+              </h4>
+              <h6 class="card-subtitle mb-2 text-muted"><%= _("For CD and USB stick") %></h6>
+              <p class="card-text text-muted"><%= _("Downloads the installation system and all packages from online repositories. Suitable for installation or upgrade.") %></p>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso" class="card-link"><%= _('Direct Link') %></a>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
+              <a href="http://download.opensuse.org/ports/ppc/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-ppc64le-Build0156-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
+            </div>
+          </div><!-- /.card -->
+        </div><!-- /.card-deck -->
+
+        <h3 class="my-3">aarch64</h3>
+        <div class="card-deck">
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">
+                <span class="typcn typcn-download-outline"></span>
+                <%= _("DVD Image") %> (4.7GB)
+              </h4>
+              <h6 class="card-subtitle mb-2 text-muted"><%= _("For DVD and USB stick") %></h6>
+              <p class="card-text text-muted"><%= _("Contains a large collection of software for desktop or server use. Suitable for installation or upgrade.") %></p>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso" class="card-link"><%= _('Direct Link') %></a>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-DVD-aarch64-Build0212-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
+            </div>
+          </div><!-- /.card -->
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">
+                <span class="typcn typcn-download-outline"></span>
+                <%= _("Network Image") %> (85MB)
+              </h4>
+              <h6 class="card-subtitle mb-2 text-muted"><%= _("For CD and USB stick") %></h6>
+              <p class="card-text text-muted"><%= _("Downloads the installation system and all packages from online repositories. Suitable for installation or upgrade.") %></p>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso" class="card-link"><%= _('Direct Link') %></a>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso.meta4" class="card-link"><%= _('Metalink') %></a>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso?mirrorlist" class="card-link"><%= _('Pick Mirror') %></a>
+              <a href="http://download.opensuse.org/ports/aarch64/distribution/leap/42.2/iso/openSUSE-Leap-42.2-NET-aarch64-Build0212-Media.iso.sha256" class="card-link"><%= _('Checksum') %></a>
+            </div>
+          </div><!-- /.card -->
+        </div><!-- /.card-deck -->
+      </div><!-- /#unofficial-ports.tab-pane -->
+    </div><!-- /.tab-content -->
   </div><!-- /.container -->
 </section>