Make ticket more mobile friendly

templates/ticket/list.html

@@ -254,7 +254,7 @@
             {% if page_obj.num_pages > 1 %}
                 <div style="margin-bottom:6px; margin-top:3px">{% include "list-pages.html" %}</div>
             {% endif %}
-            <table id="ticket-list" class="table">
+            <table id="ticket-list" class="table h-scrollable-table">
                 <thead>
                 <tr>
                     <th></th>

templates/ticket/message.html

@@ -1,15 +1,19 @@
 <section id="message-{{ message.id }}" class="message">
-    <div class="info">
+    
-        <a href="{{ url('user_page', message.user.user.username) }}" class="user">
-            <img src="{{ gravatar(message.user, 135) }}" class="gravatar">
-            <div class="username {{ message.user.css_class }}">{{ message.user.user.username }}</div>
-        </a>
-    </div>
     <div class="detail">
         <div class="header">
-            <div class="relative-time"></div>
+            <div class="info">
-            <div class="message-date">{{ message.time|date('DATE_FORMAT') }}</div>
+                <a class="user-container" href="{{ url('user_page', message.user.user.username) }}" class="user">
-            <div class="message-time">{{ message.time|time('TIME_FORMAT') }}</div>
+                    <img src="{{ gravatar(message.user, 135) }}" class="gravatar">
+                    <span class="username {{ message.user.css_class }}">{{ message.user.user.username }}</span>
+                </a>
+            </div>
+            <div class="spacer"></div>
+            <div class="send-time">
+                <div class="relative-time"></div>
+                <div class="message-date">{{ message.time|date('DATE_FORMAT') }}</div>
+                <div class="message-time">{{ message.time|time('TIME_FORMAT') }}</div>
+            </div>
         </div>
         <div class="content content-description">
             {{ message.body|markdown('ticket', MATH_ENGINE)|reference|str|safe }}

templates/ticket/ticket.html

@@ -24,13 +24,15 @@
             width: 100%;
             margin: 0 auto;
             display: flex;
-            flex-direction: row-reverse;
+            flex-direction: row;
+            flex-wrap: wrap-reverse;
             max-width: 1000px;
         }
 
         .ticket-sidebar {
             flex: 1;
             padding: 10px 0 0 10px;
+            min-width: 150px;
             max-width: 200px;
         }
 
@@ -103,13 +105,11 @@
         }
 
         .message {
-            display: flex;
             margin-top: -40px;
             padding-top: 55px;
         }
 
         .message .info {
-            width: 130px;
         }
 
         .message .username {
@@ -117,7 +117,8 @@
         }
 
         .message .gravatar {
-            width: 80px;
+            width: 40px;
+            border-radius: 4px;
             display: block;
             margin: 0 auto;
         }
@@ -130,6 +131,7 @@
             border: 1px #999 solid;
             border-radius: 5px;
             flex: 1;
+            min-width: 200px;
         }
 
         .message .header {
@@ -138,6 +140,11 @@
             border-bottom: 1px solid #999;
             border-radius: 5px 5px 0 0;
             padding: 2px 7px;
+            display: inline-flex;
+            width: -webkit-fill-available;
+        }
+
+        .message .send-time {
             text-align: right;
         }
 
@@ -160,6 +167,15 @@
         .new-message .submit, #edit-notes .submit {
             margin: 10px 0 0 auto;
         }
+
+        .user-container {
+            display: inline-flex;
+        }
+
+        .user-container .username {
+            padding-left: 0.5em;
+            padding-top: 1.65em;
+        }
     </style>
 {% endblock %}
 
@@ -316,6 +332,35 @@
 
 {% block body %}
     <div class="container">
+        <div class="ticket-messages">
+            <main id="messages" class="messages">
+                {% for message in ticket_messages %}
+                    {% include "ticket/message.html" %}
+                {% endfor %}
+            </main>
+            <hr>
+            <section class="message new-message">
+                <div class="info">
+                    <a href="{{ url('user_page', request.user.username) }}" class="user">
+                        <img src="{{ gravatar(request.user, 135) }}" class="gravatar">
+                        <div class="username {{ request.profile.css_class }}">{{ request.user.username }}</div>
+                    </a>
+                </div>
+                <div class="detail">
+                    <form action="" method="post">
+                        {% csrf_token %}
+                        {% if form.non_field_errors() or form.body.errors %}
+                            <div class="form-errors">
+                                {{ form.non_field_errors() }}
+                                {{ form.body.errors }}
+                            </div>
+                        {% endif %}
+                        <div class="body-block">{{ form.body }}</div>
+                        <button type="submit" class="submit">{{ _('Post') }}</button>
+                    </form>
+                </div>
+            </section>
+        </div>
         <aside class="ticket-sidebar">
             <div class="ticket-info">
                 <div class="info-box">
@@ -357,36 +402,6 @@
                 {% endif %}
             </div>
         </aside>
-
-        <div class="ticket-messages">
-            <main id="messages" class="messages">
-                {% for message in ticket_messages %}
-                    {% include "ticket/message.html" %}
-                {% endfor %}
-            </main>
-            <hr>
-            <section class="message new-message">
-                <div class="info">
-                    <a href="{{ url('user_page') }}" class="user">
-                        <img src="{{ gravatar(request.user, 135) }}" class="gravatar">
-                        <div class="username {{ request.profile.css_class }}">{{ request.user.username }}</div>
-                    </a>
-                </div>
-                <div class="detail">
-                    <form action="" method="post">
-                        {% csrf_token %}
-                        {% if form.non_field_errors() or form.body.errors %}
-                            <div class="form-errors">
-                                {{ form.non_field_errors() }}
-                                {{ form.body.errors }}
-                            </div>
-                        {% endif %}
-                        <div class="body-block">{{ form.body }}</div>
-                        <button type="submit" class="submit">{{ _('Post') }}</button>
-                    </form>
-                </div>
-            </section>
-        </div>
     </div>
 {% endblock %}