Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

portico: Create search/catalog visuals in /integrations. 

Responsive designs for the search bar, categories sidebar,
categories dropdown, and integration tiles.
This commit is contained in:
Jack Zhang 2017-06-12 16:06:47 -07:00 committed by Tim Abbott
parent 9d242ad7df
commit 3f9bfd2ae2
4 changed files with 377 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/js/portico/landing-page.js
View File

@ -68,8 +68,9 @@ var integration_events = function () {
$(".inner-content").removeClass("show");
setTimeout(function () {
instructionbox.hide();
$(".integration-lozenges").addClass("hide");
$(".extra, #integration-main-text").hide();
$(".integration-categories-dropdown").css('display', 'none');
$(".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").show();
$(".extra, #integration-main-text, #integration-search").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.

330
static/styles/landing-page.css
View File

@ -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);
-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);
border: 1px solid hsl(170, 47%, 53%);
}
.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 {
opacity: 0;
transform: translateY(-200px);
.portico-landing.integrations .integration-categories-sidebar h4.selected,
.portico-landing.integrations .integration-categories-sidebar h4:hover {
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);
background: hsl(0, 0%, 99%);
border: 1px solid hsl(170, 47%, 53%);
}
.portico-landing.integrations .integration-lozenge img {
max-width: 80px;
max-height: 80px;
display: block;
margin: 10% auto 0 auto;
border-radius: 8px;
.portico-landing.integrations .integration-lozenge .integration-logo {
margin: 34px auto 20px;
height: 60px;
}
.portico-landing.integrations .integration-lozenge .integration-label {
font-weight: 600;
font-size: 20px;
color: hsl(0, 0%, 40%);
.portico-landing.integrations .integration-lozenge .integration-name {
font-size: 1.2em;
font-weight: 400;
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;
left: 0px;
top: -40px;
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;
}
}

31
static/styles/portico.css
View File

@ -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 {

86
templates/zerver/integrations/index.html
View File

@ -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">
{% for integration in integrations_dict.values() %}
{% if integration.is_enabled() %}
<div class="integration-lozenge integration-{{ integration.name }}">
<a class="integration-link integration-{{ integration.name }}" href="#{{ integration.name }}">
<div class="square-wrapper">
<img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.display_name }} logo" />
</div>
{% if integration.secondary_line_text %}
<span class="integration-label" style="padding-bottom: 0px;">{{ integration.display_name }}</span>
<span class="integration-label-secondary">{{ integration.secondary_line_text }}</span>
{% else %}
<span class="integration-label">{{ integration.display_name}}</span>
{% endif %}
</a>
</div>
{% endif %}
{% endfor %}
<div class="integration-categories-dropdown">
<div class="dropdown-toggle">
<h3>{% trans %}View all categories{% endtrans %}</h3>
<i class="icon-vector-angle-right" aria-hidden="true"></i>
</div>
<div class="dropdown-list">
<h4 class="selected">All</h4>
{% for category in categories_dict.values() %}
<h4>{{ category }}</h4>
{% endfor %}
</div>
</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>
<p class="extra">The official <a class="integration-link integration-hubot" href="#hubot"><span class="integration-label">Hubot</span></a>
integration provides an extension point for additional Zulip integrations. </p><p class="extra"> A non-comprehensive list of integrations available through
<a class="integration-link integration-hubot" href="#hubot"><span class="integration-label">Hubot</span></a> follows below:</p>
<div class="integration-lozenges">
{% for integration in hubot_lozenges_dict.values() %}
<div class="integration-lozenge integration-{{ integration.name }}">
<a class="integration-link integration-{{ integration.name }}" href="{{ integration.git_url }}">
<div class="square-wrapper">
<img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.logo_alt }} logo" />
</div>
<span class="integration-label">{{ integration.display_name}}</span>
</a>
<div class="catalog">
<div class="integration-categories-sidebar">
<h3>{% trans %}Categories{% endtrans %}</h3>
<h4 class="selected">All</h4>
{% for category in categories_dict.values() %}
<h4>{{ category }}</h4>
{% endfor %}
</div>
<div class="integration-lozenges">
{% for integration in integrations_dict.values() %}
{% if integration.is_enabled() %}
<a href="#{{ integration.name }}" class="no-style">
<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">
@ -96,7 +114,7 @@
{% endif %}
{% endfor %}
</div>
</div> <!-- .inner-content -->
</div> <!-- .padded-content -->
</div> <!-- .main -->