Skip to content

Commit

Permalink
product-pages: Create catalog visuals in /integrations.
Browse files Browse the repository at this point in the history 
Responsive designs for the categories sidebar, categories dropdown,
and integration tiles.

Also removed the Hubot integrations section. TODO: Consider how to
reinclude information from HUBOT_LOZENGES.
  • Loading branch information
@jackrzhang
jackrzhang committed Jun 20, 2017
1 parent 060d19c commit a97a885
Show file tree
Hide file tree
Showing 6 changed files with 266 additions and 120 deletions.
29 changes: 25 additions & 4 deletions static/js/portico/landing-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,9 @@ var integration_events = function () {
$(".inner-content").removeClass("show");
setTimeout(function () {
instructionbox.hide();
$(".integration-lozenges").addClass("hide");
$(".extra, #integration-main-text, #integration-search").hide();
$(".integration-categories-dropdown").addClass('hide');
$(".integrations .catalog").addClass('hide');
$(".extra, #integration-main-text, #integration-search").css("display", "none");

instructionbox.append(currentblock);
instructionbox.show();
Expand All @@ -78,24 +79,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();
instructionbox.hide();
$lozenge_icon.remove();
currentblock.appendTo("#integration-instructions-group");

$(".inner-content").addClass("show");
$(".integration-categories-dropdown").removeClass('hide');
$(".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');
}
}

Expand Down Expand Up @@ -219,6 +224,22 @@ var events = function () {
if (/\/hello\/*/.test(window.location.pathname)) {
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.
Expand Down
230 changes: 193 additions & 37 deletions static/styles/landing-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -1681,8 +1681,15 @@ a:not(.no-style):hover:before {
text-align: center;
}

.portico-landing #integration-search {
margin-bottom: 30px;
}

.portico-landing.integrations .searchbar {
width: 100%;
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;
Expand Down Expand Up @@ -1712,52 +1719,124 @@ a:not(.no-style):hover:before {
border: 1px solid #4fc0ad;
}

.portico-landing.integrations i.icon-vector-search {
.portico-landing.integrations .searchbar i.icon-vector-search {
position: absolute;
left: 20px;
top: 13px;
font-size: 19px;
color: #4fc0ad;
}

.portico-landing.integrations .integration-lozenges {
.portico-landing.integrations .catalog {
margin-top: 20px;
padding: 0 30px;
}

.portico-landing.integrations .integration-categories-sidebar {
float: left;
width: 200px;
padding: 0 10px 0 50px;
margin: 0 0 0 0;
}

.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: #F2FFF9;
color: #4fc0ad;
cursor: pointer;
}

.portico-landing.integrations .integration-categories-dropdown {
cursor: pointer;
margin: 30px 0;
display: none;
}

.portico-landing.integrations .integration-lozenges {
overflow: hidden;
text-align: center;
}

.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 #E4EDF5;
color: #414e67;
text-align: center;
transition: all 0.3s ease;
}

.portico-landing.integrations .integration-lozenge:hover {
box-shadow: 0px 0px 40px rgba(0,0,0,0.1);
background: #fefefe;
-webkit-box-shadow: 1px 5px 20px 5px rgba(0,0,0,0.08);
-moz-box-shadow: 1px 5px 20px 5px rgba(0,0,0,0.08);
box-shadow: 1px 5px 20px 5px rgba(0,0,0,0.08);
}

.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: #666;
.portico-landing.integrations .integration-lozenge .integration-name {
font-size: 1.2em;
font-weight: 400;
margin-bottom: 0;
}

.portico-landing.integrations .integration-lozenge .integration-category {
font-size: .85em;
margin-top: 5px;
font-weight: 400;
color: rgba(25, 31, 40, 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) {
Expand Down Expand Up @@ -1861,10 +1940,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) {
Expand Down Expand Up @@ -1941,6 +2016,76 @@ 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;
transition: all 0.3 ease;
}

.portico-landing.integrations .integration-categories-dropdown h3,
.portico-landing.integrations .integration-categories-dropdown h4 {
font-weight: 400;
margin: 0;
padding: 12px 20px;
border-bottom: 1px solid #E4EDF5;
}

.portico-landing.integrations .integration-categories-dropdown .dropdown-toggle {
position: relative;
}

.portico-landing.integrations .integration-categories-dropdown i {
position: absolute;
top: 10px;
right: 21px;
font-size: 24px;
}

.portico-landing.integrations .integration-categories-dropdown .dropdown-list {
display: none;
}

.portico-landing.integrations .integration-categories-dropdown h3 {
border-top: 1px solid #E4EDF5;
font-size: 1em;
text-align: left;
}

.portico-landing.integrations .integration-categories-dropdown h4 {
font-size: .9em;
}

.portico-landing.integrations .integration-categories-dropdown h4.selected,
.portico-landing.integrations .integration-categories-dropdown h4:hover {
background-color: #F2FFF9;
color: #4fc0ad;
}
}

@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 {
Expand All @@ -1957,21 +2102,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 {
Expand Down Expand Up @@ -2204,7 +2340,7 @@ a:not(.no-style):hover:before {
}

.portico-landing.integrations .main .padded-content {
padding: 20px;
padding: 40px 0;
}

.main .padded-content {
Expand All @@ -2226,3 +2362,23 @@ a:not(.no-style):hover:before {
width: 60px;
}
}

@media (max-width: 357px) {
.portico-landing.integrations .integration-lozenge {
width: 118px;
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;
}
}

0 comments on commit a97a885

Please sign in to comment.