From 523b3065db69b3011244e76cd1acc28f941959ce Mon Sep 17 00:00:00 2001
From: Garret Wassermann <gwasser@gmail.com>
Date: Thu, 27 Dec 2018 23:27:29 -0500
Subject: [PATCH] Update public homepage templates, based on #684 item 3

---
 .../templates/helpdesk/create_ticket.html     | 35 +++++----
 helpdesk/templates/helpdesk/dashboard.html    |  4 +-
 .../templates/helpdesk/navigation-header.html |  2 +-
 .../helpdesk/navigation-sidebar.html          | 18 +----
 .../helpdesk/public_create_ticket.html        | 61 ++++++---------
 .../templates/helpdesk/public_homepage.html   | 77 +++++++++++--------
 6 files changed, 90 insertions(+), 107 deletions(-)

diff --git a/helpdesk/templates/helpdesk/create_ticket.html b/helpdesk/templates/helpdesk/create_ticket.html
index d080ccdf..2aa3bb8b 100644
--- a/helpdesk/templates/helpdesk/create_ticket.html
+++ b/helpdesk/templates/helpdesk/create_ticket.html
@@ -10,18 +10,6 @@
 {% endblock %}
 
 {% block helpdesk_head %}
-<script type='text/javascript' language='javascript'>
-// this function listens for changes on any file input, and
-// emits the appropriate event to update the input's text.
-// Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
-$(document).on('change', ':file', function() {
-    var input = $(this),
-        inputWidgetNum = $(this).attr('id').split("file")[1],
-        numFiles = input.get(0).files ? input.get(0).files.length : 1,
-        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
-    input.trigger('fileselect', [numFiles, label, inputWidgetNum]);
-});
-</script>
 {% endblock %}
 
 {% block helpdesk_body %}
