Remove animation on prefers-reduced-motion/low referesh rate devices

Also normalises handling of asset list cable table & improves its use of space on large devices

RIGS/static/scss/screen.scss

@@ -2,6 +2,16 @@
 @import "custom-variables";
 @import "node_modules/bootstrap/scss/bootstrap";
 
+@media screen and
+  (prefers-reduced-motion: reduce),
+  (update: slow) {
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
 #content {
   padding: 40px 15px;
 }

RIGS/templates/event_checklist_form.html

@@ -29,17 +29,19 @@
     {% include 'partials/datetime-fix.html' %}
 
     <script>
+    const matches = window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(update: slow)").matches;
     $(document).ready(function () {
+       dur = matches ? 0 : 500;
        {% if not object.pk %}
-            $('.form-hide').slideUp();
+            $('.form-hide').slideUp(dur);
        {% else %}
             $('#size-selector button[data-event-size={{object.event_size}}]').addClass('active');
             for(i = 0; i < 3; i++) {
                 if(i == {{object.event_size}}) {
-                    $('#size-{{object.event_size}}').slideDown();
+                    $('#size-{{object.event_size}}').slideDown(dur);
                 }
                 else {
-                    $('#size-' + i).slideUp();
+                    $('#size-' + i).slideUp(dur);
                 }
             }
        {% endif %}
@@ -47,13 +49,13 @@
             $('#{{form.event_size.auto_id}}').val($(this).data('event-size'))
             $(this).toggleClass('active');
             $('#size-selector button').not(this).removeClass('active');
-            $('#size-' + $(this).data('event-size')).slideDown();
+            $('#size-' + $(this).data('event-size')).slideDown(dur);
             for(i = 0; i < 3; i++) {
                 if(i == $(this).data('event-size')) {
-                    $('#size-' + $(this).data('event-size')).slideDown();
+                    $('#size-' + $(this).data('event-size')).slideDown(dur);
                 }
                 else {
-                    $('#size-' + i).slideUp();
+                    $('#size-' + i).slideUp(dur);
                 }
             }
         });

RIGS/templates/event_form.html

@@ -45,10 +45,12 @@
             }
             $('#'+id_end_time).val('02:00');
         }
