From 0c6dcfa766e43a68565af6490c59c290c299e83e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Mon, 29 Oct 2018 14:21:47 +0200
Subject: [PATCH] Responsive tweaks.

---
 static/css/welcome.css       |  6 ++--
 templates/base.html          |  2 +-
 templates/front/welcome.html | 69 ++++++++++++++++++++++++++++--------
 3 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/static/css/welcome.css b/static/css/welcome.css
index ec274fb5..e4832a5f 100644
--- a/static/css/welcome.css
+++ b/static/css/welcome.css
@@ -72,13 +72,11 @@
 }
 
 #welcome-integrations .integration {
-    display: inline-block;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 20px 0;
-    margin: 0 20px 20px 0;
     text-align: center;
-    width: 150px;
+    margin-bottom: 30px;
 }
 
 #welcome-integrations img {
@@ -151,4 +149,4 @@
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
-}
\ No newline at end of file
+}
diff --git a/templates/base.html b/templates/base.html
index 1903f09f..114474cf 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -148,7 +148,7 @@
             {% endif %}
 
             {% if show_search %}
-            <form class="navbar-form navbar-right">
+            <form class="navbar-form navbar-right hidden-xs hidden-sm">
                 <input id="search" type="text" placeholder="Search checks&hellip;" class="form-control" value="{{ search }}">
             </form>
             {% endif %}
diff --git a/templates/front/welcome.html b/templates/front/welcome.html
index 3e517948..71c37808 100644
--- a/templates/front/welcome.html
+++ b/templates/front/welcome.html
@@ -302,79 +302,118 @@
                 <small>Set up additional ways to get notified:</small>
             </h1>
         </div>
-        <div class="col-sm-12">
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/email.png' %}" class="icon" alt="Email icon" />
                 <h3>Email<br><small>&nbsp;</small>
                 </h3>
             </div>
-            {% if enable_sms %}
+        </div>
+
+        {% if enable_sms %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/sms.png' %}" class="icon" alt="SMS icon" />
                 <h3>SMS<br><small>&nbsp;</small></h3>
             </div>
-            {% endif %}
+        </div>
+        {% endif %}
+
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/webhook.png' %}" class="icon" alt="Webhook icon" />
                 <h3>Webhooks<br><small>&nbsp;</small></h3>
             </div>
+        </div>
+
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/slack.png' %}" class="icon" alt="Slack icon" />
                 <h3>Slack<br><small>Chat</small></h3>
             </div>
-            {% if enable_telegram %}
+        </div>
+
+        {% if enable_telegram %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/telegram.png' %}" class="icon" alt="Telegram icon" />
                 <h3>Telegram<br><small>Chat</small></h3>
             </div>
-            {% endif %}
-            {% if enable_pushover %}
+        </div>
+        {% endif %}
+
+        {% if enable_pushover %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/po.png' %}" class="icon" alt="Pushover icon" />
                 <h3>Pushover<br><small>Push Notifications</small></h3>
             </div>
-            {% endif %}
-            {% if enable_pushbullet %}
+        </div>
+        {% endif %}
+
+        {% if enable_pushbullet %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pushbullet.png' %}" class="icon" alt="Pushbullet icon" />
                 <h3>Pushbullet<br><small>Push Notifications</small></h3>
             </div>
-            {% endif %}
-            {% if enable_pd %}
+        </div>
+        {% endif %}
+
+        {% if enable_pd %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pd.png' %}" class="icon" alt="PagerDuty icon" />
                 <h3>PagerDuty<br><small>Incident Management</small></h3>
             </div>
-            {% endif %}
+        </div>
+        {% endif %}
+
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/hipchat.png' %}" class="icon" alt="HipChat icon" />
                 <h3>HipChat<br><small>Chat</small></h3>
             </div>
+        </div>
+
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/victorops.png' %}" class="icon" alt="VictorOps icon" />
                 <h3>VictorOps<br><small>Incident Management</small></h3>
             </div>
-            {% if enable_discord %}
+        </div>
+
+        {% if enable_discord %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/discord.png' %}" class="icon" alt="Discord icon" />
                 <h3>Discord<br><small>Chat</small></h3>
             </div>
-            {% endif %}
+        </div>
+        {% endif %}
+
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/opsgenie.png' %}" class="icon" alt="OpsGenie icon" />
                 <h3>OpsGenie<br><small>Incident Management</small></h3>
             </div>
+        </div>
+
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/pagertree.png' %}" class="icon" alt="PagerTree icon" />
                 <h3>PagerTree<br><small>Incident Management</small></h3>
             </div>
-            {% if enable_trello %}
+        </div>
+
+        {% if enable_trello %}
+        <div class="col-md-2 col-sm-4 col-xs-6">
             <div class="integration">
                 <img src="{% static 'img/integrations/trello.png' %}" class="icon" alt="Trello icon" />
                 <h3>Trello<br><small>Project Management</small></h3>
             </div>
-            {% endif %}
         </div>
+        {% endif %}
     </div>
 
     <div class="row tour-section">