From 95bc3c907d14131d72cc3c830b1773cd5e8be233 Mon Sep 17 00:00:00 2001 From: Alyssa Date: Mon, 11 Jan 2021 14:36:00 -0800 Subject: [PATCH 1/5] github-issues (html and scss files) updated to resolve visual issues. --- _guide-pages/github-issues.html | 2 +- _sass/components/guide-pages/github-issue-guide.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/_guide-pages/github-issues.html b/_guide-pages/github-issues.html index b75e7e9f18..17beead627 100644 --- a/_guide-pages/github-issues.html +++ b/_guide-pages/github-issues.html @@ -12,7 +12,7 @@ - name: Member Analytics link: '#member-analytics' card-type: guide-page -status: coming-soon +status: active display: true category: development svg: svg/toolkit-default-card-image.svg diff --git a/_sass/components/guide-pages/github-issue-guide.scss b/_sass/components/guide-pages/github-issue-guide.scss index cdf516436f..4a8663d044 100644 --- a/_sass/components/guide-pages/github-issue-guide.scss +++ b/_sass/components/guide-pages/github-issue-guide.scss @@ -67,12 +67,12 @@ // VARIABLES FOR OVERLAY LINKS @mixin right-overlay { position: absolute; - left: 90%; + left: 70%; width: 7%; } @mixin right-text-overlay { position: absolute; - left: 97.5%; + left: 78%; } @mixin left-overlay { @@ -92,11 +92,11 @@ //RIGHT SIDE LINKS .assignees { @include right-overlay; - top: 17.5%; + top: 16%; + h4 { @include right-text-overlay; - top: 17.5%; + top: 16%; } } From c94b7f3c0d2d0a436642c2a76b99b2030db2ce9b Mon Sep 17 00:00:00 2001 From: Alyssa Date: Sun, 17 Jan 2021 16:45:22 -0800 Subject: [PATCH 2/5] visual issue resolved --- _guide-pages/github-issues.html | 2 +- _sass/components/guide-pages/github-issue-guide.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/_guide-pages/github-issues.html b/_guide-pages/github-issues.html index 17beead627..428b70e0d6 100644 --- a/_guide-pages/github-issues.html +++ b/_guide-pages/github-issues.html @@ -28,7 +28,7 @@
An effective Hack for LA Github issue includes the following components:
Click any section link below to jump down to its description


