Merge pull request #12870 from mtruj013/riscv-visual

/download/risc-v redesign
canonical · Jul 17, 2023 · 76281b1 · 76281b1
2 parents 564c6b5 + d3c7082
commit 76281b1
Show file tree

Hide file tree

Showing 10 changed files with 279 additions and 185 deletions.
diff --git a/static/js/src/risc-v.js b/static/js/src/risc-v.js
@@ -0,0 +1,19 @@
+// Toggles show board based on selection on small screens
+
+const boards = document.querySelectorAll(`[role=tabpanel]`);
+const dropdownSelect = document.getElementById("boardSelect");
+
+dropdownSelect.addEventListener("change", (event) => {
+  selectBoard();
+});
+
+function selectBoard() {
+  boards.forEach((board) => {
+    if (board.id === dropdownSelect.value) {
+      board.classList.remove("u-hide");
+      board.focus();
+    } else {
+      board.classList.add("u-hide");
+    }
+  });
+}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -1383,3 +1383,17 @@ hr.p-separator.is-shallow {
 
   background-color: #fff;
 }
+
+.risc-v-container {
+  @extend .p-strip--light;
+  @extend .u-aspect-ratio--3-2;
+
+  margin-top: $spv--small;
+  padding-bottom: $spv--large;
+  padding-top: $spv--large;
+
+  .risc-v-image {
+    height: 13rem;
+    width: auto;
+  }
+}
diff --git a/templates/download/risc-v/index.html b/templates/download/risc-v/index.html
@@ -4,7 +4,7 @@
 
 {% block meta_description %}Use Ubuntu on RISC-V platforms for the familiar developer experience and an accelerated path to production{% endblock meta_description %}
 
-{% block meta_copydoc%}https://docs.google.com/document/d/1kkJeq9HdH3iWV35HwihcJd3CxZw9Jy21W66lJl8VbWs/edit#{% endblock meta_copydoc %}
+{% block meta_copydoc%} https://docs.google.com/document/d/1kkJeq9HdH3iWV35HwihcJd3CxZw9Jy21W66lJl8VbWs/ {% endblock meta_copydoc %}
 
 {% block content %}
 
@@ -41,15 +41,26 @@ <h1 class="p-heading--2"><strong>Download Ubuntu for RISC-V Platforms</strong></
   <div class="row">
     <div class="col-3 col-medium-2">
       <div class="p-strip is-shallow u-no-padding--top"><h2 class="p-text--small-caps">Choose a board</h2></div>
-      <ul class="js-tabbed-content p-tabs--vertical is-black" role="tablist" aria-label="Robotics features">
-        <li><button class="p-tabs__item" id="quemu-sifive-image" role="tab" aria-selected="true" tab-index="-1" aria-controls="quemu-sifive-image-tab">SiFive Unmatched</button></li>
-        <li><button class="p-tabs__item" id="starfive-visionfive-board" role="tab" aria-selected="false" aria-controls="starfive-visionfive-board-tab">StarFive VisionFive</button></li>
-        <li><button class="p-tabs__item" id="starfive-visionfive-2" role="tab" aria-selected="false" aria-controls="starfive-visionfive-2-tab">StarFive VisionFive 2</button></li>
-        <li><button class="p-tabs__item" id="allwinner-nezha" role="tab" aria-selected="false" aria-controls="allwinner-nezha-tab">AllWinner Nezha</button></li>
-        <li><button class="p-tabs__item" id="sipeed-licheerv-dock" role="tab" aria-selected="false" aria-controls="sipeed-licheerv-dock-tab">Sipeed LicheeRV Dock</button></li>
+      <ul class="js-tabbed-content p-tabs--vertical is-black u-hide--small" role="tablist" aria-label="Robotics features">
+        <li><button class="p-tabs__item" id="allwinner-nezha" role="tab" aria-selected="true" aria-controls="allwinner-nezha-tab">AllWinner Nezha</button></li>
         <li><button class="p-tabs__item" id="microchip-polarfire-soc-fpga-icicle-kit" role="tab" aria-selected="false" aria-controls="microchip-polarfire-soc-fpga-icicle-kit-tab">Polarfire SoC FPGA Icicle</button></li>
         <li><button class="p-tabs__item" id="qemu" role="tab" aria-selected="false" aria-controls="qemu-tab">QEMU emulator</button></li>
+        <li><button class="p-tabs__item" id="quemu-sifive-image" role="tab" aria-selected="false" aria-controls="quemu-sifive-image-tab">SiFive Unmatched</button></li>
+        <li><button class="p-tabs__item" id="sipeed-licheerv-dock" role="tab" aria-selected="false" aria-controls="sipeed-licheerv-dock-tab">Sipeed LicheeRV Dock</button></li>
+        <li><button class="p-tabs__item" id="starfive-visionfive-board" role="tab" aria-selected="false" aria-controls="starfive-visionfive-board-tab">StarFive VisionFive</button></li>
+        <li><button class="p-tabs__item" id="starfive-visionfive-2" role="tab" aria-selected="false" aria-controls="starfive-visionfive-2-tab">StarFive VisionFive 2</button></li>
       </ul>
