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.

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

[SDPA-2632] Featured Nav improvements. #391

Merged
merged 2 commits into from
Jun 13, 2019
Merged
Changes from 1 commit
Commits
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
Next Next commit
[SDPA-2632] Improved Featured Navigation card configurations.
Supports the following additional configurations:
* Image with title and no summary
* No image with title and summary
* No image with title with and no summary
alan-cole committed Jun 13, 2019
commit 884c23896c3409ac59b49df4ec31a5b3b9cb53f4
116 changes: 85 additions & 31 deletions packages/Molecules/Card/CardNavigationFeatured.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
<template>
<rpl-link class="rpl-card-navigation-featured" :href="url" v-if="url" :innerWrap="false">
<div class="rpl-card-navigation-featured__inner">
<img class="rpl-card-navigation-featured__image" :src="image" alt="">
<div class="rpl-card-navigation-featured__meta_and_title" v-if="title || date || topic">
<img v-if="image" class="rpl-card-navigation-featured__image" :src="image" alt="" />
<div
v-if="title || date || topic"
class="rpl-card-navigation-featured__meta_and_title"
:class="{
'rpl-card-navigation-featured__meta_and_title--image': image,
'rpl-card-navigation-featured__meta_and_title--no-image': !image,
'rpl-card-navigation-featured__meta_and_title--summary': summary
}"
>
<div class="rpl-card-navigation-featured__meta" v-if="date || topic">
<span class="rpl-card-navigation-featured__date" v-if="date">{{ formatDate(date) }}</span>
<span class="rpl-card-navigation-featured__tag" v-if="topic">{{ topic }}</span>
@@ -13,8 +21,15 @@
><span>{{ title }}</span></h2>
</div>
</div>
<p v-if="summary" class="rpl-card-navigation-featured__summary">{{ summary }}</p>
<rpl-icon v-if="summary" symbol="arrow_right_primary" color="white" />
<p
v-if="summary"
class="rpl-card-navigation-featured__summary"
:class="{
'rpl-card-navigation-featured__summary--image': image,
'rpl-card-navigation-featured__summary--meta-no-image': !image && (title || date || topic)
}"
>{{ summary }}</p>
<rpl-icon v-if="!(image && !summary)" symbol="arrow_right_primary" color="white" />
</rpl-link>
</template>

@@ -61,13 +76,18 @@ export default {
's': ('s', 1.5em, 'bold')
) !default;
$rpl-card-navigation-featured-summary-color: rpl_color('white') !default;
$rpl-card-navigation-featured-summary-background: transparent url(rpl_graphic_right_angled_triangle('secondary')) no-repeat bottom right !default;
$rpl-card-navigation-featured-summary-background: $rpl-card-navigation-featured-background url(rpl_graphic_right_angled_triangle('secondary')) no-repeat bottom right !default;
$rpl-card-navigation-featured-summary-background-hover: rpl_color('secondary') url(rpl_graphic_right_angled_triangle('primary')) no-repeat bottom right !default;
$rpl-card-navigation-featured-summary-xs: ($rpl-space * 11) $rpl-component-padding-xs ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-s: ($rpl-space * 6) $rpl-component-padding-s ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-m: ($rpl-space * 6) $rpl-component-padding-m ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-l: ($rpl-space * 11) $rpl-component-padding-l ($rpl-space * 7) !default;
$rpl-card-navigation-featured-summary-xl: ($rpl-space * 6) $rpl-component-padding-xl ($rpl-space * 7) !default;
$rpl-card-navigation-featured-title-xs: ($rpl-space * 9) $rpl-component-padding-xs !default;
$rpl-card-navigation-featured-title-s: ($rpl-space * 9) $rpl-component-padding-s !default;
$rpl-card-navigation-featured-title-m: ($rpl-space * 9) $rpl-component-padding-m !default;
$rpl-card-navigation-featured-title-l: ($rpl-space * 9) $rpl-component-padding-l !default;
$rpl-card-navigation-featured-title-xl: ($rpl-space * 9) $rpl-component-padding-xl !default;
$rpl-card-navigation-featured-meta-background: rpl_color('secondary') !default;
$rpl-card-navigation-featured-meta-text-color: rpl_color('white') !default;
$rpl-card-navigation-featured-meta-padding: 0 $rpl-space-2 !default;
@@ -84,20 +104,18 @@ export default {
background-color: $rpl-card-navigation-featured-background;
max-width: $rpl-card-navigation-featured-max-width;
border-radius: $rpl-card-navigation-featured-border-radius;
background: $rpl-card-navigation-featured-summary-background;

@include rpl_print_hidden;

&:hover,
&:focus {
@include rpl_dropshadow;
background: $rpl-card-navigation-featured-summary-background-hover;

&.rpl-link {
text-decoration: none;
}

#{$root}__summary {
background: $rpl-card-navigation-featured-summary-background-hover;
}
}

