Better phone compatibility for additional pages

5 files changed, 70 insertions, 9 deletions

diff --git a/blog/views.py b/blog/views.py
index f422b256..1c2b9ca2 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -290,6 +290,7 @@ def articles(request, date=None, cg=None):
     posts = posts.order_by('-' + order_by) if direction == 'desc' else Post.objects.filter(is_public=True).order_by(order_by)
     if category and category != 'all':
         posts = posts.filter(category__slug=category)
+        category_name = Category.objects.get(slug=category).name
     else:
         category = 'all'
     posts = Paginator(posts, 10)
@@ -299,7 +300,7 @@ def articles(request, date=None, cg=None):
         post.excerpt = add_excerpt(post)
         post.num_comments = add_num_comments(post)
     num_pages = posts.paginator.num_pages
-    return render(request, 'blog/articles.html', {'title': 'Articles', 'posts': posts, 'num_pages': num_pages, 'page': page, 'order_by': order_by, 'direction': direction, 'categories': categories, 'category': category, 'type': type, 'date': date if date else '', 'cg': cg if cg else ''})
+    return render(request, 'blog/articles.html', {'title': 'Articles', 'posts': posts, 'num_pages': num_pages, 'page': page, 'order_by': order_by, 'direction': direction, 'categories': categories, 'category': category, 'category_name': category_name if category != 'all' else '', 'type': type, 'date': date if date else '', 'cg': cg if cg else ''})
 
 def user_activity(request, username):
     try:
diff --git a/static/css/phone_compatibility.css b/static/css/phone_compatibility.css
index 054f9467..f86ca6e1 100644
--- a/static/css/phone_compatibility.css
+++ b/static/css/phone_compatibility.css
@@ -53,7 +53,7 @@ I am not sure yet.
     #article-body,
     #archives-area,
     #main-section,
-    #chatbox, #chatbox-input, #search_sidebar, #search_results {
+    #chatbox, #chatbox-input, #search_sidebar, #search_results, blockquote, textarea {
         width: calc(100% - 0px) !important;
         max-width: calc(100% - 0px) !important;
         box-sizing: border-box;
@@ -63,6 +63,10 @@ I am not sure yet.
         max-width: 100% !important;
     }
 
+    select {
+        margin: 5px 0 !important;
+    }
+
     #header,
     #content,
     #article,
@@ -96,11 +100,17 @@ I am not sure yet.
         z-index: 5 !important;
         background: #000000fa !important;
         box-sizing: border-box;
-        padding: 2rem !important;
+        padding: 2rem 2rem 4rem 2rem !important;
         overflow-y: scroll;
         overflow-x: hidden;
     }
 
+    #content {
+        display: block;
+        margin-top: 1rem !important;
+        width: calc(100vw - 20px) !important;
+    }
+
     #header {
         height: 50vw !important;
         margin-bottom: 15vw !important;
@@ -170,6 +180,7 @@ I am not sure yet.
     .highlight {
         width: calc(100vw - 90px) !important;
         font-size: 11px;
+        overflow-x: scroll;
     }
 
     #comments>div>table>tbody>tr>td:nth-child(2) {
@@ -196,6 +207,51 @@ I am not sure yet.
     #article-body h2 {
         font-size: 14px !important;
     }
+
+    #login-error > .messageBox {
+        top: 20px !important;
+        position: relative !important;
+        left: 10px !important;
+        margin-top: -2rem;
+    }
+
+    #profile-area {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    #profile-area > div {
+        width: auto !important;
+        display: block !important;
+        float: none !important;
+    }
+
+    #profile-area > div:nth-child(1) {
+        display: flex !important;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    #blinkie-chooser > form, .avatar-directory {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        align-content: center;
+        justify-content: space-between;
+    }
+
+    .avatar-directory > div {
+        flex: 50%;
+    }
+
+    #blinkie-chooser > form > div, .avatar-directory > div {
+        display: block !important;
+        width: auto !important;
+        float: none !important;
+    }
 }
 
 #ham {
diff --git a/static/css/styles.css b/static/css/styles.css
index 4837896e..afef43c0 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -432,4 +432,9 @@ blockquote {
 #article>h1 {
     font-size: 32px;
     margin-bottom: 10px;
-}
\ No newline at end of file
+}
+
+#categories-area > ul, #archives-area > ul {
+    position: relative;
+    z-index: 1;
+}
diff --git a/templates/blog/account.html b/templates/blog/account.html
index a9480702..281bdaf7 100644
--- a/templates/blog/account.html
+++ b/templates/blog/account.html
@@ -56,9 +56,9 @@
         </div>
         {% elif request.GET.tab == 'blinkies' %}
         <div id="blinkie-chooser">
+            <p>Choose a blinkie to display on your public profile.</p>
             <form method="post" action="{% url 'users:updateblinkie' %}">
                 {% csrf_token %}
-                <p>Choose a blinkie to display on your public profile.</p>
                 <div style="display: inline; width: 250px; float: left;">
                     <input type="radio" name="blinkie" value="" id="blinkie_none" checked />
                     <label for="blinkie_none">
@@ -73,10 +73,9 @@
                         </label>
                     </div>
                 {% endfor %}
-                <div style="clear: both;"></div>
-                <br><br>
-                <input type="submit" value="Change Blinkie" class="button button-special" />
+                <input type="submit" style="margin-top: 20px;" value="Change Blinkie" class="button button-special" />
             </form>
+            <div style="clear: both;"></div>
         </div>
         {% elif request.GET.tab == 'details' %}
         <div id="details">
diff --git a/templates/blog/articles.html b/templates/blog/articles.html
index 7c3d9958..6c3ae869 100644
--- a/templates/blog/articles.html
+++ b/templates/blog/articles.html
@@ -4,7 +4,7 @@
 {% elif type == 'articles-archive' %}
 <h2 style="margin-top:15px;"> Posts made in {{ date }}</h2>
 {% elif type == 'articles-category' %}
-<h2 style="margin-top:15px;"> Posts made in Category: {{ category }}</h2>
+<h2 style="margin-top:15px;"> Posts made in Category: {{ category_name }}</h2>
 {% endif %}