From 4b1330bf6f170670837aaa082130e7cc5bffda67 Mon Sep 17 00:00:00 2001
From: Robert Mayr <robyduck@fedoraproject.org>
Date: Aug 24 2016 21:10:37 +0000
Subject: substitute prerelease banners with a web element in getfedora.org


---

diff --git a/getfedora.org/data/content/cloud/download/atomic.html b/getfedora.org/data/content/cloud/download/atomic.html
index 51ff495..e9d440e 100644
--- a/getfedora.org/data/content/cloud/download/atomic.html
+++ b/getfedora.org/data/content/cloud/download/atomic.html
@@ -250,15 +250,27 @@
             <li><p><a class="download-cloud-splash" href="${global_variables.path['download_atomic']}/stable/Atomic/x86_64/iso/Fedora-Atomic-dvd-x86_64-${global_variables.release['curr_id']}-${global_variables.release['atomic_composedate']}.iso">${_('64-bit Atomic Host ISO image')}</a></p></li>
           </ul>
         </p>
-          <div class="bottom-margin">
-          <py:choose>
+          <div class="top-space bottom-margin">
+            <py:choose>
             <py:when test="global_variables.release['curr_state'] == 'Alpha'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/cloud/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Alpha is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}alpha.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Alpha')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Alpha images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
             <py:when test="global_variables.release['curr_state'] == 'Beta'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/cloud/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Beta is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}beta.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Beta')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Beta images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
           </py:choose>
           </div>
diff --git a/getfedora.org/data/content/cloud/download/docker.html b/getfedora.org/data/content/cloud/download/docker.html
index d20b602..662de61 100644
--- a/getfedora.org/data/content/cloud/download/docker.html
+++ b/getfedora.org/data/content/cloud/download/docker.html
@@ -89,15 +89,27 @@
     </div>
 
     <div class="col-md-3 col-xs-12 col-md-offset-1 top-margin">
-          <div class="bottom-margin">
-          <py:choose>
+          <div class="top-space bottom-margin">
+            <py:choose>
             <py:when test="global_variables.release['curr_state'] == 'Alpha'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/cloud/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Alpha is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}alpha.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Alpha')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Alpha images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
             <py:when test="global_variables.release['curr_state'] == 'Beta'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/cloud/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Beta is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}beta.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Beta')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Beta images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
           </py:choose>
           </div>
diff --git a/getfedora.org/data/content/cloud/download/index.html b/getfedora.org/data/content/cloud/download/index.html
index 4b31eca..8bde729 100644
--- a/getfedora.org/data/content/cloud/download/index.html
+++ b/getfedora.org/data/content/cloud/download/index.html
@@ -445,15 +445,27 @@
           </ul>
         </p>
 -->
-          <div class="bottom-margin">
-          <py:choose>
+          <div class="top-space bottom-margin">
+            <py:choose>
             <py:when test="global_variables.release['curr_state'] == 'Alpha'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/cloud/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Alpha is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}alpha.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Alpha')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Alpha images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
             <py:when test="global_variables.release['curr_state'] == 'Beta'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/cloud/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Beta is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}beta.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Beta')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Beta images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
           </py:choose>
           </div>
diff --git a/getfedora.org/data/content/server/download/index.html b/getfedora.org/data/content/server/download/index.html
index d115b79..c2c1d0e 100644
--- a/getfedora.org/data/content/server/download/index.html
+++ b/getfedora.org/data/content/server/download/index.html
@@ -54,15 +54,27 @@
           <li><p><a class="server-download-splash" href="${global_variables.path['download']}/${global_variables.release['curr_id']}/Server/x86_64/iso/Fedora-Server-netinst-x86_64-${global_variables.release['curr_id']}-${global_variables.release['RC_gold']}.iso">${Markup(_('64-bit %sMB image')) % global_variables.iso_size['x86_64_server_net']}</a></p></li>
           </ul>
           </p>
