Skip to content
This repository was archived by the owner on Jun 26, 2018. It is now read-only.

DP-9145 design tweaks to relationship indicators #856

Open
clair0917 wants to merge 14 commits into
base: dev
Choose a base branch
from
Open

DP-9145 design tweaks to relationship indicators #856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2e26b07
DP-9145: text tweaks
clair0917 May 30, 2018
d3c4719
DP-9145: better tagcount functionlaity
clair0917 May 31, 2018
19ee7dd
DP-9145: alignment updates
clair0917 Jun 4, 2018
3bf60f7
DP-9145: button placement updates
clair0917 Jun 6, 2018
132ca3d
DP-9145: final button alignment
clair0917 Jun 6, 2018
c5ce001
DP-9145: style cleanup
clair0917 Jun 6, 2018
73d348c
Merge remote-tracking branch 'upstream/dev' into DP-9145--design-twea…
clair0917 Jun 6, 2018
f7cd973
DP-9145: Add changelog and backstop files
clair0917 Jun 6, 2018
c746ff9
Merge remote-tracking branch 'upstream/dev' into DP-9145--design-twea…
clair0917 Jun 11, 2018
03e18ff
DP-9145: smaller bottom margin for terms
clair0917 Jun 11, 2018
a911251
DP-9145: remove let keyword to reinitialize rather than redefine
clair0917 Jun 11, 2018
b7231de
DP-9145: udpate vertical spacing for terms
clair0917 Jun 19, 2018
ff5051e
DP-9145: updated backstop files
clair0917 Jun 19, 2018
164b456
DP-9145: conflict fix
clair0917 Jun 19, 2018
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
Binary file modified backstopjs/reference/regression_page_organization_0_document_0_phone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified backstopjs/reference/regression_page_organization_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions changelogs/DP-9145.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
___DESCRIPTION___
Changed
Patch
- DP-9145: Design tweaks to relationship indicators