- + diff --git a/_sass/components/guide-pages/github-issue-guide.scss b/_sass/components/guide-pages/github-issue-guide.scss index 4a8663d044..da3077e7f5 100644 --- a/_sass/components/guide-pages/github-issue-guide.scss +++ b/_sass/components/guide-pages/github-issue-guide.scss @@ -67,12 +67,12 @@ // VARIABLES FOR OVERLAY LINKS @mixin right-overlay { position: absolute; - left: 70%; - width: 7%; + left: 94%; + width: 7%; } @mixin right-text-overlay { position: absolute; - left: 78%; + left: 102%; } @mixin left-overlay { From df8cdc00bc057774ea67151352444fe2292752f4 Mon Sep 17 00:00:00 2001 From: Alyssa Date: Sat, 30 Jan 2021 22:47:58 -0800 Subject: [PATCH 3/5] Restructured github-issue-guide file to utilize classes from guide-pages. Arrows stabilized. --- .../guide-pages/github-issue-guide.scss | 295 ++++++++---------- 1 file changed, 125 insertions(+), 170 deletions(-) diff --git a/_sass/components/guide-pages/github-issue-guide.scss b/_sass/components/guide-pages/github-issue-guide.scss index da3077e7f5..f9187b94fc 100644 --- a/_sass/components/guide-pages/github-issue-guide.scss +++ b/_sass/components/guide-pages/github-issue-guide.scss @@ -1,228 +1,183 @@ -//Issue Template Classes -.issue-template-container { - position: relative; -} - -.issue-template-code { - border: 1px solid $color-pink; - background-color: $color-pink; - font-family: monospace; - text-align: left; - font-size: 0.8em; -} - -.copy-button { - position: absolute; - z-index: 10; - background: white; - border: 0.5px solid white; - border-radius: 4px; - color: black; - width: 85px; - height: 30px; - right: 1%; - top: 1%; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); -} - -.copy-button:hover { - background: white; - color: black; -} - -.clipboard { - max-width: none; - width: auto; - max-height: 22px; -} - -.green-text { - color: #58915b; -} - -.blue-text { - color: #407BFF; -} - -// -// STYLING FOR Example of a Good End-to-End Issue OVERLAY LINKS -// -.overlay-links { - position: relative; - - h4 { - font-size: 0.85em; - } -} - -.link-section p { - text-align: center; -} - -.github-issues-screenshot { - max-width: none; - width: 90%; -} - -// VARIABLES FOR OVERLAY LINKS -@mixin right-overlay { - position: absolute; - left: 94%; - width: 7%; - } -@mixin right-text-overlay { - position: absolute; - left: 102%; -} - -@mixin left-overlay { - position: absolute; - right: 88%; - width: 7%; -} -@mixin left-text-overlay { - position: absolute; - right: 87%; - width: 10%; - direction: rtl; - text-align: start; -} - //INDIVIDUAL PLACEMENTS OF OVERLAY LINKS //RIGHT SIDE LINKS .assignees { - @include right-overlay; - top: 16%; + @media #{$bp-below-mobile} { + @include arrow-right-overlay (16%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (16%, 94%); + h4 { - @include right-text-overlay; - top: 16%; + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (15.5%, 103%); + text-align: right; + font-size: 0.4em; + } + @include arrow-right-text-overlay(16%, 102%); } } .labels { - @include right-overlay; - top: 21%; + @media #{$bp-below-mobile} { + @include arrow-right-overlay (21%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (21%, 94%); + h4 { - @include right-text-overlay; - top: 21%; + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (20.5%, 103%); + text-align: right; + font-size: 0.4em; + } + @include arrow-right-text-overlay(21%, 102%); } } .project-board { - @include right-overlay; - top: 27.5%; + @media #{$bp-below-mobile} { + @include arrow-right-overlay (27.5%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (27.5%, 94%); + h4 { - @include right-text-overlay; - top: 27.5%; + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (27%, 103%); + text-align: right; + font-size: 0.4em; + } + @include arrow-right-text-overlay(27.5%, 102%); } } .milestones { - @include right-overlay; - top: 36%; + @media #{$bp-below-mobile} { + @include arrow-right-overlay (36%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (36%, 94%); + h4 { - @include right-text-overlay; - top: 36%; + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (35.5%, 103%); + text-align: right; + font-size: 0.4em; + } + @include arrow-right-text-overlay(36%, 102%); } -} - -//LEFT SIDE LINKS -.left-pointer { - transform: rotate(180deg); } +//LEFT SIDE LINKS .title { - @include left-overlay; - right: 94%; - top: 9%; - - + h4 { - @include left-text-overlay; - top: 9%; - right: 92.5%; + @media #{$bp-below-mobile} { + @include arrow-left-overlay (9%, 99%); + font-size: 0.4em; } -} + @include arrow-left-overlay (9%, 94%); -.overview { - @include left-overlay; - top: 19%; - + h4 { - @include left-text-overlay; - top: 19%; + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (10.5%, 107.5%); + direction: rtl; + font-size: 0.3em; + } + @include arrow-left-text-overlay(10.5%, 102%); + transform: rotate(180deg); } } -.dependency { - @include left-overlay; - top: 25.5%; +.overview { + @media #{$bp-below-mobile} { + @include arrow-left-overlay (19%, 92.5%); + } + @include arrow-left-overlay (19%, 88.5%); + h4 { - @include left-text-overlay; - top: 25.5%; + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (20%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(20%, 96%); + transform: rotate(180deg); } } -.action-items { - @include left-overlay; - top: 30.5%; +.dependency { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(25.5%, 92.5%); + } + @include arrow-left-overlay (25.5%, 88.5%); + h4 { - @include left-text-overlay; - top: 30.5%; + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (26.5%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(27%, 96%); + transform: rotate(180deg); } } -.resources { - @include left-overlay; - top: 54.5%; - + h4 { - @include left-text-overlay; - top: 54.5%; +.action-items { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(31%, 92.5%); } -} - -.resume { - @include left-overlay; - top: 62.4%; + @include arrow-left-overlay (30.5%, 88.5%); + h4 { - @include left-text-overlay; - top: 62.4%; + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (33%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(33%, 96%); + transform: rotate(180deg); } } -//Scale overlay-text down on smaller screens -@media #{$bp-below-tablet} { - .overlay-links h4 { - font-size: 0.4em; +.resources { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(54.5%, 92.5%); } + @include arrow-left-overlay (54.5%, 88.5%); - .screenshot { - width: 85%; + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (56.5%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(57%, 96%); + transform: rotate(180deg); } +} - .clipboard { - max-height: 16px; +.resume { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(63%, 92.5%); } + @include arrow-left-overlay (62.5%, 88.5%); - .copy-button { - width: 70px; - height: 26px; - top: 0%; + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (64.5%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(64%, 96%); + transform: rotate(180deg); } -} - -.grayarrow { - width: 20px; - max-width: none; -} - -.pinkpointer { - width: 7%; } \ No newline at end of file From f21d881539c198eeb0cf121c1e56240d6aa12303 Mon Sep 17 00:00:00 2001 From: Alyssa Date: Sun, 21 Feb 2021 00:26:22 -0800 Subject: [PATCH 4/5] Updated Getting the Most Out of GitHub Guide Page css and html files to resolve text and alignment issues --- _guide-pages/github-issues.html | 5 +- .../guide-pages/github-issue-guide.scss | 337 +++++++++--------- 2 files changed, 173 insertions(+), 169 deletions(-) diff --git a/_guide-pages/github-issues.html b/_guide-pages/github-issues.html index 428b70e0d6..09fe645cdd 100644 --- a/_guide-pages/github-issues.html +++ b/_guide-pages/github-issues.html @@ -22,12 +22,12 @@ -
+

