Merge pull request #6394 from readthedocs/hotfix/fix-ui-automationrule

Fix CSS and how we were handling html in automation rule UI
readthedocs · Nov 26, 2019 · 339a4c2 · 339a4c2
2 parents 2b15bb7 + 0d33f68
commit 339a4c2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/media/css/core.css b/media/css/core.css
@@ -1293,7 +1293,6 @@ div.httpexchange div.highlight pre {
 
 
 /* Subprojects */
-
 div.module.project-subprojects li.subproject a.subproject-url:before {
     padding-right: .5em;
     font-family: FontAwesome;
@@ -1307,14 +1306,6 @@ div.module.project-subprojects li.subproject a.subproject-edit:before {
     content: "\f044";
 }
 
-/* Automation Rules */
-
-li.automation-rule input[type="submit"] {
-    font-family: FontAwesome;
-    font-weight: normal;
-}
-
-
 /* Pygments */
 div.highlight pre .hll { background-color: #ffffcc }
 div.highlight pre .c { color: #60a0b0; font-style: italic } /* Comment */

diff --git a/readthedocs/projects/static-src/projects/css/admin.less b/readthedocs/projects/static-src/projects/css/admin.less
@@ -16,3 +16,25 @@
       }
     }
 }
+
+// Automation rules
+#content .module-list.automation-rules .automation-rule button {
+    margin: .25em;
+
+    > span {
+        display: none;
+    }
+
+    &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+    }
+
+    &.automation-rule-up:before {
+        content: "\f062";
+    }
+
+    &.automation-rule-down:before {
+        content: "\f063";
+    }
+}
diff --git a/readthedocs/projects/static/projects/css/admin.css b/readthedocs/projects/static/projects/css/admin.css
@@ -13,3 +13,19 @@
   display: inline-block;
   margin: 1em 0em 0em 0em;
 }
+#content .module-list.automation-rules .automation-rule button {
+  margin: .25em;
+}
+#content .module-list.automation-rules .automation-rule button > span {
+  display: none;
+}
+#content .module-list.automation-rules .automation-rule button:before {
+  font-family: FontAwesome;
+  font-weight: normal;
+}
+#content .module-list.automation-rules .automation-rule button.automation-rule-up:before {
+  content: "\f062";
+}
+#content .module-list.automation-rules .automation-rule button.automation-rule-down:before {
+  content: "\f063";
+}
diff --git a/readthedocs/templates/builds/versionautomationrule_list.html b/readthedocs/templates/builds/versionautomationrule_list.html
@@ -1,9 +1,14 @@
 {% extends "projects/project_edit_base.html" %}
 
 {% load i18n %}
+{% load static %}
 
 {% block title %}{% trans "Automation Rules" %}{% endblock %}
 
+{% block extra_links %}
+  <link rel="stylesheet" type="text/css" href="{% static "projects/css/admin.css" %}" />
+{% endblock %}
+
 {% block nav-dashboard %} class="active"{% endblock %}
 
 {% block project-automation-rules-active %}active{% endblock %}
@@ -30,7 +35,7 @@
     </ul>
   </div>
 
-  <div class="module-list">
+  <div class="module-list automation-rules">
     <div class="module-list-wrapper">
       <ul>
         {% for rule in object_list %}
@@ -46,7 +51,9 @@
                 <li class="automation-rule">
                   <form method="post" action="{% url 'projects_automation_rule_move' project_slug=project.slug automation_rule_pk=rule.pk steps=-1 %}">
                     {% csrf_token %}
-                    <input aria-label="{% trans 'Move up' %}" title="{% trans 'Move up' %}" type="submit" value="&#xf062">
+                    <button aria-label="{% trans 'Move up' %}" title="{% trans 'Move up' %}" class="automation-rule-up">
+                      <span>{% trans 'Move up' %}</span>
+                    </button>
                   </form>
                 </li>
               {% endif %}
@@ -55,7 +62,9 @@
                 <li class="automation-rule">
                   <form method="post" action="{% url 'projects_automation_rule_move' project_slug=project.slug automation_rule_pk=rule.pk steps=1 %}">
                     {% csrf_token %}
-                    <input aria-label="{% trans 'Move down' %}" title="{% trans 'Move down' %}" type="submit" value="&#xf063">
+                    <button aria-label="{% trans 'Move down' %}" title="{% trans 'Move down' %}" class="automation-rule-down">
+                      <span>{% trans 'Move down' %}</span>
+                    </button>
                   </form>
                 </li>
               {% endif %}