+      <form class="u-hide--large u-hide--medium">
+        <select name="boardSelect" id="boardSelect">
+          <option value="allwinner-nezha-tab" selected="">AllWinner Nezha</option>
+          <option value="microchip-polarfire-soc-fpga-icicle-kit-tab">Polarfire SoC FPGA Icicle</option>
+          <option value="qemu-tab">QEMU emulator</option>
+          <option value="quemu-sifive-image-tab">SiFive Unmatched</option>
+          <option value="sipeed-licheerv-dock-tab">Sipeed LicheeRV Dock</option>
+          <option value="starfive-visionfive-board-tab">StarFive VisionFive</option>
+          <option value="starfive-visionfive-2-tab">StarFive VisionFive 2</option>
+        </select>
+      </form>
     </div>
     <div class="col-9 col-medium-4">
       {% include "download/risc-v/tab-1.html" %}
@@ -68,4 +79,6 @@ <h1 class="p-heading--2"><strong>Download Ubuntu for RISC-V Platforms</strong></
 
 <script src="{{ versioned_static('js/dist/tabbedContent.js') }}"></script>
 
+<script src="{{ versioned_static('js/src/risc-v.js') }}"></script>
+
 {% endblock content %}
diff --git a/templates/download/risc-v/tab-1.html b/templates/download/risc-v/tab-1.html
@@ -1,42 +1,32 @@
-<div tabindex="0" role="tabpanel" id="quemu-sifive-image-tab" aria-labelledby="quemu-sifive-image">
-  <div class="row">
-    <div class="col-6">
-      <div class="p-strip is-shallow u-no-padding--top">
-        <h2>SiFive Unmatched</h2>
-        <h3>Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
-      </div>
-      <div class="p-notification--information is-inline">
-        <div class="p-notification__content">
-          <p class="p-notification__title">Note:</p>
-          <p class="p-notification__message">If you have an NVMe drive, we advise you to use the Ubuntu Server live installer.</p>
-        </div>
-      </div>
-      <p class="u-sv3">
-        <a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+unmatched.img.xz">Download 23.04</a>
-        <a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+unmatched.img.xz">Download 22.04.2</a>
-      </p>
+<div tabindex="0" role="tabpanel" id="allwinner-nezha-tab" aria-labelledby="allwinner-nezha" aria-hidden="true">
+  <div class="row p-strip is-shallow u-no-padding--top">
+    <div class="col-3">
+      <h2 class="u-hide--small">AllWinner Nezha</h2>
     </div>
-    <div class="col-3 u-hide--medium u-hide--small p-strip is-shallow u-no-padding--bottom">
+    <div class="col-6 risc-v-container u-vertically-center u-align--center">
       {{ image (
-        url="https://assets.ubuntu.com/v1/37c094a9-SiFive+Unmatched+Board.jpg",
+        url="https://assets.ubuntu.com/v1/5207975e-0cc9bac3-Allwinner+Nezha+Board.png",
         alt="",
-        width="720",
-        height="480",
+        width="400",
+        height="240",
         hi_def=True,
-        loading="auto"
+        loading="auto",
+        attrs={"class": "risc-v-image"}
         ) | safe
-        }}
+      }}
     </div>
   </div>
-  <div class="row">
+  <div class="row p-strip u-no-padding--top">
+    <hr class="col-9">
+    <div class="col-3">
+      <h3 class="p-heading--5 u-no-padding--top">Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
+    </div>
     <div class="col-6">
-      <hr class="u-no-margin--bottom">
-      <h3 class="u-sv3">Ubuntu Server live installer</h3>
-			<p>
-				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-live-server-riscv64.img.gz">Download 23.04 live installer</a>
-				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-live-server-riscv64.img.gz">Download 22.04.2 live installer</a>
+      <p>
+				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+nezha.img.xz">Download 23.04</a>
+				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+nezha.img.xz">Download 22.04.2</a>
 			</p>
-			<p><a href="https://wiki.ubuntu.com/RISC-V/SiFive%20HiFive%20Unmatched">How to install Ubuntu on SiFive HiFive Unmatched</a></p>
-		</div>
-	</div>
+			<p><a href="https://wiki.ubuntu.com/RISC-V/Nezha%20D1">How to install Ubuntu on the Nezha</a></p>
+    </div>
+  </div>
 </div>
