From 94cf07d7a8ef9b6fae5c3fe34b44302888143906 Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Thu, 6 Jan 2022 18:13:04 -0800 Subject: [PATCH 01/11] added css grid to technologies dropdown --- _sass/components/_project-filter.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 165ee6984e..8a36cc65dd 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -7,10 +7,9 @@ a.filter-item { //filter container ul.filter-list { background: $color-pink; - display: grid; - list-style: none; padding-left: 0; - grid-auto-flow: column; + list-style: none; + display: grid; grid-column-gap: 20px; // grid-template-columns: repeat(4, 1fr); // ^ See issue #1997 for more info on why this is commented out and changed to 3 @@ -64,6 +63,15 @@ ul.filter-list li ul { cursor: default; } +// technologies dropdown only +#technologies { + display: grid; + grid-auto-flow: column; + grid-template-rows: repeat(10, 1fr); + list-style: none; + width: 768px; +} + ul.filter-list li:hover > ul, ul.filter-list li:focus-within > ul, ul.filter-list li ul:hover, From a4c6413362341b3cc854af4baa9cb66ce7feb01a Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Thu, 6 Jan 2022 19:27:37 -0800 Subject: [PATCH 02/11] added media queries for min-width 768 & min-width 1024 --- _sass/components/_project-filter.scss | 39 ++++++++++++++++++++++----- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 8a36cc65dd..2dfd55ee9b 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -64,13 +64,14 @@ ul.filter-list li ul { } // technologies dropdown only -#technologies { - display: grid; - grid-auto-flow: column; - grid-template-rows: repeat(10, 1fr); - list-style: none; - width: 768px; -} +// #technologies { +// display: grid; +// grid-auto-flow: column; // flows the data from top to bottom rather than left to right +// grid-template-rows: repeat(10, 1fr); // ensures the list is 10 rows +// list-style: none; +// width: 768px; +// left: -18em; +// } ul.filter-list li:hover > ul, ul.filter-list li:focus-within > ul, @@ -176,6 +177,30 @@ a.clear-filter-tags { } } +// sizing for technologies dropdown up to an ipad +@media (min-width: 768px) { + #technologies { + display: grid; + grid-auto-flow: column; // flows the data from top to bottom rather than left to right + grid-template-rows: repeat(10, 1fr); // ensures the list is 10 rows + list-style: none; + width: 748px; + left: -18em; + } +} + +// sizing for technologies from an ipad and up +@media (min-width: 1024px) { + #technologies { + display: grid; + grid-auto-flow: column; // flows the data from top to bottom rather than left to right + grid-template-rows: repeat(10, 1fr); // ensures the list is 10 rows + list-style: none; + width: 768px; + left: -18em; + } +} + @media (max-width: 659px) { //creating 2 rows and 2 columns to display categories on mobile ul.filter-list { From 6d198067cc949c08f7cf913258b01b3a1d4cd69b Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Thu, 6 Jan 2022 19:29:54 -0800 Subject: [PATCH 03/11] removed redundant css from min-width 1024 --- _sass/components/_project-filter.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 2dfd55ee9b..4f6f71eacc 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -192,12 +192,7 @@ a.clear-filter-tags { // sizing for technologies from an ipad and up @media (min-width: 1024px) { #technologies { - display: grid; - grid-auto-flow: column; // flows the data from top to bottom rather than left to right - grid-template-rows: repeat(10, 1fr); // ensures the list is 10 rows - list-style: none; width: 768px; - left: -18em; } } From 18a09cf42ad8f45705a183a0ff400b077185c180 Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Thu, 6 Jan 2022 19:30:30 -0800 Subject: [PATCH 04/11] updated comments --- _sass/components/_project-filter.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 4f6f71eacc..581f67123f 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -189,7 +189,7 @@ a.clear-filter-tags { } } -// sizing for technologies from an ipad and up +// sizing for technologies dropdown from an ipad and up @media (min-width: 1024px) { #technologies { width: 768px; From b2cd23c4346cd1038b8f0c687955f9ae1146ab28 Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Thu, 6 Jan 2022 19:30:55 -0800 Subject: [PATCH 05/11] removed comment out css --- _sass/components/_project-filter.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 581f67123f..3abe8bc095 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -63,16 +63,6 @@ ul.filter-list li ul { cursor: default; } -// technologies dropdown only -// #technologies { -// display: grid; -// grid-auto-flow: column; // flows the data from top to bottom rather than left to right -// grid-template-rows: repeat(10, 1fr); // ensures the list is 10 rows -// list-style: none; -// width: 768px; -// left: -18em; -// } - ul.filter-list li:hover > ul, ul.filter-list li:focus-within > ul, ul.filter-list li ul:hover, From 35973b4df4ef886ef3c5628882e8b5b308a40a22 Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Mon, 10 Jan 2022 22:30:06 -0800 Subject: [PATCH 06/11] added variables $bp-tablet-up} & $bp-desktop-up --- _sass/components/_project-filter.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 3abe8bc095..ad14a3b6b6 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -168,7 +168,7 @@ a.clear-filter-tags { } // sizing for technologies dropdown up to an ipad -@media (min-width: 768px) { +@media #{$bp-tablet-up} { #technologies { display: grid; grid-auto-flow: column; // flows the data from top to bottom rather than left to right @@ -180,7 +180,7 @@ a.clear-filter-tags { } // sizing for technologies dropdown from an ipad and up -@media (min-width: 1024px) { +@media #{$bp-desktop-up} { #technologies { width: 768px; } From c1850966ba4a4bc0fc7737dd6cc84bf028a5f79d Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Sun, 16 Jan 2022 10:41:03 -0800 Subject: [PATCH 07/11] added scrollbar --- _sass/components/_project-filter.scss | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index ad14a3b6b6..896ef264c2 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -164,18 +164,28 @@ a.clear-filter-tags { ul.filter-list li ul { width: 105%; padding: 15px; + overflow: auto; + } +} + +@media #{$bp-below-mobile} { + #technologies { + height: 370px; + overflow: auto; } } // sizing for technologies dropdown up to an ipad -@media #{$bp-tablet-up} { +@media #{$bp-mobile-up} { #technologies { display: grid; grid-auto-flow: column; // flows the data from top to bottom rather than left to right - grid-template-rows: repeat(10, 1fr); // ensures the list is 10 rows + grid-template-rows: repeat(16, 1fr); // ensures the list is 16 rows list-style: none; - width: 748px; left: -18em; + width: 748px; + height: 370px; + overflow: auto; } } From c5faf42e3e2120dbe0ba34aa8a909c05a348213f Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Mon, 17 Jan 2022 12:35:47 -0800 Subject: [PATCH 08/11] updated height for desktop --- _sass/components/_project-filter.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 896ef264c2..9169fb1eb3 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -184,7 +184,7 @@ a.clear-filter-tags { list-style: none; left: -18em; width: 748px; - height: 370px; + height: 380px; overflow: auto; } } From 5208a3050481710ea3f3ca54c2901e4d73b693a1 Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Fri, 21 Jan 2022 19:02:26 -0800 Subject: [PATCH 09/11] changes to account for Surface Duo Screen 540px --- _sass/components/_project-filter.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 9169fb1eb3..a7318da0f5 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -167,31 +167,32 @@ a.clear-filter-tags { overflow: auto; } } - -@media #{$bp-below-mobile} { +// tablet down +@media #{$bp-below-tablet} { #technologies { height: 370px; overflow: auto; } } -// sizing for technologies dropdown up to an ipad -@media #{$bp-mobile-up} { +// tablet up +@media #{$bp-tablet-up} { #technologies { display: grid; grid-auto-flow: column; // flows the data from top to bottom rather than left to right grid-template-rows: repeat(16, 1fr); // ensures the list is 16 rows list-style: none; - left: -18em; - width: 748px; + left: -17em; + width: 718px; height: 380px; overflow: auto; } } -// sizing for technologies dropdown from an ipad and up -@media #{$bp-desktop-up} { +// iPad Air to Desktop +@media (min-width: 820px) { #technologies { + left: -18em; width: 768px; } } From 847f6a129a54a55ca9ef3d593c991c5b71c8d21d Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Fri, 21 Jan 2022 19:20:01 -0800 Subject: [PATCH 10/11] added layout for ipad air with comments --- _sass/components/_project-filter.scss | 2 +- _sass/variables/_layout.scss | 17 +++++++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index a7318da0f5..29e8cab326 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -190,7 +190,7 @@ a.clear-filter-tags { } // iPad Air to Desktop -@media (min-width: 820px) { +@media #{$bp-ipadair-up} { #technologies { left: -18em; width: 768px; diff --git a/_sass/variables/_layout.scss b/_sass/variables/_layout.scss index 5a63eb6b50..85bb66bd2d 100644 --- a/_sass/variables/_layout.scss +++ b/_sass/variables/_layout.scss @@ -5,6 +5,7 @@ */ $screen-desktop-large: 1632px; $screen-desktop: 960px; +$screen-ipadair: 820px; $screen-tablet: 768px; $screen-mobile: 480px; @@ -12,16 +13,28 @@ $screen-mobile: 480px; * Breakpoint Start and End Declaration * * These are generally used for declaring media queries. - * As an example, if a developer wants to make a media query for - * anything above a tablet, use the variable $bp-tablet-up. For + * As an example, if a developer wants to make a media query for + * anything above a tablet, use the variable $bp-tablet-up. For * anything below a tablet, use $bp-below-tablet. */ + +// Desktop Large $bp-desktop-large-up: '(min-width: #{$screen-desktop-large})'; $bp-below-desktop-large: '(max-width: #{$screen-desktop-large - 1})'; + +// Desktop $bp-desktop-up: '(min-width: #{$screen-desktop})'; $bp-below-desktop: '(max-width: #{$screen-desktop - 1})'; + +// Ipad Air +$bp-ipadair-up: '(min-width: #{$screen-ipadair - 1})'; +$bp-below-ipadair: '(max-width: #{$screen-ipadair - 1})'; + +// Tablets $bp-tablet-up: '(min-width: #{$screen-tablet})'; $bp-below-tablet: '(max-width: #{$screen-tablet - 1})'; + +// Mobile $bp-mobile-up: '(min-width: #{$screen-mobile})'; $bp-below-mobile: '(max-width: #{$screen-mobile - 1})'; From e3efd39aac6c925686e151e552e53f36cd1e335b Mon Sep 17 00:00:00 2001 From: Anthony Sim Date: Tue, 25 Jan 2022 13:10:59 -0800 Subject: [PATCH 11/11] changed $bp-ipadair-up to $bp-ipadair-up --- _sass/components/_project-filter.scss | 2 +- _sass/variables/_layout.scss | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss index 29e8cab326..bc05de9a27 100644 --- a/_sass/components/_project-filter.scss +++ b/_sass/components/_project-filter.scss @@ -190,7 +190,7 @@ a.clear-filter-tags { } // iPad Air to Desktop -@media #{$bp-ipadair-up} { +@media #{$bp-desktop-up} { #technologies { left: -18em; width: 768px; diff --git a/_sass/variables/_layout.scss b/_sass/variables/_layout.scss index 85bb66bd2d..91ce219c4f 100644 --- a/_sass/variables/_layout.scss +++ b/_sass/variables/_layout.scss @@ -5,7 +5,6 @@ */ $screen-desktop-large: 1632px; $screen-desktop: 960px; -$screen-ipadair: 820px; $screen-tablet: 768px; $screen-mobile: 480px; @@ -26,10 +25,6 @@ $bp-below-desktop-large: '(max-width: #{$screen-desktop-large - 1})'; $bp-desktop-up: '(min-width: #{$screen-desktop})'; $bp-below-desktop: '(max-width: #{$screen-desktop - 1})'; -// Ipad Air -$bp-ipadair-up: '(min-width: #{$screen-ipadair - 1})'; -$bp-below-ipadair: '(max-width: #{$screen-ipadair - 1})'; - // Tablets $bp-tablet-up: '(min-width: #{$screen-tablet})'; $bp-below-tablet: '(max-width: #{$screen-tablet - 1})';