nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-27 10:44:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

noscript fallback for the table dropdown

Browse Source 
- Used .no-js based on Modernizr
- Beautified clients.html with 2-space indentation

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Joseph Nuthalapati 2017-11-21 20:34:54 +05:30 committed by James Valleroy
parent 6b9bbc8acc
commit 423c94fa6d
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 216 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

348
plinth/templates/clients.html
View File

@ -22,187 +22,187 @@
{% load static %} {% load static %}
{% if clients %} {% if clients %}
<p> <p>
<button id="collapsible-button" type="button" class="btn btn-default collapsed" <button id="collapsible-button" type="button" class="btn btn-default collapsed"
data-toggle="collapse" data-target="#clients"> data-toggle="collapse" data-target="#clients">
Client Apps Client Apps
</button> </button>
</p> </p>
<table id="clients" class="table table-hover collapse"> <table id="clients" class="table table-hover collapse">
{% if clients|has_web_clients %} {% if clients|has_web_clients %}
{% with clients|of_type:'web' as web_clients %} {% with clients|of_type:'web' as web_clients %}
<tr> <tr>
<th rowspan=" {{ web_clients|length }}"> Web </th> <th rowspan=" {{ web_clients|length }}"> Web </th>
{% with web_clients|first as client %} {% with web_clients|first as client %}
{% for platform in client.platforms %} {% for platform in client.platforms %}
{% if platform.type == 'web' %} {% if platform.type == 'web' %}
<td> {{ client.name }} </td> <td> {{ client.name }} </td>
<td> <td>
<a href="{{ platform.url }}"> <a href="{{ platform.url }}">
<button type="button" class="btn btn-success">Launch</button> <button type="button" class="btn btn-success">Launch</button>
</a> </a>
</td> </td>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endwith %} {% endwith %}
</tr> </tr>
{% for client in web_clients|slice:"1:" %} {% for client in web_clients|slice:"1:" %}
{% for platform in client.platforms %} {% for platform in client.platforms %}
{% if platform.type == 'web' %} {% if platform.type == 'web' %}
<tr> <tr>
<td> {{ client.name }} </td> <td> {{ client.name }} </td>
<td> <td>
<a href="{{ platform.url }}"> <a href="{{ platform.url }}">
<button type="button" class="btn btn-success">Launch</button> <button type="button" class="btn btn-success">Launch</button>
</a> </a>
</td> </td>
</tr> </tr>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endfor %}
{% endwith %}
{% endif %}
{% if clients|has_desktop_clients %}
{% with clients|of_type:'desktop' as desktop_clients %}
<tr>
<th rowspan="{{ desktop_clients|length }}"> Desktop </th>
{% with desktop_clients|first as client %}
<td> {{ client.name }} </td>
<td>
<div class ="row">
{% for platform in client.platforms %}
{% if platform.type == 'download' %}
<div class="col-md-2 col-xs-4">
<a href="{{ platform.url }}">
{% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
<img class="os-icon" src="{% static icon %}" />
{% endwith %}
</a>
</div>
{% endif %}
{% endfor %} {% endfor %}
{% endwith %} </div>
{% endif %} </td>
{% endwith %}
{% if clients|has_desktop_clients %} </tr>
{% with clients|of_type:'desktop' as desktop_clients %} {% for client in desktop_clients|slice:"1:" %}
<tr> <tr>
<th rowspan="{{ desktop_clients|length }}"> Desktop </th> <td> {{ client.name }} </td>
{% with desktop_clients|first as client %} <td>
<td> {{ client.name }} </td> <div class ="row">
<td> {% for platform in client.platforms %}
<div class ="row"> {% if platform.type == 'download' %}
{% for platform in client.platforms %} <div class="col-md-2 col-xs-4">
{% if platform.type == 'download' %} <a href="{{ platform.url }}">
<div class="col-md-2 col-xs-4"> {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
<a href="{{ platform.url }}"> <img class="os-icon" src="{% static icon %}" />
{% with 'theme/icons/'|add:platform.os|add:'.png' as icon %} {% endwith %}
<img class="os-icon" src="{% static icon %}" /> </a>
{% endwith %} </div>
</a> {% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</td>
{% endwith %}
</tr>
{% for client in desktop_clients|slice:"1:" %}
<tr>
<td> {{ client.name }} </td>
<td>
<div class ="row">
{% for platform in client.platforms %}
{% if platform.type == 'download' %}
<div class="col-md-2 col-xs-4">
<a href="{{ platform.url }}">
{% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
<img class="os-icon" src="{% static icon %}" />
{% endwith %}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</td>
</tr>
{% endfor %} {% endfor %}
{% endwith %} </div>
{% endif %} </td>
</tr>
{% endfor %}
{% endwith %}
{% endif %}
{% if clients|has_mobile_clients %} {% if clients|has_mobile_clients %}
{% with clients|of_type:'mobile' as mobile_clients %} {% with clients|of_type:'mobile' as mobile_clients %}
<tr> <tr>
<th rowspan="{{ mobile_clients|length }}"> Mobile </th> <th rowspan="{{ mobile_clients|length }}"> Mobile </th>
{% with mobile_clients|first as client %} {% with mobile_clients|first as client %}
<td> {{ client.name }} </td> <td> {{ client.name }} </td>
<td> <td>
<div class="row"> <div class="row">
{% for platform in client.platforms %} {% for platform in client.platforms %}
{% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %} {% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %}
<div class="col-md-2 col-xs-4"> <div class="col-md-2 col-xs-4">
<a href="{{ platform.url }}"> <a href="{{ platform.url }}">
{% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %} {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
<img class="store-icon" src="{% static icon %}" /> <img class="store-icon" src="{% static icon %}" />
{% endwith %} {% endwith %}
</a> </a>
</div> </div>
{% endif %} {% endif %}
{% endfor %}
</div>
</td>
{% endwith %}
</tr>
{% for client in mobile_clients|slice:"1:" %}
<tr>
<td> {{ client.name }} </td>
<td>
<div class="row">
{% for platform in client.platforms %}
{% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %}
<div class="col-md-2 col-xs-4">
<a href="{{ platform.url }}">
{% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
<img class="store-icon" src="{% static icon %}" />
{% endwith %}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</td>
</tr>
{% endfor %} {% endfor %}
{% endwith %} </div>
{% endif %} </td>
{% endwith %}
{% if clients|has_package_clients %} </tr>
{% with clients|of_type:'package' as package_clients %} {% for client in mobile_clients|slice:"1:" %}
<tr> <tr>
<th rowspan="{{ package_clients|length }}"> Package </th> <td> {{ client.name }} </td>
{% with package_clients|first as client %} <td>
<td> {{ client.name }} </td> <div class="row">
<td> {% for platform in client.platforms %}
<div class="row"> {% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %}
<ul> <div class="col-md-2 col-xs-4">
{% for platform in client.platforms %} <a href="{{ platform.url }}">
{% if platform.type == 'package' and platform.format == 'deb' %} {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
<li> <strong> Debian: </strong> {{ platform.name }} </li> <img class="store-icon" src="{% static icon %}" />
{% endif %} {% endwith %}
{% if platform.type == 'package' and platform.format == 'brew' %} </a>
<li> <strong> HomeBrew: </strong> {{ platform.name }} </li> </div>
{% endif %} {% endif %}
{% endfor %}
</ul>
</div>
</td>
{% endwith %}
</tr>
{% for client in package_clients|slice:"1:" %}
<tr>
<td> {{ client.name }} </td>
<td>
<div class="row">
<ul>
{% for platform in client.platforms %}
{% if platform.type == 'package' %}
{% if platform.type == 'package' and platform.format == 'deb' %}
<li> <strong> Debian: </strong> {{ platform.name }} </li>
{% endif %}
{% if platform.type == 'package' and platform.format == 'homebrew' %}
<li> <strong> HomeBrew: </strong> {{ platform.name }} </li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
</td>
</tr>
{% endfor %} {% endfor %}
{% endwith %} </div>
{% endif %} </td>
</tr>
{% endfor %}
{% endwith %}
{% endif %}
</table> {% if clients|has_package_clients %}
{% with clients|of_type:'package' as package_clients %}
<tr>
<th rowspan="{{ package_clients|length }}"> Package </th>
{% with package_clients|first as client %}
<td> {{ client.name }} </td>
<td>
<div class="row">
<ul>
{% for platform in client.platforms %}
{% if platform.type == 'package' and platform.format == 'deb' %}
<li> <strong> Debian: </strong> {{ platform.name }} </li>
{% endif %}
{% if platform.type == 'package' and platform.format == 'brew' %}
<li> <strong> HomeBrew: </strong> {{ platform.name }} </li>
{% endif %}
{% endfor %}
</ul>
</div>
</td>
{% endwith %}
</tr>
{% for client in package_clients|slice:"1:" %}
<tr>
<td> {{ client.name }} </td>
<td>
<div class="row">
<ul>
{% for platform in client.platforms %}
{% if platform.type == 'package' %}
{% if platform.type == 'package' and platform.format == 'deb' %}
<li> <strong> Debian: </strong> {{ platform.name }} </li>
{% endif %}
{% if platform.type == 'package' and platform.format == 'homebrew' %}
<li> <strong> HomeBrew: </strong> {{ platform.name }} </li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
</td>
</tr>
{% endfor %}
{% endwith %}
{% endif %}
</table>
{% endif %} {% endif %}

59
static/themes/default/css/plinth.css
View File

@ -43,8 +43,10 @@ body {
} }
.running-status.loading { .running-status.loading {
border: 4px solid #f3f3f3; /* Light grey */ border: 4px solid #f3f3f3;
border-top: 4px solid #3498db; /* Blue */ /* Light grey */
border-top: 4px solid #3498db;
/* Blue */
border-radius: 50%; border-radius: 50%;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -53,8 +55,12 @@ body {
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
.form-diagnostics-button { .form-diagnostics-button {
@ -62,11 +68,13 @@ body {
} }
/* Hide log out button if user dropdown is available */ /* Hide log out button if user dropdown is available */
.js #logout-nojs { .js #logout-nojs {
display: none; display: none;
} }
/* Hide the dropdown icon when javascript is not available */ /* Hide the dropdown icon when javascript is not available */
.no-js .nav .dropdown .caret { .no-js .nav .dropdown .caret {
display: none; display: none;
} }
@ -77,6 +85,7 @@ body {
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
footer .license-info { footer .license-info {
opacity: 0.75; opacity: 0.75;
} }
@ -86,37 +95,38 @@ footer .license-info {
} }
html { html {
position: relative; position: relative;
} }
body, html { body,
height: 100%; html {
height: 100%;
} }
#wrapper{ #wrapper {
min-height: 100%; min-height: 100%;
position: relative; position: relative;
} }
#container-wrapper{ #container-wrapper {
/*covers for footer height */ /*covers for footer height */
padding-bottom: 150px; padding-bottom: 150px;
} }
footer { footer {
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 150px; height: 150px;
} }
footer license-info p{ footer license-info p {
margin: 20px 0; margin: 20px 0;
} }
.clients-info { .clients-info {
padding-top: 15px; padding-top: 15px;
} }
.heading { .heading {
@ -150,7 +160,7 @@ footer license-info p{
} }
.shortcut-label { .shortcut-label {
min-height:50px; min-height: 50px;
} }
@ -166,3 +176,18 @@ footer license-info p{
content: "\e080"; content: "\e080";
} }
/* No-JS fallbacks for collapsible content in clients.html */
.no-js .collapse {
display: block;
}
.no-js #collapsible-button:after {
font-family: "Glyphicons Halflings";
content: "\e114";
margin-left: 5px;
}
.no-js #collapsible-button.collapsed:after {
content: "\e114";
}