diff --git a/templates/download/risc-v/tab-2.html b/templates/download/risc-v/tab-2.html
@@ -1,26 +1,38 @@
-<div tabindex="0" role="tabpanel" id="starfive-visionfive-board-tab" aria-labelledby="starfive-visionfive-board" aria-hidden="true">
-	<div class="row">
-		<div class="col-6">
-			<div class="p-strip is-shallow u-no-padding--top">
-				<h2>StarFive VisionFive</h2>
-				<h3>Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
-			</div>
-			<p>
-				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+visionfive.img.xz">Download 23.04</a>
-				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+visionfive.img.xz">Download 22.04.2</a>
+<div tabindex="0" role="tabpanel" id="microchip-polarfire-soc-fpga-icicle-kit-tab" aria-labelledby="microchip-polarfire-soc-fpga-icicle-kit" aria-hidden="true">
+	<div class="row p-strip is-shallow u-no-padding--top">
+    <div class="col-3">
+      <h2 class="u-hide--small">Microchip Polarfire SoC <br>FPGA Icicle Kit</h2>
+    </div>
+    <div class="col-6 risc-v-container u-vertically-center u-align--center">
+      {{ 
+        image (
+        url="https://assets.ubuntu.com/v1/0f48dfd1-Microchip+PolarFire.png",
+        alt="",
+        width="400",
+        height="207",
+        hi_def=True,
+        loading="lazy",
+        attrs={"class": "risc-v-image"}
+        ) | safe
+      }}
+    </div>
+  </div>
+  <div class="row p-strip u-no-padding--top">
+    <hr class="col-9">
+    <div class="col-3">
+      <h3 class="p-heading--5 u-no-padding--top">Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
+    </div>
+    <div class="col-6">
+      <p>Works on:</p>
+			<ul class="p-list">
+				<li class="p-list__item is-ticked">The Microchip Polarfire SoC FPGA Icicle Kit with <a href="https://github.com/polarfire-soc/hart-software-services/releases/tag/v2022.10">HSS v2022.10</a></li>
+			</ul>
+      <hr class="is-fixed-width col-6">
+      <p>
+				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+icicle.img.xz">Download 23.04</a>
+				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+icicle.img.xz">Download 22.04.2</a>
 			</p>
-			<p><a href="https://wiki.ubuntu.com/RISC-V/StarFive%20VisionFive">How to install Ubuntu on the VisionFive</a></p>
-		</div>
-		<div class="col-3 u-hide--medium u-hide--small p-strip is-shallow u-no-padding--bottom">
-			{{ image (
-				url="https://assets.ubuntu.com/v1/470a2398-StarFive+VisionFive+Board-NoBg.png",
-				alt="",
-				width="1056",
-				height="854",
-				hi_def=True,
-				loading="auto"
-				) | safe
-			  }}
-		</div>
-	</div>
-</div>
+      <p><a href="https://wiki.ubuntu.com/RISC-V/PolarFire%20SoC%20FPGA%20Icicle%20Kit">How to install Ubuntu on the Microchip Polarfire SoC FPGA Icicle Kit</a></p>
+    </div>
+  </div>
+</div>
diff --git a/templates/download/risc-v/tab-3.html b/templates/download/risc-v/tab-3.html
@@ -1,25 +1,44 @@
-<div tabindex="0" role="tabpanel" id="starfive-visionfive-2-tab" aria-labelledby="starfive-visionfive-2" aria-hidden="true">
-	<div class="row">
-		<div class="col-6">
-			<div class="p-strip is-shallow u-no-padding--top">
-        <h2>StarFive VisionFive 2</h2>
-				<h3>Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
-			</div>
-			<p>
-				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+visionfive2.img.xz">Download 23.04</a>
+<div tabindex="0" role="tabpanel" id="qemu-tab" aria-labelledby="qemu" aria-hidden="true">
+  <div class="row p-strip is-shallow u-no-padding--top">
+    <div class="col-3">
+      <h2 class="u-hide--small">QEMU emulator</h2>
+    </div>
+    <div class="col-6 risc-v-container u-vertically-center u-align--center">
+      {{
+				image (
+				url="https://assets.ubuntu.com/v1/308d48cd-Qemu-logo.png",
+				alt="",
+				width="377",
+				height="120",
+				hi_def=True,
+				loading="lazy",
+				) | safe
+			  }}
+    </div>
+  </div>
+  <div class="row p-strip u-no-padding--top">
+    <hr class="col-9">
+    <div class="col-3">
+      <h3 class="p-heading--5 u-no-padding--top">Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
+    </div>
+    <div class="col-6">
+      <p class="u-sv3">
+				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+unmatched.img.xz">Download 23.04</a>
+				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+unmatched.img.xz">Download 22.04.2</a>
 			</p>
