Update public homepage templates, based on #684 item 3

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>
+<script type='text/javascript' language='javascript'>
-        $( function() {
+// this function listens for changes on any file input, and
-            $( "#id_due_date" ).datepicker();
+// 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...)
-    </script>
+$(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 %}

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>

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

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' %}">
+          <a class="nav-link" href="{% url 'helpdesk:home' %}">
-            <i class="fas fa-fw fa-tachometer-alt"></i>
+            <i class="fas fa-fw fa-home"></i>
-            <span>{% trans "Dashboard" %}</span>
+            <span>{% trans "Homepage" %}</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>
         </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' %}">

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="container">
-<div class="panel panel-default">
+      <div class="card card-register mx-auto mt-5">
-
+        <div class="card-header">{% trans "Submit a Ticket" %}</div>
-<div class="panel-body">
+        <div class="card-body">
-    <h2 name='submit'>{% trans "Submit a Ticket" %}</h2>
+          <p>{% trans "Unless otherwise stated, all fields are required." %} {% trans "Please provide as descriptive a title and description as possible." %}</p>
-<p>{% trans "Please provide as descriptive a title and description as possible." %}</p>
+          <form method='post' action='./#submit' enctype='multipart/form-data'>
-
+            {{ form|bootstrap4form }}
-<form role="form" method='post' action='./#submit' enctype='multipart/form-data'>
+            <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-send"></i>&nbsp;{% trans "Submit Ticket" %}</button>
-<fieldset>
+          {% csrf_token %}</form>
-        {{ form|bootstrap4form }}
+        </div>
-        {% comment %}
+      </div>
-        {% 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>
-</fieldset>
+{% else %}
-
+<h2>{% trans "Public ticket submission is disabled. Please contact the administrator for assistance." %}</h2>
-{% csrf_token %}</form>
-</div>
-</div>
-</div>
 {% endif %}
 {% endblock %}

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 %}
+<div class="container-fluid">
-<h2>{% trans "Knowledgebase Articles" %}</h2>
+  <div class="row">
 
-<table class="table table-hover table-bordered table-striped">
+{% if kb_categories %}
-<caption>{% trans "Knowledgebase Categories" %}</caption>
+<div class="col-sm">
-<thead>
+<h2>{% trans "Knowledgebase Articles" %}</h2>
-<tr><th>{% trans "Category" %}</th></tr>
-</thead>
-<tbody>
 {% for category in kb_categories %}
-<tr><th><a href='{{ category.get_absolute_url }}'>{{ category.title }}</a></th></tr>
+<div class="card">
-<tr><td>{{ category.description }}</td></tr>
+    <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>
+</div>
-</table>
 {% 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="col-sm">
-<div class="panel panel-default">
+    <div class="panel panel-default">
-<div class="panel-body">
+    <div class="panel-body">
-<h2>{% trans "View a Ticket" %}</h2>
+    <h2>{% trans "View a Ticket" %}</h2>
 
-<form method='get' action="{% url 'helpdesk:public_view' %}">
+    <form method='get' action="{% url 'helpdesk:public_view' %}">
-<fieldset>
+    <fieldset>
-    <div class="form-group {% if field.errors %}has-error{% endif %}">
+        <div class="form-group {% if field.errors %}has-error{% endif %}">
-        <label for='id_ticket'>{% trans "Ticket" %}</label>
+            <label for='id_ticket'>{% trans "Ticket" %}</label>
-        <div class="input-group"><input type='text' name='ticket' /></div>
+            <div class="input-group"><input type='text' name='ticket' /></div>
-    </div>
+        </div>
-    <div class="form-group {% if field.errors %}has-error{% endif %}">
+        <div class="form-group {% if field.errors %}has-error{% endif %}">
-        <label for='id_email'>{% trans "Your E-mail Address" %}</label>
+            <label for='id_email'>{% trans "Your E-mail Address" %}</label>
-        <div class="input-group"><input type='text' name='email' /></div>
+            <div class="input-group"><input type='text' name='email' /></div>
-    </div>
+        </div>
-    <div class='buttons form-group'>
+        <div class='buttons form-group'>
-    <input type='submit' class="btn btn-primary"  value='{% trans "View Ticket" %}' />
+        <input type='submit' class="btn btn-primary"  value='{% trans "View Ticket" %}' />
-    </div>
+        </div>
-</fieldset>
+    </fieldset>
-{% csrf_token %}</form>
+    {% csrf_token %}</form>
-</div></div></div>
+    </div></div>
+</div>
 {% endif %}
 
 {% endblock %}