From 780bc91a2360ebab437d1729b0486804fae737fe Mon Sep 17 00:00:00 2001
From: Jay Alvarez <jaya@aptivate.org>
Date: Thu, 16 Jul 2015 14:16:13 +0100
Subject: [PATCH] responsive styles for smallest view
-- enabled navbar-toggle
-- separated footers
-- set 'a project of internews' into image
-- moved login dropdown to right
---
django/website/media/css/styles.css | 109 +++++++++++-----
.../images/rsz_a-project-of-internews.png | Bin 0 -> 2569 bytes
.../media/less/internews-variables.less | 4 +-
django/website/media/less/internews.less | 119 +++++++++++++-----
django/website/templates/base_side.html | 30 +++--
5 files changed, 184 insertions(+), 78 deletions(-)
create mode 100644 django/website/media/images/rsz_a-project-of-internews.png
diff --git a/django/website/media/css/styles.css b/django/website/media/css/styles.css
index c68d5f9f..39177274 100644
--- a/django/website/media/css/styles.css
+++ b/django/website/media/css/styles.css
@@ -1078,7 +1078,7 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
- font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans, sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #282625;
@@ -1180,7 +1180,7 @@ h6,
.h4,
.h5,
.h6 {
- font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans, sans-serif;
font-weight: 300;
line-height: 1.1;
color: inherit;
@@ -4509,7 +4509,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
- border-color: transparent;
+ border-color: #0b5087;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
@@ -5817,7 +5817,7 @@ button.close {
position: absolute;
z-index: 1070;
display: block;
- font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1.4;
@@ -5924,7 +5924,7 @@ button.close {
display: none;
max-width: 276px;
padding: 1px;
- font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans, sans-serif;
font-size: 15px;
font-weight: normal;
line-height: 1.42857143;
@@ -6472,19 +6472,11 @@ button.close {
}
body {
background-color: #ffffff;
+ min-width: 480px;
}
#wrapper {
width: 100%;
}
-#page-wrapper {
- padding: 30px 15px;
- min-height: 1000px;
- background-color: #edecec;
- -webkit-box-shadow: inset 0px 0px 10px rgba(51, 51, 51, 0.38);
- -moz-box-shadow: inset 0px 0px 10px rgba(51, 51, 51, 0.38);
- -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;
}
@@ -6493,6 +6485,12 @@ body {
position: inherit;
margin: 0 0 0 250px;
padding: 30px;
+ min-height: 1000px;
+ background-color: #edecec;
+ -webkit-box-shadow: inset 0px 0px 10px rgba(51, 51, 51, 0.38);
+ -moz-box-shadow: inset 0px 0px 10px rgba(51, 51, 51, 0.38);
+ -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);
}
}
.navbar-brand {
@@ -6501,34 +6499,25 @@ body {
.subtitle {
display: block;
float: right;
- width: 15em;
+ width: 150px;
}
.subtitle {
font-size: 12px;
line-height: 1em;
padding-left: 1em;
}
-.site-info {
- bottom: 0;
- width: 250px;
- position: fixed;
-}
-.site-info {
- color: #78716e;
- font-size: 13px;
- text-align: center;
- padding: 10px;
- background-color: #edecec;
-}
-.site-info a {
- color: #78716e;
-}
.navbar-static-top {
- position: fixed;
+ position: absolute;
width: 100%;
-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;
+ top: 0;
+}
+@media (min-width: 768px) {
+ .navbar-static-top {
+ position: fixed;
+ }
}
.navbar-top-links {
margin-right: 0;
@@ -6536,8 +6525,10 @@ body {
.navbar-top-links li {
display: inline-block;
}
-.navbar-top-links li:last-child {
- margin-right: 15px;
+@media (min-width: 768px) {
+ .navbar-top-links li:last-child {
+ margin-right: 15px;
+ }
}
.navbar-top-links li a {
padding: 15px;
@@ -6628,10 +6619,46 @@ body {
margin-left: auto;
}
}
+@media (max-width: 480px) {
+ .featured-image > img {
+ width: 100%;
+ }
+}
.nav.nav-tabs.navbar-right {
padding-top: 43px;
margin-right: 10px;
}
+.project-info {
+ position: fixed;
+ bottom: 30px;
+ text-align: center;
+ width: 250px;
+ font-size: 12.5px;
+ margin: 0;
+}
+.project-info > a {
+ width: 120px;
+ display: inline-block;
+}
+.project-info > a > img {
+ width: 100%;
+}
+.site-info {
+ border-top: 1px solid #f5f5f5;
+}
+.site-info {
+ font-size: 12.5px;
+ color: #78716e;
+ margin: 0;
+ text-align: right;
+ padding: 15px 15px 0 15px;
+}
+.site-info p {
+ margin: 0;
+}
+.site-info a {
+ color: #78716e;
+}
.btn-outline {
color: inherit;
background-color: transparent;
@@ -6662,6 +6689,22 @@ body {
.btn-primary > .fa {
color: #ffffff;
}
+.footer {
+ bottom: 0;
+ width: 100%;
+ position: fixed;
+ height: 100px;
+}
+.footer {
+ color: #78716e;
+ font-size: 13px;
+ text-align: center;
+ padding: 10px;
+ background-color: #edecec;
+}
+.footer a {
+ color: #78716e;
+}
.login-panel {
margin-top: 25%;
}
diff --git a/django/website/media/images/rsz_a-project-of-internews.png b/django/website/media/images/rsz_a-project-of-internews.png
new file mode 100644
index 0000000000000000000000000000000000000000..5208d284d03f59687692af9a164d2fed9a4be5dc
GIT binary patch
literal 2569
zcmV+k3ikDhP)<h;3K|Lk000e1NJLTq008;`000^Y0{{R3sdllA0002+P)t-s|Ns90
z008~{{rvp=`}_O)`uh0z_zVmT1qB7x*4FIo>}qOiFfcIS;NUeiHH?gmKtMq5?(VU%
zu~1M@+S=MCCMFON5U{YYt*xzXZEY<rE%fyC>FMd>;^NcO(<vz_At50N2?^xn<XT!<
z_V)JO-QBypyOflaS65fV!^4S*iF$f^aBy%vJv|s07!(u~c6N4TWMoZEO&uK_@bK`+
z$jH9FzH@VPUteE2IXP!%XGTUwsHmu-qN0$HkV#2NLPA3F^77{9=FZN}%F4>MwY9Ue
zv!$h_n3$MUR8+UOw}ga*fPjFVot@a&*wE0>6rV8R000QoNkl<ZSi{{|hjuDC43+F@
z)Ibsly%QkRgq|KqZ~Om$v)3L5n7kyLJ$v??x2u<jJ+dt8%Ch7c`j<(F??&a16#R~q
z&By<lU#PZhRnTZM7L_dhH^`tyaz^rdnc(O<<j)D_Ia>Yjp0w|ORd*A#=(i)2UODzH
zbV;q=+#vB)DCd$~d`gRz9|Ft=eszl5>|emi{~8Ht7*hDn5}GSEk0kWdhArvv^pX5L
zPo1mH5YJq)g!ptVjNWlCht3B2E|d!4({Rm~!di)_nLc~`cKU_X&?l{y79SFc{4@n&
zaJ#eC<3qE>^EVStd~otcxuAOv(?{susJGx1Kl;p+YpcJpOMaI$eJj+TQ>oU?c3_T>
zz_P8>!4l)EN6M!PD)b_Esr!Af@o!YmxeDTw)P3C*6<XqMU#TDE&bd@s#JBL#O)Hfe
zo63fG?t+VpO3eq|pkT$K(P8R7qL_<ZjE{nOQ%@}%q*|t4B$&S;+E3MKgpP!rf%W16
z2wAF=gUyO_lXoMlhSoK1cPUoVg)4_aLlwN9Ptx|$-B5A6EwxjZ_JBG`?!dmMGPusw
zABZfln}q1HUi*qS3u=E<s!D>d$3$&*7=KeTJf9mcB{f)lBa;U1=p`AxUGLg~^CV>K
zv`IOw*s<%7X~h_nIal^f?MG`?=1bW5aGOvvCpjT7d3>hTUqJnf9n~JL+KCa2#d8(@
zaE;3xD6FF1=i#h<3X>*YpcpjcC_7K>YLd%`WYH0~+syqPy6v;GH)z_NY=OPQCu9ig
zN{Keh91aR8@+H_YIPJ0BqMdMp%i+upNe}r6bF>qJu~WimNsT^`^g++?DVL7hUFH`G
zcEdIg!_hp^uEUx1G{gLeg+tt!G55}4=W*Gtwx5_!1YGi5=3;0XW;lh$%uA@t_B1dd
zqWngqFxyRywFPN9=9r3%c$7ol?np4X7(lN+=V4p|dYJbni(0nG#RAyxVJ?j%pzpzs
zHfNM*p~z`Cdyh*?f_u9>m%@M6CB3ktPOb$%rpWyKti$lB2}T+j63rQ~3PJfK9|@><
z<#JsBdYEV9Tus?|t>XF3;Q)zTk6!^n9I+E1BMb*v@Iaqm(MFtdgi_r9Llw+3zE%k}
zmfWSRRRfOdde@<{yd+ba6iH%fK<6hlaKUy#v)^rQkcKWQwlgNnw5a9S5n8hI3<-;F
z9V{;nIf1D2z{Pt!ASn$&Cp<@Uz!@0u0eY0@ut3@B)X5ZQ+z^JO0hW@cB{6eKfX*E~
z=al<7GNCYm!iZvfMZ&TSdg72eZYMf2+fEmH9{5bqrBj0YYGNFlNrI~?q$qdI&28v#
zi|$pS0MN?;tUyh806T*JGq4qO<&G}7)a5tqYgkBKo(fCE#Wr+FcU+E0sY=#_9VEgp
zpkE3#CvP*{On{DGqsS9228|gN@clSyn?$FnLsiWAf@GNQU7;2yYIMuVpmK5~?8FHM
zKPo;yjjgT15T7)TyAHS;=%+johU$q17Y#tq=n5L<qYXRjLLcz(I;QBl$7y(K>w>4D
z8|#ZI<iiRo{uVaxehK{nqJHQ~K6<SeiLxC5;wv>zK~HOgC<^Gg<VHwEOa`9FCQA@H
zq?@4=At}<#oTxT#UFgA3Qswt*lbhSnU$i$RHno%mbSx#vD#CRdx?;yQbSU1?j7~gT
zgp|KPe?@=@FZ9p9gnq7}S2oZs+As5l0$B4{NEdp?O;Bpr>-LsVK}CE=j3If>1GLxr
zQghdI3)d|HPK<kvLJ&Lahdy0x?~c3cdkVUUZtZ%erl9KsRuAlh-XoC(cKvvB>-Y%$
zlEcP&*YAD|9lyaOAJpIX6-6R7N+Z60g&yzoIZSbdEJ0%~V##x4jVKT_TtOQB@z!)W
z8G#!(Sx|PFZU0%1k+FT&0Ue`Fv>(s<`8rMK_Jaujs4DeBWKZB(1>F*#ob^LQ<d2~X
zQ<bKJmE3+_egR#~aaLT~&#PT6aiz-Wg`LqE*TIPdf~HOwNmc$X;Tp>VqsvXX1>I@s
zR9;E0Q#sfVUg8hf{I+5*Y-ge~d~L`RU{z1j0!(Ki6m$Y@GW=9sqSf`ZE6g84e<aw|
z*2&vck#;4%fQ}q{?FuzGCJ>$-Zj=&er~H@<t00^?Q^L4ObLWMC#-6BB7h;8D1D%Jr
z=;dQP47vqeZ)JvyOI5=&oVfAo`hXK-@T?F=4Jo>uP^B|aM18RUy%#a8b=E_{ZJ?8#
zGBS|$Bj{JoK$WYA&4ZfC-91jxr_dirV4pfSc(@(nNvh-KTCs~3xyzt8?kTV|>8tY=
z9O8o0dFpeQ`=>b)9`w1*XQ65zWm@0nPTVtE0OKURhqH1Ewt{YmY?t{ubev%O7WFgG
z!+kHkSLRF*Zr*3^CtlXKIq}3CKAn}A+awJ@FZ!V$=qt^G3%v~Js*Z6f9KjZ$t#+=M
zXTk(C<U&6MbT7k0IOQN;cTSj_Dl<`b=w6)`W#)ofzBXr$h0<rtSEhiAqWaqVjQbK-
zJm{zV>hfc&JA8AMn(I{?+;a1sgrT8JK{tb*5<OdzSWDQ)?u~w@l;pwY4li~RN;G_-
zQ^&m>6<g44`(EGSQzRAio*jT=BWHbeRWj&#&Y<BDsR*{GF7%GQQXaF<)jm)3MZfnd
zg>Z*^6}9S>-33D(xpZG^Y1c@vyxiSYF<MXkA;c!blL*}JuHJ}h-p3X^EGDVLyy}@k
zLsz`f_~3c-=2kg8I9%wSo*K+<jys;QT44p)3dU(eGN?bu#PO?TgF&FvjJVKK_n!~O
zuCA=7^Tz9_S!<!2l_>%X_~Zoy$Gf}B>`K7*ChNb__}TvVVpXgZ^e^7m<*K32-`D^C
zcTI1m_*VK$A^-Y@XR9<eUt#o21s%I8<=QWwe1j2Ym8)d<c=XGY0QsR{(Bpg@^6|un
z#f7KWWBEH@EbeQ)@vq&7H0Ql!e<RZ_u}Y-$zamM~<m+ET@7ReQ`aQpr{}USJM}H|}
f{f?iB{|5aDveww}`l(VJ00000NkvXXu0mjfJ%14Y
literal 0
HcmV?d00001
diff --git a/django/website/media/less/internews-variables.less b/django/website/media/less/internews-variables.less
index 601b1d10..a5856166 100644
--- a/django/website/media/less/internews-variables.less
+++ b/django/website/media/less/internews-variables.less
@@ -45,7 +45,7 @@
//
//## Font, line-height, and color for body text, headings, and more.
-@font-family-sans-serif: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
+@font-family-sans-serif: "Helvetica Neue", Arial, Helvetica, sans, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -413,7 +413,7 @@
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
@navbar-inverse-toggle-icon-bar-bg: #fff;
-@navbar-inverse-toggle-border-color: transparent;
+@navbar-inverse-toggle-border-color: darken(@brand-primary, 10%);
//== Navs
diff --git a/django/website/media/less/internews.less b/django/website/media/less/internews.less
index 082f354c..c27cff73 100644
--- a/django/website/media/less/internews.less
+++ b/django/website/media/less/internews.less
@@ -2,20 +2,16 @@
body {
background-color: @gray-lightest;
+ min-width:480px;
}
+
// Wrappers
#wrapper {
width: 100%;
}
-#page-wrapper {
- padding: 30px 15px;
- min-height: 1000px;
- background-color: @gray-lighter;
- .box-shadow-inset(inset, 0px, 0px);
-}
.page-header {
margin-top:0;
@@ -26,6 +22,9 @@ body {
position: inherit;
margin: 0 0 0 250px;
padding: 30px;
+ min-height: 1000px;
+ background-color: @gray-lighter;
+ .box-shadow-inset(inset, 0px, 0px);
}
}
@@ -38,7 +37,7 @@ body {
.subtitle {
display: block;
float: right;
- width: 15em;
+ width: 150px;
}
.subtitle {
@@ -47,31 +46,20 @@ body {
padding-left: 1em;
}
-.site-info {
- bottom: 0;
- width:250px;
- position: fixed;
-
-}
-
-.site-info {
- color: #78716e;
- font-size: 13px;
- text-align: center;
- padding:@padding-base-vertical;
- background-color:@gray-lighter;
- a {
- color:@gray;
- }
-}
-
// Navigation
.navbar-static-top {
- position:fixed;
+ position:absolute;
width:100%;
.box-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
border:none;
+ top:0;
+}
+
+@media(min-width:768px) {
+ .navbar-static-top {
+ position:fixed;
+ }
}
@@ -83,10 +71,11 @@ body {
display: inline-block;
}
-.navbar-top-links li:last-child {
- margin-right: 15px;
+@media(min-width:768px){
+ .navbar-top-links li:last-child {
+ margin-right: 15px;
+ }
}
-
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
@@ -201,6 +190,12 @@ body {
}
}
+@media(max-width:480px) {
+ .featured-image > img {
+ width:100%;
+ }
+ }
+
// --Nav Tabs next to page header
.nav.nav-tabs.navbar-right {
@@ -208,6 +203,47 @@ body {
margin-right:@padding-small-horizontal;
}
+//Project info
+
+.project-info {
+ position: fixed;
+ bottom: 30px;
+ text-align: center;
+ width: 250px;
+ font-size:12.5px;
+ margin:0;
+}
+
+.project-info > a {
+ width:120px;
+ display:inline-block;
+}
+.project-info > a > img {
+ width:100%;
+}
+
+//Site info
+
+.site-info {
+ border-top:1px solid #f5f5f5;
+
+}
+
+.site-info {
+ font-size:12.5px;
+ color:@gray;
+ margin:0;
+ text-align:right;
+ padding:15px 15px 0 15px;
+ & p{
+ margin:0;
+ }
+ & a{
+ color:@gray;
+ }
+}
+
+
// Buttons
.btn-outline {
@@ -248,6 +284,27 @@ body {
color:@body-bg;
}
+//footer
+
+.footer {
+ bottom: 0;
+ width:100%;
+ position: fixed;
+ height:100px;
+
+}
+
+.footer {
+ color: #78716e;
+ font-size: 13px;
+ text-align: center;
+ padding:@padding-base-vertical;
+ background-color:@gray-lighter;
+ a {
+ color:@gray;
+ }
+}
+
// Login Page
@@ -409,6 +466,4 @@ body {
.fa-fw {
color:@gray-base;
margin-right:5px;
-}
-
-
+}
\ No newline at end of file
diff --git a/django/website/templates/base_side.html b/django/website/templates/base_side.html
index 1eb36a29..010618bd 100644
--- a/django/website/templates/base_side.html
+++ b/django/website/templates/base_side.html
@@ -6,31 +6,30 @@
<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 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>
<li><a href="{% url "data-view" %}"><span class="fa fa-pencil fa-fw"></span> View & Edit</a></li>
</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>
- </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>
+ <button title="show/hide menu" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
+ <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 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">
+ <li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-user fa-fw"></span> {{ request.user }} <span class="fa fa-caret-down"> </span>
</a>
@@ -68,9 +67,18 @@
</div>
{% block maincontent %}
{% endblock maincontent %}
+ <div class="row site-info">
+ <div class="col-lg-12">
+ <p>developed by<a href="http://www.aptivate.org" title="Aptivate website"> Aptivate</a></p>
+ </div>
+ </div>
</div>
</div>
</div>
+
+ <div class="project-info">
+ <a href="http://www.internews.org" title="a project of Internews"><img src="{{ STATIC_URL }}images/rsz_a-project-of-internews.png" alt="a project of Internews"></a>
+ </div>
<!-- /Main Content -->
{% endblock content %}
--
GitLab