]> git.ipfire.org Git - people/shoehn/ipfire.org.git/commitdiff
Improve design of the download page.
authorMichael Tremer <michael.tremer@ipfire.org>
Wed, 26 Mar 2014 16:22:49 +0000 (17:22 +0100)
committerMichael Tremer <michael.tremer@ipfire.org>
Wed, 26 Mar 2014 16:22:49 +0000 (17:22 +0100)
static/css/style.css
templates/download-splash.html
templates/downloads-index.html
templates/modules/release-item.html
webapp/ui_modules.py

index bd5144507e795b676ea07e997bfbb519a189de9e..f2463b1be0573e317efe9026ec1392e1b5dfc729 100644 (file)
@@ -2,14 +2,15 @@ body {
        padding-top: 45px;
 }
 
-.navbar-inverse .navbar-brand,
-.navbar-inverse .navbar-nav > li > a {
-  color:#DDD;
+.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {
+  color: white;
 }
+
 .sidenav > li.active > a {
-  background: #880400;
-  color: #FFF;
+       background: #880400;
+       color: white;
 }
+
 .container-body {
   background-color: #FFF;
   padding: 10px 15px;
index 0fa276023b26e94bc4794a6777ffb6befc47b4a2..9b5eaef7c15da8eca7f3c0c0a2e17129c8564995 100644 (file)
@@ -2,45 +2,19 @@
 
 {% block title %}{{ _("Thanks for downloading IPFire!") }}{% end block %}
 
-{% block body %}
-       <div class="jumbotron">
-               <h2>{{ _("Thanks for downloading IPFire!") }}</h2>
-
-               {% if lang == "de" %}
-                       <p>
-                               Wir möchten jeden, der IPFire herunterlädt einladen,
-                               sich in das Projekt einzubringen, zum Beispiel mit
-                               einer <a href="http://www.ipfire.org/donate">Spende</a>.
-                       </p>
-                       <p>
-                               Daher bitten wir um ein paar Euro für das Projekt
-                               <a href="http://www.ipfire.org/getinvolved">oder das
-                               Projekt auf eine andere Weise zu unterstützen</a>.
-                       </p>
-               {% else %}
-                       <p>
-                               We encourage everyone who downloads and uses IPFire to
-                               get involved for example by
-                               <a href="http://www.ipfire.org/donate">donating</a>
-                               a small amount of money.
-                       </p>
-                       <p>
-                               Please consider donating a few bucks to the project.
-                               <a href="http://www.ipfire.org/getinvolved">If you can't
-                               afford to donate, there are other ways you can help</a>.
-                       </p>
-               {% end %}
 
-               <div class="ac">
-                       <br>
-                       <a class="btn btn-success btn-lg" href="http://www.ipfire.org/donate">
-                               {{ _("Donate") }}
-                       </a>
+{% block header %}
+       <header class="jumbotron subhead" id="overview">
+               <div class="container">
+                       <h1>{{ _("Thanks for downloading IPFire!") }}</h1>
                </div>
-       </div>
+       </header>
+{% end header %}
+
 
+{% block body %}
        <div class="row">
-               <div class="col-lg-12 col-md-12">
+               <div class="col-lg-12 col-md-12 ac">
                        <h4>
                                {% if lang == "de" %}
                                        Der Download beginnt in Kürze.
                </div>
        </div>
 
-       {% module Advertisement("download-splash") %}
+       {% if lang == "de" %}
+               <p class="lead ac">
+                       Wir möchten jeden, der IPFire herunterlädt einladen,
+                       sich in das Projekt einzubringen, zum Beispiel mit
+                       einer <a href="http://www.ipfire.org/donate">Spende</a>.
+                       Daher bitten wir um ein paar Euro für das Projekt
+                       <a href="http://www.ipfire.org/getinvolved">oder das
+                       Projekt auf eine andere Weise zu unterstützen</a>.
+               </p>
+       {% else %}
+               <p class="lead ac">
+                       We encourage everyone who downloads and uses IPFire to
+                       get involved for example by
+                       <a href="http://www.ipfire.org/donate">donating</a>
+                       a small amount of money.
+                       Please consider donating a few bucks to the project.
+                       <a href="http://www.ipfire.org/getinvolved">If you can't
+                       afford to donate, there are other ways you can help</a>.
+               </p>
+       {% end %}
+
+       <div class="ac">
+               <br>
+               <a class="btn btn-success btn-lg" href="http://www.ipfire.org/donate">
+                       {{ _("Donate") }}
+               </a>
+       </div>
+
+       <hr>
 
        <h3>{{ _("Next steps") }}</h3>
        <div class="row">
index c643ec7c625bacd386a3684ca3edcd6f0d177bc9..c93851c812cb29ec5f1ce84c3195410fb7c60c2f 100644 (file)
@@ -47,7 +47,7 @@
                                                {% if release.stable %}
                                                        <span class="label label-success">{{ _("Stable") }}</span>
                                                {% else %}
-                                                       <span class="label label-important">{{ _("Development") }}</span>
+                                                       <span class="label label-warning">{{ _("Development") }}</span>
                                                {% end %}
                                        </td>
                                        <td>{{ locale.format_date(release.date, shorter=True) }}</td>
index 4be7c27e6b3bc64eded78c9aff75306320bdf7ed..6aa0d4d5fba97ff52052086826c1878763b3c8a5 100644 (file)
-<h3>
-       {% if latest %}{{ _("Latest release") }}:{% end %}
-       {{ escape(release.name) }}
-</h3>
+<div class="page-header">
+       <h2>
+               {% if latest %}{{ _("Latest release") }}:{% end %}
+               {{ release.name }}
+       </h2>
+</div>
 
 {% if release.files %}
-       <div class="tabbable">
-               <ul class="nav nav-tabs">
-                       <li class="active">
-                               <a href="#arch_unknown" data-toggle="tab">{{ _("Choose an architecture:") }}</a>
-                       </li>
-                       {% if files["i586"] %}
-                               <li><a href="#arch_i586" data-toggle="tab">i586</a></li>
-                       {% end %}
-                       {% if files["arm"] %}
-                               <li><a href="#arch_arm" data-toggle="tab">ARM</a></li>
-                       {% end %}
-               </ul>
-
-               <div class="tab-content">
-                       <div class="tab-pane active" id="arch_unknown">
-                               {% if lang == "de" %}
-                                       <p>
-                                               Bitte klicke auf den Button, um IPFire für
-                                               i586-kompatible Computer als ISO-Installationsimage
-                                               herunterzuladen.
-                                               Dies ist das am häufigsten benötigte Medium.
-                                               In der Tableiste finden sich alternative Architekturen
-                                               und Imageformate zum Download.
-                                       </p>
-                               {% else %}
-                                       <p>
-                                               Please click the button to download the IPFire
-                                               ISO image for i586-compatible computers.
-                                               This is the default image, you will most likely
-                                               need to install IPFire.
-                                               You may also pick your desired architecture from
-                                               the tabs above and see a list of all image
-                                               formats.
-                                       </p>
-                               {% end %}
+       {% if not release.stable %}
+               <div class="alert alert-danger">
+                       <h4>{{ _("Caution!") }}</h4>
 
-                               <hr>
-
-                               <div class="ac">
-                                       {% module DownloadButton(release) %}
-                               </div>
+                       {% if lang == "de" %}
+                               Dieses Release ist nicht als <em>stabile</em> Version
+                               von IPFire freigegeben und nur für Testumgebungen gedacht.
+                               Daher sollte dieses Release nicht in produktiven
+                               Umgebungen eingesetzt werden und Fehler berichtet werden.
+                       {% else %}
+                               This release is not a stable version of IPFire and
+                               intended for testing purposes only.
+                               Do not use this release in production and please
+                               report any bugs.
+                       {% end %}
+               </div>
+       {% end %}
 
-                               {% if not release.stable %}
-                                       <hr>
+       <div class="ac">
+               {% module DownloadButton(release) %}
+       </div>
 
-                                       <div class="row">
-                                               <div class="col-lg-6 col-md-6col-lg-offset-3">
-                                                       <div class="alert alert-error">
-                                                               <strong>{{ _("Caution!") }}</strong>
+       <hr>
 
-                                                               {% if lang == "de" %}
-                                                                       Dieses Release ist nicht als <em>stabile</em> Version
-                                                                       von IPFire freigegeben und nur für Testumgebungen gedacht.
-                                                                       Daher sollte dieses Release nicht in produktiven
-                                                                       Umgebungen eingesetzt werden und Fehler berichtet werden.
-                                                               {% else %}
-                                                                       This release is not a stable version of IPFire and
-                                                                       intended for testing purposes only.
-                                                                       Do not use this release in production and please
-                                                                       report any bugs.
-                                                               {% end %}
-                                                       </div>
-                                               </div>
-                                       </div>
-                               {% end %}
-                       </div>
+       {% for arch, files in downloads %}
+               <h3>{{ arch }}</h3>
 
-                       {% for arch in files.keys() %}
-                               <div class="tab-pane" id="arch_{{ arch }}">
-                                       <table class="table table-striped table-bordered">
-                                               <thead>
-                                                       <tr>
-                                                               <th>{{ _("Image type") }}</th>
-                                                               <th>{{ _("Size") }}</th>
-                                                       </tr>
-                                               </thead>
-                                               <tbody>
-                                                       {% for file in files[arch] %}
-                                                               <tr>
-                                                                       <td>
-                                                                               {% if file.torrent_hash %}
-                                                                                       <p class="pull-right">
-                                                                                               <a href="{{ file.magnet_link }}">
-                                                                                                       <i class="glyphicon glyphicon-magnet"></i>
-                                                                                               </a>
-                                                                                               <a href="http://tracker.ipfire.org/{{ file.torrent_hash }}/download">
-                                                                                                       <i class="glyphicon glyphicon-download-alt"></i>
-                                                                                               </a>
-                                                                                       </p>
-                                                                               {% end %}
-                                                                               <a class="download-splash" href="{{ file.url }}">{{ _(file.desc) }}</a>
-                                                                               <br>{{ _(file.rem) }}
+               <table class="table table-striped table-bordered">
+                       <thead>
+                               <tr>
+                                       <th>{{ _("Image type") }}</th>
+                                       <th>{{ _("Size") }}</th>
+                               </tr>
+                       </thead>
+                       <tbody>
+                               {% for file in files %}
+                                       <tr>
+                                               <td>
+                                                       {% if file.torrent_hash %}
+                                                               <p class="pull-right">
+                                                                       <a href="{{ file.magnet_link }}">
+                                                                               <i class="glyphicon glyphicon-magnet"></i>
+                                                                       </a>
+                                                                       <a href="http://tracker.ipfire.org/{{ file.torrent_hash }}/download">
+                                                                               <i class="glyphicon glyphicon-download-alt"></i>
+                                                                       </a>
+                                                               </p>
+                                                       {% end %}
+                                                       <a class="download-splash" href="{{ file.url }}">{{ _(file.desc) }}</a>
+                                                       <br>{{ _(file.rem) }}
 
-                                                                               {% if file.sha1 %}
-                                                                                       <br><br><em>{{ _("SHA1 checksum") }}: {{ file.sha1 }}</em>
-                                                                               {% end %}
-                                                                       </td>
-                                                                       <td>
-                                                                               {{ format_size(file.size) }}
-                                                                       </td>
-                                                               </tr>
+                                                       {% if file.sha1 %}
+                                                               <br><br><em>{{ _("SHA1 checksum") }}: {{ file.sha1 }}</em>
                                                        {% end %}
-                                               </tbody>                                                        
-                                       </table>
+                                               </td>
+                                               <td>
+                                                       {{ format_size(file.size) }}
+                                               </td>
+                                       </tr>
+                               {% end %}
+                       </tbody>
+               </table>
+       {% end %}
 
-                                       <p class="pull-right">
-                                               <strong>{{ _("Legend:") }}</strong>
-                                               <i class="glyphicon glyphicon-magnet"></i> {{ _("Magnet link") }},
-                                               <i class="glyphicon glyphicon-download-alt"></i> {{ _("Torrent download") }}
-                                       </p>
-                               </div>
-                       {% end %}
-               </div>
-       </div>
+       <p class="pull-right">
+               <strong>{{ _("Legend:") }}</strong>
+               <i class="glyphicon glyphicon-magnet"></i> {{ _("Magnet link") }},
+               <i class="glyphicon glyphicon-download-alt"></i> {{ _("Torrent download") }}
+       </p>
 {% else %}
        <div class="alert alert-warning">
                {{ _("There are no downloads available for this release.") }}
index 41d681d687ba18a0288514f368ebdc69d398fd25..3cf68d85231f46107ca6b1cae8b5bead815c22ab 100644 (file)
@@ -161,19 +161,23 @@ class SidebarReleaseModule(UIModule):
 
 class ReleaseItemModule(UIModule):
        def render(self, release, latest=False):
-               files = {
-                       "i586" : [],
-                       "arm"  : [],
-               }
+               arches = ("i586", "arm")
 
-               for file in release.files:
-                       try:
-                               files[file.arch].append(file)
-                       except KeyError:
-                               pass
+               downloads = []
+               for arch in ("i586", "arm"):
+                       files = []
+
+                       for file in release.files:
+                               if not file.arch == arch:
+                                       continue
+
+                               files.append(file)
+
+                       if files:
+                               downloads.append((arch, files))
 
                return self.render_string("modules/release-item.html",
-                       release=release, latest=latest, files=files)
+                       release=release, latest=latest, downloads=downloads)
 
 
 class SidebarBannerModule(UIModule):