From 1c028b9a3ef73b78faa08ee962e6c1e4954f48e5 Mon Sep 17 00:00:00 2001
From: Jay Alvarez <jaya@aptivate.org>
Date: Tue, 28 Jul 2015 12:30:45 +0100
Subject: [PATCH] heading/title fixes: -- page-title disappears under header on
tablet width -- page-title has no padding/margin on left side on smaller
screen
---
.../media/less/internews-variables.less | 2 +-
django/website/media/less/internews.less | 47 +++++++++++++++----
django/website/templates/base_side.html | 4 +-
3 files changed, 40 insertions(+), 13 deletions(-)
diff --git a/django/website/media/less/internews-variables.less b/django/website/media/less/internews-variables.less
index 891afc2f..cbf8a5f1 100644
--- a/django/website/media/less/internews-variables.less
+++ b/django/website/media/less/internews-variables.less
@@ -286,7 +286,7 @@
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs: 420px;
+@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
diff --git a/django/website/media/less/internews.less b/django/website/media/less/internews.less
index 5e09da3b..5f5bfaf8 100644
--- a/django/website/media/less/internews.less
+++ b/django/website/media/less/internews.less
@@ -11,23 +11,43 @@ body {
width: 100%;
}
-
.page-header {
- margin-top:0;
padding:@padding-base-vertical;
}
+@media(max-width:@screen-sm) {
+ .page-header {
+ margin-left:@padding-base-horizontal;
+ margin-top:20px;
+ }
+}
+
@media(min-width:@screen-sm-min) {
+ .page-header {
+ margin:0;
+ }
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
- padding:@padding-large-horizontal;
+ padding:0 @padding-large-horizontal;
min-height: 1000px;
background-color: @gray-lighter;
.box-shadow-inset(inset, 0px, 0px);
}
}
+@media(min-width:@screen-xs-min) {
+ #page-wrapper {
+ margin-top:50px;
+ }
+}
+
+@media(min-width:@screen-xs)and (max-width:@screen-sm-min){
+ #page-wrapper {
+ margin-top:96px;
+ }
+}
+
// Branding
.navbar-brand {
@@ -68,6 +88,7 @@ body {
@media(min-width:@screen-sm-min) {
.navbar-static-top {
position:fixed;
+ top:0;
}
}
@@ -159,7 +180,6 @@ body {
padding-left: 0;
padding-right: 0;
}
- margin-top:50px;
margin-bottom:20px;
}
@@ -219,17 +239,26 @@ body {
}
}
-@media(max-width:@screen-sm) {
- .featured-image > img {
- width:100%;
- display:block;
+.featured-image {
+ background-image:url(../images/rsz_west-african-girl.jpg);
+ background-repeat:no-repeat;
+ background-size:cover;
+ min-height:200px;
+}
+
+@media(max-width:@screen-xs) {
+ .sidebar {
+ margin-top:96px;
}
}
@media(min-width:@screen-xs-min) and (max-width:@screen-sm) {
- .featured-image > img {
+ .featured-image {
display:none;
}
+ .sidebar {
+ margin-top:76px;
+ }
}
// --Nav Tabs next to page header
diff --git a/django/website/templates/base_side.html b/django/website/templates/base_side.html
index 73d121d7..8852ff40 100644
--- a/django/website/templates/base_side.html
+++ b/django/website/templates/base_side.html
@@ -3,9 +3,7 @@
{% 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>
+ <div class="col-xs-12 featured-image"></div>
<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>
--
GitLab