diff --git a/django/website/hid/static/hid/js/messages.js b/django/website/hid/static/hid/js/messages.js
new file mode 100644
index 0000000000000000000000000000000000000000..edaf82f114bcad7c2bd12adef07f9df22c2daa50
--- /dev/null
+++ b/django/website/hid/static/hid/js/messages.js
@@ -0,0 +1,11 @@
+/**
+ * Hide messages box after 3 seconds automatically
+ */
+
+jQuery(window).load(function(){
+ setTimeout(function(){
+ jQuery('.messages-box > ul').fadeOut(3000, 'swing');
+ }, 3000);
+});
+
+
diff --git a/django/website/hid/static/hid/js/spinner.js b/django/website/hid/static/hid/js/spinner.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c956d7fff248f7e76e5e93ab64c625e07da36e7
--- /dev/null
+++ b/django/website/hid/static/hid/js/spinner.js
@@ -0,0 +1,9 @@
+/* shows loading spinner at the top of the page and is activated when
+ * user clicks on any link or button. This is needed for low bandwidth/slow
+ * connections where loading can take time */
+
+jQuery(function(){
+ jQuery('button, .btn').click(function() {
+ jQuery('.spinner').toggleClass('active');
+ });
+});
\ No newline at end of file
diff --git a/django/website/hid/templates/hid/sources.html b/django/website/hid/templates/hid/sources.html
index 09ba78cd883b99efc7af6c7fce711d7b77dc6d34..f3f6d59eafee5ad7f9dd06445d17de99199d53d9 100644
--- a/django/website/hid/templates/hid/sources.html
+++ b/django/website/hid/templates/hid/sources.html
@@ -15,7 +15,7 @@
{% csrf_token %}
<a class="btn btn-primary btn-block btn-sm" value="View/Edit data" type="button" href="{% url "data-view" %}"><span class="fa fa-pencil fa-fw"></span> View & Edit data</a>
{% bootstrap_form source.form show_label=False %}
- <a class="btn-sm item-source-upload btn-block btn-primary" type="button" value="Upload" href="{% url "data-view" %}"><span class="fa fa-upload fa-fw"></span> Upload</a>
+ <a class="btn btn-sm item-source-upload btn-block btn-primary" type="button" value="Upload" href="{% url "data-view" %}"><span class="fa fa-upload fa-fw"></span> Upload</a>
</form>
</li>
{% endfor %}
diff --git a/django/website/hid/templates/hid/view.html b/django/website/hid/templates/hid/view.html
index 290bfdc705637b5e3ab64a3e99995e33e5d3154d..b8276716897bb3df8be68d4a452764527e9a7d44 100644
--- a/django/website/hid/templates/hid/view.html
+++ b/django/website/hid/templates/hid/view.html
@@ -4,12 +4,6 @@
{% load render_table from django_tables2 %}
{% block maincontent %}
-<ul class="nav nav-pills navbar-right nav-hanging-tabs">
- <li class="active"><a href="#home" data-toggle="tab">All</a></li>
- <li><a href="#profile" data-toggle="tab">Questions</a></li>
- <li><a href="#profile" data-toggle="tab">Rumors</a></li>
-
-</ul>
<h1 class="page-header"><span class="fa fa-pencil fa-fw"></span>{% trans "View & Edit" %}</h1>
<div class='row'>
<div class="col-lg-12">
diff --git a/django/website/media/css/styles.css b/django/website/media/css/styles.css
index ec6cac6d26c019f3693ca28ce5b14bfe70356197..c68d5f9f456bf89e3e9d8675bb2c6efb65ed9ad1 100644
--- a/django/website/media/css/styles.css
+++ b/django/website/media/css/styles.css
@@ -6485,6 +6485,9 @@ body {
-o-box-shadow: inset 0px 0px 10px rgba(51, 51, 51, 0.38);
box-shadow: inset 0px 0px 10px rgba(51, 51, 51, 0.38);
}
+.page-header {
+ margin-top: 0;
+}
@media (min-width: 768px) {
#page-wrapper {
position: inherit;
@@ -6519,15 +6522,13 @@ body {
}
.site-info a {
color: #78716e;
- text-decoration: underline;
}
.navbar-static-top {
position: fixed;
width: 100%;
- -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
- -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
- -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
- box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
+ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+ border: none;
}
.navbar-top-links {
margin-right: 0;
@@ -6583,6 +6584,9 @@ body {
.navbar-top-links > .open > a:focus {
background-color: #002d62;
}
+#side-menu {
+ padding-top: 14.5px;
+}
.sidebar {
margin-top: 51px;
}
@@ -6593,9 +6597,6 @@ body {
.sidebar .sidebar-search {
padding: 15px;
}
-.sidebar ul li a.active {
- background-color: #edecec;
-}
.sidebar .arrow {
float: right;
}
@@ -6724,6 +6725,8 @@ body {
}
.panel-heading .fa {
font-size: 22px;
+ position: relative;
+ top: 3px;
}
.panel-blue,
.panel-primary {
@@ -6982,6 +6985,13 @@ a.list-group-item-danger.active:focus {
.popover {
color: #282625;
}
+.nav-hanging-tabs {
+ margin: 0;
+}
+.nav-hanging-tabs > li > a {
+ background-color: rgba(0, 0, 0, 0.05);
+ padding: 14px 18px;
+}
.table-no-border > thead > tr > th,
.table > tbody > tr > th,
.table-no-border > tfoot > tr > th,
@@ -7018,8 +7028,13 @@ th.delete > label {
.view-items-form .pagination li {
padding: 10px;
}
+.messages-box {
+ margin: 20px 0 0;
+ position: relative;
+ min-height: 30px;
+}
.messages-box > ul {
- margin-top: 40px;
+ margin-top: 15px;
color: #fff;
}
.messages-box > ul > li {
@@ -7037,16 +7052,76 @@ th.delete > label {
.bootstrap3-multi-input {
display: none;
}
-.nav-hanging-tabs {
- margin-top: 20px;
- margin-right: 0;
+.spinner {
+ bottom: 0;
+ height: 25px;
+ margin: 0 auto;
+ position: absolute;
+ text-align: center;
+ top: 15px;
+ width: 100%;
+ display: none;
}
-.nav-hanging-tabs > li > a {
- background-color: rgba(0, 0, 0, 0.05);
- padding: 14px 18px;
+.spinner > span {
+ display: inline-block;
+ position: relative;
+ top: -8px;
}
-#side-menu {
- padding-top: 14.5px;
+.spinner > div {
+ height: 100%;
+ width: 6px;
+ display: inline-block;
+ -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+ animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+.spinner.active {
+ display: block;
+}
+.spinner > span {
+ font-size: 14px;
+ padding: 15px 5px;
+ color: #0f6cb6;
+}
+.spinner > div {
+ background-color: #0f6cb6;
+}
+.spinner .rect2 {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+.spinner .rect3 {
+ -webkit-animation-delay: -1s;
+ animation-delay: -1s;
+}
+.spinner .rect4 {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+.spinner .rect5 {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+@-webkit-keyframes sk-stretchdelay {
+ 0%,
+ 40%,
+ 100% {
+ -webkit-transform: scaleY(0.4);
+ }
+ 20% {
+ -webkit-transform: scaleY(1);
+ }
+}
+@keyframes sk-stretchdelay {
+ 0%,
+ 40%,
+ 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ }
+ 20% {
+ transform: scaleY(1);
+ -webkit-transform: scaleY(1);
+ }
}
.clearfix:before,
.clearfix:after,
diff --git a/django/website/media/less/internews-bootstrap.less b/django/website/media/less/internews-bootstrap.less
index e4d25b7f144411ba5c0dea9874a9053b035d121e..8829658894b505c097cd104b912bcd8f0d7e27bb 100644
--- a/django/website/media/less/internews-bootstrap.less
+++ b/django/website/media/less/internews-bootstrap.less
@@ -7,6 +7,6 @@
@import "view-edit.less";
@import "sources.less";
@import "widgets.less";
-@import "navigation.less";
+@import "spinner.less";
@import "../bootstrap/less/mixins.less";
@import "../bootstrap/less/utilities.less";
\ No newline at end of file
diff --git a/django/website/media/less/internews-mixins.less b/django/website/media/less/internews-mixins.less
index 15177fac210914d0cb0080bde2d7588cd0edda2b..4bb4b2f722a6a802b7c04e6abba1a6342b4c0dc2 100644
--- a/django/website/media/less/internews-mixins.less
+++ b/django/website/media/less/internews-mixins.less
@@ -1,5 +1,5 @@
-.box-shadow(@horizontal, @vertical, @spread:5px, @color: rgba(0,0,0,0.4)) {
+.box-shadow(@horizontal, @vertical, @spread:5px, @color: rgba(51,51,51,0.38)) {
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
-o-box-shadow:@arguments;
diff --git a/django/website/media/less/internews.less b/django/website/media/less/internews.less
index 028946fe1e41a0acdeebefecfde364f0505906e8..082f354c5240e7b24da9b1626f1e4c4a0f9efa3c 100644
--- a/django/website/media/less/internews.less
+++ b/django/website/media/less/internews.less
@@ -17,6 +17,10 @@ body {
.box-shadow-inset(inset, 0px, 0px);
}
+.page-header {
+ margin-top:0;
+}
+
@media(min-width:768px) {
#page-wrapper {
position: inherit;
@@ -58,7 +62,6 @@ body {
background-color:@gray-lighter;
a {
color:@gray;
- text-decoration:underline;
}
}
@@ -67,7 +70,8 @@ body {
.navbar-static-top {
position:fixed;
width:100%;
- .box-shadow(0px, 5px);
+ .box-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
+ border:none;
}
@@ -142,6 +146,10 @@ body {
// --Sidebar
+#side-menu {
+ padding-top:@navbar-padding-vertical;
+}
+
.sidebar {
.sidebar-nav.navbar-collapse {
padding-left: 0;
@@ -154,14 +162,6 @@ body {
padding: 15px;
}
-.sidebar ul li {
- a {
- &.active {
- background-color: @gray-lighter;
- }
- }
-}
-
.sidebar .arrow {
float: right;
}
@@ -328,6 +328,8 @@ body {
border:none;
.fa {
font-size:22px;
+ position:relative;
+ top:3px;
}
}
diff --git a/django/website/media/less/navigation.less b/django/website/media/less/navigation.less
deleted file mode 100644
index 7648071fdb4eab658efd35edb8c8b23d573d20e7..0000000000000000000000000000000000000000
--- a/django/website/media/less/navigation.less
+++ /dev/null
@@ -1,15 +0,0 @@
-//internews navigation overrides
-
-.nav-hanging-tabs {
- margin-top:20px;
- margin-right:0;
-}
-
-.nav-hanging-tabs > li > a {
- background-color:rgba(0,0,0,0.05);
- padding:14px 18px;
-}
-
-#side-menu {
- padding-top:@navbar-padding-vertical;
-}
diff --git a/django/website/media/less/sources.less b/django/website/media/less/sources.less
index 0cf3c2f960d6f9aef9d965a8cc8aeeb31f24a0cc..8197e4a504d73c87a3d24c7b14b08a138b2b3222 100644
--- a/django/website/media/less/sources.less
+++ b/django/website/media/less/sources.less
@@ -1,5 +1,5 @@
-//Sources page
+//Styles for import, loading and sources
.bootstrap3-multi-input {
display:none;
-}
+}
\ No newline at end of file
diff --git a/django/website/media/less/spinner.less b/django/website/media/less/spinner.less
new file mode 100644
index 0000000000000000000000000000000000000000..deb637931a7aeca2da553e9c8804714bb4ca1b5f
--- /dev/null
+++ b/django/website/media/less/spinner.less
@@ -0,0 +1,76 @@
+//loading spinner
+
+.spinner {
+ bottom: 0;
+ height: 25px;
+ margin: 0 auto;
+ position: absolute;
+ text-align: center;
+ top: 15px;
+ width: 100%;
+ display:none;
+}
+
+.spinner > span {
+ display: inline-block;
+ position: relative;
+ top: -8px;
+}
+
+.spinner > div {
+ height: 100%;
+ width: 6px;
+ display: inline-block;
+
+ -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+ animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner.active {
+ display:block;
+}
+
+.spinner > span {
+ font-size: 14px;
+ padding: 15px 5px;
+ color:@brand-primary;
+}
+
+.spinner > div {
+ background-color: @brand-primary;
+}
+
+.spinner .rect2 {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+ -webkit-animation-delay: -1.0s;
+ animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+ 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+ 20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+ 0%, 40%, 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ } 20% {
+ transform: scaleY(1.0);
+ -webkit-transform: scaleY(1.0);
+ }
+}
diff --git a/django/website/media/less/view-edit.less b/django/website/media/less/view-edit.less
index e7022fdc1e11767cce86814cd1ce8c437921d9a4..2cad305f0c02470bd0641c9a81ee06925abe49ff 100644
--- a/django/website/media/less/view-edit.less
+++ b/django/website/media/less/view-edit.less
@@ -1,5 +1,17 @@
// View/edit
+//link navigation
+
+.nav-hanging-tabs {
+ margin:0;
+}
+
+.nav-hanging-tabs > li > a {
+ background-color:rgba(0,0,0,0.05);
+ padding:14px 18px;
+}
+
+//table
.table-no-border > thead > tr > th, .table > tbody > tr > th,
.table-no-border > tfoot > tr > th, .table > thead > tr > td,
.table-no-border > tbody > tr > td, .table > tfoot > tr > td {
@@ -39,8 +51,14 @@ th.delete > label {
}
}
+.messages-box {
+ margin: 20px 0 0;
+ position: relative;
+ min-height: 30px;
+}
+
.messages-box > ul {
- margin-top:40px;
+ margin-top:15px;
color:#fff;
}
diff --git a/django/website/templates/Copy of base_side.html b/django/website/templates/Copy of base_side.html
deleted file mode 100644
index 89d7fcc404f0ad8abd39a0604c12865b71469dac..0000000000000000000000000000000000000000
--- a/django/website/templates/Copy of base_side.html
+++ /dev/null
@@ -1,67 +0,0 @@
-{% extends "base.html" %}
-{% load i18n %}
-{% block content %}
-<!-- Navigation -->
- <div class="navbar-default sidebar" role="navigation">
- <div class="featured-image">
- <img class="img-responsive" src="{{ STATIC_URL }}images/rsz_west-african-girl.jpg" alt="West African girl" />
- </div>
- <nav class="sidebar-nav navbar-collapse">
- <ul class="nav" id="side-menu">
- <li><a href="{% url "dashboard" %}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
- <li><a href="{% url "sources" %}"><i class="fa fa-download fa-fw"></i> Sources</a></li>
- <li><a href="{% url "data-view" %}"><i class="fa fa-pencil fa-fw"></i> View & Edit</a></li>
- </ul>
- </nav>
- <div class="site-info">
- <p>An <a href="http://www.internews.org" title="Internews website">Internews project</a><br />
- Site by<a href="http://www.aptivate.org" title="Aptivate website"> Aptivate</a></p>
- </div>
- <!-- /.sidebar-collapse -->
- </div>
- <!-- /.sidebar -->
- <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- </button>
- <a class="navbar-brand pull-left" href="/">{% trans "HID " %}<span class="subtitle">{% trans "Humanitarian Information Dashboard" %}</span></a>
- </div>
- <!-- /.navbar-header -->
- {% if request.user.is_authenticated %}
- <ul class="nav navbar-top-links navbar-right">
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
- <i class="fa fa-user fa-fw"></i> {{ request.user }} <i class="fa fa-caret-down"> </i>
- </a>
- <ul class="dropdown-menu dropdown-user">
- <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a></li>
- <li><a href="{% url "logout" %}?next={% url 'login' %}" class=""><i class="fa fa-sign-out fa-fw"></i>{% trans "Log out" %}</a></li>
- </ul>
- <!-- /.dropdown-user -->
- </li>
- </ul>
- {% endif %}
- <!-- /.navbar-top-links -->
- </nav>
- <!-- /Navigation -->
- <!-- Main Content -->
- <div id="page-wrapper">
- <div class="row">
- <div class="col-lg-12">
- <div class="row messages-box">
- {% if messages %}
- <ul class="list-unstyled">
- {% for message in messages %}
- <li{% if message.tags %} class="alert {{ message.tags }} {% if message.tags == "error" %}bg-danger{% else %}bg-success{% endif %}"{% endif %}>{{ message }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- </div>
- {% block maincontent %}
- {% endblock maincontent %}
- </div>
- </div>
- </div>
- <!-- /Main Content -->
-{% endblock content %}
diff --git a/django/website/templates/base.html b/django/website/templates/base.html
index 79bf0a6c3468d4162a0f233e2c2f453d9f42dac8..bd16e3801957f8a4d2765aebdbbf551951b71230 100644
--- a/django/website/templates/base.html
+++ b/django/website/templates/base.html
@@ -24,7 +24,6 @@
</head>
<body class="stretch-vertical">
-
{% block content %}
<div class="container-fluid stretch-vertical">
<div class="row container-row">
diff --git a/django/website/templates/base_side.html b/django/website/templates/base_side.html
index 380863381dbe558bcdef8e719a6b2fc1b2c7e109..1eb36a2990eccf285897e0ad4084665a4fc6e85e 100644
--- a/django/website/templates/base_side.html
+++ b/django/website/templates/base_side.html
@@ -2,11 +2,11 @@
{% load i18n %}
{% block content %}
<!-- Navigation -->
- <div class="navbar-default sidebar" role="navigation">
- <div class="featured-image">
+ <div class="navbar-default sidebar" role="navigation">
+ <div class="featured-image">
<img class="img-responsive" src="{{ STATIC_URL }}images/rsz_west-african-girl.jpg" alt="West African girl" />
</div>
- <nav class="sidebar-nav navbar-collapse">
+ <nav class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li><a class="active" href="{% url "dashboard" %}"><span class="fa fa-dashboard fa-fw"></span> Dashboard</a></li>
<li><a href="{% url "sources" %}"><span class="fa fa-download fa-fw"></span> Sources</a></li>
@@ -14,8 +14,8 @@
</ul>
</nav>
<div class="site-info">
- <p>A project of <a href="http://www.internews.org" title="Internews website">Internews</a><br />
- Developed by<a href="http://www.aptivate.org" title="Aptivate website"> Aptivate</a></p>
+ <p>a project of <a href="http://www.internews.org" title="Internews website">Internews</a><br />
+ developed by<a href="http://www.aptivate.org" title="Aptivate website"> Aptivate</a></p>
</div>
<!-- /.sidebar-collapse -->
</div>
@@ -28,7 +28,7 @@
<a class="navbar-brand pull-left" href="/">{% trans "HID " %}<span class="subtitle">{% trans "Humanitarian Information Dashboard" %}</span></a>
</div>
<!-- /.navbar-header -->
- {% if request.user.is_authenticated %}
+ {% if request.user.is_authenticated %}
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
@@ -43,25 +43,34 @@
</ul>
{% endif %}
<!-- /.navbar-top-links -->
- </nav>
+ </nav>
<!-- /Navigation -->
<!-- Main Content -->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
- <div class="row messages-box">
- {% if messages %}
- <ul class="list-unstyled">
- {% for message in messages %}
- <li{% if message.tags %} class="alert {{ message.tags }} {% if message.tags == "error" %}bg-danger{% else %}bg-success{% endif %}"{% endif %}>{{ message }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- </div>
- {% block maincontent %}
- {% endblock maincontent %}
- </div>
+ <div class="row messages-box">
+ <div class="spinner">
+ <span>loading...</span>
+ <div class="rect1"></div>
+ <div class="rect2"></div>
+ <div class="rect3"></div>
+ <div class="rect4"></div>
+ <div class="rect5"></div>
+ </div>
+ {% if messages %}
+ <ul class="list-unstyled">
+ {% for message in messages %}
+ <li{% if message.tags %} class="alert {{ message.tags }} {% if message.tags == "error" %}bg-danger{% else %}bg-success{% endif %}"{% endif %}>{{ message }}</li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </div>
+ {% block maincontent %}
+ {% endblock maincontent %}
+ </div>
</div>
- </div>
- <!-- /Main Content -->
+ </div>
+ <!-- /Main Content -->
{% endblock content %}
+
diff --git a/django/website/users/templates/registration/login.html b/django/website/users/templates/registration/login.html
index a36506c78ee5745a9af5e7e196be465e3ffedaed..8e923e0b41d98f5c3e588b639597d80cc2cfb7d4 100644
--- a/django/website/users/templates/registration/login.html
+++ b/django/website/users/templates/registration/login.html
@@ -6,7 +6,7 @@
{% block maincontent %}
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default login-form modal-content">
- <div class="panel-heading">
+ <div class="panel-heading">
<h1 class="panel-title"><i class="fa fa-user fa-fw"></i> HID login</h1>
</div>
<div class="form-group panel-body">