From 13d78e9da7a88c2c07e2dfa7afa32bab4fa9c467 Mon Sep 17 00:00:00 2001
From: Alexandra Ciobica <alexandraciobica@gmail.com>
Date: Fri, 7 Jun 2019 12:10:36 +0200
Subject: [PATCH] integrations: Make header of integrations/docs on mobile look
 good.

Change the display from `block` to `flex` in order to be able to
arrange the elements as wanted. Reset the css of the header elements
only for the description view. Add `font-size: 1.2em` because the font
doesn't need resizing in this case, it needs resizing only when the
title is in the box.

Removed the `padding-bottom` from the `nav` on mobile because it
overlaps the new header and you cannot click the back button from the
integrations.

Fixes: #12365.
---
 static/js/portico/integrations.js        |  2 +-
 static/styles/portico/landing-page.scss  | 46 +++++++++++++++++++-----
 static/styles/portico/portico.scss       | 17 ++++++---
 templates/zerver/integrations/index.html |  1 -
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/static/js/portico/integrations.js b/static/js/portico/integrations.js
index de01676c5f..4c037a996d 100644
--- a/static/js/portico/integrations.js
+++ b/static/js/portico/integrations.js
@@ -162,7 +162,7 @@ function hide_catalog_show_integration() {
         });
         $('#integration-instructions-group').css({
             opacity: 0,
-            display: 'block',
+            display: 'flex',
         });
         $('.integration-instructions').css('display', 'none');
         $('#' + state.integration + '.integration-instructions .help-content').html(doc);
diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.scss
index 61479e557d..d200ee754e 100644
--- a/static/styles/portico/landing-page.scss
+++ b/static/styles/portico/landing-page.scss
@@ -3206,6 +3206,12 @@ nav ul li.active::after {
     }
 }
 
+@media (min-width: 768px) {
+    .integration-instructions {
+        width: calc(100% - 200px);
+    }
+}
+
 @media (max-width: 1295px) {
     .portico-landing.hello .apps .right-side {
         display: none;
@@ -3275,10 +3281,6 @@ nav ul li.active::after {
         height: 1400px;
     }
 
-    nav {
-        padding-bottom: 110px;
-    }
-
     nav.white {
         padding-bottom: 40px;
     }
@@ -3697,8 +3699,38 @@ nav ul li.active::after {
         font-size: 1em;
     }
 
+    #integration-instruction-block {
+        display: flex !important;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid hsl(206, 44%, 93%);
+    }
+
+    .portico-landing.integrations #integration-instructions-group {
+        flex-direction: column;
+    }
+
     #integration-instruction-block .integration-lozenge {
-        display: none !important;
+        order: 1;
+        border: none;
+
+        display: flex !important;
+        justify-content: space-between;
+        height: auto;
+        width: auto;
+        margin: unset;
+        padding: unset;
+    }
+
+    #integration-instruction-block .integration-lozenge .integration-logo {
+        margin: 0;
+    }
+
+    #integration-instruction-block .integration-lozenge .integration-name {
+        font-size: 1.2em !important;
+        margin-left: 20px;
     }
 
     #integration-list-link {
@@ -4134,10 +4166,6 @@ nav ul li.active::after {
         height: auto;
     }
 
-    nav {
-        padding-bottom: 105px;
-    }
-
     .portico-landing.hello .hero {
         padding: 60px 5px 40px 5px;
     }
diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.scss
index ac8f74f980..8416e1dfed 100644
--- a/static/styles/portico/portico.scss
+++ b/static/styles/portico/portico.scss
@@ -1135,15 +1135,12 @@ input#terminal:checked ~ #tab-terminal {
 }
 
 @media (min-width: 768px) {
-    .integration-instructions {
-        margin-left: 220px;
-    }
-
     #integration-list-link {
         top: 200px;
         left: 30px;
     }
 }
+
 .api-page-header,
 .authors-page-header,
 .integrations-page-header,
@@ -1225,6 +1222,18 @@ input#terminal:checked ~ #tab-terminal {
     margin-left: 5px;
 }
 
+@media (max-width: 768px) {
+    #integration-list-link {
+        order: 2;
+        position: unset;
+        font-size: 22px;
+    }
+
+    #integration-list-link span {
+        display: none;
+    }
+}
+
 .integrations-page-header .integrations-icon {
     font-size: 22px;
     margin-right: 10px;
diff --git a/templates/zerver/integrations/index.html b/templates/zerver/integrations/index.html
index 6eaa2b5d35..506894bd67 100644
--- a/templates/zerver/integrations/index.html
+++ b/templates/zerver/integrations/index.html
@@ -139,7 +139,6 @@
                 <div id="integration-instructions-group">
                     <div id="integration-instruction-block" class="integration-instruction-block">
                         <a href="/integrations" id="integration-list-link" class="no-underline"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i><span>Back to list</span></a>
-                        <h3 class="name">Name</h3>
                         <div class="categories"></div>
                     </div>