4 changes: 4 additions & 0 deletions styleguide/source/assets/js/modules/headerTags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ export default function (window,document,$,undefined) {
// recount the hidden tags and update the button text
setTimeout(function(){
$hiddenTag = $tagWrapper.find('.ma__relationship-indicators--term:hidden');
console.log($hiddenTag);

tagCount = $hiddenTag.length;
console.log(tagCount)
$buttonCounter.text(tagCount);
$tagState.text('more');
}, 500);
Expand Down
74 changes: 38 additions & 36 deletions styleguide/source/assets/scss/02-molecules/_relationship-indicators.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,53 @@
.ma__relationship-indicators {
@include ma-container;
@include clearfix;
display: flex;
flex-direction: column;
padding: 18px 20px 10px;

@media ($bp-large-min) {
flex-direction: row;
}

&--section {
width: 100%;
min-width: 50%;
@include ma-container;
@include clearfix;
display: flex;
flex-direction: column;
padding: 18px 20px 10px;

&.tags-open {
flex-direction: column;
@media ($bp-large-min) {
flex-direction: row;
}

@media ($bp-medium-min) {
padding-right: 2rem;
&--section {
width: 100%;
min-width: 50%;
display: flex;
flex-wrap: nowrap;

&.tags-open {
flex-direction: column;
}

@media ($bp-medium-min) {
padding-right: 2rem;
}
}
}

&--terms {
display: flex;
flex-wrap: wrap;
&--terms {
display: flex;
flex-wrap: nowrap;

@media ($bp-large-min) {
flex-wrap: nowrap;
.tags-open & {
flex-wrap: wrap;
}

.tags-open & {
flex-wrap: wrap;
}
@media ($bp-large-min) {
flex-wrap: nowrap;
}
}
}

&--term {
margin: 0 5px 10px 0;
width: 100%;
&--term {
margin: 0 5px 5px 0;
width: 100%;

@media ($bp-x-small-min) {
width: auto;
}
@media ($bp-x-small-min) {
width: auto;
}

.tags-open & {
display: block;
@media ($bp-medium-min) {
margin-top: 5px;
margin-bottom: 0;
}
}
}
}
248 changes: 117 additions & 131 deletions styleguide/source/assets/scss/06-theme/02-molecules/_relationship-indicators.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,125 @@
.ma__relationship-indicators {
font-weight: 600;
font-size: 16px;

&--label {
text-transform: uppercase;
margin-right: 10px;
white-space: nowrap;

@media ($bp-medium-min) {
padding-top: 6px;
}
}

&--section {

a {
display: block;
border: 2px solid;
padding: 3px 5px;
width: 100%;

@media ($bp-x-small-min) {
width: auto;
display: inline-block;
}
}

button {
@include ma-button-reset;
@include ma-link-underline;
@include ma-chevron;
margin-top: -6px;
padding-top: 0;
padding-left: 0;
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
display: none;

&:after {
opacity: 0.5;
margin-left: 0;
border-width: 3px;
height: 8px;
width: 8px;
transform: translateY(-45%) rotate(45deg);
}

.is-open::after {
transform: translateY(-55%) rotate(-135deg);
}

@media ($bp-medium-min) {
align-self: flex-start;
padding-top: 14px;
padding-left: 10px;
}
}

&.offered-by {
display: flex;

@media ($bp-medium-min) {
flex-wrap: nowrap;
}

.ma__relationship-indicators--term {
display: none;

@media ($bp-large-min) {
display: block;

&:nth-child(n+2) {
display: none;
}
}
}

a {
color: $c-theme-green;
border-color: rgba($c-theme-green, 0.2);

&:hover {
border-color: $c-theme-green;
font-weight: 600;
font-size: 16px;
&--label {
text-transform: uppercase;
letter-spacing: 0.1em;
margin-right: 10px;
white-space: nowrap;
@media ($bp-medium-min) {
padding-top: 6px;
}
}

button {
color: $c-theme-green;
align-self: flex-end;

.tags-open & {
align-self: basline;
}

@media ($bp-large-min) {
align-self: baseline;
}
&--section {
a {
display: block;
border: 2px solid;
padding: 1px 5px;
line-height: 1.2;
width: 100%;
@media ($bp-x-small-min) {
width: auto;
display: inline-block;
}
}

.tag-count {
display: none;

@media ($bp-large-min) {
display: inline-block;
}
button {
@include ma-button-reset;
@include ma-link-underline;
@include ma-chevron;
text-transform: capitalize;
align-self: flex-start;
margin-top: 5px;
padding-top: 0;
padding-left: 0;
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
display: none;
@media ($bp-small-min) {
margin-top: 3px;
}
@media ($bp-medium-min) {
align-self: baseline;
margin-top: 8px;
}
.tag-state {
text-transform: none;
}
&:after {
opacity: 0.5;
border-width: 3px;
height: 8px;
width: 8px;
transform: translateY(-45%) rotate(45deg);
}
&.is-open::after {
transform: translateY(-55%) rotate(-135deg);
}
}
}
}

&.related-to {
padding-top: 15px;
flex-wrap: wrap;

@media ($bp-large-min) {
padding-top: 0;
}

.ma__relationship-indicators--term {

&:nth-child(n+2) {
display: none;
&.offered-by {
display: flex;
@media ($bp-medium-min) {
flex-wrap: nowrap;
}
.ma__relationship-indicators--term {
display: none;
@media ($bp-large-min) {
display: block;
&:nth-child(n+2) {
display: none;
}
}
}
a {
color: $c-theme-green;
border-color: rgba($c-theme-green, 0.2);
&:hover {
border-color: $c-theme-green;
}
}
button {
color: $c-theme-green;
.tag-state {
display: none;
@media ($bp-large-min) {
display: inline-block;
}
}
&.is-open {
.tag-count {
display: none;
@media ($bp-large-min) {
display: inline-block;
}
}
.tag-state {
display: inline-block;
}
}
.tags-open & {
align-self: basline;
}
}
}
}

a {
border-color: rgba($c-theme-blue, 0.2);

&:hover {
border-color: $c-theme-blue;
&.related-to {
padding-top: 15px;
@media ($bp-large-min) {
padding-top: 0;
}
.ma__relationship-indicators--term {
&:nth-child(n+2) {
display: none;
}
}
a {
border-color: rgba($c-theme-blue, 0.2);
&:hover {
border-color: $c-theme-blue;
}
}
button {
color: $c-theme-blue;
}
}
}

button {
color: $c-theme-blue;
}
}
}
}