Js css files

README.rst

@@ -50,6 +50,8 @@ Basic usage
 
     path('admin/linkcheck/', include('linkcheck.urls'))
 
+#. Run ``./manage.py collectstatic`` if you're deploying your app in production environment. 
+
 #. View ``/admin/linkcheck/`` from your browser.
 
 We are aware that this documentation is on the brief side of things so any

linkcheck/static/linkcheck/css/styles.css

@@ -0,0 +1,96 @@
+
+.objecttype {
+    width: 99%!important;
+    margin-bottom: 30px;
+    border: 0 !important;
+}
+
+.objecttype td {
+    border: 0;
+}
+
+.module {
+    width: 100%!important;
+    border: 0 !important;
+}
+
+.object {
+    width: 100%!important;
+    margin: 0;
+    padding: 35px 0 0 0;
+}
+
+.links {
+    width: 100%!important;
+    background-color: white;
+    border: 1px solid #ddd;
+    margin: 10px 0 0 0;
+}
+
+.links td, .links tr {
+    border: 1px solid #ddd;
+}
+
+.links th {
+    border: 0!important;
+}
+
+td.actioncell {
+    border-left: 0 !important;
+    width: 60px !important;
+}
+
+#linkcheck-nav {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    padding: 10px;
+}
+
+#linkcheck-nav a {
+    text-decoration: underline;
+}
+
+/* Header Styles */
+.header-cell {
+    padding: 0;
+}
+
+.header-table-small {
+    width: 20%;
+}
+
+.header-table-big {
+    width: 40%;
+
+}
+
+.header-report {
+    display: inline; 
+    padding-left: 5px;
+}
+
+.header-link {
+    text-decoration: underline;
+}
+
+/* table body styles */
+.emphasis {
+    font-weight: bold;
+}
+.coloured-green {
+    color: green;
+}
+.coloured-red {
+    color: red;
+}
+
+/* other styles */
+.current {
+    margin: 0 25px;
+}
+
+.center-aligned {
+    text-align: center;
+}

linkcheck/static/linkcheck/js/script.js

@@ -0,0 +1,55 @@
+function showProgressDots(numberOfDots) {
+    var progress = document.getElementById('progressDots');
+    if (!progress) return;
+    switch(numberOfDots) {
+        case 1:
+            progress.innerHTML = '.  ';
+            timerHandle = setTimeout(function() { showProgressDots(2); }, 200);
+            break;
+        case 2:
+            progress.innerHTML = '.. ';
+            timerHandle = setTimeout(function() { showProgressDots(3); }, 200);
+            break;
+        case 3:
+            progress.innerHTML = '...';
+            timerHandle = setTimeout(function() { showProgressDots(1); }, 200);
+            break;
+    }
+}
+
+$(document).ready(function() {
+
+    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+
+    $(".ignore").submit(function(){
+        $.post(this.action, {'csrfmiddlewaretoken': csrfToken}, (data) => {
+            $('tr#link' + data.link).hide('medium');
+            var ignored_count = parseInt($('#ignored_count').text());
+            ignored_count++;
+            $('#ignored_count').text(ignored_count);
+        });
+        return false;
+    });
+
+    $(".unignore").submit(function(){
+        $.post(this.action, {'csrfmiddlewaretoken': csrfToken}, (data) => {
+            $('tr#link' + data.link).hide('medium');
+            var ignored_count = parseInt($('#ignored_count').text());
+            ignored_count--;
+            $('#ignored_count').text(ignored_count);
+        });
+        return false;
+    });
+
+    $(".recheck").submit(function(){
+        $(this).closest('tr').find('td.link_message').html('Checking<span id="progressDots"></span>');
+        showProgressDots(1);
+        $.post(this.action, {'csrfmiddlewaretoken': csrfToken}, (data) => {
+            var links = data['links'];
+            for (var link in links) {
+                $('tr#link'+links[link]).find('td.link_message').text(data['message']).css('color', data['colour']);
+            }
+        });
+        return false;
+    });
+});

linkcheck/templates/linkcheck/base_linkcheck.html

@@ -1,8 +1,16 @@
 {% extends "admin/change_list.html" %}
+{% load static %}
 {% load i18n %}
 
 {% block title %}
-    {% translate "Link Checker" %} {{ block.super }}
+    {% translate "Link Checker" %}
+{% endblock %}
+
+{% block extrahead %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'linkcheck/css/styles.css' %}">
+    <script src="{% static 'linkcheck/js/script.js' %}"></script>
+
 {% endblock %}
 
 {% block breadcrumbs %}

linkcheck/templates/linkcheck/coverage.html

