Merge pull request #738 from hoffie/highlight-user-download

Home: Dynamically highlight download link for the user's platform

_layouts/mainhomepage.html

@@ -45,7 +45,7 @@ <h1>Jamulus</h1>
           <a href="wiki/Getting-Started" id="get_started_btn_top">{{ page.mTGetStartedNow }}</a>
         </div>
         <div class="fx-col-100-xs" id="quick_dl_container">
-          {{ page.mTDownloadNow }} <a href="{{ site.download_root_link }}{{ site.download_file_names.windows }}" target="_blank" rel="noreferrer">Windows</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.mac }}" target="_blank" rel="noreferrer">Mac</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.deb-gui }}" target="_blank" rel="noreferrer">Debian/Ubuntu</a> &amp; <a href="{{ site.download_overview_link }}" target="_blank" rel="noreferrer">{{ page.mTOtherPlatforms }}</a>.
+          {{ page.mTDownloadNow }} <a href="{{ site.download_root_link }}{{ site.download_file_names.windows }}" target="_blank" rel="noreferrer" class="os-win">Windows</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.mac }}" target="_blank" rel="noreferrer" class="os-mac">Mac</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.deb-gui }}" target="_blank" rel="noreferrer" class="os-deb">Debian/Ubuntu</a> &amp; <a href="{{ site.download_overview_link }}" target="_blank" rel="noreferrer" class="os-other">{{ page.mTOtherPlatforms }}</a>.
         </div>
       </div>
     </div>
@@ -61,6 +61,7 @@ <h1>Jamulus</h1>
     </div>
     {% include footer.html %}
   </div>
+  <script src="/assets/js/os-style.js"></script>
 </body>
 
 </html>

assets/css/home.css

@@ -60,6 +60,13 @@ header {
   }
 }
 
+body.is-os-deb #quick_dl_container a.os-deb,
+body.is-os-mac #quick_dl_container a.os-mac,
+body.is-os-win #quick_dl_container a.os-win,
+body.is-os-other #quick_dl_container a.os-other {
+  font-weight: bold;
+}
+
 #bannercontainer {
   margin-top: 10px;
 }

assets/js/os-style.js

@@ -0,0 +1,14 @@
+function getOperatingSystem() {
+  if (navigator.userAgent.indexOf('Win') != -1) return 'win';
+  if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) return 'other';
+  if (navigator.userAgent.indexOf('Mac') != -1) return 'mac';
+  // If we detect Linux, but neither Ubuntu nor Debian (the latter usually
+  // doesn't expose itself), we use a generic class to avoid falling
+  // back to "other":
+  if (navigator.userAgent.indexOf('Debian') != -1) return 'deb';
+  if (navigator.userAgent.indexOf('Ubuntu') != -1) return 'deb';
+  if (navigator.userAgent.indexOf('Android') != -1) return 'other';
+  if (navigator.userAgent.indexOf('Linux') != -1) return 'linux-generic';
+  return 'other';
+}
+document.body.className += ' is-os-' + getOperatingSystem();