django-request · christianwgd · Dec 26, 2022 · Dec 26, 2022 · Jun 23, 2023 · Jun 23, 2023
diff --git a/request/locale/en/LC_MESSAGES/django.mo b/request/locale/en/LC_MESSAGES/django.mo
diff --git a/request/static/request/css/overview.css b/request/static/request/css/overview.css
@@ -0,0 +1,21 @@
+#trafficgraph {
+    width: 100%;
+    height: 250px;
+}
+
+.plugin {
+    width: 100%;
+}
+
+@media (min-width: 960px) {
+    .left {
+        float: left;
+        clear: both;
+        width: calc(50% - 10px);
+    }
+    .right {
+        float: left;
+        width: calc(50% - 10px);
+        margin-left: 20px;
+    }
+}
diff --git a/request/static/request/js/jquery.flot.resize.js b/request/static/request/js/jquery.flot.resize.js
@@ -0,0 +1,60 @@
+/*
+Flot plugin for automatically redrawing plots when the placeholder
+size changes, e.g. on window resizes.
+
+It works by listening for changes on the placeholder div (through the
+jQuery resize event plugin) - if the size changes, it will redraw the
+plot.
+
+There are no options. If you need to disable the plugin for some
+plots, you can just fix the size of their placeholders.
+*/
+
+
+/* Inline dependency:
+ * jQuery resize event - v1.1 - 3/14/2010
+ * http://benalman.com/projects/jquery-resize-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
+
+
+(function ($) {
+    var options = { }; // no options
+
+    function init(plot) {
+        function onResize() {
+            var placeholder = plot.getPlaceholder();
+
+            // somebody might have hidden us and we can't plot
+            // when we don't have the dimensions
+            if (placeholder.width() == 0 || placeholder.height() == 0)
+                return;
+
+            plot.resize();
+            plot.setupGrid();
+            plot.draw();
+        }
+
+        function bindEvents(plot, eventHolder) {
+            plot.getPlaceholder().resize(onResize);
+        }
+
+        function shutdown(plot, eventHolder) {
+            plot.getPlaceholder().unbind("resize", onResize);
+        }
+
+        plot.hooks.bindEvents.push(bindEvents);
+        plot.hooks.shutdown.push(shutdown);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'resize',
+        version: '1.0'
+    });
+})(jQuery);
diff --git a/request/templates/admin/request/request/overview.html b/request/templates/admin/request/request/overview.html
@@ -1,7 +1,8 @@
 {% extends "admin/base_site.html" %}{% load i18n request_admin static %}
 {% block extrahead %}
 {{ block.super }}
-<!--[if IE]><script language="javascript" type="text/javascript" src="{% static "request/js/excanvas.min.js" %}"></script><![endif]-->
+<link rel="stylesheet" type="text/css" href="{% static "request/css/overview.css" %}" />
+<!--[if IE]><script type="text/javascript" src="{% static "request/js/excanvas.min.js" %}"></script><![endif]-->
 <script type="text/javascript" src="{% static "request/js/jquery-1.4.2.min.js" %}"></script>
 <script type="text/javascript" src="{% static "request/js/jquery.flot.js" %}"></script>
 <script type="text/javascript" src="{% static "request/js/jquery.timeago.js" %}"></script>
@@ -22,6 +23,9 @@
 
         $(document).ready(function(){
             loadTrafficGraph();
+            window.onresize = function(event) {
+                loadTrafficGraph()
+            };
         });
         </script>
     {% endif %}
@@ -39,19 +43,19 @@
 {% endblock %}
 
 {% block content %}
-<div style="width:920px;">
-    <div class="module" style="clear: both;">
+<div>
+    <div class="module">
         <table style="width: 100%;">
             <caption>{% trans "Traffic graph" %} ( <a href="javascript:loadTrafficGraph(7);">{% trans "Week" %}</a> | <a href="javascript:loadTrafficGraph(30);">{% trans "Month" %}</a> | <a href="javascript:loadTrafficGraph(365);">{% trans "Year" %}</a> )</caption>
         </table>
 
-        <div style="padding: 15px;">
-            <div id="trafficgraph" style="width: 900px; height: 250px;"></div>
+        <div style="padding: 10px;">
+            <div id="trafficgraph"></div>
         </div>
     </div>
 
     {% for plugin in plugins %}
-      <div class="module" style="float: left; width: 450px; {% cycle 'clear: both;' 'margin-left: 16px;' %}">
+      <div class="module {% cycle 'left' 'right' %}">
          {{ plugin.render }}
       </div>
     {% endfor %}

diff --git a/setup.cfg b/setup.cfg
@@ -49,6 +49,7 @@ request =
     templates/admin/request/request/*.html
     templates/request/plugins/*.html
     static/request/js/*.js
+    static/request/css/*.css
     locale/*/LC_MESSAGES/*.*
 
 [flake8]