Example of a Good End-to-End Issue

An effective Hack for LA Github issue includes the following components:

Click any section link below to jump down to its description


-
+
@@ -61,6 +61,7 @@

RESOURCES/ INSTRUCTIONS

RESUME

+

This issue is shown in Preview mode

diff --git a/_sass/components/guide-pages/github-issue-guide.scss b/_sass/components/guide-pages/github-issue-guide.scss index f9187b94fc..6a081c24bc 100644 --- a/_sass/components/guide-pages/github-issue-guide.scss +++ b/_sass/components/guide-pages/github-issue-guide.scss @@ -1,183 +1,186 @@ -//INDIVIDUAL PLACEMENTS OF OVERLAY LINKS -//RIGHT SIDE LINKS -.assignees { - @media #{$bp-below-mobile} { - @include arrow-right-overlay (16%, 99%); - width: 7.65px; - height: 7px; - } - @include arrow-right-overlay (16%, 94%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (15.5%, 103%); - text-align: right; - font-size: 0.4em; +.github-issue-guide { + //INDIVIDUAL PLACEMENTS OF OVERLAY LINKS + //RIGHT SIDE LINKS + .assignees { + @media #{$bp-below-mobile} { + @include arrow-right-overlay (16%, 99%); + width: 7.65px; + height: 7px; } - @include arrow-right-text-overlay(16%, 102%); - } -} - -.labels { - @media #{$bp-below-mobile} { - @include arrow-right-overlay (21%, 99%); - width: 7.65px; - height: 7px; - } - @include arrow-right-overlay (21%, 94%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (20.5%, 103%); - text-align: right; - font-size: 0.4em; + @include arrow-right-overlay (16%, 94%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (15.5%, 103%); + text-align: right; + font-size: 0.1em; + } + @include arrow-right-text-overlay(16%, 102%); } - @include arrow-right-text-overlay(21%, 102%); } -} - -.project-board { - @media #{$bp-below-mobile} { - @include arrow-right-overlay (27.5%, 99%); - width: 7.65px; - height: 7px; + + .labels { + @media #{$bp-below-mobile} { + @include arrow-right-overlay (21%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (21%, 94%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (21%, 103%); + text-align: right; + font-size: 0.1em; + } + @include arrow-right-text-overlay(21%, 102%); + } } - @include arrow-right-overlay (27.5%, 94%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (27%, 103%); - text-align: right; - font-size: 0.4em; + + .project-board { + @media #{$bp-below-mobile} { + @include arrow-right-overlay (27.5%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (27.5%, 94%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (27%, 103%); + text-align: right; + font-size: 0.1em; + } + @include arrow-right-text-overlay(27.5%, 102%); } - @include arrow-right-text-overlay(27.5%, 102%); } -} - -.milestones { - @media #{$bp-below-mobile} { - @include arrow-right-overlay (36%, 99%); - width: 7.65px; - height: 7px; + + .milestones { + @media #{$bp-below-mobile} { + @include arrow-right-overlay (36%, 99%); + width: 7.65px; + height: 7px; + } + @include arrow-right-overlay (36%, 94%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-right-text-overlay (35.5%, 103%); + text-align: right; + font-size: 0.1em; + } + @include arrow-right-text-overlay(36%, 102%); + } } - @include arrow-right-overlay (36%, 94%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (35.5%, 103%); - text-align: right; + + //LEFT SIDE LINKS + .title { + @media #{$bp-below-mobile} { + @include arrow-left-overlay (9%, 99%); font-size: 0.4em; } - @include arrow-right-text-overlay(36%, 102%); - } -} - -//LEFT SIDE LINKS -.title { - @media #{$bp-below-mobile} { - @include arrow-left-overlay (9%, 99%); - font-size: 0.4em; - } - @include arrow-left-overlay (9%, 94%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (10.5%, 107.5%); - direction: rtl; - font-size: 0.3em; - } - @include arrow-left-text-overlay(10.5%, 102%); - transform: rotate(180deg); - } -} - -.overview { - @media #{$bp-below-mobile} { - @include arrow-left-overlay (19%, 92.5%); - } - @include arrow-left-overlay (19%, 88.5%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (20%, 100%); - direction: rtl; - text-align: start; - font-size: 0.3em; - } - @include arrow-left-text-overlay(20%, 96%); - transform: rotate(180deg); - } -} - -.dependency { - @media #{$bp-below-mobile} { - @include arrow-left-overlay(25.5%, 92.5%); - } - @include arrow-left-overlay (25.5%, 88.5%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (26.5%, 100%); - direction: rtl; - text-align: start; - font-size: 0.3em; - } - @include arrow-left-text-overlay(27%, 96%); - transform: rotate(180deg); + @include arrow-left-overlay (9%, 94%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (10.5%, 107.5%); + direction: rtl; + font-size: 0.3em; + } + @include arrow-left-text-overlay(10%, 102%); + transform: rotate(180deg); + } } -} - - -.action-items { - @media #{$bp-below-mobile} { - @include arrow-left-overlay(31%, 92.5%); + + .overview { + @media #{$bp-below-mobile} { + @include arrow-left-overlay (19%, 92.5%); + } + @include arrow-left-overlay (19%, 88.5%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (20%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(20%, 96%); + transform: rotate(180deg); + } } - @include arrow-left-overlay (30.5%, 88.5%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (33%, 100%); - direction: rtl; - text-align: start; - font-size: 0.3em; - } - @include arrow-left-text-overlay(33%, 96%); - transform: rotate(180deg); + + .dependency { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(25.5%, 92.5%); + } + @include arrow-left-overlay (25.5%, 88.5%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (26.5%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(27%, 96%); + transform: rotate(180deg); + } } -} - -.resources { - @media #{$bp-below-mobile} { - @include arrow-left-overlay(54.5%, 92.5%); + + + .action-items { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(31%, 92.5%); + } + @include arrow-left-overlay (30.5%, 88.5%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (33%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(33%, 96%); + transform: rotate(180deg); + } } - @include arrow-left-overlay (54.5%, 88.5%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (56.5%, 100%); - direction: rtl; - text-align: start; - font-size: 0.3em; - } - @include arrow-left-text-overlay(57%, 96%); - transform: rotate(180deg); + + .resources { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(54.5%, 92.5%); + } + @include arrow-left-overlay (54.5%, 88.5%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (56.5%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(57%, 96%); + transform: rotate(180deg); + } } -} - -.resume { - @media #{$bp-below-mobile} { - @include arrow-left-overlay(63%, 92.5%); + + .resume { + @media #{$bp-below-mobile} { + @include arrow-left-overlay(63%, 92.5%); + } + @include arrow-left-overlay (62.5%, 88.5%); + + + h4 { + @media #{$bp-below-mobile}{ + @include arrow-left-text-overlay (64.5%, 100%); + direction: rtl; + text-align: start; + font-size: 0.3em; + } + @include arrow-left-text-overlay(64%, 96%); + transform: rotate(180deg); + } } - @include arrow-left-overlay (62.5%, 88.5%); - - + h4 { - @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (64.5%, 100%); - direction: rtl; - text-align: start; - font-size: 0.3em; - } - @include arrow-left-text-overlay(64%, 96%); - transform: rotate(180deg); } -} \ No newline at end of file + \ No newline at end of file From 96639dfb05ae459656cfe22ad06cb0d21117c65b Mon Sep 17 00:00:00 2001 From: Alyssa Date: Sun, 21 Feb 2021 11:33:33 -0800 Subject: [PATCH 5/5] Updated text size and alignments --- .../guide-pages/github-issue-guide.scss | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/_sass/components/guide-pages/github-issue-guide.scss b/_sass/components/guide-pages/github-issue-guide.scss index 6a081c24bc..606c0b1f6f 100644 --- a/_sass/components/guide-pages/github-issue-guide.scss +++ b/_sass/components/guide-pages/github-issue-guide.scss @@ -11,9 +11,9 @@ + h4 { @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (15.5%, 103%); + @include arrow-right-text-overlay (16%, 102%); text-align: right; - font-size: 0.1em; + font-size: 0.3em; } @include arrow-right-text-overlay(16%, 102%); } @@ -29,9 +29,9 @@ + h4 { @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (21%, 103%); + @include arrow-right-text-overlay (21%, 102%); text-align: right; - font-size: 0.1em; + font-size: 0.3em; } @include arrow-right-text-overlay(21%, 102%); } @@ -47,9 +47,9 @@ + h4 { @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (27%, 103%); + @include arrow-right-text-overlay (27.5%, 102%); text-align: right; - font-size: 0.1em; + font-size: 0.3em; } @include arrow-right-text-overlay(27.5%, 102%); } @@ -65,9 +65,9 @@ + h4 { @media #{$bp-below-mobile}{ - @include arrow-right-text-overlay (35.5%, 103%); + @include arrow-right-text-overlay (36%, 102%); text-align: right; - font-size: 0.1em; + font-size: 0.25em; } @include arrow-right-text-overlay(36%, 102%); } @@ -77,15 +77,15 @@ .title { @media #{$bp-below-mobile} { @include arrow-left-overlay (9%, 99%); - font-size: 0.4em; } @include arrow-left-overlay (9%, 94%); + h4 { @media #{$bp-below-mobile}{ - @include arrow-left-text-overlay (10.5%, 107.5%); + @include arrow-left-text-overlay (10.5%, 106%); direction: rtl; - font-size: 0.3em; + text-align: start; + font-size: 0.35em; } @include arrow-left-text-overlay(10%, 102%); transform: rotate(180deg);