@@ -58,9 +46,22 @@ $(document).on('change', ':file', function() {
 {% endblock %}
 
 {% block helpdesk_js %}
-    <script>
-        $( function() {
-            $( "#id_due_date" ).datepicker();
-        } );
-    </script>
+<script type='text/javascript' language='javascript'>
+// this function listens for changes on any file input, and
+// emits the appropriate event to update the input's text.
+// Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
+$(document).on('change', ':file', function() {
+    var input = $(this),
+        inputWidgetNum = $(this).attr('id').split("file")[1],
+        numFiles = input.get(0).files ? input.get(0).files.length : 1,
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [numFiles, label, inputWidgetNum]);
+});
+</script>
+
+<script>
+    $( function() {
+        $( "#id_due_date" ).datepicker();
+    } );
+</script>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/dashboard.html b/helpdesk/templates/helpdesk/dashboard.html
index 000a8381..df92b5f9 100644
--- a/helpdesk/templates/helpdesk/dashboard.html
+++ b/helpdesk/templates/helpdesk/dashboard.html
@@ -12,10 +12,10 @@
 {% block helpdesk_body %}
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-sm-8">
     {% include 'helpdesk/include/stats.html' %}
     </div>
-    <div class="col-lg-4">
+    <div class="col-sm-4">
         <div class="alert alert-warning">
             <p>{% trans "Welcome to your Helpdesk Dashboard! From here you can quickly see tickets submitted by you, tickets you are working on, and those tickets that have no owner." %}</p>
         </div>
diff --git a/helpdesk/templates/helpdesk/navigation-header.html b/helpdesk/templates/helpdesk/navigation-header.html
index 5a4db8c4..319fa333 100644
--- a/helpdesk/templates/helpdesk/navigation-header.html
+++ b/helpdesk/templates/helpdesk/navigation-header.html
@@ -73,7 +73,7 @@
           {% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
             <li class="nav-item dropdown no-arrow">
                 <a class="nav-link dropdown-toggle" href="{% url 'helpdesk:submit' %}" id="userDropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-user-circle fa-fw"></i> {% trans "Submit a Ticket" %}
+                    <i class="fas fa-plus-circle fa-fw"></i> {% trans "Submit a Ticket" %}
                 </a>
             </li>
           {% endif %}
diff --git a/helpdesk/templates/helpdesk/navigation-sidebar.html b/helpdesk/templates/helpdesk/navigation-sidebar.html
index 58f8fac7..d62dad50 100644
--- a/helpdesk/templates/helpdesk/navigation-sidebar.html
+++ b/helpdesk/templates/helpdesk/navigation-sidebar.html
@@ -54,15 +54,9 @@
     {% else %}
         {# Public menu #}
         <li class="nav-item active">
-          <a class="nav-link" href="{% url 'helpdesk:dashboard' %}">
-            <i class="fas fa-fw fa-tachometer-alt"></i>
-            <span>{% trans "Dashboard" %}</span>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{% url 'helpdesk:list' %}">
-            <i class="fas fa-fw fa-tasks"></i>
-            <span>{% trans "Tickets" %}</span>
+          <a class="nav-link" href="{% url 'helpdesk:home' %}">
+            <i class="fas fa-fw fa-home"></i>
+            <span>{% trans "Homepage" %}</span>
           </a>
         </li>
         <li class="nav-item">
@@ -71,12 +65,6 @@
             <span>{% trans "New Ticket" %}</span>
           </a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{% url 'helpdesk:report_index' %}">
-            <i class="fas fa-fw fa-chart-area"></i>
-            <span>{% trans "Stats" %}</span>
-          </a>
-        </li>
         {% if helpdesk_settings.HELPDESK_KB_ENABLED %}
         <li class="nav-item">
           <a class="nav-link" href="{% url 'helpdesk:kb_index' %}">
diff --git a/helpdesk/templates/helpdesk/public_create_ticket.html b/helpdesk/templates/helpdesk/public_create_ticket.html
index bcd23606..a902e344 100644
--- a/helpdesk/templates/helpdesk/public_create_ticket.html
+++ b/helpdesk/templates/helpdesk/public_create_ticket.html
@@ -1,47 +1,30 @@
 {% extends "helpdesk/public_base.html" %}
 {% load i18n bootstrap4form %}
 
+{% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %}
+
+{% block helpdesk_breadcrumb %}
+<li class="breadcrumb-item">
+    <a href="{% url 'helpdesk:home' %}">Public</a>
+</li>
+<li class="breadcrumb-item active">Create Ticket</li>
+{% endblock %}
+
 {% block helpdesk_body %}
-
 {% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
-<div class="col-xs-6">
-<div class="panel panel-default">
-
-<div class="panel-body">
-    <h2 name='submit'>{% trans "Submit a Ticket" %}</h2>
-<p>{% trans "Please provide as descriptive a title and description as possible." %}</p>
-
-<form role="form" method='post' action='./#submit' enctype='multipart/form-data'>
-<fieldset>
-        {{ form|bootstrap4form }}
-        {% comment %}
-        {% for field in form %}
-
-            {% if field.is_hidden %}
-                {{ field }}
-            {% else %}
-
-
-            <div class="form-group {% if field.errors %}has-error{% endif %}">
-                <label class="control-label" for='id_{{ field.name }}'>{{ field.label }}</label>{% if not field.field.required %} <span class='form_optional'>{% trans "(Optional)" %}</span>{% endif %}</dt>
-                <div class="input-group">{{ field }}</div>
-                {% if field.errors %}<div class="help-block">{{ field.errors }}</div>{% endif %}
-                {% if field.help_text %}<span class='fhelp-block'>{{ field.help_text }}</span>{% endif %}
-            </div>
-
-        {% endif %}
-
-        {% endfor %}
-        {% endcomment %}
-
-    <div class='buttons form-group'>
-        <input type='submit' class="btn btn-primary" value='{% trans "Submit Ticket" %}' />
+    <div class="container">
+      <div class="card card-register mx-auto mt-5">
+        <div class="card-header">{% trans "Submit a Ticket" %}</div>
+        <div class="card-body">
+          <p>{% trans "Unless otherwise stated, all fields are required." %} {% trans "Please provide as descriptive a title and description as possible." %}</p>
+          <form method='post' action='./#submit' enctype='multipart/form-data'>
+            {{ form|bootstrap4form }}
+            <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-send"></i>&nbsp;{% trans "Submit Ticket" %}</button>
+          {% csrf_token %}</form>
+        </div>
+      </div>
     </div>
-</fieldset>
-
-{% csrf_token %}</form>
-</div>
-</div>
-</div>
+{% else %}
+<h2>{% trans "Public ticket submission is disabled. Please contact the administrator for assistance." %}</h2>
 {% endif %}
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/public_homepage.html b/helpdesk/templates/helpdesk/public_homepage.html
index 4ec30c27..01dafe92 100644
--- a/helpdesk/templates/helpdesk/public_homepage.html
+++ b/helpdesk/templates/helpdesk/public_homepage.html
@@ -1,27 +1,37 @@
 {% extends "helpdesk/public_base.html" %}
 {% load i18n bootstrap4form %}
 
+{% block helpdesk_title %}{% trans "Welcome to Helpdesk" %}{% endblock %}
+
+{% block helpdesk_breadcrumb %}
+<li class="breadcrumb-item">
+    <a href="#">Public</a>
+</li>
+<li class="breadcrumb-item active">Homepage</li>
+{% endblock %}
+
 {% block helpdesk_body %}
 
-{% if kb_categories %}
-<h2>{% trans "Knowledgebase Articles" %}</h2>
+<div class="container-fluid">
+  <div class="row">
 
-<table class="table table-hover table-bordered table-striped">
-<caption>{% trans "Knowledgebase Categories" %}</caption>
-<thead>
-<tr><th>{% trans "Category" %}</th></tr>
-</thead>
-<tbody>
+{% if kb_categories %}
+<div class="col-sm">
+<h2>{% trans "Knowledgebase Articles" %}</h2>
 {% for category in kb_categories %}
-<tr><th><a href='{{ category.get_absolute_url }}'>{{ category.title }}</a></th></tr>
-<tr><td>{{ category.description }}</td></tr>
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">{{ category.title }}</h5>
+        <p class="card-text">{{ category.description }}</p>
+        <p class="card-text"><small class="text-muted"><a href='{{ category.get_absolute_url }}'>{% trans 'View articles' %}<i class="fa fa-arrow-right"></i></a></small></p>
+    </div>
+</div>
 {% endfor %}
-</tbody>
-</table>
+</div>
 {% endif %}
 
 {% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
-<div class="col-xs-6">
+<div class="col-sm">
 <div class="panel panel-default">
 
 <div class="panel-body">
@@ -67,27 +77,28 @@
 {% endif %}
 
 {% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %}
-<div class="col-xs-6">
-<div class="panel panel-default">
-<div class="panel-body">
-<h2>{% trans "View a Ticket" %}</h2>
+<div class="col-sm">
+    <div class="panel panel-default">
+    <div class="panel-body">
+    <h2>{% trans "View a Ticket" %}</h2>
 
-<form method='get' action="{% url 'helpdesk:public_view' %}">
-<fieldset>
-    <div class="form-group {% if field.errors %}has-error{% endif %}">
-        <label for='id_ticket'>{% trans "Ticket" %}</label>
-        <div class="input-group"><input type='text' name='ticket' /></div>
-    </div>
-    <div class="form-group {% if field.errors %}has-error{% endif %}">
-        <label for='id_email'>{% trans "Your E-mail Address" %}</label>
-        <div class="input-group"><input type='text' name='email' /></div>
-    </div>
-    <div class='buttons form-group'>
-    <input type='submit' class="btn btn-primary"  value='{% trans "View Ticket" %}' />
-    </div>
-</fieldset>
-{% csrf_token %}</form>
-</div></div></div>
+    <form method='get' action="{% url 'helpdesk:public_view' %}">
+    <fieldset>
+        <div class="form-group {% if field.errors %}has-error{% endif %}">
+            <label for='id_ticket'>{% trans "Ticket" %}</label>
+            <div class="input-group"><input type='text' name='ticket' /></div>
+        </div>
+        <div class="form-group {% if field.errors %}has-error{% endif %}">
+            <label for='id_email'>{% trans "Your E-mail Address" %}</label>
+            <div class="input-group"><input type='text' name='email' /></div>
+        </div>
+        <div class='buttons form-group'>
+        <input type='submit' class="btn btn-primary"  value='{% trans "View Ticket" %}' />
+        </div>
+    </fieldset>
+    {% csrf_token %}</form>
+    </div></div>
+</div>
 {% endif %}
 
 {% endblock %}