Add basic mobile responsiveness

Had to increase the width of the page fields in the forms to ensure that they become fluid (don't know why "two wide" triggers it but "one wide" does not). Not ideal for desktop but it'll have to do for now. Closes #37.
dellsystem · Jun 7, 2017 · 56ae6c5 · 56ae6c5
1 parent 0124bfa
commit 56ae6c5
Show file tree

Hide file tree

Showing 19 changed files with 238 additions and 80 deletions.
diff --git a/static/styles.css b/static/styles.css
@@ -1,10 +1,5 @@
-#masthead {
-    text-align: center;
-    margin: 50px 0;
-}
-
-#masthead h1 {
-    font-size: 3.0em;
+#navbar {
+    margin-top: 20px;
 }
 
 .ui.comments {
@@ -49,6 +44,10 @@ blockquote footer {
     padding-right: 15px !important;
 }
 
+.book-card .labels {
+    padding-left: 15px;
+}
+
 .ui.compact.grid>.row {
     padding: 0;
 }

diff --git a/templates/add_note.html b/templates/add_note.html
@@ -38,13 +38,13 @@ <h3>
         {% csrf_token %}
         <div class="ui fields">
             {% with error=note_form.subject.errors %}
-            <div class="ten wide {% if error %}error{% endif %} field">
+            <div class="nine wide {% if error %}error{% endif %} field">
                 <label>Subject{% if error %} (REQUIRED){% endif %}</label>
                 {{ note_form.subject }}
             </div>
             {% endwith %}
             {% with error=note_form.page_number.errors %}
-            <div class="one wide {% if error %}error{% endif %} field"
+            <div class="two wide {% if error %}error{% endif %} field"
                  {% if error %}title="{{ error|join:"/" }}"{% endif %}>
                 <label>Page</label>
                 {{ note_form.page_number }}

diff --git a/templates/add_section.html b/templates/add_section.html
@@ -35,12 +35,12 @@
                 {{ section_form.title }}
             </div>
             {% endwith %}
-            <div class="five wide field">
+            <div class="four wide field">
                 <label>Subtitle</label>
                 {{ section_form.subtitle }}
             </div>
             {% with error=section_form.page_number.errors %}
-            <div class="one wide {% if error %}error{% endif %} field"
+            <div class="two wide {% if error %}error{% endif %} field"
                  {% if error %}title="{{ error|join:"/" }}"{% endif %}>
                 <label>Page</label>
                 {{ section_form.page_number }}

diff --git a/templates/add_term.html b/templates/add_term.html
@@ -86,7 +86,7 @@ <h3>
         </div>
     </div>
     <div class="ui segment">
-        <div class="ui three column grid">
+        <div class="ui stackable three column grid">
             <div class="column">
                 <div class="field">
                     <label>Quote</label>

diff --git a/templates/base.html b/templates/base.html
@@ -1,19 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
     <title>Bookmarker</title>
     <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" />
+          href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" />
     <link rel="stylesheet" href="/static/styles.css" />
     <link rel="apple-touch-icon-precomposed" href="/static/favicon-152.png">
     <link rel="icon" href="/static/favicon-32.png" sizes="32x32">
     <link rel="icon" href="/static/favicon-16.png" sizes="32x32">
 </head>
 <body>
     <div class="ui container">
-        <br />
-        <div class="ui huge menu">
-            <div class="item">
+        <div class="ui large stackable menu" id="navbar">
+            <div class="active item">
                 <img class="ui image" src="/static/bookmarker.png" alt="Bookmarker" />
             </div>
             <div class="item">
@@ -31,12 +33,10 @@
             <div class="item">
                 <a href="{% url 'admin:index' %}">Admin</a>
             </div>
-            <div class="right menu">
-                <div class="item">
-                    <div class="ui icon input">
-                        <input type="text" placeholder="Search...">
-                        <i class="search icon"></i>
-                    </div>
+            <div class="right item">
+                <div class="ui icon input">
+                    <input type="text" placeholder="Search...">
+                    <i class="search icon"></i>
                 </div>
             </div>
         </div>
@@ -52,17 +52,6 @@
         </div>
         {% endfor %}
 
-        <div class="ui basic segment">
-            {% block nobreadcrumbs %}
-            <div class="ui breadcrumb">
-                <a class="section" href="{% url 'home' %}">Home</a>
-                <i class="right angle icon divider"></i>
-                {% block breadcrumbs %}
-                {% endblock %}
-            </div>
-            {% endblock %}
-        </div>
-
         {% if not request.user.is_staff %}
         <div class="ui large message">
             <div class="header">Welcome to Bookmarker!</div>
@@ -81,6 +70,17 @@
         </div>
         {% endif %}
 
+        {% block nobreadcrumbs %}
+        <div class="ui basic segment">
+            <div class="ui breadcrumb">
+                <a class="section" href="{% url 'home' %}">Home</a>
+                <i class="right angle icon divider"></i>
+                {% block breadcrumbs %}
+                {% endblock %}
+            </div>
+        </div>
+        {% endblock %}
+
         {% block content %}
         {% endblock %}
         <br />

diff --git a/templates/book_header.html b/templates/book_header.html
@@ -1,4 +1,4 @@
-<div class="ui grid">
+<div class="ui stackable grid">
     <div class="one wide column">
         <a href="{{ book.get_absolute_url }}" class="ui fluid image">
             <img src="{{ book.image_url }}"

diff --git a/templates/book_list.html b/templates/book_list.html
@@ -1,5 +1,5 @@
 {% if books %}
-<div class="ui two column grid">
+<div class="ui two column doubling grid">
     {% for book in books %}
     <div class="column">
         <div class="ui clearing segment book-card">
@@ -18,24 +18,26 @@ <h3 class="ui header">
             {% if book.comments %}
             <code>{{ book.comments }}</code>
             <br />
-            {% endif %}
             <br />
-            <a class="ui label" href="{% url 'view_terms' book.pk %}">
-                <i class="flag icon"></i> {{ book.terms.count }}
-            </a>
-            <a class="ui label" href="{% url 'view_notes' book.pk %}">
-                <i class="sticky note icon"></i> {{ book.notes.count }} 
-            </a>
-            <a class="ui label" href="{% url 'view_book' book.pk %}">
-                <i class="sticky angle right icon"></i> {{ book.sections.count }} 
-            </a>
-            {% with summary_pc=book.get_summary_percent %}
-            <a class="ui {% if summary_pc < 100 %}red{% endif %} label"
-               href="">
-                <i title="Summaries: % completed" class="browser icon"></i>
-                {{ summary_pc }}%
-            </a>
-            {% endwith %}
+            {% endif %}
+            <div class="ui labels">
+                <a class="ui label" href="{% url 'view_terms' book.pk %}">
+                    <i class="flag icon"></i> {{ book.terms.count }}
+                </a>
+                <a class="ui label" href="{% url 'view_notes' book.pk %}">
+                    <i class="sticky note icon"></i> {{ book.notes.count }} 
+                </a>
+                <a class="ui label" href="{% url 'view_book' book.pk %}">
+                    <i class="sticky angle right icon"></i> {{ book.sections.count }} 
+                </a>
+                {% with summary_pc=book.get_summary_percent %}
+                <a class="ui {% if summary_pc < 100 %}red{% endif %} label"
+                   href="">
+                    <i title="Summaries: % completed" class="browser icon"></i>
+                    {{ summary_pc }}%
+                </a>
+                {% endwith %}
+            </div>
         </div>
     </div>
     {% endfor %}

diff --git a/templates/edit_section.html b/templates/edit_section.html
@@ -23,12 +23,12 @@
                 {{ section_form.title }}
             </div>
             {% endwith %}
-            <div class="five wide field">
+            <div class="four wide field">
                 <label>Subtitle</label>
                 {{ section_form.subtitle }}
             </div>
             {% with error=section_form.page_number.errors %}
-            <div class="one wide {% if error %}error{% endif %} field"
+            <div class="two wide {% if error %}error{% endif %} field"
                  {% if error %}title="{{ error|join:"/" }}"{% endif %}>
                 <label>Page</label>
                 {{ section_form.page_number }}

diff --git a/templates/home.html b/templates/home.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 {% if request.user.is_staff %}
-<div class="ui grid">
+<div class="ui stackable grid">
     <div class="nine wide column">
 {% endif %}
         <div class="ui segment">

diff --git a/templates/note_display.html b/templates/note_display.html
@@ -18,8 +18,8 @@ <h2 class="ui header">
         </h2>
     </div>
 </div>
-<div class="row">
-    <div class="one center aligned wide column">
+<div class="computer only row">
+    <div class="one wide column">
         <div class="ui big circular label">
             {{ x.get_page_display }}
         </div>
@@ -64,3 +64,53 @@ <h2 class="ui header">
         </div>
     </div>
 </div>
+<div class="tablet mobile only row">
+    <div class="center aligned three wide column">
+        <div class="ui big circular label">
+            {{ x.get_page_display }}
+        </div>
+    </div>
+    <div class="thirteen wide column">
+        <h2 class="ui header">
+            <div class="sub header">
+                {{ x.added|naturaltime }}
+                {% if show_book %}
+                <br />
+                <a href="{{ x.book.get_absolute_url }}"
+                   title="by {{ x.book.default_authors.all|join:", " }}">
+                    <strong>{{ x.book }}</strong>
+                </a>
+                {% endif %}
+                {% if not hide_section and x.section %}
+                <br />
+                {% include "section_link.html" with section=x.section only %}
+                {% endif %}
+                <br />
+                {% if x.authors.count %}
+                    {% if x.has_default_authors %}
+                    <span title="{{ x.authors.all|join:", " }}">
+                        default author
+                    </span>
+                    {% else %}
+                    {% include 'author_list.html' with authors=x.authors %}
+                    {% endif %}
+                {% else %}
+                <span class="ui red label">missing author</span>
+                {% endif %}
+            </div>
+        </h2>
+    </div>
+</div>
+<div class="tablet mobile only row">
+    <div class="sixteen wide column">
+        <div class="ui segment">
+            <i class="quote left icon left-floated"></i>
+            {{ x.quote|markdownify|safe }}
+        </div>
+        {% if x.comment %}
+        <div class="ui secondary segment">
+            {{ x.comment|markdownify|safe }}
+        </div>
+        {% endif %}
+    </div>
+</div>
diff --git a/templates/pagination.html b/templates/pagination.html
@@ -13,35 +13,43 @@ <h3 class="header">
 <div class="ui center aligned basic segment">
     <div class="ui right pagination menu">
         {% if items.has_previous %}
-        <a class="item" href="?page=1{% if author %}&author={{ author.pk }}{% endif %}">
+        <a class="item"
+           title="First"
+           href="?page=1{% if author %}&author={{ author.pk }}{% endif %}">
         {% else %}
         <a class="disabled item">
         {% endif %}
-        <i class="double left angle icon"></i> first</a>
+        <i class="double left angle icon"></i></a>
 
         {% if items.has_previous %}
-        <a class="item" href="?page={{ items.previous_page_number }}{% if author %}&author={{ author.pk }}{% endif %}">
+        <a class="item"
+           title="Previous"
+           href="?page={{ items.previous_page_number }}{% if author %}&author={{ author.pk }}{% endif %}">
         {% else %}
         <a class="disabled item">
         {% endif %}
-        <i class="left angle icon"></i> previous</a>
+        <i class="left angle icon"></i></a>
 
         <a class="active item">
-            Page {{ items.number }} of {{ items.paginator.num_pages }}
+            {{ items.number }} of {{ items.paginator.num_pages }}
         </a>
 
         {% if items.has_next %}
-        <a class="item" href="?page={{ items.next_page_number }}{% if author %}&author={{ author.pk }}{% endif %}">
+        <a class="item"
+           title="Next"
+           href="?page={{ items.next_page_number }}{% if author %}&author={{ author.pk }}{% endif %}">
         {% else %}
         <a class="disabled item">
         {% endif %}
-        next <i class="angle right icon"></i></a>
+        <i class="angle right icon"></i></a>
 
         {% if items.has_next %}
-        <a class="item" href="?page={{ items.paginator.num_pages }}{% if author %}&author={{ author.pk }}{% endif %}">
+        <a class="item"
+           title="Last"
+           href="?page={{ items.paginator.num_pages }}{% if author %}&author={{ author.pk }}{% endif %}">
         {% else %}
         <a class="disabled item">
         {% endif %}
-        last <i class="angle double right icon"></i></a>
+        <i class="angle double right icon"></i></a>
     </div>
 </div>
diff --git a/templates/section_list.html b/templates/section_list.html
@@ -4,7 +4,7 @@
 <br />
 <div class="ui vertically divided compact grid">
     {% for section in sections %}
-    <div class="row">
+    <div class="computer only row">
         <div class="one wide column">
             <div class="ui large circular label">{{ section.get_page_display }}</div>
         </div>
@@ -42,5 +42,39 @@ <h4 class="ui header">
             </a>
         </div>
     </div>
+    <div class="tablet mobile only row">
+        <div class="three wide column">
+            <div class="ui large circular label">{{ section.get_page_display }}</div>
+        </div>
+        <div class="thirteen wide column">
+            <h4 class="ui header">
+                <a href="{{ section.get_absolute_url }}">
+                    {{ section.title|markdownify_title }}
+                </a>
+                <div class="ui heart rating display-rating" data-rating="{{ section.rating }}">
+                </div>
+                <div class="sub header">
+                    {{ section.subtitle|markdownify_title }}
+                    {% if section.authors.count %}
+                        {% if not section.has_default_authors %}
+                        {% include 'author_list.html' with authors=section.authors %}
+                        {% endif %}
+                    {% else %}
+                    (missing author)
+                    {% endif %}
+                </div>
+            </h4>
+            {% if section.summary %}
+            {{ section.summary|markdownify }}
+            {% endif %}
+            {{ section.terms.count }} <i class="flag icon"></i>
+            /
+            {{ section.notes.count }} <i class="sticky note icon"></i>
+            <a class="ui mini icon {% if not section.summary %}red{% endif %} button"
+               href="{% url 'edit_section' section.pk %}">
+                <i class="edit icon"></i>
+            </a>
+        </div>
+    </div>
     {% endfor %}
 </div>