Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LHC-191 #81

Merged
merged 3 commits into from
Apr 22, 2019
Merged

LHC-191 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c2f2b3
LHC-191 add top margin to alerts on category pages
rdai10 Apr 19, 2019
5669abf
LHC-191 update the look of product landing pages
rdai10 Apr 19, 2019
42f0e00
LHC-191 update snapshot
rdai10 Apr 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 13 additions & 22 deletions theme/src/css/_zendesk-category-section.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,49 +26,40 @@

.categories-main,
.section-content {
margin-bottom: 6rem;
margin-bottom: 4rem;

.alert {
margin-top: $margin-md;
}
}

.products-landing,
.products-landing-tab-content {
display: flex;
flex-wrap: wrap;
}

.products-landing {
.product-card {
width: 30%;
}
}

.products-landing-tab-content {
.product-card {
width: 45%;
}
}

.products-landing-tablist {
.products-landing-tabs {
border-bottom: 1px solid $color-divider;
color: $secondary-text-color;
padding-top: $padding-default;

.nav-item {
margin-bottom: 0.5rem;
}
margin-bottom: $margin-default;
margin-top: 2.25rem;

.nav-link {
&:focus {
box-shadow: none;
}

&:hover,
&.active {
background-color: $color-active;
border-radius: $border-radius;
color: $color-primary-focus;
color: $color-default;
font-weight: $font-weight-semi-bold;
}

&.active {
font-weight: $font-weight-semi-bold;
&.btn-unstyled {
padding-left: 0;
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions theme/src/css/_zendesk-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@ $table-list-border-x-width: 0 !default;
$table-responsive-margin-bottom: 3rem !default; // 48px

$nav-link-padding-x: 1.5rem !default; // 24px
$nav-underline-link-highlight-left: 0 !default;
$nav-underline-link-highlight-right: 1.5rem !default; // 24px

$navbar-height: 4rem !default;
$navbar-padding-x: 0 !default;
Expand Down
28 changes: 11 additions & 17 deletions theme/src/js/components/ProductTabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {CardMenu} from 'liferay-help-center-megamenu';

import Alert from './Alert';

const TabContent = ({cardMenuClassName, content, layoutClassName}) => (
<section aria-labelledby={content.ariaLabelledby} class={layoutClassName} role="tabpanel">
const TabContent = ({cardMenuClassName, content}) => (
<section aria-labelledby={content.ariaLabelledby} role="tabpanel">
<CardMenu
className={cardMenuClassName}
configs={content.configs}
Expand All @@ -26,8 +26,7 @@ TabContent.PropTypes = {
configs: PropTypes.object
}
)
),
layoutClassName: PropTypes.string
)
};

class TabList extends preact.Component {
Expand Down Expand Up @@ -72,19 +71,17 @@ class TabList extends preact.Component {
) : null;

return (
<div class="row">
<div>
{alertBody && (
<div class="col-md-12">
<Alert
children={alertBody}
leadingText={alert.leadingText}
/>
</div>
<Alert
children={alertBody}
leadingText={alert.leadingText}
/>
)}

{tabList && (
<div class="col-md-3 products-landing-tablist">
<ul class="nav nav-stacked" role="tablist">
<div class="products-landing-tabs">
<ul class="nav nav-underline" role="tablist">
{tabList.map(
tab => {
const className = getCN(
Expand All @@ -111,11 +108,8 @@ class TabList extends preact.Component {

{content && (
<TabContent
cardMenuClassName={
tabList ? 'products-landing-tab-content' : 'products-landing'
}
cardMenuClassName="products-landing-tab-content"
content={content}
layoutClassName={tabList ? 'col-md-9' : 'col-md-12'}
/>
)}
</div>
Expand Down
75 changes: 31 additions & 44 deletions theme/src/js/components/__tests__/__snapshots__/ProductTabs.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,39 @@

exports[`ProductTabs renders Alert with text and link 1`] = `
<div>
<div
class="row"
>
<div>
<div
class="col-md-12"
class="alert alert-info"
role="alert"
>
<div
class="alert alert-info"
role="alert"
<span
class="alert-indicator"
>
<span
class="alert-indicator"
<svg
class="lexicon-icon lexicon-icon-info-circle"
role="img"
>
<svg
class="lexicon-icon lexicon-icon-info-circle"
role="img"
>
<use
href="#info-circle"
/>
</svg>
</span>

<span>
Alert
<a
href="/"
title="Link"
>
Link
</a>
</span>
</div>
<use
href="#info-circle"
/>
</svg>
</span>

<span>
Alert
<a
href="/"
title="Link"
>
Link
</a>
</span>
</div>
<div
class="col-md-3 products-landing-tablist"
class="products-landing-tabs"
>
<ul
class="nav nav-stacked"
class="nav nav-underline"
role="tablist"
>
<li
Expand Down Expand Up @@ -73,7 +67,6 @@ exports[`ProductTabs renders Alert with text and link 1`] = `
</div>
<section
aria-labelledby="tab-0"
class="col-md-9"
role="tabpanel"
>
<div
Expand Down Expand Up @@ -266,15 +259,13 @@ exports[`ProductTabs renders Alert with text and link 1`] = `

exports[`ProductTabs renders correctly with KB tabs and all access tabs 1`] = `
<div>
<div
class="row"
>
<div>

<div
class="col-md-3 products-landing-tablist"
class="products-landing-tabs"
>
<ul
class="nav nav-stacked"
class="nav nav-underline"
role="tablist"
>
<li
Expand Down Expand Up @@ -307,7 +298,6 @@ exports[`ProductTabs renders correctly with KB tabs and all access tabs 1`] = `
</div>
<section
aria-labelledby="tab-0"
class="col-md-9"
role="tabpanel"
>
<div
Expand Down Expand Up @@ -500,15 +490,13 @@ exports[`ProductTabs renders correctly with KB tabs and all access tabs 1`] = `

exports[`ProductTabs renders correctly with non KB tabs and all access tabs 1`] = `
<div>
<div
class="row"
>
<div>

<div
class="col-md-3 products-landing-tablist"
class="products-landing-tabs"
>
<ul
class="nav nav-stacked"
class="nav nav-underline"
role="tablist"
>
<li
Expand Down Expand Up @@ -541,7 +529,6 @@ exports[`ProductTabs renders correctly with non KB tabs and all access tabs 1`]
</div>
<section
aria-labelledby="tab-0"
class="col-md-9"
role="tabpanel"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_analytics_cloud.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc 'analytics_cloud-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="analyticsCloudProductPage"></div>
<div class="col-md-8 offset-md-2" id="analyticsCloudProductPage"></div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_commerce.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc 'commerce-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="commerceProductPage"></div>
<div class="col-md-8 offset-md-2" id="commerceProductPage"></div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_dxp_7_0.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc '7_0-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="dxp70ProductPage"></div>
<div class="col-md-8 offset-md-2" id="dxp70ProductPage"></div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_dxp_7_1.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc '7_1-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="dxp71ProductPage"></div>
<div class="col-md-8 offset-md-2" id="dxp71ProductPage"></div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_dxp_cloud.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc 'dxp_cloud-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="dxpCloudProductPage"></div>
<div class="col-md-8 offset-md-2" id="dxpCloudProductPage"></div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_portal_5_2.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc '5_2-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="portal52ProductPage"></div>
<div class="col-md-8 offset-md-2" id="portal52ProductPage"></div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions theme/src/resources/templates/category_pages/liferay_portal_6_0.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<div class="categories-main row">
<div class="category-heading col-md-12">
<div class="category-heading col-md-8 offset-md-2">
<h1>
{{dc '6_0-page_heading'}}
</h1>
Expand All @@ -18,7 +18,7 @@
{{/if}}
</div>

<div class="col-md-12" id="portal60ProductPage"></div>
<div class="col-md-8 offset-md-2" id="portal60ProductPage"></div>
</div>
</div>

Expand Down
Loading