Skip to content
Snippets Groups Projects
Commit 802cdaae authored by Alice Heaton's avatar Alice Heaton :speech_balloon:
Browse files

Merge branch 'assets' into text_and_table_widgets

parents 90d37a06 d629d82a
No related branches found
No related tags found
No related merge requests found
Showing
with 255 additions and 144 deletions
/**
* Hide messages box after 3 seconds automatically
*/
jQuery(window).load(function(){
setTimeout(function(){
jQuery('.messages-box > ul').fadeOut(3000, 'swing');
}, 3000);
});
/* 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
......@@ -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 &amp; 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 %}
......
......@@ -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 &amp; Edit" %}</h1>
<div class='row'>
<div class="col-lg-12">
......
......@@ -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,
......
......@@ -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
.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;
......
......@@ -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;
}
}
......
//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;
}
//Sources page
//Styles for import, loading and sources
.bootstrap3-multi-input {
display:none;
}
}
\ No newline at end of file
//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);
}
}
// 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;
}
......
{% 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 &amp; 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 %}
......@@ -24,7 +24,6 @@
</head>
<body class="stretch-vertical">
{% block content %}
<div class="container-fluid stretch-vertical">
<div class="row container-row">
......
......@@ -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 %}
......@@ -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">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment