From 9f71c5867e259d0a03099265eece545579059a9c Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@thoughtworks.com>
Date: Fri, 14 Jun 2019 20:33:12 +0530
Subject: [PATCH] ui: Create reusable CSS class for collapsible-button

.collapsible-button is used by both "Client Apps" and the "How to verify?"
button in backups:verify-ssh-hostkey page.

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
---
 .../backups/templates/verify_ssh_hostkey.html | 50 +++++++++----------
 plinth/templates/clients.html                 |  5 +-
 static/themes/default/css/plinth.css          |  8 +--
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/plinth/modules/backups/templates/verify_ssh_hostkey.html b/plinth/modules/backups/templates/verify_ssh_hostkey.html
index 990a8aabb..dc859ef90 100644
--- a/plinth/modules/backups/templates/verify_ssh_hostkey.html
+++ b/plinth/modules/backups/templates/verify_ssh_hostkey.html
@@ -20,41 +20,39 @@
 
 {% load bootstrap %}
 {% load i18n %}
-
 {% block content %}
-  <h3>{{ title }}</h3>
 
-  <form class="form" method="post">
-    {% csrf_token %}
+<h3>{{ title }}</h3>
 
-    <br/>
+<form class="form" method="post">
+  {% csrf_token %}
 
+  <br/>
+
+  <p>
+    The authenticity of host {{ hostname }} cannot be established.<br/> The SSH host advertises the following public keys. Please verify any one of them.
+  </p>
+
+  <section>
     <p>
-      The authenticity of host {{ hostname }} cannot be established.<br/>
-      The SSH host advertises the following public keys. Please verify any one of them.
+      <a class="btn btn-default collapsed collapsible-button" data-toggle="collapse" href="#help" aria-expanded="false"><i class="fa fa-chevron-right fa-fw" aria-hidden="true"></i> {% trans "How to verify?" %}</a>
     </p>
-
-    <section>
+    <div class="collapse panel-body" id="help">
+      {% blocktrans trimmed %}
+      <p>Run the following command on the SSH host machine. The output should match one of the provided options. You can also use dsa, ecdsa, ed25519 etc. instead of rsa, by choosing the corresponding file.</p>
+      {% endblocktrans %}
       <p>
-        <a class="btn btn-default" data-toggle="collapse" href="#help" aria-expanded="false">{% trans "How to verify?" %}  <i class="fa fa-chevron-down fa-fw" aria-hidden="true"></i></a>
+        <code>sudo ssh-keygen -lf /etc/ssh/ssh_host_rsa_key</code>
       </p>
-      <div class="collapse" id="help">
-        {% blocktrans trimmed %}
-        <p>Run the following command on the SSH host machine. The output should match one of the provided options. You can also use dsa, ecdsa, ed25519 etc. instead of rsa, by choosing the corresponding file.</p>
-        {% endblocktrans %}
-        <p>
-          <code>sudo ssh-keygen -lf /etc/ssh/ssh_host_rsa_key</code>
-        </p>
-      </div>
-    </section>
+    </div>
+  </section>
 
-    {{ form|bootstrap }}
+  {{ form|bootstrap }}
 
-    <input type="submit" class="btn btn-primary"
-           value="{% trans "Verify" %}"/>
-    <a class="btn btn-default" role="button" href="{% url 'backups:index' %}">
-      {% trans "Cancel" %}
-    </a>
-  </form>
+  <input type="submit" class="btn btn-primary" value="{% trans " Verify " %}"/>
+  <a class="btn btn-default" role="button" href="{% url 'backups:index' %}">
+    {% trans "Cancel" %}
+  </a>
+</form>
 
 {% endblock %}
diff --git a/plinth/templates/clients.html b/plinth/templates/clients.html
index 15c37a581..4a9a09c8e 100644
--- a/plinth/templates/clients.html
+++ b/plinth/templates/clients.html
@@ -23,10 +23,9 @@
 
 {% if clients  %}
   <p>
-    <button id="clients-button" type="button" class="btn btn-default collapsed"
+    <button type="button" class="btn btn-default collapsed collapsible-button"
             data-toggle="collapse" data-target="#clients">
-      {% trans "Client Apps" %}
-      <span class="fa fa-chevron-right" aria-hidden="true"></span>
+      <i class="fa fa-chevron-right fa-fw" aria-hidden="true"></i> {% trans "Client Apps" %}
     </button>
   </p>
 
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 2410bc3d8..cf213a4d0 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -231,16 +231,16 @@ footer {
 }
 
 /* Icon when collapsible content is shown */
-#clients-button .fa {
+.collapsible-button .fa {
     margin-left: 5px;
 }
 
-#clients-button .fa:before,
-.no-js #clients-button.collapsed .fa:before {
+.collapsible-button .fa:before,
+.no-js .collapsible-button.collapsed .fa:before {
     content: "\f078";
 }
 
-#clients-button.collapsed .fa:before {
+.collapsible-button.collapsed .fa:before {
     content: "\f054";
 }