@@ -26,10 +26,10 @@
         {% for model in coverage_data %}
             <tr>
                 <td>{{ model.name }}</td>
-                <td style="font-weight: bold;color:{% if model.is_covered %}green{% else %}red{% endif %};">
+                <td class="emphasis coloured-{% if model.is_covered %}green{% else %}red{% endif %}">
                     {{ model.is_covered|yesno:_("Yes,No") }}
                 </td>
-                <td style="font-weight: bold;color:{% if model.is_covered %}green{% else %}red{% endif %};">
+                <td class="emphasis coloured-{% if model.is_covered %}green{% else %}red{% endif %}">
                     {% if not model.is_covered %}
                         {{ model.suggested_config|render_config }}
                     {% endif %}

linkcheck/templates/linkcheck/paginator.html

@@ -1,5 +1,6 @@
 {% load i18n %}
-<div style="text-align: center">
+
+<div class="center-aligned">
     <span class="step-links">
         {% if pages.number > 1 %}
             <a href="?{{qry_data}}&page=1">&lt; First</a>
@@ -13,7 +14,7 @@
             &lt;&lt; {% translate "Previous" %}
         {% endif %}
 
-        <span class="current" style="margin: 0 25px;">
+        <span class="current">
             {% blocktrans with current=pages.number max=pages.paginator.num_pages %}Page {{ current }} of {{ max }}{% endblocktrans %}
         </span>
 

linkcheck/templates/linkcheck/report.html

@@ -1,123 +1,6 @@
 {% extends "linkcheck/base_linkcheck.html" %}
 {% load i18n %}
 {% load  linkcheck_model_tags %}
-{% block extrahead %}
-{{ block.super }}
-<script type="text/javascript">
-    function showProgressDots(numberOfDots) {
-        var progress = document.getElementById('progressDots');
-        if (!progress) return;
-        switch(numberOfDots) {
-            case 1:
-                progress.innerHTML = '.&nbsp;&nbsp;';
-                timerHandle = setTimeout('showProgressDots(2)',200);
-                break;
-            case 2:
-                progress.innerHTML = '..&nbsp;';
-                timerHandle = setTimeout('showProgressDots(3)',200);
-                break;
-            case 3:
-                progress.innerHTML = '...';
-                timerHandle = setTimeout('showProgressDots(1)',200);
-                break;
-        }
-    }
-
-    $(document).ready(function() {
-
-        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
-
-        $(".ignore").submit(function(){
-            $.post(this.action, {'csrfmiddlewaretoken': csrfToken}, (data) => {
-                $('tr#link' + data.link).hide('medium');
-                var ignored_count = parseInt($('#ignored_count').text());
-                ignored_count++;
-                $('#ignored_count').text(ignored_count);
-            });
-            return false;
-        });
-
-        $(".unignore").submit(function(){
-            $.post(this.action, {'csrfmiddlewaretoken': csrfToken}, (data) => {
-                $('tr#link' + data.link).hide('medium');
-                var ignored_count = parseInt($('#ignored_count').text());
-                ignored_count--;
-                $('#ignored_count').text(ignored_count);
-            });
-            return false;
-        });
-
-        $(".recheck").submit(function(){
-            $(this).closest('tr').find('td.link_message').html('Checking<span id="progressDots"></span>');
-            showProgressDots(1);
-            $.post(this.action, {'csrfmiddlewaretoken': csrfToken}, (data) => {
-                var links = data['links'];
-                for (var link in links) {
-                    $('tr#link'+links[link]).find('td.link_message').text(data['message']).css('color', data['colour']);
-                }
-            });
-            return false;
-        });
-    });
-</script>
-
-<style type="text/css">
-
-    .objecttype {
-        width: 99%!important;
-        margin-bottom: 30px;
-        border: 0 !important;
-    }
-
-    .objecttype td {
-        border: 0;
-    }
-
-    .module {
-        width: 100%!important;
-        border: 0 !important;
-    }
-
-    .object {
-        width: 100%!important;
-        margin: 0;
-        padding: 35px 0 0 0;
-    }
-
-    .links {
-        width: 100%!important;
-        background-color: white;
-        border: 1px solid #ddd;
-        margin: 10px 0 0 0;
-    }
-
-    .links td, .links tr {
-        border: 1px solid #ddd;
-    }
-
-    .links th {
-        border: 0!important;
-    }
-
-    td.actioncell {
-        border-left: 0 !important;
-        width: 60px !important;
-    }
-
-    #linkcheck-nav {
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        text-align: center;
-        padding: 10px;
-    }
-
-    #linkcheck-nav a {
-        text-decoration: underline;
-    }
-
-</style>
-{% endblock %}
 
 {% block innercontent %}
 