+        const matches = window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(update: slow)").matches;
         $(document).ready(function () {
+            dur = matches ? 0 : 500;
             {% if not object.pk and not form.errors %}
-                $('.form-hws').slideUp(function () {
-                    $('.form-is_rig').slideUp();
+                $('.form-hws').slideUp(dur, function () {
+                    $('.form-is_rig').slideUp(dur);
                 });
             {% elif not object.pk and form.errors %}
                 if ($('#{{form.is_rig.auto_id}}').attr('checked') != 'checked') {
@@ -57,19 +59,19 @@
             {% endif %}
             {% if not object.pk %}
                 $('#is_rig-selector button').on('click', function () {
-                    $('.form-hws').removeAttr('style');
-                    $('.form-non_rig').slideDown();
+                    $('.form-non_rig').slideDown(dur);
                     if ($(this).data('is_rig') == 1) {
                         $('#{{form.is_rig.auto_id}}').prop('checked', true);
                         if ($('.form-non_rig').is(':hidden')) {
                             $('.form-is_rig').show();
                         } else {
-                            $('.form-is_rig').slideDown();
+                            $('.form-is_rig').slideDown(dur);
                         }
                         $('.form-hws, .form-hws .form-is_rig').css('overflow', 'visible');
                     } else {
+
                         $('#{{form.is_rig.auto_id}}').prop('checked', false);
-                        $('.form-is_rig').slideUp();
+                        $('.form-is_rig').slideUp(dur);
                     }
                 });
             {% endif %}

assets/templates/asset_form.html

@@ -2,8 +2,6 @@
 {% load widget_tweaks %}
 {% load static %}
 
-{% block title %}Asset {{ object.asset_id }}{% endblock %}
-
 {% block css %}
     <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}"/>
     <link rel="stylesheet" href="{% static 'css/ajax-bootstrap-select.css' %}"/>
@@ -14,11 +12,13 @@
     <script src="{% static 'js/ajax-bootstrap-select.js' %}"></script>
     <script src="{% static 'js/autocompleter.js' %}"></script>
     <script>
+        const matches = window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(update: slow)").matches;
+        dur = matches ? 0 : 500;
         function checkIfCableHidden() {
-          if (document.getElementById("id_is_cable").checked) {
-            document.getElementById("cable-table").hidden = false;
+          if ($("#id_is_cable").prop('checked')) {
+            $("#cable-table").slideDown(dur);
           } else {
-            document.getElementById("cable-table").hidden = true;
+            $("#cable-table").slideUp(dur);
           }
         }
         checkIfCableHidden();
@@ -71,15 +71,6 @@
 {% endblock %}
 
 {% block content %}
-<h1>
-  {% if edit and object %}
-      Edit Asset: {{ object.asset_id }}
-  {% elif duplicate %}
-      Duplication of Asset: {{ previous_asset_id }}
-  {% else %}
-      Create Asset
-  {% endif %}
-</h1>
 {% if duplicate %}
     <form method="POST" id="asset_update_form" action="{% url 'asset_duplicate' pk=previous_asset_id %}">
 {% elif edit %}
@@ -90,24 +81,24 @@
         {% include 'form_errors.html' %}
         {% csrf_token %}
         <input type="hidden" name="id" value="{{ object.id|default:0 }}" hidden=true>
-        <div class="row pt-4">
+        <div class="row pt-2">
           <div class="col-sm-12">
             {% include 'partials/asset_detail_form.html' %}
           </div>
         </div>
-        <div class="row pt-4">
-          <div class="col-md-6">
+        <div class="row pt-2">
+          <div class="col-12 col-sm">
             {% include 'partials/purchasedetails_form.html' %}
           </div>
-          <div class="col-md-6" hidden="true" id="cable-table">
+          <div class="col-12 col-sm-6 col-md-4" id="cable-table">
             {% include 'partials/cable_form.html' %}
           </div>
-          <div class="col-md-4">
+          <div class="col-12 col-md-4">
             {% include 'partials/parent_form.html' %}
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
+          <div class="col-12">
             {% include 'partials/asset_buttons.html' %}
           </div>
         </div>

assets/templates/partials/cable_form.html

@@ -1,5 +1,5 @@
 {% load widget_tweaks %}
-<div class="card">
+<div class="card mb-2">
   <div class="card-header">
     Cable Details
   </div>

assets/templates/partials/parent_form.html

@@ -1,5 +1,5 @@
 {% load widget_tweaks %}
-<div class="card">
+<div class="card mb-2">
   <div class="card-header">
     Collection Details
   </div>

assets/templates/partials/purchasedetails_form.html

@@ -1,5 +1,5 @@
 {% load widget_tweaks %}
-<div class="card">
+<div class="card mb-2">
   <div class="card-header">
     Purchase Details
   </div>

assets/views.py

@@ -117,7 +117,7 @@ class AssetEdit(LoginRequiredMixin, AssetIDUrlMixin, generic.UpdateView):
         context = super().get_context_data(**kwargs)
         context["edit"] = True
         context["connectors"] = models.Connector.objects.all()
-
+        context["page_title"] = "Edit Asset: {}".format(self.object.display_id)
         return context
 
     def get_success_url(self):
@@ -140,7 +140,7 @@ class AssetCreate(LoginRequiredMixin, generic.CreateView):
         context = super(AssetCreate, self).get_context_data(**kwargs)
         context["create"] = True
         context["connectors"] = models.Connector.objects.all()
-
+        context["page_title"] = "Create Asset"
         return context
 
     def get_initial(self, *args, **kwargs):
@@ -165,6 +165,7 @@ class AssetDuplicate(DuplicateMixin, AssetIDUrlMixin, AssetCreate):
         context["create"] = None
         context["duplicate"] = True
         context['previous_asset_id'] = self.get_object().asset_id
+        context["page_title"] = "Duplication of Asset: {}".format(context['previous_asset_id'])
         return context
 
 

templates/partials/datetime-fix.html

@@ -4,6 +4,7 @@ function initDatetime() {
     $('input[type=datetime-local]').not(':disabled').flatpickr({
         dateFormat: 'Y-m-dTH:m',
         enableTime: true,
+        allowInput: true,
         altInput: true,
         altFormat: "d/m/y H:m",
     });

versioning/templates/activity_feed.html

@@ -1,12 +1,15 @@
 {% block js %}
 {% include 'partials/version_scripts.html' %}
 <script>
+  const matches = window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(update: slow)").matches;
+  //TODO Maybe this should be a reduce rather than remove
+  dur = matches ? 0 : 'slow';
   $(document).ready(function() {
     $(function () {
         $( "#activity" ).hide();
         $( "#activity" ).load( "{% url 'activity_feed' %}", function() {
-          $('#activity_loading').slideUp('slow',function(){
-              $('#activity').slideDown('slow');
+          $('#activity_loading').slideUp(dur,function(){
+              $('#activity').slideDown(dur);
           });
           var whiteList = $.fn.tooltip.Constructor.Default.whiteList
           whiteList.ins = []