&__inner {
@@ -113,29 +131,61 @@ export default {
}

&__meta_and_title {
position: absolute;
left: $rpl-component-padding-xs;
right: $rpl-component-padding-xs;
bottom: $rpl-space * -8;
z-index: 1;
@include rpl_breakpoint('s') {
left: $rpl-component-padding-s;
right: $rpl-component-padding-s;
bottom: ($rpl-space * 5);
}
@include rpl_breakpoint('m') {
left: $rpl-component-padding-m;
right: $rpl-component-padding-m;
}
@include rpl_breakpoint('l') {
left: $rpl-component-padding-l;
right: $rpl-component-padding-l;
bottom: $rpl-space * -8;
&--no-image {
padding: $rpl-card-navigation-featured-title-xs;
@include rpl_breakpoint('s') {
padding: $rpl-card-navigation-featured-title-s;
}
@include rpl_breakpoint('l') {
padding: $rpl-card-navigation-featured-title-m;
}
@include rpl_breakpoint('l') {
padding: $rpl-card-navigation-featured-title-l;
}
@include rpl_breakpoint('xl') {
padding: $rpl-card-navigation-featured-title-xl;
}

&#{$root}__meta_and_title--summary {
padding-bottom: 0;
}
}
@include rpl_breakpoint('xl') {
left: $rpl-component-padding-xl;
right: $rpl-component-padding-xl;

&--image {
position: absolute;
left: $rpl-component-padding-xs;
right: $rpl-component-padding-xs;
bottom: ($rpl-space * 5);
z-index: 1;
@include rpl_breakpoint('s') {
left: $rpl-component-padding-s;
right: $rpl-component-padding-s;
}
@include rpl_breakpoint('m') {
left: $rpl-component-padding-m;
right: $rpl-component-padding-m;
}
@include rpl_breakpoint('l') {
left: $rpl-component-padding-l;
right: $rpl-component-padding-l;
}
@include rpl_breakpoint('xl') {
left: $rpl-component-padding-xl;
right: $rpl-component-padding-xl;
}

&#{$root}__meta_and_title--summary {
bottom: $rpl-space * -8;
@include rpl_breakpoint('s') {
bottom: ($rpl-space * 5);
}
@include rpl_breakpoint('l') {
bottom: $rpl-space * -8;
}
@include rpl_breakpoint('xl') {
bottom: ($rpl-space * 5);
}
}
}
}

@@ -173,10 +223,10 @@ export default {
}

&__summary {
background: $rpl-card-navigation-featured-summary-background;
@include rpl_typography_ruleset($rpl-card-navigation-featured-summary-ruleset);
@include rpl_text_color($rpl-card-navigation-featured-summary-color);
margin: 0;
min-height: $rpl-space * 12;
padding: $rpl-card-navigation-featured-summary-xs;
@include rpl_breakpoint('s') {
padding: $rpl-card-navigation-featured-summary-s;
@@ -190,6 +240,10 @@ export default {
@include rpl_breakpoint('xl') {
padding: $rpl-card-navigation-featured-summary-xl;
}

&--meta-no-image {
padding-top: $rpl-space-4;
}
}

.rpl-icon {