From f25c2963af06907a5a5fc8b1b83c58e8cf38a27a Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@thoughtworks.com>
Date: Mon, 26 Nov 2018 18:09:15 +0530
Subject: [PATCH] clients: Fix distortion of the client apps buttons

After adding the card layout to the setup and service pages, the client apps
button started showing up in two lines. This puts them in a span so that the
icon and the text of the button appear next to each other on the same line.

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/clients.html | 44 +++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/plinth/templates/clients.html b/plinth/templates/clients.html
index 74080e838..d2da15e2a 100644
--- a/plinth/templates/clients.html
+++ b/plinth/templates/clients.html
@@ -68,16 +68,18 @@
             {% for platform in client.platforms %}
               {% if platform.type == 'download' %}
                 <a class="btn btn-default" href="{{ platform.url }}" role="button">
-                  {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
-                    <img class="client-icon" src="{% static icon %}" />
-                    {% if platform.os == 'gnu-linux' %}
-                      {% trans 'GNU/Linux' %}
-                    {% elif platform.os == 'windows' %}
-                      {% trans 'Windows' %}
-                    {% elif platform.os == 'macos' %}
-                      {% trans 'macOS' %}
-                    {% endif %}
-                  {% endwith %}
+                  <span>
+                    {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
+                      <img class="client-icon" src="{% static icon %}" />
+                      {% if platform.os == 'gnu-linux' %}
+                        {% trans 'GNU/Linux' %}
+                      {% elif platform.os == 'windows' %}
+                        {% trans 'Windows' %}
+                      {% elif platform.os == 'macos' %}
+                        {% trans 'macOS' %}
+                      {% endif %}
+                    {% endwith %}
+                  </span>
                 </a>
               {% endif %}
             {% endfor %}
@@ -97,16 +99,18 @@
             {% for platform in client.platforms %}
               {% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %}
                 <a class="btn btn-default" href="{{ platform.url }}" role="button">
-                  {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
-                    <img class="client-icon" src="{% static icon %}" />
-                    {% if platform.store_name == 'google-play' %}
-                      {% trans 'Play Store' %}
-                    {% elif platform.store_name == 'f-droid' %}
-                      {% trans 'F-Droid' %}
-                    {% elif platform.store_name == 'app-store' %}
-                      {% trans 'App Store' %}
-                    {% endif %}
-                  {% endwith %}
+                  <span>
+                    {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
+                      <img class="client-icon" src="{% static icon %}" />
+                      {% if platform.store_name == 'google-play' %}
+                        {% trans 'Play Store' %}
+                      {% elif platform.store_name == 'f-droid' %}
+                        {% trans 'F-Droid' %}
+                      {% elif platform.store_name == 'app-store' %}
+                        {% trans 'App Store' %}
+                      {% endif %}
+                    {% endwith %}
+                  </span>
                 </a>
               {% endif %}
             {% endfor %}