@@ -133,25 +16,25 @@
 
     {% for content_type in content_types_list %}
         <table class="objecttype">
-            <tr class="type-header"><td style='padding: 0;'><h2>{{content_type.content_type|get_verbose_name_plural}}</h2>
+            <tr class="type-header"><td class="header-cell"><h2>{{content_type.content_type|get_verbose_name_plural}}</h2>
                 {% for object in content_type.object_list %}
                     <div class="object">
-                        <h3 style='display: inline; padding-left: 5px;'>{{report_type}} in '{{object.object}}'</h3>&nbsp;&nbsp;
-                        <a href='{{object.object.get_absolute_url}}' style="text-decoration: underline;">{% blocktrans with content_type_name=content_type.content_type.name %}View {{ content_type_name }}{% endblocktrans %}</a>&nbsp;&nbsp;
-                        {% if object.admin_url %}<a href='{{ object.admin_url }}' style="text-decoration: underline;">{% blocktrans with content_type_name=content_type.content_type.name %}Edit {{ content_type_name }}{% endblocktrans %}</a>{% endif %}
+                        <h3 class="header-report">{{report_type}} in '{{object.object}}'</h3>&nbsp;&nbsp;
+                        <a class="header-link" href='{{object.object.get_absolute_url}}'>{% blocktrans with content_type_name=content_type.content_type.name %}View {{ content_type_name }}{% endblocktrans %}</a>&nbsp;&nbsp;
+                        {% if object.admin_url %}<a class="header-link" href='{{ object.admin_url }}'>{% blocktrans with content_type_name=content_type.content_type.name %}Edit {{ content_type_name }}{% endblocktrans %}</a>{% endif %}
                         <table class="links">
-                            <th style='width: 40%;'>{% translate "Destination" %}</th>
-                            <th style='width: 20%;'>{% translate "Linked Text" %}</th>
-                            <th style='width: 20%;'>{% translate "Field to edit" %}</th>
-                            <th style='width: 20%;'>{% translate "Status" %}</th>
+                            <th class="header-table-big">{% translate "Destination" %}</th>
+                            <th class="header-table-small">{% translate "Linked Text" %}</th>
+                            <th class="header-table-small">{% translate "Field to edit" %}</th>
+                            <th class="header-table-small">{% translate "Status" %}</th>
                             <th></th>
                             <th></th>
                             {% for link in object.link_list %}
                                 <tr id="link{{ link.id }}">
                                     <td><a href='{{link.url}}' target='_blank'>{{link.display_url}}</a></td>
                                     <td>{% if link.text == "empty" %}none{% else %}"{{link.text}}"{% endif %}</td>
                                     <td>{{link.field}}</td>
-                                    <td style='font-weight: bold; color: {{link.url.colour}};' class="link_message">{{link.url.message}}</td>
+                                    <td class="link_message emphasis coloured-{{link.url.colour}}">{{link.url.message}}</td>
                                     <td class="actioncell">
                                         {% if not link.url.status %}
                                             <form class="recheck" action="{{ request.META.PATH_INFO }}?{% if request.META.QUERY_STRING %}{{ request.META.QUERY_STRING }}&{% else %}{% endif %}recheck={{ link.id }}"><input type="submit" value="{% translate "Recheck" %}" /></form>

linkcheck/tests/test_linkcheck.py

@@ -1074,8 +1074,8 @@ def test_coverage_view(self):
         self.assertContains(
             response,
             '<tr><td>sampleapp.Book</td>'
-            '<td style="font-weight: bold;color:green;">Yes</td>'
-            '<td style="font-weight: bold;color:green;"></td></tr>',
+            '<td class="emphasis coloured-green">Yes</td>'
+            '<td class="emphasis coloured-green"></td></tr>',
             html=True,
         )
 

linkcheck/views.py

@@ -150,6 +150,7 @@ def report(request):
             'qry_data': rqst.urlencode(),
             'report_type': report_type,
             'ignored_count': Link.objects.filter(ignore=True).count(),
+            'actions_on_top': True,
         },
     )
 
@@ -169,7 +170,7 @@ def get_status_message():
         broken_links = Link.objects.filter(ignore=False, url__status=False).count()
         if broken_links:
             return (
-                "<span style='color: red;'>We've found {} broken link{}.</span><br>"
+                "<span class='coloured-red' >We've found {} broken link{}.</span><br>"
                 "<a href='{}'>View/fix broken links</a>".format(
                     broken_links,
                     "s" if broken_links > 1 else "",