portico: Create search/catalog visuals in /integrations.

Responsive designs for the search bar, categories sidebar,
categories dropdown, and integration tiles.

static/js/portico/landing-page.js

@@ -68,8 +68,9 @@ var integration_events = function () {
             $(".inner-content").removeClass("show");
             setTimeout(function () {
                 instructionbox.hide();
-                $(".integration-lozenges").addClass("hide");
+                $(".integration-categories-dropdown").css('display', 'none');
-                $(".extra, #integration-main-text").hide();
+                $(".integrations .catalog").addClass('hide');
+                $(".extra, #integration-main-text, #integration-search").css("display", "none");
 
                 instructionbox.append(currentblock);
                 instructionbox.show();
@@ -85,24 +86,28 @@ var integration_events = function () {
     function update_hash() {
         var hash = window.location.hash;
 
-        if (hash && hash !== '#hubot-integrations') {
+        if (hash && hash !== '#' && hash !== '#hubot-integrations') {
             scroll_top = $("body").scrollTop();
             show_integration(window.location.hash);
         } else if (currentblock && $lozenge_icon) {
             $(".inner-content").removeClass("show");
             setTimeout(function () {
                 $("#integration-list-link").css("display", "none");
-                $(".integration-lozenges").removeClass("hide");
+                $(".extra, #integration-main-text, #integration-search").show();
-                $(".extra, #integration-main-text").show();
                 instructionbox.hide();
                 $lozenge_icon.remove();
                 currentblock.appendTo("#integration-instructions-group");
+
                 $(".inner-content").addClass("show");
+                $(".integration-categories-dropdown").css('display', '');
+                $(".integrations .catalog").removeClass('hide');
 
                 $('html, body').animate({ scrollTop: scroll_top }, 0);
             }, 300);
         } else {
             $(".inner-content").addClass("show");
+            $(".integration-categories-dropdown").removeClass('hide');
+            $(".integrations .catalog").removeClass('hide');
         }
     }
 
@@ -118,6 +123,14 @@ var integration_events = function () {
 
         e.preventDefault();
     });
+
+   $(window).scroll(function () {
+        if (document.body.scrollTop > 330) {
+            $('.integration-categories-sidebar').addClass('sticky');
+        } else {
+            $('.integration-categories-sidebar').removeClass('sticky');
+        }
+    });
 };
 
 var hello_events = function () {
@@ -226,6 +239,22 @@ var events = function () {
     if (detectPath() === "hello") {
         hello_events();
     }
+
+    $('.integration-categories-dropdown .dropdown-toggle').click(function () {
+        var $dropdown_list = $('.integration-categories-dropdown .dropdown-list');
+        $dropdown_list.toggle();
+
+        var $dropdown_icon = $('.integration-categories-dropdown i');
+        if ($dropdown_list.css('display') === 'none') {
+            $dropdown_icon
+                .removeClass('icon-vector-angle-down')
+                .addClass('icon-vector-angle-right');
+        } else {
+            $dropdown_icon
+                .removeClass('icon-vector-angle-right')
+                .addClass('icon-vector-angle-down');
+        }
+    });
 };
 
 // run this callback when the page is determined to have loaded.

static/styles/landing-page.css

@@ -1142,18 +1142,18 @@ a:not(.no-style):hover:before {
 .portico-landing.hello .integrations .integration-icons .group {
     display: inline-block;
     vertical-align: top;
-    width: 170px;
+    width: 155px;
     height: 220px;
-    padding: 0 4px;
+    padding: 0 5px;
     transition: all 0.3s ease;
-    margin-top: 10px;
+    margin: 10px 5px;
     color: hsl(219, 23%, 33%);
+    border-radius: 5px;
+    border: 1px solid #fff;
 }
 
 .portico-landing.hello .integrations .integration-icons .group:hover {
-    -webkit-box-shadow: 1px 5px 20px 5px hsla(0, 0%, 0%, 0.08);
+    border: 1px solid hsl(170, 47%, 53%);
-    -moz-box-shadow: 1px 5px 20px 5px hsla(0, 0%, 0%, 0.08);
-    box-shadow: 1px 5px 20px 5px hsla(0, 0%, 0%, 0.08);
 }
 
 .portico-landing.hello .integrations .integration-logo {
@@ -1617,14 +1617,14 @@ a:not(.no-style):hover:before {
 }
 
 .portico-landing.integrations .main {
-    width: calc(100% - 200px - 20px);
+    width: calc(100% - 100px);
     margin: 0 auto;
 
     background-color: #fff;
 }
 
 .portico-landing.integrations .padded-content {
-    padding: 50px;
+    padding: 50px 0;
 }
 
 .portico-landing.integrations .padded-content .inner-content {
@@ -1681,44 +1681,181 @@ a:not(.no-style):hover:before {
     text-align: center;
 }
 
-.portico-landing.integrations .integration-lozenges {
+.portico-landing #integration-search {
+    margin-bottom: 30px;
+}
+
+.portico-landing.integrations .searchbar {
+    width: -moz-calc(100% - 40px);
+    width: -webkit-calc(100% - 40px);
+    width: -o-calc(100% - 40px);
+    width: calc(100% - 40px);
+    display: flex;
+    justify-content: center;
+    margin: 30px auto 0;
+}
+
+.portico-landing.integrations .searchbar .searchbar-reset {
+    position: relative;
+}
+
+.portico-landing.integrations .searchbar input {
+    -webkit-box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.03);
+    -moz-box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.03);
+    box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.03);
+
+    font-size: 1em;
+    font-family: inherit;
+
+    width: 500px;
+    height: 45px;
+    padding: 0px 20px 0px 50px;
+    border-radius: 40px;
+    border: 1px solid hsl(208, 46%, 93%);
+    display: block;
+}
+
+.portico-landing.integrations .searchbar input:focus {
+    border: 1px solid hsl(170, 47%, 53%);
+}
+
+.portico-landing.integrations .searchbar i.icon-vector-search {
+    position: absolute;
+    left: 20px;
+    top: 13px;
+    font-size: 19px;
+    color: hsl(170, 47%, 53%);
+}
+
+.portico-landing.integrations .catalog {
+    margin-top: 20px;
+    padding: 0 30px;
+    min-height: 1000px;
+}
+
+.portico-landing.integrations .integration-categories-sidebar {
+    float: left;
+    width: 200px;
+    padding: 0 30px 0 50px;
+    margin: 0;
+}
+
+.portico-landing.integrations .integration-categories-sidebar.sticky {
+    position: sticky;
+    top: 40px;
+    margin: auto;
+    height: 426px;
+    z-index: 10;
+}
+
+.portico-landing.integrations .integration-categories-sidebar h3 {
+    font-weight: 500;
+    font-size: 1.1em;
+}
+
+.portico-landing.integrations .integration-categories-sidebar h4 {
+    font-weight: 400;
+    font-size: .95em;
+    padding: 6px 10px 3px;
+    margin: 3px 0;
+    border-radius: 5px;
     transition: all 0.3s ease;
 }
 
-.portico-landing.integrations .integration-lozenges.hide {
+.portico-landing.integrations .integration-categories-sidebar h4.selected,
-    opacity: 0;
+.portico-landing.integrations .integration-categories-sidebar h4:hover {
-    transform: translateY(-200px);
+    background-color: hsl(170, 65%, 85%);
+    color: hsl(170, 72%, 32%);
+    cursor: pointer;
+}
+
+.portico-landing.integrations .integration-categories-dropdown {
+    cursor: pointer;
+    margin: 30px 0;
+    display: none;
+}
+
+.portico-landing.integrations .integration-lozenges {
+    overflow: hidden;
+    text-align: left;
 }
 
 .portico-landing.integrations .integration-lozenge {
-    height: 170px;
+    display: inline-block;
+    vertical-align: top;
+    width: 153px;
+    height: 200px;
+    padding: 0 4px;
+    margin: 7px 5px;
+    border-radius: 5px;
+    border: 1px solid hsl(208, 46%, 93%);
+    color: #414e67;
+    text-align: center;
     transition: all 0.3s ease;
 }
 
 .portico-landing.integrations .integration-lozenge:hover {
-    box-shadow: 0px 0px 40px hsla(0, 0%, 0%, 0.1);
+    border: 1px solid hsl(170, 47%, 53%);
-    background: hsl(0, 0%, 99%);
 }
 
-.portico-landing.integrations .integration-lozenge img {
+.portico-landing.integrations .integration-lozenge .integration-logo {
-    max-width: 80px;
+    margin: 34px auto 20px;
-    max-height: 80px;
+    height: 60px;
-    display: block;
-    margin: 10% auto 0 auto;
-    border-radius: 8px;
 }
 
-.portico-landing.integrations .integration-lozenge .integration-label {
+.portico-landing.integrations .integration-lozenge .integration-name {
-    font-weight: 600;
+    font-size: 1.2em;
-    font-size: 20px;
+    font-weight: 400;
-    color: hsl(0, 0%, 40%);
+    margin-bottom: 0;
 }
 
+.portico-landing.integrations .integration-lozenge .integration-name.with-secondary {
+    font-size: 1.1em;
+    margin-top: 4px;
+}
+
+.portico-landing.integrations .integration-lozenge .integration-secondary-line-text {
+    margin: 0;
+    line-height: 10px;
+    font-size: .65em;
+    font-weight: 400;
+}
+
+.portico-landing.integrations .integration-lozenge .integration-category {
+    font-size: .85em;
+    margin-top: 5px;
+    font-weight: 400;
+    color: hsla(216, 23%, 13%, 0.5);
+}
+
+
+/* -- integration instructions -- */
+
+.portico-landing.integrations .integration-instruction-block .integration-lozenge {
+    width: 125px;
+    height: 170px;
+    margin: 0 0 20px 0;
+}
+
+.portico-landing.integrations .integration-instruction-block .integration-lozenge .integration-category {
+    display: none;
+}
+
+
+
 /* -- media queries -- */
 @media (max-width: 1426px) {
     .portico-landing.hello .integrations .integration-icons .hide-1 {
         display: none;
     }
+
+    .portico-landing.integrations .integration-categories-sidebar {
+        padding-left: 30px;
+    }
+
+    .portico-landing.integrations .integration-lozenge {
+        width: 135px;
+    }
 }
 
 @media (max-width: 1368px) {
@@ -1822,10 +1959,6 @@ a:not(.no-style):hover:before {
         margin: 0px auto;
         width: calc(100% - 40px);
     }
-
-    .portico-landing.integrations .main {
-        width: calc(100% - 100px);
-    }
 }
 
 @media (max-width: 985px) {
@@ -1902,6 +2035,84 @@ a:not(.no-style):hover:before {
     }
 }
 
+@media (max-width: 906px) {
+    .portico-landing.integrations .integration-categories-sidebar {
+        display: none;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown {
+        display: block;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown h3,
+    .portico-landing.integrations .integration-categories-dropdown h4 {
+        font-weight: 400;
+        margin: 0 25px;
+        padding: 12px 20px;
+        border-bottom: 1px solid hsl(208, 46%, 93%);
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown .dropdown-toggle {
+        position: relative;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown i {
+        position: absolute;
+        top: 10px;
+        right: 36px;
+        font-size: 24px;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown .dropdown-list {
+        display: none;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown h3 {
+        border-top: 1px solid hsl(208, 46%, 93%);
+        border-left: 1px solid hsl(208, 46%, 93%);
+        border-right: 1px solid hsl(208, 46%, 93%);
+        font-size: 1em;
+        text-align: left;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown h4 {
+        border-left: 1px solid #E4EDF5;
+        border-right: 1px solid #E4EDF5;
+        transition: all 0.3s ease;
+        font-size: .9em;
+    }
+
+    .portico-landing.integrations .integration-categories-dropdown h4.selected,
+    .portico-landing.integrations .integration-categories-dropdown h4:hover {
+        background-color: hsl(170, 65%, 85%);
+        color: hsl(170, 72%, 32%);
+    }
+
+    .portico-landing.integrations .integration-lozenges {
+        text-align: center;
+    }
+}
+
+@media (max-width: 830px) {
+    .portico-landing.integrations .integration-lozenge {
+        width: 134px;
+        height: 180px;
+    }
+
+    .portico-landing.integrations .integration-lozenge .integration-logo {
+        margin: 34px auto 15px;
+        height: 45px;
+    }
+
+    .portico-landing.integrations .integration-lozenge .integration-name {
+        font-size: 1em;
+    }
+
+    .portico-landing.integrations .integration-lozenge .integration-category {
+        font-size: .8em;
+    }
+}
+
 @media (max-width: 768px) {
     nav,
     .features {
@@ -1918,21 +2129,12 @@ a:not(.no-style):hover:before {
     }
 
     #integration-instruction-block .integration-lozenge {
-        float: none;
-        position: absolute;
-        top: -74px;
-        right: 0px;
-        width: 50px;
-        height: 54px;
-    }
-
-    #integration-instruction-block .integration-lozenge span {
         display: none;
     }
 
     #integration-list-link {
-        top: -100px;
+        top: -40px;
-        left: 0px;
+        left: 35px;
     }
 
     .integration-instructions {
@@ -1948,6 +2150,15 @@ a:not(.no-style):hover:before {
         padding-top: 20px;
     }
 
+    .portico-landing.integrations .searchbar-reset {
+        width: 445px;
+    }
+
+    .portico-landing.integrations .searchbar input {
+        width: 375px;
+        margin: 0 auto;
+    }
+
     .platform.image {
         display: none !important;
     }
@@ -2123,6 +2334,19 @@ a:not(.no-style):hover:before {
     }
 }
 
+@media (max-width: 550px) {
+    .portico-landing.integrations .searchbar-reset {
+        width: 100%;
+    }
+
+    .portico-landing.integrations .searchbar input {
+        width: -moz-calc(100% - 80px);
+        width: -webkit-calc(100% - 80px);
+        width: -o-calc(100% - 80px);
+        width: calc(100% - 80px);
+    }
+}
+
 @media (max-device-width: 450px) {
     nav {
         padding-bottom: 105px;
@@ -2143,7 +2367,7 @@ a:not(.no-style):hover:before {
     }
 
     .portico-landing.integrations .main .padded-content {
-        padding: 20px;
+        padding: 40px 0;
     }
 
     .main .padded-content {
@@ -2164,4 +2388,28 @@ a:not(.no-style):hover:before {
     .portico-landing.hello .integrations .integration-icons .integration-logo {
         width: 60px;
     }
+
+    .portico-landing.integrations .integration-lozenge {
+        width: 120px;
+    }
+}
+
+@media (max-width: 357px) {
+    .portico-landing.integrations .integration-lozenge {
+        width: 108px;
+        height: 160px;
+    }
+
+    .portico-landing.integrations .integration-lozenge .integration-logo {
+        margin: 28px auto 10px;
+        height: 45px;
+    }
+
+    .portico-landing.integrations .integration-lozenge .integration-name {
+        font-size: .9em;
+    }
+
+    .portico-landing.integrations .integration-lozenge .integration-category {
+        font-size: .77em;
+    }
 }

static/styles/portico.css

@@ -664,19 +664,6 @@ a.bottom-signup-button {
     border-radius: 20%;
 }
 
-.integration-lozenges {
-    text-align: center;
-}
-
-.integration-lozenge {
-    width: 125px;
-    background: hsl(0, 0%, 93%);
-    border-radius: 10px;
-    margin: 15px 5px 0px 5px;
-    display: inline-block;
-    vertical-align: top;
-}
-
 .integration-instruction-block .integration-lozenge {
     float: left;
     margin-top: 5px;
@@ -695,12 +682,6 @@ a.bottom-signup-button {
     text-decoration: none;
 }
 
-.integration-lozenge .integration-logo {
-    width: 125px;
-    height: auto;
-    display: block;
-}
-
 .integration-lozenge .integration-label {
     display: block;
     text-align: center;
@@ -708,17 +689,8 @@ a.bottom-signup-button {
     padding-top: 10px;
 }
 
-.integration-lozenge .integration-label-secondary {
-    display: block;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    padding-bottom: 5px;
-    color: hsl(0, 0%, 66%);
-}
-
 .integration-instructions {
-    margin-left: 150px;
+    margin-left: 180px;
 }
 
 #integration-instructions-group {
@@ -791,6 +763,7 @@ a.bottom-signup-button {
 .integration-instruction-block {
     position: relative;
     margin-top: 15px;
+    padding: 0 40px;
 }
 
 #integration-list-link {

templates/zerver/integrations/index.html

@@ -38,47 +38,65 @@
             </h2>
         </div>
 
+        <div id="integration-search">
+            <div class="searchbar">
+                <div class="searchbar-reset">
+                    <i class="icon-vector-search" aria-hidden="true"></i>
+                    <input type="text" placeholder="{{ _('Search integrations') }}"/>
+                </div>
+            </div>
+        </div>
+
     <div id="integration-instruction-block" class="integration-instruction-block">
        <a href="#!" id="integration-list-link"><i class="icon-vector-circle-arrow-left"></i><span>Back to list</span></a>
     </div>
     <div class="clear-float"></div>
 
-    <div class="integration-lozenges">
+    <div class="integration-categories-dropdown">
-      {% for integration in integrations_dict.values() %}
+        <div class="dropdown-toggle">
-        {% if integration.is_enabled() %}
+            <h3>{% trans %}View all categories{% endtrans %}</h3>
-          <div class="integration-lozenge integration-{{ integration.name }}">
+            <i class="icon-vector-angle-right" aria-hidden="true"></i>
-             <a class="integration-link integration-{{ integration.name }}" href="#{{ integration.name }}">
+        </div>
-                 <div class="square-wrapper">
+        <div class="dropdown-list">
-                     <img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.display_name }} logo" />
+            <h4 class="selected">All</h4>
-                 </div>
+            {% for category in categories_dict.values() %}
-               {% if integration.secondary_line_text %}
+                <h4>{{ category }}</h4>
-                 <span class="integration-label" style="padding-bottom: 0px;">{{ integration.display_name }}</span>
+            {% endfor %}
-                 <span class="integration-label-secondary">{{ integration.secondary_line_text }}</span>
+        </div>
-               {% else %}
-                 <span class="integration-label">{{ integration.display_name}}</span>
-               {% endif %}
-             </a>
-          </div>
-        {% endif %}
-      {% endfor %}
     </div>
 
-    <div class="portico-page-header extra" id="hubot-integrations"><a href="#" class="no-style"><i class="icon-vector-gears portico-page-header-icon"></i>Integrations available via Hubot</a></div>
+    <div class="catalog">
-    <p class="extra">The official <a class="integration-link integration-hubot" href="#hubot"><span class="integration-label">Hubot</span></a>
+        <div class="integration-categories-sidebar">
-    integration provides an extension point for additional Zulip integrations. </p><p class="extra"> A non-comprehensive list of integrations available through
+            <h3>{% trans %}Categories{% endtrans %}</h3>
-    <a class="integration-link integration-hubot" href="#hubot"><span class="integration-label">Hubot</span></a> follows below:</p>
+            <h4 class="selected">All</h4>
-
+            {% for category in categories_dict.values() %}
-    <div class="integration-lozenges">
+                <h4>{{ category }}</h4>
-    {% for integration in hubot_lozenges_dict.values() %}
+            {% endfor %}
-        <div class="integration-lozenge integration-{{ integration.name }}">
+        </div>
-           <a class="integration-link integration-{{ integration.name }}" href="{{ integration.git_url }}">
+
-               <div class="square-wrapper">
+        <div class="integration-lozenges">
-                   <img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.logo_alt }} logo" />
+            {% for integration in integrations_dict.values() %}
-               </div>
+                {% if integration.is_enabled() %}
-               <span class="integration-label">{{ integration.display_name}}</span>
+                    <a href="#{{ integration.name }}" class="no-style">
-           </a>
+                        <div class="integration-lozenge integration-{{ integration.name }}"
+                            data-categories="{{ integration.categories }}"
+                            data-name="{{ integration.display_name }}">
+                            <img class="integration-logo" src="/{{ integration.logo }}"
+                                 alt="{{ integration.display_name }} logo"/>
+                            {% if integration.secondary_line_text %}
+                            <h3 class="integration-name with-secondary">{{ integration.display_name }}</h3>
+                            <h4 class="integration-secondary-line-text">
+                                {{ integration.secondary_line_text }}
+                            </h4>
+                            {% else %}
+                            <h3 class="integration-name">{{ integration.display_name }}</h3>
+                            {% endif %}
+                            <h4 class="integration-category">{{ integration.categories[0] }}</h4>
+                        </div>
+                    </a>
+                {% endif %}
+            {% endfor %}
         </div>
-      {% endfor %}
     </div>
 
 <div id="integration-instructions-group">