Skip to content
GitLab
Commit 07c4e46a authored by Okhin's avatar Okhin
Browse files

First step for bootstrap (nav bar, table) #11

parent f20c3dd6
Hide whitespace changes
Inline Side-by-side
nnmon/static/css/style.css
View file @ 07c4e46a
body { border: 0; padding: 0; font-family: Verdana,Arial,Helvetica,sans-serif; }
img { border: 0; vertical-align: middle; }
h1, h2, h3, h4, div, ul { padding: 0; margin: 0; }
li { list-style: none; }
h1, h2, h3, h4, div { padding: 0; margin: 0; }
.fieldWrapper { width: 100%; position: relative; }
.fieldWrapper label { display: inline-block; }
......@@ -76,7 +75,6 @@ p label { width: 7em; display: inline-block; }
#footer {
text-align: center;
max-width: 960px;
clear: both;
margin: auto;
background-color: #f9f9f9;
......@@ -279,7 +277,6 @@ h1 span {
}
#user p {
width: 960px;
margin: 0 auto;
text-align: right;
}
......@@ -288,53 +285,11 @@ h1 span {
color: orange;
}
/* Navigation menu */
#nav {
height: 36px;
margin: 0; padding: 0;
list-style-type: none;
border-bottom: 1px solid #ddd;
}
#nav li {
display: inline-block;
}
#nav #current {
color: #231f20;
background: #fff;
border: 1px solid #ddd;
border-bottom: 1px solid #fff;
}
#nav #current:hover, #nav #current:active, #nav #current:focus {
color: orange;
}
#nav a {
display: block;
height: 19px;
padding: 8px 1em;
text-decoration: none;
color: #ccc;
border: 1px solid #f0f0f0;
border-bottom-color: #ddd;
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
-o-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
}
#nav a:hover, #nav a:active, #nav a:focus {
color: #231f20;
background: #fff;
border: 1px solid #ddd;
border-bottom-color: #fff;
outline: none;
}
/* Content layout
---------------------------*/
#global {
position: relative;
width: 960px;
margin: 25px auto 50px auto;
}
......@@ -455,7 +410,7 @@ div.comment {
input[type=submit], input[type=button], .button, input[type="text"], textarea, select {
font: 14.4px Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
background: #fff;
border: 1px solid #ccc;
/*border: 1px solid #ccc;*/
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
......@@ -722,6 +677,9 @@ input[type="text"], input[type="textarea"] {
#push { clear: both; }
#wrapper {
max-width: 960px;
margin: auto;
}
#table {
clear: both;
}
nnmon/templates/base.html
View file @ 07c4e46a
{% load i18n %}
{% load bt %}
{% load bootstrap3 %}
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="description" content="The Internet bugtracker" />
<meta name="keywords" content="internet network neutrality" />
<title>{% block title %}[!] Respect My Net {% endblock %}</title>
<meta name="robots" content="archive,index,follow" />
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="{% url 'atom_output' %}" />
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="{% url 'rss_output' %}" />
<meta http-equiv="content-language" content="{{LANGUAGE_CODE}}" />
{% block rss %}
{% endblock %}
<link rel="stylesheet" type="text/css" media="all" href="/static/css/style.css" />
{% block styles %}
{% endblock %}
</head>
<body>
<div id="wrapper">
<div id="header-container">
<div id="header">
<h1><a href="{% url 'homepage' %}">Respect My Net <span>{% trans "name and shame operators restricting access to the Internet" %}</span></a></h1>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="description" content="The Internet bugtracker" />
<meta name="keywords" content="internet network neutrality" />
<meta name="robots" content="archive,index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}[!] Respect My Net {% endblock %}</title>
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="{% url 'atom_output' %}" />
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="{% url 'rss_output' %}" />
<meta http-equiv="content-language" content="{{LANGUAGE_CODE}}" />
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}
{% block rss %}
{% endblock %}
<link rel="stylesheet" type="text/css" media="all" href="/static/css/style.css" />
{% block styles %}
{% endblock %}
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="{% url 'homepage' %}">Respect My Net <span>{% trans "name and shame operators restricting access to the Internet" %}</span></a></h1>
<div id="user">
<p>
{% if user.is_authenticated %}
{{ user.username }},
<a href="{%root_url%}/accounts/logout">{% trans "Logout" %}</a>
<span>or</span>
<a href="{%root_url%}/admin/">{% trans "Admin" %}</a>
{% block adminext %}
{% endblock %}
{% else %}
<a href="{%root_url%}/admin/" id="login">{% trans "Login" %}</a>
{% endif %}
</p>
</div>
<div id="user">
<p>
{% if user.is_authenticated %}
{{ user.username }},
<a href="{%root_url%}/accounts/logout">{% trans "Logout" %}</a>
<span>or</span>
<a href="{%root_url%}/admin/">{% trans "Admin" %}</a>
{% block adminext %}
{% endblock %}
{% else %}
<a href="{%root_url%}/admin/" id="login">{% trans "Login" %}</a>
{% endif %}
</p>
</div>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav" aria-expanded="false">
<span class="sr-only">{% trans "Toggle navgation" %}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Respect my net</a>
</div>
<ul id="nav">
<li><a {% block active_tab_home %}{% endblock %} href="/">{% trans "Home" %}</a></li>
<li><a {% block active_tab_cases %}{% endblock %} href="{% url 'list_violations' %}">{% trans "Cases" %}</a></li>
<li><a {% block active_tab_about %}{% endblock %} href="{%root_url%}/about">{% trans "What is Net Neutrality?" %}</a></li>
<li><a {% block active_tab_start %}{% endblock %} href="{%root_url%}/start">{% trans "Start Monitoring" %}</a></li>
<li>
<form action="/search/" method="get">
<span>
<label for="quick_q" class="quick"></label>
<input name="q" id="quick_q" class="quick">
<input type="submit" value="Search">
</span>
</form>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav nav-tabs">
<li role="presentation" {% block active_tab_cases %}{% endblock %}><a href="{% url 'list_violations' %}">{% trans "Cases" %}</a></li>
<li role="presentation" {% block active_tab_about %}{% endblock %}><a href="{%root_url%}/about">{% trans "What is Net Neutrality?" %}</a></li>
<li role="presentation" {% block active_tab_start %}{% endblock %}><a href="{%root_url%}/start">{% trans "Start Monitoring" %}</a></li>
<li role="presentation" class="navbar-right">
<form action="/search/" method="get" class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Quick Search...">
</div>
{% buttons %}
<button type="submit" class="btn btn-default">Search</button>
{% endbuttons %}
</form>
</li>
</ul>
</div>
</nav>
</div>
{% block content %}
{% endblock %}
{% block other_content %}
{% endblock %}
<div id="push"></div>
</div>
<div id='footer'>
{% block footer %}
<p>{% trans "RespectMyNet.eu is an online platform enabling citizens to become the watchmen of the Internet by reporting Net Neutrality violations. Everyone is invited to report undue blocking or throttling of their Internet access, and help name and shame operators' harmful practices." %}</p>
<ul>
<li class="logo-org"><a href="https://www.bof.nl"><img alt="BoF logo" src="/static/img/bof.png" /></a></li>
<li class="logo-org"><a href="https://www.laquadrature.net/"><img alt="LQDN logo" src="/static/img/lqdn.png" /></a></li>
<li class="logo-org dark"><a href="https://www.openrightsgroup.org/"><img alt="ORG logo" src="/static/img/org.png" /></a></li>
<li class="logo-org dark"><br /><a href="http://nurpa.be"><img alt="NURPA logo" src="/static/img/nurpa.png"/></a></li>
<li class="logo-org"><a href="https://xnet-x.net/"><img alt="XNet logo" src="/static/img/xnet.png" /></a></li>
<li class="logo-org"><a href="https://edri.org/"><img alt="EDRI logo" src="/static/img/edri.png" /></a></li>
</ul>
{% endblock %}
</div>
<script type="text/javascript" src="/static/js/tinymce/tinyMCE/tinymce.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"> </script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/static/js/picnet.table.filter.min.js"></script>
<script type="text/javascript" src='/static/js/d3.min.js'></script>
<script type="text/javascript" src='/static/js/topojson.min.js'></script>
<script type="text/javascript" src='/static/js/datamaps.js'></script>
<script type="text/javascript" src="/static/js/nnmon.js"></script>
{% block scripts %}
{% endblock %}
</body>
<div class="container-fluid">
{% block content %}
{% endblock %}
{% block other_content %}
{% endblock %}
</div>
<div id="push"></div>
</div>
<div id='footer'>
{% block footer %}
<p>{% trans "RespectMyNet.eu is an online platform enabling citizens to become the watchmen of the Internet by reporting Net Neutrality violations. Everyone is invited to report undue blocking or throttling of their Internet access, and help name and shame operators' harmful practices." %}</p>
<ul>
<li class="logo-org"><a href="https://www.bof.nl"><img alt="BoF logo" src="/static/img/bof.png" /></a></li>
<li class="logo-org"><a href="https://www.laquadrature.net/"><img alt="LQDN logo" src="/static/img/lqdn.png" /></a></li>
<li class="logo-org dark"><a href="https://www.openrightsgroup.org/"><img alt="ORG logo" src="/static/img/org.png" /></a></li>
<li class="logo-org dark"><br /><a href="http://nurpa.be"><img alt="NURPA logo" src="/static/img/nurpa.png"/></a></li>
<li class="logo-org"><a href="https://xnet-x.net/"><img alt="XNet logo" src="/static/img/xnet.png" /></a></li>
<li class="logo-org"><a href="https://edri.org/"><img alt="EDRI logo" src="/static/img/edri.png" /></a></li>
</ul>
{% endblock %}
</div>
<script type="text/javascript" src="/static/js/tinymce/tinyMCE/tinymce.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"> </script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/static/js/picnet.table.filter.min.js"></script>
<script type="text/javascript" src='/static/js/d3.min.js'></script>
<script type="text/javascript" src='/static/js/topojson.min.js'></script>
<script type="text/javascript" src='/static/js/datamaps.js'></script>
<script type="text/javascript" src="/static/js/nnmon.js"></script>
{% block scripts %}
{% endblock %}
</body>
</html>
nnmon/templates/index.html
View file @ 07c4e46a
{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% block active_tab_home %}id="current"{% endblock %}
{% block active_tab_home %}class="active"{% endblock %}
{% block styles %}
<link rel="stylesheet" type="text/css" media="all" href="/static/css/jquery-ui.css" />
{% endblock %}
......
nnmon/templates/list.html
View file @ 07c4e46a
{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% block active_tab_cases %}id="current"{% endblock %}
{% block active_tab_cases %}class="active"{% endblock %}
{% block styles %}
<link rel="stylesheet" href="/static/css/map.css" type="text/css" />
{% endblock %}
......@@ -32,7 +32,7 @@ $.tablesorter.addParser({
</script>
{% endblock %}
{%block content%}
{% block content %}
<div id='global'>
{% if messages %}
<ul class="messages">
......@@ -46,48 +46,50 @@ $.tablesorter.addParser({
<p>{% trans "This is a list of all reported cases of Net Neutrality violations by our users. Please note that we do not validate the accuracy of these reports before they are published on this list, but rather rely on confirmations and supporting evidence offered by users. If you are subjected to one of the listed restrictions, please confirm it. Cases that are not considered violations of Net Neutrality under our guidelines will be removed or not be validated." %}</p>
</div>
<table class="listing tablesorter zebra-striped" id='sortedlist'>
<thead>
<tr>
<th filter-type='ddl'>{% trans "Status" %}</th>
<th filter-type='ddl'>{% trans "country" %}</th>
<th filter-type='ddl'>{% trans "operator" %}</th>
<th filter-type='ddl'>{% trans "contract" %}</th>
<th filter-type='ddl'>{% trans "resource" %}</th>
<th filter-type='ddl'>{% trans "type" %}</th>
<th filter-type='ddl'>{% trans "fixed / wireless" %}</th>
<th filter='false'>{% trans "confirmations" %}</th>
<th filter='false'></th>
</tr>
</thead>
<tbody>
{% for violation in violations %}
<tr class="{%if violation.state%}{{violation.state}}{%else%}new{%endif%}-status">
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{%if violation.state%}{{violation.state|status}}{%else%}{% trans "New" %}{%endif%}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.country|country }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.operator }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.contract }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.resource_name }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.type|type }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.media|media }}</a></td>
<td>{{ violation.confirmations }}</td>
<td>
<div class="confirm"><a class="button">{% trans "Me too!" %}</a>
<div class="info-validate float-confirm">
<form method="get" action="" id="i{{ violation.pk }}" class="confirm_form" >
<div>
<label>{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>
<input type="text" name="email" />
<input type="hidden" value="{{ violation.pk }}" />
<input type="submit" value="{% trans "OK" %}" />
</div>
</form>
<input class="cancel-button" type="button" value="{% trans "Close" %}" />
<div class="table-responsive" id="table">
<table class="table table-striped table-condensed" id='sortedlist'>
<thead>
<tr>
<th filter-type='ddl' class="col-sm-1">{% trans "Status" %}</th>
<th filter-type='ddl' class="col-sm-1">{% trans "country" %}</th>
<th filter-type='ddl' class="col-sm-1">{% trans "operator" %}</th>
<th filter-type='ddl' class="col-sm-2">{% trans "contract" %}</th>
<th filter-type='ddl' class="col-sm-3">{% trans "resource" %}</th>
<th filter-type='ddl' class="col-sm-1">{% trans "type" %}</th>
<th filter-type='ddl' class="col-sm-1">{% trans "fixed / wireless" %}</th>
<th filter='false' class="col-sm-1">{% trans "confirmations" %}</th>
<th filter='false' class="col-sm-1"></th>
</tr>
</thead>
<tbody>
{% for violation in violations %}
<tr class="{%if violation.state%}{{violation.state}}{%else%}new{%endif%}-status">
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{%if violation.state%}{{violation.state|status}}{%else%}{% trans "New" %}{%endif%}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.country|country }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.operator }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.contract }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.resource_name }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.type|type }}</a></td>
<td><a class="cell-link" href="{{ violation.get_absolute_url }}">{{ violation.media|media }}</a></td>
<td>{{ violation.confirmations }}</td>
<td>
<div class="confirm"><a class="button">{% trans "Me too!" %}</a>
<div class="info-validate float-confirm">
<form method="get" action="" id="i{{ violation.pk }}" class="confirm_form" >
<div>
<label>{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>
<input type="text" name="email" />
<input type="hidden" value="{{ violation.pk }}" />
<input type="submit" value="{% trans "OK" %}" />
</div>
</form>
<input class="cancel-button" type="button" value="{% trans "Close" %}" />
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{%endblock%}
nnmon/templates/nn.html
View file @ 07c4e46a
{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% block active_tab_about %}id="current"{% endblock %}
{% block active_tab_about %}class="active"{% endblock %}
{% block content %}
<div id='global'>
<h3>{% trans "On the Internet, <strong>you</strong> decide what you do, right? <em>Not anymore!</em>" %}</h3>
......
nnmon/templates/start.html
View file @ 07c4e46a
{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% block active_tab_start %}id="current"{% endblock %}
{% block active_tab_start %}class="active"{% endblock %}
{% block content %}
<div id='global'>
<p>{% trans "Do you want to check whether your access provider is manipulating your internet traffic? Great!" %}</p>
......
nnmon/templates/view.html
View file @ 07c4e46a
......@@ -2,7 +2,7 @@
{% load bt %}
{% load i18n %}
{% load comments %}
{% block active_tab_cases %}id="current"{% endblock %}
{% block active_tab_cases %}class="active"{% endblock %}
{% block styles %}
{% endblock %}
{% block adminext %}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment