More refactoring of rigboard

RIGS/templates/event_table.html

@@ -1,65 +1,34 @@
 <div class="table-responsive">
     <table class="table">
-        <thead>
-        <td>#</td>
-        <td>Event Date</td>
-        <td>Event Details</td>
-        <td>Event Timings</td>
-        <td>MIC</td>
+        <thead class="thead-dark">
+            <tr>
+                <td>#</td>
+                <td>Event Date</td>
+                <td>Event Timings</td>
+                <td>Event Details</td>
+                <td>Status</td>
+                <td>Authorisation</td>
+                <td>MIC</td>
+            </tr>
         </thead>
         <tbody>
         {% for event in events %}
             <tr class="
-                        {% if event.cancelled %}
-							active text-muted
-                        {% elif not event.is_rig %}
-                            info
-						{% elif event.confirmed and event.mic %}
-						{# interpreated as (booked and mic) #}
-							success
-						{% elif event.mic %}
-							warning
-						{% else %}
-							danger
-						{% endif %}
-                        ">
+            {% if event.cancelled %}
+                active text-muted
+            {% elif not event.is_rig %}
+                info
+            {% endif %}">
+                <!---Number-->
                 <td>{{ event.pk }}</td>
+                <!--Dates-->
                 <td>
                     <div><strong>{{ event.start_date|date:"D d/m/Y" }}</strong></div>
                     {% if event.end_date and event.end_date != event.start_date %}
                         <div><strong>{{ event.end_date|date:"D d/m/Y"  }}</strong></div>
                     {% endif %}
-                    <span class="text-muted">{{ event.get_status_display }}</span>
-                </td>
-                <td>
-                    <h4>
-                        <a href="{% url 'event_detail' event.pk %}">
-                            {{ event.name }}
-                        </a>
-                        {% if event.venue %}
-                            <small>at {{ event.venue }}</small>
-                        {% endif %}
-                        {% if event.dry_hire %}
-                            <span class="label label-default">Dry Hire</span>
-                        {% endif %}
-                        {% if event.is_rig and perms.RIGS.view_event and event.authorised %}
-                            <span class="fas fa-check"></span>
-                        {% endif %}
-                    </h4>
-                    {% if event.is_rig and not event.cancelled %}
-                        <h5>
-                            {{ event.person.name }}
-                            {% if event.organisation %}
-                                for {{ event.organisation.name }}
-                            {% endif %}
-                        </h5>
-                    {% endif %}
-                    {% if not event.cancelled and event.description %}
-                        <div>
-                            {{ event.description|linebreaksbr }}
-                        </div>
-                    {% endif %}
                 </td>
+                <!---Times-->
                 <td>
                     {% if not event.cancelled %}
                         <dl class="dl-horizontal">
@@ -84,9 +53,48 @@
                         </dl>
                     {% endif %}
                 </td>
-                <td class="text-right">
+                <!---Details-->
+                <td>
+                    <h4>
+                        <a href="{% url 'event_detail' event.pk %}">
+                            {{ event.name }}
+                        </a>
+                        {% if event.venue %}
+                            <small>at {{ event.venue }}</small>
+                        {% endif %}
+                        {% if event.dry_hire %}
+                            <span class="badge badge-secondary">Dry Hire</span>
+                        {% endif %}
+                        
+                    </h4>
+                    {% if event.is_rig and not event.cancelled %}
+                        <h5>
+                            {{ event.person.name }}
+                            {% if event.organisation %}
+                                for {{ event.organisation.name }}
+                            {% endif %}
+                        </h5>
+                    {% endif %}
+                    {% if not event.cancelled and event.description %}
+                        <div>
+                            {{ event.description|linebreaksbr }}
+                        </div>
+                    {% endif %}
+                </td>
+                <!---Status-->
+                <td class="bg-{% if event.confirmed %}success{%else%}warning{%endif%}">
+                    <span>{{ event.get_status_display }}</span>
+                </td>
+                <!---Authorisation-->
+                <td>
+                    {% if event.is_rig and perms.RIGS.view_event and event.authorised %}
+                        <span class="fas fa-check"></span>
+                    {% endif %}
+                </td>
+                <!---MIC-->
+                <td class="text-center">
                     {% if event.mic %}
-                        {{ event.mic.initials }}
+                        "{{ event.mic.initials }}"
                         <div>
                             {% if perms.RIGS.view_profile %}
                                 <a href="{% url 'profile_detail' event.mic.pk %}" class="modal-href">
@@ -97,11 +105,11 @@
                             {% endif %}
                         </div>
                     {% elif event.is_rig %}
-                        <span class="fas fa-exclamation-sign"></span>
+                        <span class="fas fa-exclamation"></span>
                     {% endif %}
                 </td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
-</div>
+</div>

gulpfile.js

@@ -7,20 +7,26 @@ var rename = require('gulp-rename');
 var terser = require('gulp-terser');
 var sass = require('gulp-sass');
 var flatten = require('gulp-flatten');
-let cleanCSS = require('gulp-clean-css');
+var cleanCSS = require('gulp-clean-css');
+var autoprefixer = require('autoprefixer')
+var postcss = require('gulp-postcss')
+var sourcemaps = require('gulp-sourcemaps');
 
 sass.compiler = require('node-sass');
 
 gulp.task('sass', function () {
   return gulp.src('web_assets/scss/**/*.scss')
+    .pipe(sourcemaps.init())
     .pipe(flatten())
     .pipe(sass().on('error', sass.logError))
     .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(postcss([ autoprefixer() ]))
+    .pipe(sourcemaps.write())
     .pipe(gulp.dest('RIGS/static/css'));
 });
 
 gulp.task('scripts', function() {
-    return gulp.src(['web_assets/js/**/*.js', 'node_modules/bootstrap/**/bootstrap.min.js', 'node_modules/popper\.js/**/popper.js', 'node_modules/moment/**/moment.js', 'node_modules/@fortawesome/fontawesome-free/js/all.js'])
+    return gulp.src(['web_assets/js/**/*.js', 'node_modules/bootstrap/**/bootstrap.min.js', 'node_modules/popper\.js/**/popper.js', 'node_modules/moment/moment.js', 'node_modules/@fortawesome/fontawesome-free/js/all.js', 'node_modules/jquery/dist/jquery.js'])
     .pipe(flatten())
     .pipe(terser())
     .pipe(gulp.dest('RIGS/static/js'));

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.1",
-    "animation": "^0.1.3",
+    "autoprefixer": "^9.7.4",
     "bootstrap": "^4.4.1",
     "fullcalendar": "^3.10.1",
     "gulp-flatten": "^0.4.0",
@@ -16,11 +16,14 @@
     "transform": "^1.1.2"
   },
   "devDependencies": {
+    "animate-sass": "^0.8.2",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.2.0",
     "gulp-concat": "^2.6.1",
+    "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.2.0",
     "node-sass": "^4.13.1"
   }

templates/base.html

@@ -21,8 +21,6 @@
     {% block css %}
     {% endblock %}
 
-    <script src="{% static 'js/moment.js' %}"></script>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdn.ravenjs.com/1.3.0/jquery,native/raven.min.js"></script>
     <script>Raven.config('{% sentry_public_dsn %}').install()</script>
     {% block preload_js %}
@@ -87,9 +85,13 @@
 
 <div class="modal fade" id="modal" role="dialog" tabindex=-1></div>
 
+<script src="{% static 'js/jquery.js' %}"></script>
+<script src="{% static 'js/interaction.js' %}"></script>
+<script src="{% static 'js/konami.js' %}"></script>
+<script src="{% static 'js/moment.js' %}"></script>
 <script src="{% static 'js/popper.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
-<script src="{% static 'js/fontawesome.min.js' %}"></script>
+<script src="{% static 'js/all.js' %}"></script>
 <script>
     Date.prototype.getISOString = function () {
         var yyyy = this.getFullYear().toString();

templates/base_rigs.html

@@ -51,19 +51,6 @@
 {% if perms.RIGS.view_venue %}
 <li class="nav-item"><a class="nav-link" href="{% url 'venue_list' %}">Venues</a></li>
 {% endif %}
-<script>
-    $(document).ready(function(){
-        $('#search-options option').click(function(){
-            $('#searchForm').attr('action', $(this).data('action')).submit();
-        });
-        $('#id_search_input').keypress(function (e) {
-          if (e.which == 13) {
-            $('#searchForm').attr('action', $('#search-options option').first().data('action')).submit();
-            return false;
-          }
-        });
-    });
-</script>
 <form id="searchForm" class="form form-inline" role="form" method="GET">
   <input id="id_search_input" type="search" name="q" class="form-control" placeholder="Search..." />
   <div class="input-group-append">
@@ -81,3 +68,18 @@
 </form>
 <a href="{% url 'search_help' %}" class="nav-link modal-href"><span class="fas fa-question"></span></a></h4>
 {% endblock %}
+{% block js %}
+<script>
+    $(document).ready(function(){
+        $('#search-options option').click(function(){
+            $('#searchForm').attr('action', $(this).data('action')).submit();
+        });
+        $('#id_search_input').keypress(function (e) {
+          if (e.which == 13) {
+            $('#searchForm').attr('action', $('#search-options option').first().data('action')).submit();
+            return false;
+          }
+        });
+    });
+</script>
+{% endblock %}

web_assets/scss/_vars.scss

@@ -0,0 +1,2 @@
+$use-spinPulse: true;
+$use-spinoffPulse: true;

web_assets/scss/screen.scss

@@ -1,5 +1,6 @@
 @import "node_modules/bootstrap/scss/bootstrap";
-//@import "node_modules/animation/animation";
+@import "vars";
+@import "node_modules/animate-sass/animate";
 //@import "node_modules/transform/transform";
 
 body, .pad-top {
@@ -95,7 +96,7 @@ ins {
       width: 50px;
       height: 50px;
       margin: 0 auto;
-      //@include animation(spinPulse 1s infinite ease-in-out);
+      //@include animated(spinPulse 1s infinite ease-in-out);
   }
 
   .circle1 {
@@ -111,10 +112,10 @@ ins {
       margin: 0 auto;
       position: relative;
       top: -40px;
-      //@include animation(spinoffPulse 1s infinite linear);
+      //@include animated(spinoffPulse 1s infinite linear);
   }
 
-  /*@include keyframes(spinPulse) {
+  /*@include animate-keyframe(spinPulse) {
       0% {
           @include rotate(160deg);
           opacity: 0;
@@ -132,7 +133,7 @@ ins {
       };
   }
 
-  @include keyframes(spinoffPulse) {
+  @include animate-keyframe(spinoffPulse) {
       0% {
           @include rotate(0deg);
       }