Styled the ticket view page; added a section for future ticket comments

This commit is contained in:
Gregory Ballantine 2022-11-21 18:04:24 -05:00
parent 17c2e36bb5
commit 55048bda33
3 changed files with 102 additions and 8 deletions

View File

@ -9,11 +9,16 @@ $nav-height: 60px
body
padding-top: $nav-height
background: lightgrey
font-size: 16px
.container
max-width: 1100px
padding: 20px 30px
.card
background: white
box-shadow: $box-shadow-2
#main-nav
position: fixed
top: 0
@ -46,4 +51,59 @@ body
#main-wrapper
margin-top: 25px
background: white
#ticket-header
margin-bottom: 15px
.ticket-title
margin-bottom: 5px
.ticket-created,
.ticket-updated
margin-bottom: 3px
color: #666
font-size: 1.5rem
font-style: italic
#ticket-body
p:last-child
margin-bottom: 5px
.ticket-status
list-style: none
margin: 0
border: 1px solid #bbb
border-bottom: none
> li
margin: 0
padding: 7px 12px
border-bottom: 1px solid #999
.ticket-actions
padding: 0
ul
list-style: none
margin: 0
li
display: inline
margin: 0
padding: 0
&:not(:first-child)
a
border-left: 1px solid #999
a
position: relative
display: inline-block
box-sizing: border-box
width: calc(50% - 2px)
height: 100%
padding: 7px 12px
text-align: center
i
margin-right: 5px
font-size: 1.75rem

View File

@ -22,7 +22,7 @@
</div>
</nav>
<div id="main-wrapper" class="container">
<div id="main-wrapper" class="card container">
{% block content %}{% endblock %}
</div>
</body>

View File

@ -4,18 +4,52 @@
{% block content %}
<div class="row">
<div class="columns twelve">
<h1>{{ ticket.title }}</h1>
<h4 class="ticket-status">Status: {{ ticket.status }}</h4>
<h5 class="ticket-created">Created at {{ ticket.created_at }} | Last updated at {{ ticket.updated_at }}</h5>
<!-- ticket content -->
<div class="nine columns">
<div id="ticket-header" class="row">
<div class="columns twelve">
<h1 class="ticket-title">{{ ticket.title }}</h1>
<h4 class="ticket-created">Created at {{ ticket.created_at }}</h4>
<h4 class="ticket-updated">Last updated at {{ ticket.updated_at }}</h4>
</div>
</div>
<div id="ticket-body" class="row">
<div class="columns twelve">
<p>{{ ticket.body }}</p>
</div>
</div>
</div>
<!-- ticket status column -->
<div class="three columns">
<ul class="ticket-status">
<li class="ticket-actions">
<ul>
<li><a href="{{ url_for('ticket.edit', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-pen-to-square"></i>Edit</a></li>
<li><a href="{{ url_for('ticket.edit', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-trash"></i>Delete</a></li>
</ul>
</li>
<li>
Severity {{ ticket.severity | capitalize }}
</li>
<li>
Status: {{ ticket.status | capitalize }}
</li>
<li>
Assignee(s): N/a
</li>
</ul>
</div>
</div>
<hr>
<!-- ticket updates -->
<div class="row">
<div class="columns twelve">
<p>{{ ticket.body }}</p>
<div class="twelve columns">
<h3>Ticket comments/Updates</h3>
<p>There are no comments to display at this time.</p>
</div>
</div>
{% endblock %}