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

Plinth footer fixes - UI #840

Browse Source 
- Pined footer to the bottom of the viewport
- Introduced a new stylesheet to hold custom responsive css
- Footer bottom fix exluded for smaller viewports
This commit is contained in:
pycat 2017-05-11 13:19:58 +03:00 committed by James Valleroy
parent f395450266
commit 88272f766e
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
4 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plinth/templates/base.html
View File

@ -69,7 +69,7 @@
<!-- Bootstrap base CSS --> <!-- Bootstrap base CSS -->
<link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/> <link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/> <link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/responsive.css' %}"/>
{% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %} {% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
{% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %} {% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head> </head>
@ -212,20 +212,22 @@
{# this center-info should contain help texts but no menus #} {# this center-info should contain help texts but no menus #}
{% endblock %} {% endblock %}
</div> </div>
</div><!--/.fluid-container-->
<hr>
<footer> <footer>
<hr>
<div class="container">
{% block footer_block %} {% block footer_block %}
<div class="license-info">
<p> <p>
<a href="{% static 'jslicense.html' %}" data-jslicense="1" style="opacity: 0.75;"> <a href="{% static 'jslicense.html' %}" data-jslicense="1">
{% trans "JavaScript license information" %}</a> {% trans "JavaScript license information" %}</a>
</p> </p>
</div>
{% endblock %} {% endblock %}
</div>
</footer> </footer>
</div><!--/.fluid-container-->
<!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads--> <!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
<!-- Local link to system Modernizr (includes HTML5 Shiv) --> <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
<script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}"></script> <script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}"></script>

4
plinth/templates/index.html
View File

@ -158,9 +158,11 @@
</div> </div>
</div> </div>
<p class="license-info"> <div class="license-info">
<p>
<a href="{% static 'jslicense.html' %}" data-jslicense="1"> <a href="{% static 'jslicense.html' %}" data-jslicense="1">
{% trans "JavaScript license information" %}</a> {% trans "JavaScript license information" %}</a>
</p> </p>
</div>
{% endblock %} {% endblock %}

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

@ -74,10 +74,8 @@ body {
width: 60px; width: 60px;
} }
footer { /* Sticky footer styles
text-align: center; -------------------------------------------------- */
}
footer .license-info { footer .license-info {
opacity: 0.75; opacity: 0.75;
} }
@ -85,3 +83,22 @@ footer .license-info {
.footer-logo { .footer-logo {
width: 140px; width: 140px;
} }
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
footer license-info p{
margin: 20px 0;
}

9
static/themes/default/css/responsive.css Normal file
View File

@ -0,0 +1,9 @@
/* Responsive queries */
/* Smartphone */
@media screen and (max-width: 660px) {
footer{
position: relative;
}
}