mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-01-21 07:55:00 +00:00
noscript fallback for the table dropdown
- 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
James Valleroy
parent
6b9bbc8acc
commit
423c94fa6d
@ -22,187 +22,187 @@
|
||||
{% load static %}
|
||||
|
||||
{% if clients %}
|
||||
<p>
|
||||
<button id="collapsible-button" type="button" class="btn btn-default collapsed"
|
||||
data-toggle="collapse" data-target="#clients">
|
||||
Client Apps
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button id="collapsible-button" type="button" class="btn btn-default collapsed"
|
||||
data-toggle="collapse" data-target="#clients">
|
||||
Client Apps
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<table id="clients" class="table table-hover collapse">
|
||||
<table id="clients" class="table table-hover collapse">
|
||||
|
||||
{% if clients|has_web_clients %}
|
||||
{% with clients|of_type:'web' as web_clients %}
|
||||
<tr>
|
||||
<th rowspan=" {{ web_clients|length }}"> Web </th>
|
||||
{% with web_clients|first as client %}
|
||||
{% for platform in client.platforms %}
|
||||
{% if platform.type == 'web' %}
|
||||
<td> {{ client.name }} </td>
|
||||
<td>
|
||||
<a href="{{ platform.url }}">
|
||||
<button type="button" class="btn btn-success">Launch</button>
|
||||
</a>
|
||||
</td>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</tr>
|
||||
{% for client in web_clients|slice:"1:" %}
|
||||
{% for platform in client.platforms %}
|
||||
{% if platform.type == 'web' %}
|
||||
<tr>
|
||||
<td> {{ client.name }} </td>
|
||||
<td>
|
||||
<a href="{{ platform.url }}">
|
||||
<button type="button" class="btn btn-success">Launch</button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if clients|has_web_clients %}
|
||||
{% with clients|of_type:'web' as web_clients %}
|
||||
<tr>
|
||||
<th rowspan=" {{ web_clients|length }}"> Web </th>
|
||||
{% with web_clients|first as client %}
|
||||
{% for platform in client.platforms %}
|
||||
{% if platform.type == 'web' %}
|
||||
<td> {{ client.name }} </td>
|
||||
<td>
|
||||
<a href="{{ platform.url }}">
|
||||
<button type="button" class="btn btn-success">Launch</button>
|
||||
</a>
|
||||
</td>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</tr>
|
||||
{% for client in web_clients|slice:"1:" %}
|
||||
{% for platform in client.platforms %}
|
||||
{% if platform.type == 'web' %}
|
||||
<tr>
|
||||
<td> {{ client.name }} </td>
|
||||
<td>
|
||||
<a href="{{ platform.url }}">
|
||||
<button type="button" class="btn btn-success">Launch</button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
</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>
|
||||
</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 %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
||||
{% if clients|has_mobile_clients %}
|
||||
{% with clients|of_type:'mobile' as mobile_clients %}
|
||||
<tr>
|
||||
<th rowspan="{{ mobile_clients|length }}"> Mobile </th>
|
||||
{% with mobile_clients|first as client %}
|
||||
<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>
|
||||
{% 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>
|
||||
{% if clients|has_mobile_clients %}
|
||||
{% with clients|of_type:'mobile' as mobile_clients %}
|
||||
<tr>
|
||||
<th rowspan="{{ mobile_clients|length }}"> Mobile </th>
|
||||
{% with mobile_clients|first as client %}
|
||||
<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 %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
||||
{% 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>
|
||||
</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 %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</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 %}
|
||||
|
||||
@ -43,8 +43,10 @@ body {
|
||||
}
|
||||
|
||||
.running-status.loading {
|
||||
border: 4px solid #f3f3f3; /* Light grey */
|
||||
border-top: 4px solid #3498db; /* Blue */
|
||||
border: 4px solid #f3f3f3;
|
||||
/* Light grey */
|
||||
border-top: 4px solid #3498db;
|
||||
/* Blue */
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -53,8 +55,12 @@ body {
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.form-diagnostics-button {
|
||||
@ -62,11 +68,13 @@ body {
|
||||
}
|
||||
|
||||
/* Hide log out button if user dropdown is available */
|
||||
|
||||
.js #logout-nojs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide the dropdown icon when javascript is not available */
|
||||
|
||||
.no-js .nav .dropdown .caret {
|
||||
display: none;
|
||||
}
|
||||
@ -77,6 +85,7 @@ body {
|
||||
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
footer .license-info {
|
||||
opacity: 0.75;
|
||||
}
|
||||
@ -86,37 +95,38 @@ footer .license-info {
|
||||
}
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#wrapper{
|
||||
#wrapper {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#container-wrapper{
|
||||
#container-wrapper {
|
||||
/*covers for footer height */
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
footer license-info p{
|
||||
footer license-info p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.clients-info {
|
||||
padding-top: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@ -150,7 +160,7 @@ footer license-info p{
|
||||
}
|
||||
|
||||
.shortcut-label {
|
||||
min-height:50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
|
||||
@ -166,3 +176,18 @@ footer license-info p{
|
||||
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";
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user