-          <div class="bottom-margin">
-          <py:choose>
+          <div class="top-space bottom-margin">
+            <py:choose>
             <py:when test="global_variables.release['curr_state'] == 'Alpha'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/server/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Alpha is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}alpha.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Alpha')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Alpha images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
             <py:when test="global_variables.release['curr_state'] == 'Beta'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-              <a href="${path}/${lang}/server/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Beta is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}beta.png" /></a>
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Beta')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Beta images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
           </py:choose>
           </div>
diff --git a/getfedora.org/data/content/workstation/download/index.html b/getfedora.org/data/content/workstation/download/index.html
index f6db01b..79337f2 100644
--- a/getfedora.org/data/content/workstation/download/index.html
+++ b/getfedora.org/data/content/workstation/download/index.html
@@ -63,15 +63,27 @@
           <li><p><a class="ws-download-splash" href="${global_variables.path['download']}/${global_variables.release['curr_id']}/Workstation/i386/iso/Fedora-Workstation-netinst-i386-${global_variables.release['curr_id']}-${global_variables.release['RC_gold']}.iso">${Markup(_('32-bit %sMB image')) % global_variables.iso_size['i386_workstation_net']}</a></p></li>
           </ul>
           </p>
-          <div class="bottom-margin">
-          <py:choose>
-      			<py:when test="global_variables.release['curr_state'] == 'Alpha'">
-              <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-      				<a href="${path}/${lang}/workstation/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Alpha is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}alpha.png" /></a>
-      			</py:when>
-      			<py:when test="global_variables.release['curr_state'] == 'Beta'">
-                <h3>${Markup(_('Try Fedora %(rel)s %(state)s')) % {'rel':global_variables.release['next_id'], 'state':global_variables.release['curr_state']}}</h3>
-      			    <a href="${path}/${lang}/workstation/prerelease"><img alt="Fedora ${global_variables.release['next_id']} Beta is here!" src="${path}/static/images/banners/f${global_variables.release['next_id']}beta.png" /></a>
+          <div class="top-space bottom-margin">
+            <py:choose>
+            <py:when test="global_variables.release['curr_state'] == 'Alpha'">
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Alpha')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Alpha images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
+            </py:when>
+            <py:when test="global_variables.release['curr_state'] == 'Beta'">
+              <div class="prerelease-box">
+                <h5>${Markup(_('F%(rel)s Beta')) % {'rel':global_variables.release['next_id']}}</h5>
+                <h4>${_('Try a pre-release')}</h4>
+                <p>${_('We\'re working on our next release.')}<br />
+                    ${Markup(_('Help us get F%(rel)s ready!')) % {'rel':global_variables.release['next_id']}}</p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-download"></i><a href="../prerelease">${Markup(_('Download F%(rel)s Beta images')) % {'rel':global_variables.release['next_id']}}</a></p>
+                <p><i class="fa fa-fw fa-sm header-icon fa-book"></i><a href="//fedoraproject.org/wiki/QA/Join#release-validation">${_('How to test pre-releases')}</a></p>
+              </div>
             </py:when>
           </py:choose>
           </div>
diff --git a/getfedora.org/static/css/app.css b/getfedora.org/static/css/app.css
index a371cb6..89fa30f 100644
--- a/getfedora.org/static/css/app.css
+++ b/getfedora.org/static/css/app.css
@@ -913,6 +913,30 @@ p.warning a {
   font-weight: 600;
 }
 
+.prerelease-box {
+  background-color: #fbfbfb;
+  padding: 0px 10px 10px 10px;
+}
+
+.prerelease-box h4 {
+  color: #3c6eb4;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-top: 13px;
+}
+
+.prerelease-box h5 {
+  display: inline;
+  position: relative;
+  padding: 0px 8px;
+  color: #fff;
+  font-weight: bold;
+  text-transform: uppercase;
+  background-color: #a7a9ac;
+  margin-top: -20px;
+  margin-left: 10px;
+}
+
 /*bootstrap xs*/
 @media max-width:767px
 {