From b7bbafa48ed0db6ee8585d6aa918b389e495f966 Mon Sep 17 00:00:00 2001 From: rfultz Date: Mon, 26 Aug 2019 16:12:44 -0400 Subject: [PATCH 1/5] Build the smallest / stacked version --- fec/fec/static/scss/base.scss | 1 + .../scss/components/_fec-org-chart.scss | 242 ++++++++++++++++++ 2 files changed, 243 insertions(+) create mode 100644 fec/fec/static/scss/components/_fec-org-chart.scss diff --git a/fec/fec/static/scss/base.scss b/fec/fec/static/scss/base.scss index 278aedfcdc..3151819e36 100644 --- a/fec/fec/static/scss/base.scss +++ b/fec/fec/static/scss/base.scss @@ -30,6 +30,7 @@ @import "components/toggles"; @import "components/tooltips"; @import "components/type-styles"; +@import "components/fec-org-chart"; @import "components/articles"; @import "components/agendas"; diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss new file mode 100644 index 0000000000..ad221291ac --- /dev/null +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -0,0 +1,242 @@ +// Org Chart Styles +// +// Everything related to the org chart +// + +$gutterSize: 10px; +$lineDashed: thin dotted grey; +$lineSolid: 2px solid grey; +$lineSolidDark: thin solid black; + +#fec-orgchart { + display: block; + float: left; + list-style-type: none; + margin: 0; + padding: 0; + position: relative; + + li { + display: block; + float: left; + list-style-type: none; + margin-left: 0; + padding: $gutterSize 0 0 $gutterSize; + position: relative; + width: 100%; + + & + li { // all li after another li + padding-top: $gutterSize; + } + &:before { + // top half of left-side line, including the horizontal line in the middle + border-left: $lineSolidDark; + border-bottom: $lineSolidDark; + content: ""; + height: 50%; + left: 0; + position: absolute; + top: 0; + width: 10px; + + } + &:after { + // bottom half of left-side line + border-left: $lineSolidDark; + content: ""; + height: 50%; + left: 0; + position: absolute; + top: 50%; + width: 10px; + } + &:last-child { + &:after { + display: none; + } + } + + div { + border: $lineSolidDark; + list-style-type: none; + margin: 0; + min-height: 80px; + padding: 2rem; + position: relative; + text-align: center; + + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + flex-direction: column; + + span { + display: block; + line-height: 1em; + + &:first-child { + font-size: 14px; + font-weight: bold; + line-height: 1em; + } + &:nth-child(2) { + font-family: Karla, sans-serif; + font-size: 12px; + font-weight: normal; + } + } + } + + &.team { + padding-left: $gutterSize; + padding-bottom: $gutterSize * 2; + + &:before { + content: ""; + border-bottom: none; + border-left: $lineSolidDark; + border-right: none; + border-top: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: $gutterSize; + } + + &:last-child { + &:before { + display: none; + } + &:after { + display: none; + } + } + } + // for divs that are direct descendants of the li.team, these are the team leads + &.team > div:before { + content: ""; + position: absolute; + left: calc(-#{$gutterSize} - 1px); + border-left: $lineSolidDark; + border-bottom: $lineSolidDark; + top: -#{$gutterSize * 1.5}; + height: calc(50% + #{$gutterSize * 1.5}); + width: $gutterSize; + } + + ul { + display: block; + float: left; + margin: 0; + padding: 0 0 0 $gutterSize; + position: relative; + width: 100%; + + &:before { + border-left: $lineSolidDark; + content: ""; + display: block; + height: 50%; + position: absolute; + left: 0; + bottom: 50%; + width: $gutterSize; + border-bottom: $lineSolidDark; + } + &:last-child { + &:before { + display: none; + } + &:after { + display: none; + } + } + } + + &.team-comms { + padding: 0 $gutterSize #{$gutterSize * 2}; + + &:before { + content: ""; + border-bottom: none; + border-left: $lineSolidDark; + border-right: none; + border-top: $lineSolidDark; + height: calc(50% + #{$gutterSize}); + left: 0; + position: absolute; + top: calc(50% - #{$gutterSize}); + width: 10px; + } + &:after { + border-bottom: none; + border-left: none; + border-right: $lineDashed; + border-top: $lineDashed; + content: ""; + display: block; + height: calc(50% + #{$gutterSize + 1}); + left: auto; + position: absolute; + right: 0; + top: calc(50% - #{$gutterSize}); + width: $gutterSize; + } + & div:before { + display: none; + } + & div:after { + display: none; + } + } + &.team-ig { + float: right; + padding: $gutterSize $gutterSize #{$gutterSize * 2} #{$gutterSize * 2}; + + &:before { + border-bottom: none; + border-top: none; + bottom: auto; + height: 100%; + top: 0; + } + + & > div:before { + border-bottom: $lineDashed; + border-left: none; + border-right: $lineDashed; + border-top: none; + bottom: 50%; + content: ""; + height: calc(50% + #{$gutterSize}); + position: absolute; + left: auto; + right: calc(-#{$gutterSize} - 1px); + top: auto; + width: $gutterSize; + } + & > div:after { + display: none; + } + + ul { + padding: 0 $gutterSize 0 0; + + li { + padding: $gutterSize $gutterSize 0 0; + + &:before { + border-left: none; + border-right: $lineDashed; + border-bottom: $lineDashed; + left: auto; + right: 0; + width: $gutterSize; + } + } + } + } + } +} From f16fe923fccc56d12b6a4874fcee2d701903b58f Mon Sep 17 00:00:00 2001 From: rfultz Date: Mon, 26 Aug 2019 23:11:07 -0400 Subject: [PATCH 2/5] Build the wider version --- .../scss/components/_fec-org-chart.scss | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss index ad221291ac..d18d51c06b 100644 --- a/fec/fec/static/scss/components/_fec-org-chart.scss +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -240,3 +240,170 @@ $lineSolidDark: thin solid black; } } } + + +@media (min-width: 768px) { + #fec-orgchart { + display: grid; + grid-template-areas: + "comms comms comms comms ig" + "team team team team ig"; + grid-template-columns: repeat(5, 20%); + grid-template-rows: auto; + grid-row-gap: 0; + grid-column-gap: 0; + justify-items: center; + + li { + padding-left: 0; + + ul { + padding-left: 0; + + li:first-child { + padding-top: #{$gutterSize * 2}; + } + } + div { + min-height: 130px; + } + + &:before { + border-bottom: $lineSolid; + border-left: $lineSolid; + left: -#{$gutterSize}; + } + &:after { + border-left: $lineSolid; + left: -#{$gutterSize}; + } + &.team { + padding: 0 $gutterSize; + width: 100%; + + & > div { + &:before { + border-bottom: none; + border-left: $lineSolid; + border-top: $lineSolid; + padding-bottom: $gutterSize; + top: 50%; + } + // &:after { + // border-left: $lineSolid; + // } + } + + &:before { + content: ""; + border-bottom: none; + border-right: $lineSolid; + border-left: none; + border-top: $lineSolid; + height: $gutterSize; + left: 0; + position: absolute; + top: -#{$gutterSize}; + width: 50%; + } + &:after { + border-left: none; + border-top: $lineSolid; + content: ""; + height: $gutterSize; + left: 50%; + position: absolute; + top: -#{$gutterSize}; + width: 50%; + } + + &.team-comms { + grid-area: comms; + max-width: 40%; + padding-bottom: $gutterSize * 2; + + &:before { + // From comms to the teams + content: ""; + border-bottom: none; + border-right: $lineSolid; + border-left: none; + border-top: none; + display: block; + height: 10px; + left: 0; + position: absolute; + top: calc(100% - #{$gutterSize * 2}); + width: 50%; + } + &:after { + // From comms to IG + border-bottom: none; + border-left: none; + border-right: none; + border-top: $lineDashed; + content: ""; + display: block; + height: calc(50% - #{$gutterSize}); + left: calc(100% - #{$gutterSize}); + position: absolute; + right: auto; + top: $gutterSize * 4; + width: 80%; + } + div { + min-height: 60px; + } + } + &.team-ig { + grid-area: ig; + padding-top: $gutterSize * 5; + + &:before { + border-right: $lineDashed; + border-top: $lineDashed; + top: $gutterSize * 4; + } + &:after { + display: none; + } + ul { + padding: 0; + + li { + padding-right: 0; + + &:before { + border-bottom: none; + border-right: $lineSolid; + border-top: none; + height: $gutterSize * 2; + left: 0; + top: 0; + width: 50%; + } + } + } + div:before { + display: none; + } + } + } + } + li.team.team-ig + li.team { + // The first .team after a .team-ig + &:before { + display: none; + } + &:after { + border-left: $lineSolid; + } + } + li.team:last-child { + // The last .team + &:before { + display: block; + } + } + } // close @media 768 +} From 47c5428fb171b26e951b0df8a2d5a9ab1952ef20 Mon Sep 17 00:00:00 2001 From: rfultz Date: Tue, 27 Aug 2019 10:45:01 -0400 Subject: [PATCH 3/5] Polish style, add documentation and html example --- .../scss/components/_fec-org-chart.scss | 236 +++++++++++++++--- 1 file changed, 208 insertions(+), 28 deletions(-) diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss index d18d51c06b..24ebb5de09 100644 --- a/fec/fec/static/scss/components/_fec-org-chart.scss +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -1,12 +1,16 @@ // Org Chart Styles // // Everything related to the org chart +// Should be included inside the css of whatever page it's included // +$colorStandard: #b2b1b6; +$colorGreyHover: #d6d7d9; + $gutterSize: 10px; -$lineDashed: thin dotted grey; -$lineSolid: 2px solid grey; -$lineSolidDark: thin solid black; +$lineDashed: thin dashed $colorStandard; +$lineSolid: 2px solid $colorStandard; // line for the wider layout +$lineSolidDark: thin solid $colorStandard; #fec-orgchart { display: block; @@ -56,29 +60,39 @@ $lineSolidDark: thin solid black; } } - div { + a { + align-items: center; border: $lineSolidDark; + border-radius: 4px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; list-style-type: none; margin: 0; min-height: 80px; - padding: 2rem; + padding: 1rem; position: relative; text-align: center; + transition: border-color .1s; - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - flex-direction: column; + &:hover { + border-color: $colorGreyHover; + transition: border-color .25s; + } + &:not([href*="/"]) { + // if the link doesn't contain a slash (e.g. if it's blank), let's remove its clicks/taps + pointer-events: none; + } span { display: block; - line-height: 1em; + line-height: 1.2em; &:first-child { font-size: 14px; font-weight: bold; - line-height: 1em; + margin-bottom: .1em; } &:nth-child(2) { font-family: Karla, sans-serif; @@ -114,8 +128,8 @@ $lineSolidDark: thin solid black; } } } - // for divs that are direct descendants of the li.team, these are the team leads - &.team > div:before { + // for links that are direct descendants of the li.team, these are the team leads + &.team > a:before { content: ""; position: absolute; left: calc(-#{$gutterSize} - 1px); @@ -184,10 +198,10 @@ $lineSolidDark: thin solid black; top: calc(50% - #{$gutterSize}); width: $gutterSize; } - & div:before { + & a:before { display: none; } - & div:after { + & a:after { display: none; } } @@ -203,7 +217,7 @@ $lineSolidDark: thin solid black; top: 0; } - & > div:before { + & > a:before { border-bottom: $lineDashed; border-left: none; border-right: $lineDashed; @@ -217,7 +231,7 @@ $lineSolidDark: thin solid black; top: auto; width: $gutterSize; } - & > div:after { + & > a:after { display: none; } @@ -247,8 +261,8 @@ $lineSolidDark: thin solid black; display: grid; grid-template-areas: "comms comms comms comms ig" - "team team team team ig"; - grid-template-columns: repeat(5, 20%); + "1fr 1fr 1fr 1fr ig"; + grid-template-columns: repeat(5, 1fr); grid-template-rows: auto; grid-row-gap: 0; grid-column-gap: 0; @@ -264,24 +278,25 @@ $lineSolidDark: thin solid black; padding-top: #{$gutterSize * 2}; } } - div { - min-height: 130px; + a { + min-height: 115px; + border: $lineSolid; } &:before { border-bottom: $lineSolid; border-left: $lineSolid; - left: -#{$gutterSize}; + left: -#{$gutterSize - 1}; } &:after { border-left: $lineSolid; - left: -#{$gutterSize}; + left: -#{$gutterSize - 1}; } &.team { padding: 0 $gutterSize; width: 100%; - & > div { + & > a { &:before { border-bottom: none; border-left: $lineSolid; @@ -351,8 +366,8 @@ $lineSolidDark: thin solid black; top: $gutterSize * 4; width: 80%; } - div { - min-height: 60px; + a { + min-height: 80px; } } &.team-ig { @@ -384,7 +399,7 @@ $lineSolidDark: thin solid black; } } } - div:before { + a:before { display: none; } } @@ -407,3 +422,168 @@ $lineSolidDark: thin solid black; } } // close @media 768 } + +/** + * This is the HTML I've been using for the org chart. + * It's just a
    with an ID of fec-orgchart. + * Each of the first-level
  • have a class="team". + * The directly inside each
  • is the team lead. + * Following each team lead is a
      with no classes. + * Inside each of those
        are
      • s, also without classes. + * Each person is a with no classes. + * Each person's name is in a ; the job title is in a different +*/ + +/* + +*/ \ No newline at end of file From 33057ad0bdbc14b70087c262bc7966d996eb70ed Mon Sep 17 00:00:00 2001 From: rfultz Date: Wed, 18 Sep 2019 09:26:33 -0400 Subject: [PATCH 4/5] Rename vars to avoid any possible conflict --- .../scss/components/_fec-org-chart.scss | 162 +++++++++--------- 1 file changed, 81 insertions(+), 81 deletions(-) diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss index 24ebb5de09..9730d946a2 100644 --- a/fec/fec/static/scss/components/_fec-org-chart.scss +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -4,13 +4,13 @@ // Should be included inside the css of whatever page it's included // -$colorStandard: #b2b1b6; -$colorGreyHover: #d6d7d9; +$orgChart_colorStandard: #b2b1b6; +$orgChart_colorGreyHover: #d6d7d9; -$gutterSize: 10px; -$lineDashed: thin dashed $colorStandard; -$lineSolid: 2px solid $colorStandard; // line for the wider layout -$lineSolidDark: thin solid $colorStandard; +$orgChart_gutterSize: 10px; +$orgChart_lineDashed: thin dashed $orgChart_colorStandard; +$orgChart_lineSolid: 2px solid $orgChart_colorStandard; // line for the wider layout +$orgChart_lineSolidDark: thin solid $orgChart_colorStandard; #fec-orgchart { display: block; @@ -25,17 +25,17 @@ $lineSolidDark: thin solid $colorStandard; float: left; list-style-type: none; margin-left: 0; - padding: $gutterSize 0 0 $gutterSize; + padding: $orgChart_gutterSize 0 0 $orgChart_gutterSize; position: relative; width: 100%; & + li { // all li after another li - padding-top: $gutterSize; + padding-top: $orgChart_gutterSize; } &:before { // top half of left-side line, including the horizontal line in the middle - border-left: $lineSolidDark; - border-bottom: $lineSolidDark; + border-left: $orgChart_lineSolidDark; + border-bottom: $orgChart_lineSolidDark; content: ""; height: 50%; left: 0; @@ -46,7 +46,7 @@ $lineSolidDark: thin solid $colorStandard; } &:after { // bottom half of left-side line - border-left: $lineSolidDark; + border-left: $orgChart_lineSolidDark; content: ""; height: 50%; left: 0; @@ -62,7 +62,7 @@ $lineSolidDark: thin solid $colorStandard; a { align-items: center; - border: $lineSolidDark; + border: $orgChart_lineSolidDark; border-radius: 4px; display: flex; flex-direction: column; @@ -77,7 +77,7 @@ $lineSolidDark: thin solid $colorStandard; transition: border-color .1s; &:hover { - border-color: $colorGreyHover; + borgChart_order-color: $colorGreyHover; transition: border-color .25s; } &:not([href*="/"]) { @@ -103,20 +103,20 @@ $lineSolidDark: thin solid $colorStandard; } &.team { - padding-left: $gutterSize; - padding-bottom: $gutterSize * 2; + padding-left: $orgChart_gutterSize; + padding-bottom: $orgChart_gutterSize * 2; &:before { content: ""; border-bottom: none; - border-left: $lineSolidDark; + border-left: $orgChart_lineSolidDark; border-right: none; border-top: none; height: 100%; left: 0; position: absolute; top: 0; - width: $gutterSize; + width: $orgChart_gutterSize; } &:last-child { @@ -132,32 +132,32 @@ $lineSolidDark: thin solid $colorStandard; &.team > a:before { content: ""; position: absolute; - left: calc(-#{$gutterSize} - 1px); - border-left: $lineSolidDark; - border-bottom: $lineSolidDark; - top: -#{$gutterSize * 1.5}; - height: calc(50% + #{$gutterSize * 1.5}); - width: $gutterSize; + left: calc(-#{$orgChart_gutterSize} - 1px); + border-left: $orgChart_lineSolidDark; + border-bottom: $orgChart_lineSolidDark; + top: -#{$orgChart_gutterSize * 1.5}; + height: calc(50% + #{$orgChart_gutterSize * 1.5}); + width: $orgChart_gutterSize; } ul { display: block; float: left; margin: 0; - padding: 0 0 0 $gutterSize; + padding: 0 0 0 $orgChart_gutterSize; position: relative; width: 100%; &:before { - border-left: $lineSolidDark; + border-left: $orgChart_lineSolidDark; content: ""; display: block; height: 50%; position: absolute; left: 0; bottom: 50%; - width: $gutterSize; - border-bottom: $lineSolidDark; + width: $orgChart_gutterSize; + border-bottom: $orgChart_lineSolidDark; } &:last-child { &:before { @@ -170,33 +170,33 @@ $lineSolidDark: thin solid $colorStandard; } &.team-comms { - padding: 0 $gutterSize #{$gutterSize * 2}; + padding: 0 $orgChart_gutterSize #{$orgChart_gutterSize * 2}; &:before { content: ""; border-bottom: none; - border-left: $lineSolidDark; + border-left: $orgChart_lineSolidDark; border-right: none; - border-top: $lineSolidDark; - height: calc(50% + #{$gutterSize}); + border-top: $orgChart_lineSolidDark; + height: calc(50% + #{$orgChart_gutterSize}); left: 0; position: absolute; - top: calc(50% - #{$gutterSize}); + top: calc(50% - #{$orgChart_gutterSize}); width: 10px; } &:after { border-bottom: none; border-left: none; - border-right: $lineDashed; - border-top: $lineDashed; + border-right: $orgChart_lineDashed; + border-top: $orgChart_lineDashed; content: ""; display: block; - height: calc(50% + #{$gutterSize + 1}); + height: calc(50% + #{$orgChart_gutterSize + 1}); left: auto; position: absolute; right: 0; - top: calc(50% - #{$gutterSize}); - width: $gutterSize; + top: calc(50% - #{$orgChart_gutterSize}); + width: $orgChart_gutterSize; } & a:before { display: none; @@ -207,7 +207,7 @@ $lineSolidDark: thin solid $colorStandard; } &.team-ig { float: right; - padding: $gutterSize $gutterSize #{$gutterSize * 2} #{$gutterSize * 2}; + padding: $orgChart_gutterSize $orgChart_gutterSize #{$orgChart_gutterSize * 2} #{$orgChart_gutterSize * 2}; &:before { border-bottom: none; @@ -218,36 +218,36 @@ $lineSolidDark: thin solid $colorStandard; } & > a:before { - border-bottom: $lineDashed; + border-bottom: $orgChart_lineDashed; border-left: none; - border-right: $lineDashed; + border-right: $orgChart_lineDashed; border-top: none; bottom: 50%; content: ""; - height: calc(50% + #{$gutterSize}); + height: calc(50% + #{$orgChart_gutterSize}); position: absolute; left: auto; - right: calc(-#{$gutterSize} - 1px); + right: calc(-#{$orgChart_gutterSize} - 1px); top: auto; - width: $gutterSize; + width: $orgChart_gutterSize; } & > a:after { display: none; } ul { - padding: 0 $gutterSize 0 0; + padding: 0 $orgChart_gutterSize 0 0; li { - padding: $gutterSize $gutterSize 0 0; + padding: $orgChart_gutterSize $orgChart_gutterSize 0 0; &:before { border-left: none; - border-right: $lineDashed; - border-bottom: $lineDashed; + border-right: $orgChart_lineDashed; + border-bottom: $orgChart_lineDashed; left: auto; right: 0; - width: $gutterSize; + width: $orgChart_gutterSize; } } } @@ -275,80 +275,80 @@ $lineSolidDark: thin solid $colorStandard; padding-left: 0; li:first-child { - padding-top: #{$gutterSize * 2}; + padding-top: #{$orgChart_gutterSize * 2}; } } a { min-height: 115px; - border: $lineSolid; + border: $orgChart_lineSolid; } &:before { - border-bottom: $lineSolid; - border-left: $lineSolid; - left: -#{$gutterSize - 1}; + border-bottom: $orgChart_lineSolid; + border-left: $orgChart_lineSolid; + left: -#{$orgChart_gutterSize - 1}; } &:after { - border-left: $lineSolid; - left: -#{$gutterSize - 1}; + border-left: $orgChart_lineSolid; + left: -#{$orgChart_gutterSize - 1}; } &.team { - padding: 0 $gutterSize; + padding: 0 $orgChart_gutterSize; width: 100%; & > a { &:before { border-bottom: none; - border-left: $lineSolid; - border-top: $lineSolid; - padding-bottom: $gutterSize; + border-left: $orgChart_lineSolid; + border-top: $orgChart_lineSolid; + padding-bottom: $orgChart_gutterSize; top: 50%; } // &:after { - // border-left: $lineSolid; + // border-left: $orgChart_lineSolid; // } } &:before { content: ""; border-bottom: none; - border-right: $lineSolid; + border-right: $orgChart_lineSolid; border-left: none; - border-top: $lineSolid; - height: $gutterSize; + border-top: $orgChart_lineSolid; + height: $orgChart_gutterSize; left: 0; position: absolute; - top: -#{$gutterSize}; + top: -#{$orgChart_gutterSize}; width: 50%; } &:after { border-left: none; - border-top: $lineSolid; + border-top: $orgChart_lineSolid; content: ""; - height: $gutterSize; + height: $orgChart_gutterSize; left: 50%; position: absolute; - top: -#{$gutterSize}; + top: -#{$orgChart_gutterSize}; width: 50%; } &.team-comms { grid-area: comms; max-width: 40%; - padding-bottom: $gutterSize * 2; + padding-bottom: $orgChart_gutterSize * 2; &:before { // From comms to the teams content: ""; border-bottom: none; - border-right: $lineSolid; + border-right: $orgChart_lineSolid; border-left: none; border-top: none; display: block; height: 10px; left: 0; position: absolute; - top: calc(100% - #{$gutterSize * 2}); + top: calc(100% - #{$orgChart_gutterSize * 2}); width: 50%; } &:after { @@ -356,14 +356,14 @@ $lineSolidDark: thin solid $colorStandard; border-bottom: none; border-left: none; border-right: none; - border-top: $lineDashed; + border-top: $orgChart_lineDashed; content: ""; display: block; - height: calc(50% - #{$gutterSize}); - left: calc(100% - #{$gutterSize}); + height: calc(50% - #{$orgChart_gutterSize}); + left: calc(100% - #{$orgChart_gutterSize}); position: absolute; right: auto; - top: $gutterSize * 4; + top: $orgChart_gutterSize * 4; width: 80%; } a { @@ -372,12 +372,12 @@ $lineSolidDark: thin solid $colorStandard; } &.team-ig { grid-area: ig; - padding-top: $gutterSize * 5; + padding-top: $orgChart_gutterSize * 5; &:before { - border-right: $lineDashed; - border-top: $lineDashed; - top: $gutterSize * 4; + border-right: $orgChart_lineDashed; + border-top: $orgChart_lineDashed; + top: $orgChart_gutterSize * 4; } &:after { display: none; @@ -390,9 +390,9 @@ $lineSolidDark: thin solid $colorStandard; &:before { border-bottom: none; - border-right: $lineSolid; + border-right: $orgChart_lineSolid; border-top: none; - height: $gutterSize * 2; + height: $orgChart_gutterSize * 2; left: 0; top: 0; width: 50%; @@ -411,7 +411,7 @@ $lineSolidDark: thin solid $colorStandard; display: none; } &:after { - border-left: $lineSolid; + border-left: $orgChart_lineSolid; } } li.team:last-child { From f6743fc0eb50c76806b66c41d4c8c0975e87cc98 Mon Sep 17 00:00:00 2001 From: rfultz Date: Wed, 18 Sep 2019 09:40:16 -0400 Subject: [PATCH 5/5] Change media query Also fixed a typo and lint warning --- fec/fec/static/scss/components/_fec-org-chart.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss index 9730d946a2..4473f7136d 100644 --- a/fec/fec/static/scss/components/_fec-org-chart.scss +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -77,7 +77,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; transition: border-color .1s; &:hover { - borgChart_order-color: $colorGreyHover; + border-color: $orgChart_colorGreyHover; transition: border-color .25s; } &:not([href*="/"]) { @@ -255,8 +255,12 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } } - -@media (min-width: 768px) { +// With the current page template (with the side nav), +// $med (640px) is too small but $lg (860px) is way too large. +// 768px would be ideal. +// Until we get a full-width template, this will have to do. +// TODO - When we get the full-width template, remove these comments and adjust the media query properly +@include media($med) { #fec-orgchart { display: grid; grid-template-areas: @@ -586,4 +590,4 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard;
    -*/ \ No newline at end of file +*/