Merge pull request #553 from OpenUpSA/pr6-responsiveness

Pr6 responsiveness

pmg/static/resources/css/pr6.css

@@ -19,19 +19,33 @@
 
 
 .pr6-title {
-    width: 400px;
+    width: 300px;
     margin: 0 auto;
     display: block;
 }
 
+@media screen and (min-width: 768px) {
+    .pr6-title {
+        width: 400px;
+    }
+
+}
+
 .pr6-page-container {
     background-color: #fff;
     border-radius: 22px 22px 0 0;
-    padding: 4em 2em 1em 2em;
+    padding: 4em 1em 1em 1em;
     position: relative;
     top: -250px;
 }
 
+@media screen and (min-width: 768px) {
+    .pr6-page-container {
+        padding: 4em 2em 2em 2em;
+    }
+
+}
+
 .pr6-intro h2 {
     font-size: 32px;
     font-weight: bold;
@@ -107,6 +121,11 @@
     position: relative;
 }
 
+.pr6-interviews article a {
+  display: block;
+  overflow: hidden;
+}
+
 .pr6-articles article .article-dots, .pr6-statistics article .article-dots {
   position: absolute;
   width: 15%;
@@ -122,9 +141,16 @@
     background-color: #f3f8f6;
 }
 
+@media screen and (min-width: 768px) {
+    .pr6-interviews article {
+      padding: 1em 1em 0 1em;
+    }
+
+}
+
 .pr6-interviews article img {
   display: block;
-  margin: 0 1em 1.5em 0;
+  margin: 0 1em 0 0;
   filter: grayscale(100%);
   border-radius: 5px;
   overflow: hidden;
@@ -184,10 +210,17 @@
   font-size: 40px;
   line-height: 1.3em;
   text-align: center;
-  padding: 0 3em;
+  padding: 0;
   margin: 0 0 0.8em 0;
 }
 
+@media screen and (min-width: 768px) {
+  .full-article .article-title {
+    padding: 0 3em;
+  }
+
+}
+
 
 .full-article .article-intro {
   font-size: 20px;
@@ -209,17 +242,31 @@
 .full-article .article-content {
   font-size: 16px;
   line-height: 1.4em;
-  padding: 0 2em;
+  padding: 0 0.5em;
+}
+
+@media screen and (min-width: 768px) {
+
 
+.full-article .article-content {
+  padding: 0 2em;
+}
+
 }
 
 .full-article .article-content p {
   margin-bottom: 2em;
-  text-align: justify;
   color: #666;
   line-height: 1.5em;
 }
 
+@media screen and (min-width: 768px) {
+  .full-article .article-content p {
+    text-align: justify;
+  }
+
+}
+
 .full-article .article-content ul {
   margin-bottom: 2em;
 }
@@ -246,23 +293,40 @@
 }
 
 .full-article .article-content blockquote {
-  float: left;
-  width: 300px;
   color: #f05532;
   position: relative;
   font-size: 1.4em;
-  padding-left: 2em;
-  margin: 1em;
+  margin: 1em 0;
   line-height: 1.3em;
 }
 
+@media screen and (min-width: 768px) {
+
+  .full-article .article-content blockquote {
+    float: left;
+    width: 300px;
+    padding-left: 2em;
+    margin: 1em;
+  }
 
+}
+
 .full-article .article-content blockquote.right {
   float: right;
   border-left: none;
   border-right: 5px solid #eee;
 }
 
+@media screen and (min-width: 768px) {
+
+  .full-article .article-content blockquote.right {
+    float: right;
+    border-left: none;
+    border-right: 5px solid #eee;
+  }
+
+}
+
 .full-article .article-content blockquote.full {
   float: none;
   width: 100%;
@@ -435,12 +499,20 @@
 .full-article .profile-pic {
   width: 200px;
   border-radius: 5px;
-  float: left;
-  margin: 0 2em 1em 0;
-  overflow: hidden;
+  margin: 0 auto 1em;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
 }
 
+@media screen and (min-width: 768px) {
+  .full-article .profile-pic {
+    border-radius: 5px;
+    float: left;
+    margin: 0 2em 1em 0;
+      overflow: hidden;
+    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
+  }
+}
+
 .full-article .article-content .indent {
   padding-left: 3em;
 

pmg/static/resources/css/style.scss

@@ -2089,3 +2089,8 @@ ul.menu {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+
+.renamed-committee-links {
+  margin: 2em 0;
+}

pmg/templates/blog.html

@@ -8,7 +8,7 @@
   <div class="row">
     <div class="col-sm-8 post-list">
       {% include '_social_sharing.html' %}
-      <h1>That week in Parliament</h1>
+      <h1>Blog</h1>
       {% if 'year' in filters or 'month' in filters %}
       <h4>Showing posts from: 
         <span class="current-filter">{{filters['month']}} {{filters['year']}}
@@ -39,7 +39,6 @@ <h3 class="title">{{ post.title }}</h3>
       {% endfor %}
     </div>
     <div class="col-sm-4 blog-info">
-      {% include '_blog_infobox.html' %}
       {% include '_blog_archive.html' %}
     </div>
   </div>

pmg/templates/committee_layout.html

@@ -38,6 +38,21 @@ <h4 class="light-red">{{ committee.house.name }} Committee</h4>
           <div class="{% if not committee.about %}no-about{% endif %}">{% include '_social_sharing.html' %}</div>
         {% endblock %}
       </header>
+
+      <!-- 7th parliament changed committees. Link to the old committees -->
+      <div class="renamed-committee-links">
+        {% if committee.id == 95 %}
+          This committee was previously part of <strong>Agriculture, Land Reform and Rural Development</strong>.<br/>Historical meetings are available in the <strong><a href="/committee/37/">Agriculture</a></strong> committee.
+        {% endif %}
+        {% if committee.id == 23 %}
+          This committee was previously part of <strong>Higher Education, Science and Innovation</strong>.<br/>Historical meetings are available in the <strong><a href="/committee/64/">Higher Education</a></strong> committee.
+        {% endif %}
+        {% if committee.id == 40 %}
+          This committee was previously part of <strong>Justice and Correctional Services</strong>.<br/>Historical meetings are available in the <strong><a href="/committee/38/">Justice and Constitutional Development</a></strong> committee.
+        {% endif %}
+      </div>
+      <!-- end link to old committee -->
+
       <div class="committee-page">
         {% block committee_page %}
         {% endblock %}

pmg/templates/pr6/article.html

@@ -19,10 +19,7 @@
     <div class="container">
         <div class="pr6-page-container">
             <div class="row">
-                <div class="col-md-3">
-                    {%include 'pr6/_sidebar.html'%}
-                </div>
-                <div class="col-md-9">
+                <div class="col-md-9 col-md-push-3">
                     <article class="full-article">
 
                         <div class="pr6-design-element pr6-design-element2">
@@ -97,6 +94,10 @@
 
                     </article>
                 </div>
+                <div class="col-md-3 col-md-pull-9">
+                    {%include 'pr6/_sidebar.html'%}
+                </div>
+
 
 
             </div>

tests/views/test_blog_pages.py

@@ -53,8 +53,7 @@ def test_blog_listings_page_with_filter(self):
         self.contains_archive()
 
     def contains_template_text(self):
-        self.assertIn("That week in Parliament", self.html)
-        self.assertIn("About this blog", self.html)
+        self.assertIn("Blog", self.html)
         self.assertIn("Blog Archive", self.html)
 
     def contains_posts(self, posts):