lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make ticket more mobile friendly

Browse source
This commit is contained in:
cuom1999 2021-06-10 17:30:37 -05:00
parent 62ba36a4c6
commit aaaa49c1e2
3 changed files with 63 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/ticket/list.html
View file

@ -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>

22
templates/ticket/message.html
View file

@ -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="message-date">{{ message.time|date('DATE_FORMAT') }}</div>
<div class="message-time">{{ message.time|time('TIME_FORMAT') }}</div>
<div class="info">
<a class="user-container" href="{{ url('user_page', message.user.user.username) }}" class="user">
<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 }}

83
templates/ticket/ticket.html
View file

@ -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 %}