From cd12bc9049e51205dc39db669307ddec5bf2468b Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Thu, 9 Feb 2017 23:06:59 +0100
Subject: [PATCH] Responsify parts of commentaries
Start with making commentaries pages responsive.
---
.../templates/commentaries/commentaries.html | 126 ++++++++++--------
scipost/static/scipost/assets/css/_form.scss | 4 +
.../static/scipost/assets/css/_navbar.scss | 1 +
scipost/templatetags/bootstrap.py | 9 +-
4 files changed, 84 insertions(+), 56 deletions(-)
diff --git a/commentaries/templates/commentaries/commentaries.html b/commentaries/templates/commentaries/commentaries.html
index 1f486812a..ad9e2c34c 100644
--- a/commentaries/templates/commentaries/commentaries.html
+++ b/commentaries/templates/commentaries/commentaries.html
@@ -1,69 +1,84 @@
{% extends 'scipost/base.html' %}
+{% load bootstrap %}
+
{% block pagetitle %}: Commentaries{% endblock pagetitle %}
{% block headsup %}
<script type="text/javascript" async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
{% endblock headsup %}
-{% block bodysup %}
+{% block content %}
-<section>
- <div class="flex-container">
- <div class="flex-greybox320">
- <h1>SciPost Commentaries</h1>
- <h3><a href="{% url 'commentaries:howto' %}">SciPost Commentaries how-to</a></h3>
- <h3><a href="{% url 'commentaries:request_commentary' %}">Request a new Commentary Page</a></h3>
+{# <section>#}
+<div class="row">
+ <div class="col-md-4">
+ <div class="panel">
+ <h1>SciPost Commentaries</h1>
+ <h3><a href="{% url 'commentaries:howto' %}">SciPost Commentaries how-to</a></h3>
+ <h3><a href="{% url 'commentaries:request_commentary' %}">Request a new Commentary Page</a></h3>
+ </div>
</div>
- <div class="flex-greybox320">
- <h2>Search SciPost Commentaries:</h2>
- <form action="{% url 'commentaries:commentaries' %}" method="post">
- {% csrf_token %}
- <table>
- {{ form.as_table }}
- </table>
- <input type="submit" name="Submit" />
- </form>
+ <div class="col-md-4">
+ <div class="panel">
+ <h2>Search SciPost Commentaries:</h2>
+ <form action="{% url 'commentaries:commentaries' %}" class="tinyform" method="post">
+ {% csrf_token %}
+ {{ form|bootstrap:'4-8' }}
+ <input class="btn btn-secondary" type="submit" name="Submit" />
+ </form>
+ </div>
</div>
- <div class="flex-greybox320">
- <h2>View SciPost Commentaries</h2>
- <ul>
- <li>Physics: last <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=1 %}">week</a>, <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=4 %}">month</a> or <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=52 %}">year</a> </li>
- </ul>
+ <div class="col-md-4">
+ <div class="panel">
+ <h2>View SciPost Commentaries</h2>
+ <ul>
+ <li>Physics: last <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=1 %}">week</a>, <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=4 %}">month</a> or <a href="{% url 'commentaries:browse' discipline='physics' nrweeksback=52 %}">year</a> </li>
+ </ul>
+ </div>
</div>
- </div>
+</div>
{% if commentary_search_list %}
- <br />
- <hr class="hr12">
- <h3>Search results:</h3>
- <ul>
- {% for commentary in commentary_search_list %}
- {{ commentary.header_as_li }}
- {% endfor %}
- </ul>
+ <div class="row">
+ <div class="col-12">
+ <hr class="hr12">
+ <h3>Search results:</h3>
+ <ul>
+ {% for commentary in commentary_search_list %}
+ {{ commentary.header_as_li }}
+ {% endfor %}
+ </ul>
+ </div>
+ </div>
{% elif form.has_changed %}
- <h3>No match found for your search query.</h3>
+ <div class="row">
+ <div class="col-12">
+ <h3>No match found for your search query.</h3>
+ </div>
+ </div>
{% endif %}
-</section>
{% if comment_recent_list %}
- <section>
- <hr class="hr12">
- <h2>Recent Comments</h2>
- <ul>
- {% for comment in comment_recent_list %}
- {{ comment.simple_header_as_li }}
- {% endfor %}
- </ul>
- </section>
+ <div class="row">
+ <div class="col-12">
+ <hr class="hr12">
+ <h2>Recent Comments</h2>
+ <ul>
+ {% for comment in comment_recent_list %}
+ {{ comment.simple_header_as_li }}
+ {% endfor %}
+ </ul>
+ </div>
+ </div>
{% endif %}
{% if commentary_recent_list %}
-<section>
+<div class="row">
+ <div class="col-12">
<hr class="hr12">
<h2>Recently active Commentaries:</h2>
<ul>
@@ -71,20 +86,23 @@
{{ commentary.header_as_li }}
{% endfor %}
</ul>
-</section>
+ </div>
+</div>
{% endif %}
{% if commentary_browse_list %}
-<section>
- <hr class="hr12">
- <h2>Commentaries in {{ discipline }} in the last {{ nrweeksback }} week{% if nrweeksback == '1' %}{% else %}s{% endif %}:</h2>
- <ul>
- {% for commentary in commentary_browse_list %}
- {{ commentary.header_as_li }}
- {% endfor %}
- </ul>
- {% endif %}
-</section>
+<div class="row">
+ <div class="col-12">
+ <hr class="hr12">
+ <h2>Commentaries in {{ discipline }} in the last {{ nrweeksback }} week{% if nrweeksback == '1' %}{% else %}s{% endif %}:</h2>
+ <ul>
+ {% for commentary in commentary_browse_list %}
+ {{ commentary.header_as_li }}
+ {% endfor %}
+ </ul>
+ </div>
+</div>
+{% endif %}
-{% endblock bodysup %}
+{% endblock content %}
diff --git a/scipost/static/scipost/assets/css/_form.scss b/scipost/static/scipost/assets/css/_form.scss
index 6b48198ed..a32157e8f 100644
--- a/scipost/static/scipost/assets/css/_form.scss
+++ b/scipost/static/scipost/assets/css/_form.scss
@@ -15,3 +15,7 @@
display: inline-block;
font-weight: 600;
}
+
+.tinyform .form-group {
+ margin-bottom: 0.5rem;
+}
diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss
index 7691f7a5b..4d982becf 100644
--- a/scipost/static/scipost/assets/css/_navbar.scss
+++ b/scipost/static/scipost/assets/css/_navbar.scss
@@ -40,5 +40,6 @@
}
.panel {
padding: 0.75rem;
+ height: 100%;
background-color: #f4f4f4;
}
diff --git a/scipost/templatetags/bootstrap.py b/scipost/templatetags/bootstrap.py
index 7e3817939..97e73a2a5 100644
--- a/scipost/templatetags/bootstrap.py
+++ b/scipost/templatetags/bootstrap.py
@@ -12,8 +12,13 @@ register = template.Library()
@register.filter
-def bootstrap(element):
- markup_classes = {'label': 'col-md-2', 'value': 'col-md-10', 'single_value': ''}
+def bootstrap(element, arg='2-10'):
+ ratio = arg.split('-')
+ markup_classes = {
+ 'label': 'col-md-%s' % ratio[0],
+ 'value': 'col-md-%s' % ratio[1],
+ 'single_value': ''
+ }
return render(element, markup_classes)
--
GitLab