-			<p><a href="https://wiki.ubuntu.com/RISC-V/StarFive%20VisionFive%202">How to install Ubuntu on the VisionFive 2</a></p>
-		</div>
-		<div class="col-3 u-hide--medium u-hide--small p-strip is-shallow u-no-padding--bottom">
-      {{ image (
-          url="https://assets.ubuntu.com/v1/3579cbd3-starfive-visionfive-2.jpg",
-          alt="",
-          width="500",
-          height="400",
-          hi_def=True,
-          loading="lazy"
-          ) | safe
-        }}
-		</div>
-	</div>
+    </div>
+  </div>
+  <div class="row p-strip u-no-padding--top">
+    <hr class="is-fixed-width col-9">
+    <div class="col-3">
+      <h3 class="p-heading--5 u-no-padding--top">Ubuntu Server <br class="u-hide--small">live installer</h3>
+    </div>
+    <div class="col-6">
+      <p>
+				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-live-server-riscv64.img.gz">Download 23.04 live installer</a>
+				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-live-server-riscv64.img.gz">Download 22.04.2 live installer</a>
+			</p>
+      <p><a href="https://wiki.ubuntu.com/RISC-V/QEMU">How to install Ubuntu on QEMU RISC-V</a></p>
+    </div>
+  </div>
 </div>
diff --git a/templates/download/risc-v/tab-4.html b/templates/download/risc-v/tab-4.html
@@ -1,24 +1,45 @@
-<div tabindex="0" role="tabpanel" id="allwinner-nezha-tab" aria-labelledby="allwinner-nezha" aria-hidden="true">
-	<div class="row">
-		<div class="col-6">
-      <h2>AllWiner Nezha</h2>
-			<h3>Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
-			<p>
-				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+nezha.img.xz">Download 23.04</a>
-				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+nezha.img.xz">Download 22.04.2</a>
+<div tabindex="0" role="tabpanel" id="quemu-sifive-image-tab" aria-labelledby="quemu-sifive-image">
+  <div class="row p-strip is-shallow u-no-padding--top">
+    <div class="col-3">
+      <h2 class="u-hide--small">SiFive Unmatched</h2>
+    </div>
+    <div class="col-6 risc-v-container u-vertically-center u-align--center">
+      {{ image (
+        url="https://assets.ubuntu.com/v1/37c094a9-SiFive+Unmatched+Board.jpg",
+        alt="",
+        width="504",
+        height="286",
+        hi_def=True,
+        loading="auto",
+        attrs={"class": "risc-v-image"}
+        ) | safe
+        }}
+    </div>
+  </div>
+  <div class="row p-strip u-no-padding--top">
+    <hr class="col-9">
+    <div class="col-3">
+      <h3 class="p-heading--5 u-no-padding--top">Ubuntu Server <br class="u-hide--small">preinstalled image</h3>
+    </div>
+    <div class="col-6">
+      <p class="p-notification__message"><i class="p-icon--information"></i> If you have an NVMe drive, we advise you to use the Ubuntu Server live installer.</p>
+      <p class="u-sv3">
+        <a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-preinstalled-server-riscv64+unmatched.img.xz">Download 23.04</a>
+        <a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-preinstalled-server-riscv64+unmatched.img.xz">Download 22.04.2</a>
+      </p>
+    </div>
+  </div>
+  <div class="row p-strip u-no-padding--top">
+    <hr class="col-9">
+    <div class="col-3">
+      <h3 class="p-heading--5 u-no-padding--top">Ubuntu Server <br class="u-hide--small">live installer</h3>
+    </div>
+    <div class="col-6">
+      <p>
+				<a class="p-button--positive" href="https://cdimage.ubuntu.com/releases/23.04/release/ubuntu-23.04-live-server-riscv64.img.gz">Download 23.04 live installer</a>
+				<a class="p-button" href="https://cdimage.ubuntu.com/releases/22.04.2/release/ubuntu-22.04.2-live-server-riscv64.img.gz">Download 22.04.2 live installer</a>
 			</p>
-			<p><a href="https://wiki.ubuntu.com/RISC-V/Nezha%20D1">How to install Ubuntu on the Nezha</a></p>
-		</div>
-		<div class="col-3 u-hide--medium u-hide--small p-strip is-shallow u-no-padding--bottom">
-			{{ image (
-				url="https://assets.ubuntu.com/v1/0cc9bac3-Allwinner+Nezha+Board.png",
-				alt="",
-				width="600",
-				height="400",
-				hi_def=True,
-				loading="auto"
-				) | safe
-			  }}
-		</div>
-	</div>
+			<p><a href="https://wiki.ubuntu.com/RISC-V/SiFive%20HiFive%20Unmatched">How to install Ubuntu on SiFive HiFive Unmatched</a></p>
+    </div>
+  </div>
 </div>