Commit e81fbe4d authored by Tom Tryfonidis's avatar Tom Tryfonidis Committed by Claude Paroz

Make theme templates responsive using Bootstrap

Fixes bug #766216
parent 3162cda0
/* Custom media queries and Bootstrap overwrite rules for Damned Lies */
.col-centered{
float: none;
margin: 0 auto;
}
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
.mobile-menu {
display: none;
visibility: hidden;
}
.normal-menu {
display: block;
}
.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus, .navbar-toggle:active, .navbar-toggle.active, .navbar-toggle.disabled, .navbar-toggle[disabled]{
margin-top: 40px;
background-image: none;
background-color: #2e3436;
}
.table-responsive {
border: none;
}
.navbar-default .navbar-nav > li > a {
text-decoration: none;
}
/*----------------Smartphones-------------------*/
@media (max-width: 767px) {
header {
padding-bottom: 40px;
}
.navbar-default,
.navbar-default .navbar-collapse {
background-color: transparent;
border-color: transparent;
}
.mobile-menu {
cursor: pointer;
display: inline-block;
float: right;
visibility: visible;
width:100%;
}
.normal-menu {
display: none;
}
.top_bar {
padding-top: 50px;
}
.top_bar ul li {
display: block !important;
}
h1, #content h1 {
font-size: 23px;
}
h2 {
font-size: 20px;
}
}
/*-----------------Tablets------------------------*/
@media (min-width:767px) and (max-width: 990px){
header {
padding-bottom: 30px;
}
#globalnav {
margin: 0 auto;
}
.top_bar {
margin:0 auto;
float: none;
}
.normal-menu #gnome_header {
height: auto;
padding: 0 33%;
}
}
......@@ -23,24 +23,17 @@ a:hover {
.hidden {
display: none;
}
.maxwidth {
width: 960px;
margin: 0 auto;
text-align: left;
}
.clear {
clear: both;
}
/* Global Domain Bar */
/* ========================================================================== */
#global_domain_bar {
background: #fff;
height: 10px;
position: relative;
}
#global_domain_bar .maxwidth {
position: relative;
......@@ -200,8 +193,6 @@ a:hover {
/* GNOME Header */
/* ========================================================================== */
#gnome_header {
margin: 0;
padding: 6px auto;
......@@ -248,7 +239,6 @@ a:hover {
outline: none;
}
/* Global Navigation */
/* ========================================================================== */
......@@ -309,8 +299,6 @@ a:hover {
border-radius: 5px;
}
/* Page Title */
/* ========================================================================== */
......@@ -331,8 +319,6 @@ a:hover {
text-decoration: underline;
}
/* GNOME Container */
/* ========================================================================== */
......@@ -341,63 +327,6 @@ a:hover {
min-height: 400px;
}
/* Grid Columns */
/* ========================================================================== */
.columns {
overflow: hidden;
}
.columns .bloc {
width: 135px;
margin-left: 30px;
float: left;
}
.columns .bloc.one {
width: 130px;
}
.columns .bloc.sidebar,
.columns .bloc.two {
width: 300px;
}
.columns .bloc.half,
.columns .bloc.three {
width: 465px;
}
.columns .bloc.content,
.columns .bloc.four {
width: 630px;
}
.columns .bloc.five {
width: 795px;
}
.columns .bloc.full,
.columns .bloc.six {
width: 960px;
}
.columns .bloc.first {
margin-left: 0;
clear: left;
}
.columns .bloc.offset_one {
margin-left: 165px !important;
}
.columns .bloc.offset_sidebar,
.columns .bloc.offset_two {
margin-left: 330px !important;
}
.columns .bloc.offset_half,
.columns .bloc.offset_three {
margin-left: 495px !important;
}
.columns .bloc.offset_four {
margin-left: 660px !important;
}
.columns .bloc.offset_five {
margin-left: 825px !important;
}
/* Separators */
/* ========================================================================== */
......@@ -427,21 +356,6 @@ hr.bottom_shadow {
/* Specific stylesheet for Damned-lies */
/* ========================================================================== */
/* Columns */
.bloc50 {
display: block;
float: left;
width: 50%;
padding: 0 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bloc50.reset {
clear: left;
}
/* Statistics table */
table.stats {
......@@ -522,12 +436,13 @@ pre.stats .num3 {
}
/* Used in vertimus_detail */
div#vertimus_stats {
line-height: 1.3em;
line-height: 1.3em;
}
div#vertimus_stats pre.stats {
white-space: normal;
font-family: sans-serif;
white-space: normal;
font-family: sans-serif;
font-size: 13px;
}
......@@ -588,36 +503,11 @@ div.graphinline {
/* Multi column lists */
.multi_column_list {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.multi_column_list li {
border: 1px solid #ccc;
background: #fff;
padding: 4px 8px;
list-style: none;
margin: 8px 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.col2_column {
float: left;
width: 50%
}
.col3_column {
float: left;
width: 33.3%
}
.col3_container ul {
.column_container ul {
margin-top: 0;
list-style: none;
}
.col3_column li, .col2_column li {
.column_box li {
border: 1px solid #ccc;
background: #fff;
padding: 4px 8px;
......@@ -631,10 +521,10 @@ div.graphinline {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.col3_column li a, .col2_column li a {
.column_box li a {
text-decoration: none;
}
.col3_column li a:hover, .col2_column li a:hover {
.column_box li a:hover {
text-decoration: underline;
}
......@@ -642,23 +532,24 @@ div.graphinline {
/* Used in people/person_list */
.person_list {
padding-left: 65px;
margin-bottom: 12px;
clear: left;
padding-left: 65px;
margin-bottom: 12px;
clear: left;
}
.person_list .name {
font-size: 110%;
font-size: 110%;
}
.person_list img {
height: 48px;
float: left;
margin-left: -65px;
height: 48px;
float: left;
margin-left: -65px;
}
.person_detail {
display: table-row;
display: block;
padding-bottom: 20px;
}
.person_detail .image,
.person_detail .txt {
......@@ -807,7 +698,6 @@ div.face_image img {
max-height: 50px;
max-width: 50px;
}
.right_actions {
float: right;
font-weight: bold;
......@@ -874,6 +764,13 @@ div.docimages {
}
/* Miscellaneous */
img.action_icons {
width: 20px;
height: 20px;
float: right;
margin: 0 2px;
}
.helptext{
font-size: 12px;
color: #000;
......@@ -939,16 +836,6 @@ ul.foot li {
list-style-image: url(../img/foot-16.png);
}
.about_qlinks{
text-align: left;
margin-left: 20px;
line-height: 0.9em;
}
.about_qlinks td a{
margin-left: 15px;
}
/* Footer */
/* ========================================================================== */
......@@ -1043,10 +930,3 @@ ul.foot li {
#footer #footnotes a {
color: inherit;
}
img.action_icons {
width: 20px;
height: 20px;
float: right;
margin: 0 2px;
}
......@@ -21,18 +21,11 @@ h2 {
font-size: 25px;
font-weight: bold;
}
h3, dt {
h3 {
font-size: 18px;
margin: 0.4em 0 0.5em;
color: #2E3436;
}
dt {
color: #E36615;
font-weight: normal;
}
dt a:hover {
color: #fa7721;
}
h4 {
font-size: 16px;
color: #ce5c00;
......@@ -52,7 +45,7 @@ ul {
li {
margin-left:30px;
}
dl,dt,h1,h2,h3,h4,h5,h6,pre,table,address,fieldset {
h1,h2,h3,h4,h5,h6,pre,table,address,fieldset {
margin: 0.8em 0 0.4em;
}
p, dd, .action_box, ul, ol {
......@@ -116,8 +109,17 @@ a {
/* About page */
/* ========================================================================== */
table.about_qlinks th {
padding: 0.8em 0 0.4em;
.about_qlinks dt {
font-size: 18px;
color: #CE5C00;
font-weight: normal;
text-align: left;
}
#about_page .about_qlinks dt {
font-size: 16px;
font-weight: bold;
}
.about_qlinks dt a:hover {
color: #fa7721;
}
......@@ -4,8 +4,7 @@
{% block title %} {% trans "About" %} {% endblock %}
{% block content %}
<div class="maxwidth">
<div id="about_page" class="mainpage">
<h1>{% trans "About Damned Lies" %}</h1>
<p>{% trans "Damned Lies is the Web application used to manage the localisation (l10n) of the GNOME project." %}
......@@ -25,20 +24,15 @@
{% endif %}
<h2>{% trans "Quick links" %}</h2>
<table class="about_qlinks">
<tr><th>{% trans "Project wiki" %}</th>
<td><a href="https://wiki.gnome.org/DamnedLies">https://wiki.gnome.org/DamnedLies</a></td>
</tr>
<tr><th>{% trans "Bug tracking page" %}</th>
<td><a href="https://bugzilla.gnome.org/browse.cgi?product=damned-lies">https://bugzilla.gnome.org/browse.cgi?product=damned-lies</a></td>
</tr>
<tr><th>{% trans "Source code" %}</th>
<td><a href="https://git.gnome.org/browse/damned-lies/">https://git.gnome.org/browse/damned-lies</a></td>
</tr>
<tr><th>{% trans "Workflow" %}</th>
<td><a href="https://l10n.gnome.org/help/vertimus_workflow/">https://l10n.gnome.org/help/vertimus_workflow</a></td>
</tr>
</table>
<dl class="dl-horizontal about_qlinks">
<dt>{% trans "Project wiki" %}</dt>
<dd><a href="https://wiki.gnome.org/DamnedLies">https://wiki.gnome.org/DamnedLies</a></dd>
<dt>{% trans "Bug tracking page" %}</dt>
<dd><a href="https://bugzilla.gnome.org/browse.cgi?product=damned-lies">https://bugzilla.gnome.org/browse.cgi?product=damned-lies</a></dd>
<dt>{% trans "Source code" %}</dt>
<dd><a href="https://git.gnome.org/browse/damned-lies/">https://git.gnome.org/browse/damned-lies</a></dd>
<dt>{% trans "Workflow" %}</dt>
<dd><a href="https://l10n.gnome.org/help/vertimus_workflow/">https://l10n.gnome.org/help/vertimus_workflow</a></dd>
</dl>
</div>
{% endblock %}
......@@ -4,10 +4,12 @@
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}page title{% endblock %}</title>
<link rel="icon" type="image/png" href="{{ STATIC_URL }}img/foot-16.png">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/template.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/responsive.css">
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/rtl.css">
{% endif %}
......@@ -30,6 +32,7 @@
</head>
<body>
<div class="container">
<!-- global gnome.org domain bar -->
<div id="global_domain_bar">
<div class="maxwidth">
......@@ -43,29 +46,59 @@
</div>
{% include "login/login_usermenu.html" %}
</div>
{% include "login/login_usermenu.html" %}
</div>
<div id="gnome_header">
<div class="maxwidth">
<h1><a href="{% url 'home' %}" title="{% trans "Back to Damned Lies home page" %}"><img src="{{ STATIC_URL }}img/foot.png" alt="GNOME" /> {% trans "Damned Lies" %}</a></h1>
<ul id="globalnav">
<li{% if pageSection == "home" %} class="active"{% endif %}><a href="{% url 'home' %}" title="{% trans "Back to Damned Lies home page" %}"><span>{% trans "Home" %}</span></a></li>
<li{% if pageSection == "teams" %} class="active"{% endif %}><a href="{% url 'teams' %}"><span>{% trans "Teams" %}</span></a></li>
<li{% if pageSection == "languages" %} class="active"{% endif %}><a href="{% url 'languages' %}"><span>{% trans "Languages" %}</span></a></li>
<li{% if pageSection == "releases" %} class="active"{% endif %}><a href="{% url 'releases' %}"><span>{% trans "Release sets" %}</span></a></li>
<li{% if pageSection == "module" %} class="active"{% endif %}><a href="{% url 'modules' %}"><span>{% trans "Modules" %}</span></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="body">
<div id="content" class="maxwidth">
<header class="col-md-12">
<div class="mobile-menu">
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" title="{% trans "Back to Damned Lies home page" %}" href="/"><img src="{{ STATIC_URL }}img/logo.png" alt="GNOME" /></a>
</div>
<div class="collapse navbar-collapse">
<div class="top_bar">
<ul class="nav navbar-nav text-center">
<li{% if pageSection == "home" %} class="active"{% endif %}><a href="{% url 'home' %}" title="{% trans "Back to Damned Lies home page" %}"><span>{% trans "Home" %}</span></a></li>
<li{% if pageSection == "teams" %} class="active"{% endif %}><a href="{% url 'teams' %}"><span>{% trans "Teams" %}</span></a></li>
<li{% if pageSection == "languages" %} class="active"{% endif %}><a href="{% url 'languages' %}"><span>{% trans "Languages" %}</span></a></li>
<li{% if pageSection == "releases" %} class="active"{% endif %}><a href="{% url 'releases' %}"><span>{% trans "Release sets" %}</span></a></li>
<li{% if pageSection == "module" %} class="active"{% endif %}><a href="{% url 'modules' %}"><span>{% trans "Modules" %}</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- mobile-menu end -->
<div class="normal-menu">
<div id="gnome_header" class="col-sm-4 col-md-3">
<h1><a title="{% trans "Back to Damned Lies home page" %}" href="/"><img src="{{ STATIC_URL }}img/logo.png" alt="GNOME" /></a></h1>
</div>
<div class="top_bar col-sm-8 col-md-9">
<ul id="globalnav">
<li{% if pageSection == "home" %} class="active"{% endif %}><a href="{% url 'home' %}" title="{% trans "Back to Damned Lies home page" %}"><span>{% trans "Home" %}</span></a></li>
<li{% if pageSection == "teams" %} class="active"{% endif %}><a href="{% url 'teams' %}"><span>{% trans "Teams" %}</span></a></li>
<li{% if pageSection == "languages" %} class="active"{% endif %}><a href="{% url 'languages' %}"><span>{% trans "Languages" %}</span></a></li>
<li{% if pageSection == "releases" %} class="active"{% endif %}><a href="{% url 'releases' %}"><span>{% trans "Release sets" %}</span></a></li>
<li{% if pageSection == "module" %} class="active"{% endif %}><a href="{% url 'modules' %}"><span>{% trans "Modules" %}</span></a></li>
</ul>
</div>
</div> <!-- normal-menu end -->
<div class="clearfix"></div>
</header>
<div class="clearfix"></div>
<div id="content">
{% if messages %}
{% for message in messages %}
<p class="errornote">{{ message|safe }}</p>
......@@ -75,6 +108,7 @@
{% block content-title %}{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
<div id="footer_art">
</div>
......@@ -83,8 +117,7 @@
</div>
<div id="footer">
<div class="maxwidth">
<div class="links">
<div class="links container">
<div>
<ul id="menu-footer" class="menu">
<li><a href="https://www.gnome.org">{% trans "The GNOME Project" %}</a>
......@@ -123,7 +156,7 @@
</div>
</div> <!-- end of div.links -->
<div id="footnotes">
<div id="footnotes" class="container">
{% trans "Copyright &copy; 2006" %}-{% now "Y" %} <strong><a href="https://www.gnome.org/">{% trans "The GNOME Project" %}</a></strong>.
<br />
<a href="{% url 'about' %}">{% trans "About Damned Lies" %}</a>.
......@@ -131,7 +164,6 @@
{% blocktrans with "<a href='http://www.canonical.com/'>Canonical</a>" as link %}Hosted by {{ link }}.{% endblocktrans %}
{% blocktrans with "<a href='https://www.djangoproject.com/'>Django</a>" as link %}Powered by {{ link }}.{% endblocktrans %}
</div>
</div>
</div>
</div> <!-- end of div.body -->
......
......@@ -4,8 +4,8 @@
<p>{% trans "This branch is currently string-frozen." %}</p>
{% endif %}
<div class="columns">
<div class="bloc half first">
<div class="row">
<div class="col-md-6">
{% with branch.get_ui_stats as stats %}
{% if stats|length %}
{% if not stats|length_is:"1" %}
......@@ -15,7 +15,7 @@
{% endif %}
{% endwith %}
</div>
<div class="bloc half">
<div class="col-md-6">
{% with branch.get_doc_stats as stats %}
{% if stats|length %}
{% if not stats|length_is:"1" %}
......
......@@ -5,16 +5,18 @@
{% block content %}
<div class="mainpage">
<div class="columns">
<div class="bloc content first offset_one">
<div class="row">
<div class="col-md-8 col-centered">
<p class="main_feature" style="text-align: center;">{% trans "Damned Lies is the Web application used to manage the localisation (l10n) of the GNOME project." %}
<em><a href="{% url 'about' %}">{% trans "More…" %}</a></em></p>
<em><a href="{% url 'about' %}">{% trans "More…" %}</a></em></p>
</div>
</div>
<hr class="bottom_shadow">
<hr class="bottom_shadow">
<div class="bloc half first">
<div class="row">
<div class="col-md-6">
<h2><a href="{% url 'teams' %}">{% trans "Teams" %}</a></h2>
<p>{% trans "List of all GNOME Translation Teams, with full information such as primary contact (coordinator), web pages and mailing list information." %}
{% trans "If there is no team for your language, you can easily <a href='https://wiki.gnome.org/TranslationProject/StartingATeam/'>start your own team</a>." %}
......@@ -29,14 +31,16 @@
</p>
</div>
<div class="bloc half">
<div class="col-md-6">
<h2><a href="{% url 'languages' %}">{% trans "Languages" %}</a></h2>
{% url 'teams' as teams_url %}
<p>{% blocktrans %}List of all languages there are <a href='{{ teams_url }}'>Translation Teams</a> for.{% endblocktrans %}
{% trans "Some teams manage more than one language (usually just simple variants), and here you can see all the languages GNOME is being translated to." %}</p>
</div>
</div>
<div class="bloc half first">
<div class="row">
<div class="col-md-6">
<h2><a href="{% url 'releases' %}">{% trans "Release Sets" %}</a></h2>
<p>{% trans "List of all GNOME release sets and releases we gather stats for." %}</p>
......@@ -46,15 +50,14 @@
<p>{% trans "Look here if you want to compare language support in any of these release sets." %}</p>
</div>
<div class="bloc half">
<div class="col-md-6">
<h2><a href="{% url 'modules' %}">{% trans "Modules" %}</a></h2>
<p>{% trans "List of all modules with statistics in here." %}</p>
<p>{% trans "Modules are separate libraries or applications, with one or more branches of development included." %}
{% trans "They are usually taken from the Git repository, and we keep all relevant information on them (Bugzilla details, web page, maintainer information,...)." %}</p>
</div>
</div>
</div>
</div>
{% endblock %}
......@@ -13,10 +13,10 @@
{% endblocktrans %}</p>
{% load list_to_columns %}
<div class="col3_container">
<div class="column_container">
{% list_to_columns languages as columns 3 %}
{% for col in columns %}
<div class="col3_column">
<div class="column_box col-xs-12 col-sm-4 no-padding">
<ul>
{% for lang in col %}
<li>
......
......@@ -17,7 +17,7 @@ $(document).ready(function()
</script>{% endblock %}
{% block content %}
<div class="maxwidth">
<div class="mainpage">
<h2>{% trans release.description %} - <a href="{{ language.get_team_url }}">{{ language_name }}</a></h2>
......
......@@ -21,7 +21,8 @@
</tr>
</table>
<table class="stats" name="stats-table" id="stats-table">
<div class="table-responsive">
<table class="stats table" name="stats-table" id="stats-table">
<thead>
<tr><th>{% trans "Module" %}</th><th>{% trans "Branch" %}</th>
{# colspan=2 for Statistics is causing offset in sort effect for following columns #}
......@@ -95,6 +96,7 @@
{% endfor %}
</tbody>
</table>
</div>
{% if modstats.all_errors %}
<h3>{% trans "Error summary" %}</h3>
......
......@@ -5,7 +5,8 @@ Following variables should be set:
stats : release stat list, obtained with get_release_stats
show_all_modules_line : boolean
{% endcomment %}
<table class="stats">
<div class="table-responsive">
<table class="stats table">
<thead><tr>
<th>{% trans "Release" %}</th>
<th>{% trans "User Interface" %}</th>
......@@ -55,3 +56,4 @@ Following variables should be set:
{% endif %}
</tfoot>
</table>
</div>
......@@ -55,29 +55,29 @@ $(document).ready(function() {
<p><a href="{{ module.homepage }}">{{ module.homepage }}</a></p>
{% endif %}
<div class="columns">
<div class="bloc half first">