Skip to content

feat: updates card design for kits and homepage - #1291

Merged
lindakatcodes merged 30 commits into
mainfrom
feat/1284-update-card-design-kits
Jul 6, 2023
Merged

feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom
feat/1284-update-card-design-kits

Conversation

@WillHutt

@WillHuttWillHutt commented Jun 23, 2023•
edited by lindakatcodes
Loading

Copy link
Copy Markdown
Contributor

Type of change

  • Feature
  • Documentation change
  • Bug fix

Summary of change

  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel
    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks

Screenshots

Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_

Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_

Checklist

@netlify

netlifyBot commented Jun 23, 2023•
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for starter-dev ready!

NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@WillHuttWillHutt added the WIP Work in Progress label Jun 23, 2023
vyktoremario
vyktoremario reviewed Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro Outdated
vyktoremario
vyktoremario reviewed Jun 25, 2023
View reviewed changes

@vyktoremariovyktoremario left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question

@WillHuttWillHutt changed the title feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4 suggested changes Jun 27, 2023
View reviewed changes

@jdwilkin4jdwilkin4 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.
Left a couple of small comments 👍

Comment threadstarters/angular-ngrx-scss/package.json Outdated
Comment threadpackages/website/src/config.tsx Outdated
Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt changed the title [WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt removed the WIP Work in Progress label Jun 27, 2023
lindakatcodes
lindakatcodes requested changes Jun 27, 2023
View reviewed changes

@lindakatcodeslindakatcodes left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:

Homepage:

  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM

Individual kit page:

  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM - I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does. Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM

Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx Outdated
Comment threadstarters/nuxt2-pinia-tailwind/package.json Outdated
Comment threadstarters/remix-gql-tailwind/package.json Outdated
Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt added the WIP Work in Progress label Jun 27, 2023
lindakatcodes
lindakatcodes previously approved these changes Jun 28, 2023
View reviewed changes

@lindakatcodeslindakatcodes left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇

jdwilkin4
jdwilkin4 previously approved these changes Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes previously approved these changes Jun 28, 2023
View reviewed changes
@WillHutt

WillHutt commented Jun 29, 2023•
edited by lindakatcodes
Loading

Copy link
Copy Markdown
ContributorAuthor

Feedback to address from Dustin:

  • Columns/rows
    [ ] [ ] [ ] [ ]
    [ ] [ ] [ ] [ ]
    [ ] [ ] [ ] [ ]

  • Container squares feel too skinny add more lr padding
    image

  • Remove duplicate logos
    image

  • Light mode title is too light
    image

  • Make plural
    image

  • Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image

  • Skinny container feels really bad because it doesn't left align with the rest of the page
    image

  • Mobile, this should probably take the full width
    image

  • Header styles on mobile are off especially with CTAs
    image

@lindakatcodeslindakatcodes mentioned this pull request Jun 30, 2023
Merged
9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt

WillHutt commented Jun 30, 2023•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.

jdwilkin4
jdwilkin4 suggested changes Jul 5, 2023
View reviewed changes

@jdwilkin4jdwilkin4 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.
Left a couple of small comments 👍

Comment threadpackages/website/src/components/KitShowcases.astro Outdated
Comment threadpackages/website/src/config.tsx Outdated
@sonarqubecloud

sonarqubecloudBot commented Jul 5, 2023

Copy link
Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed

BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells

No Coverage information No Coverage information
0.0%0.0% Duplication

jdwilkin4
jdwilkin4 previously approved these changes Jul 6, 2023
View reviewed changes

@jdwilkin4jdwilkin4 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go

Comment threadpackages/website/src/components/KitItem.astro Outdated
@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes merged commit 55a9259 into mainJul 6, 2023
@lindakatcodes
lindakatcodes deleted the feat/1284-update-card-design-kits branch July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments
+1 more reviewer
@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits

4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat: updates card design for kits and homepage by WillHutt · Pull Request #1291 · thisdot/starter.dev · GitHub
Skip to content
feat: updates card design for kits and homepage - #1291
Merged
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Jul 6, 2023
Merged
feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Conversation
@WillHutt
@WillHuttWillHutt
commented
Jun 23, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

Contributor
Type of change
  •  Feature
  •  Documentation change
  •  Bug fix
Summary of change
  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel

    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks
Screenshots
Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_
Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_
Checklist
@netlify
netlifyBot
commented
Jun 23, 2023•

edited

Loading

Copy link


Copy Markdown

✅ Deploy Preview for starter-dev ready!
NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
 Toggle QR Code... 

QR Code

Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 23, 2023
vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
@vyktoremariovyktoremario
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question
@WillHuttWillHutt
changed the title
feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4
suggested changes
Jun 27, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadstarters/angular-ngrx-scss/package.json
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt
changed the title
[WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt
removed
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
requested changes
Jun 27, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:
Homepage:
  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM
Individual kit page:
  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM
- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.
Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM
Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx
Outdated

Comment threadstarters/nuxt2-pinia-tailwind/package.json
Outdated

Comment threadstarters/remix-gql-tailwind/package.json
Outdated

Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇
jdwilkin4
jdwilkin4
previously approved these changes
Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@WillHutt
WillHutt
commented
Jun 29, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

ContributorAuthor
Feedback to address from Dustin:
  •  Columns/rows
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
  •  Container squares feel too skinny add more lr padding
    image
  •  Remove duplicate logos
    image
  •  Light mode title is too light
    image
  •  Make plural
    image
  •  Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image
  •  Skinny container feels really bad because it doesn't left align with the rest of the page
    image
  •  Mobile, this should probably take the full width
    image
  •  Header styles on mobile are off especially with CTAs
    image
@lindakatcodeslindakatcodes
mentioned this pull request
Jun 30, 2023
 Merged

9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt
WillHutt
commented
Jun 30, 2023•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.
jdwilkin4
jdwilkin4
suggested changes
Jul 5, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

@sonarqubecloud
sonarqubecloudBot
commented
Jul 5, 2023

Copy link


Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed
BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells
No Coverage information No Coverage information
0.0%0.0% Duplication
jdwilkin4
jdwilkin4
previously approved these changes
Jul 6, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go
Comment threadpackages/website/src/components/KitItem.astro
Outdated

@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes
merged commit 55a9259
into
mainJul 6, 2023
@lindakatcodes
lindakatcodes
deleted the

feat/1284-update-card-design-kits

branch
July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments

+1 more reviewer

@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits


4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: updates card design for kits and homepage by WillHutt · Pull Request #1291 · thisdot/starter.dev · GitHub
Skip to content
feat: updates card design for kits and homepage - #1291
Merged
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Jul 6, 2023
Merged
feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Conversation
@WillHutt
@WillHuttWillHutt
commented
Jun 23, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

Contributor
Type of change
  •  Feature
  •  Documentation change
  •  Bug fix
Summary of change
  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel

    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks
Screenshots
Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_
Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_
Checklist
@netlify
netlifyBot
commented
Jun 23, 2023•

edited

Loading

Copy link


Copy Markdown

✅ Deploy Preview for starter-dev ready!
NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
 Toggle QR Code... 

QR Code

Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 23, 2023
vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
@vyktoremariovyktoremario
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question
@WillHuttWillHutt
changed the title
feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4
suggested changes
Jun 27, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadstarters/angular-ngrx-scss/package.json
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt
changed the title
[WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt
removed
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
requested changes
Jun 27, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:
Homepage:
  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM
Individual kit page:
  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM
- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.
Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM
Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx
Outdated

Comment threadstarters/nuxt2-pinia-tailwind/package.json
Outdated

Comment threadstarters/remix-gql-tailwind/package.json
Outdated

Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇
jdwilkin4
jdwilkin4
previously approved these changes
Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@WillHutt
WillHutt
commented
Jun 29, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

ContributorAuthor
Feedback to address from Dustin:
  •  Columns/rows
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
  •  Container squares feel too skinny add more lr padding
    image
  •  Remove duplicate logos
    image
  •  Light mode title is too light
    image
  •  Make plural
    image
  •  Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image
  •  Skinny container feels really bad because it doesn't left align with the rest of the page
    image
  •  Mobile, this should probably take the full width
    image
  •  Header styles on mobile are off especially with CTAs
    image
@lindakatcodeslindakatcodes
mentioned this pull request
Jun 30, 2023
 Merged

9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt
WillHutt
commented
Jun 30, 2023•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.
jdwilkin4
jdwilkin4
suggested changes
Jul 5, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

@sonarqubecloud
sonarqubecloudBot
commented
Jul 5, 2023

Copy link


Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed
BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells
No Coverage information No Coverage information
0.0%0.0% Duplication
jdwilkin4
jdwilkin4
previously approved these changes
Jul 6, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go
Comment threadpackages/website/src/components/KitItem.astro
Outdated

@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes
merged commit 55a9259
into
mainJul 6, 2023
@lindakatcodes
lindakatcodes
deleted the

feat/1284-update-card-design-kits

branch
July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments

+1 more reviewer

@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits


4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: updates card design for kits and homepage by WillHutt · Pull Request #1291 · thisdot/starter.dev · GitHub
Skip to content
feat: updates card design for kits and homepage - #1291
Merged
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Jul 6, 2023
Merged
feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Conversation
@WillHutt
@WillHuttWillHutt
commented
Jun 23, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

Contributor
Type of change
  •  Feature
  •  Documentation change
  •  Bug fix
Summary of change
  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel

    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks
Screenshots
Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_
Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_
Checklist
@netlify
netlifyBot
commented
Jun 23, 2023•

edited

Loading

Copy link


Copy Markdown

✅ Deploy Preview for starter-dev ready!
NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
 Toggle QR Code... 

QR Code

Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 23, 2023
vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
@vyktoremariovyktoremario
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question
@WillHuttWillHutt
changed the title
feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4
suggested changes
Jun 27, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadstarters/angular-ngrx-scss/package.json
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt
changed the title
[WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt
removed
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
requested changes
Jun 27, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:
Homepage:
  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM
Individual kit page:
  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM
- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.
Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM
Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx
Outdated

Comment threadstarters/nuxt2-pinia-tailwind/package.json
Outdated

Comment threadstarters/remix-gql-tailwind/package.json
Outdated

Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇
jdwilkin4
jdwilkin4
previously approved these changes
Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@WillHutt
WillHutt
commented
Jun 29, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

ContributorAuthor
Feedback to address from Dustin:
  •  Columns/rows
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
  •  Container squares feel too skinny add more lr padding
    image
  •  Remove duplicate logos
    image
  •  Light mode title is too light
    image
  •  Make plural
    image
  •  Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image
  •  Skinny container feels really bad because it doesn't left align with the rest of the page
    image
  •  Mobile, this should probably take the full width
    image
  •  Header styles on mobile are off especially with CTAs
    image
@lindakatcodeslindakatcodes
mentioned this pull request
Jun 30, 2023
 Merged

9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt
WillHutt
commented
Jun 30, 2023•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.
jdwilkin4
jdwilkin4
suggested changes
Jul 5, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

@sonarqubecloud
sonarqubecloudBot
commented
Jul 5, 2023

Copy link


Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed
BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells
No Coverage information No Coverage information
0.0%0.0% Duplication
jdwilkin4
jdwilkin4
previously approved these changes
Jul 6, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go
Comment threadpackages/website/src/components/KitItem.astro
Outdated

@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes
merged commit 55a9259
into
mainJul 6, 2023
@lindakatcodes
lindakatcodes
deleted the

feat/1284-update-card-design-kits

branch
July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments

+1 more reviewer

@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits


4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
feat: updates card design for kits and homepage by WillHutt · Pull Request #1291 · thisdot/starter.dev · GitHub
Skip to content
feat: updates card design for kits and homepage - #1291
Merged
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Jul 6, 2023
Merged
feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Conversation
@WillHutt
@WillHuttWillHutt
commented
Jun 23, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

Contributor
Type of change
  •  Feature
  •  Documentation change
  •  Bug fix
Summary of change
  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel

    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks
Screenshots
Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_
Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_
Checklist
@netlify
netlifyBot
commented
Jun 23, 2023•

edited

Loading

Copy link


Copy Markdown

✅ Deploy Preview for starter-dev ready!
NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
 Toggle QR Code... 

QR Code

Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 23, 2023
vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
@vyktoremariovyktoremario
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question
@WillHuttWillHutt
changed the title
feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4
suggested changes
Jun 27, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadstarters/angular-ngrx-scss/package.json
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt
changed the title
[WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt
removed
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
requested changes
Jun 27, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:
Homepage:
  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM
Individual kit page:
  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM
- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.
Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM
Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx
Outdated

Comment threadstarters/nuxt2-pinia-tailwind/package.json
Outdated

Comment threadstarters/remix-gql-tailwind/package.json
Outdated

Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇
jdwilkin4
jdwilkin4
previously approved these changes
Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@WillHutt
WillHutt
commented
Jun 29, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

ContributorAuthor
Feedback to address from Dustin:
  •  Columns/rows
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
  •  Container squares feel too skinny add more lr padding
    image
  •  Remove duplicate logos
    image
  •  Light mode title is too light
    image
  •  Make plural
    image
  •  Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image
  •  Skinny container feels really bad because it doesn't left align with the rest of the page
    image
  •  Mobile, this should probably take the full width
    image
  •  Header styles on mobile are off especially with CTAs
    image
@lindakatcodeslindakatcodes
mentioned this pull request
Jun 30, 2023
 Merged

9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt
WillHutt
commented
Jun 30, 2023•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.
jdwilkin4
jdwilkin4
suggested changes
Jul 5, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

@sonarqubecloud
sonarqubecloudBot
commented
Jul 5, 2023

Copy link


Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed
BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells
No Coverage information No Coverage information
0.0%0.0% Duplication
jdwilkin4
jdwilkin4
previously approved these changes
Jul 6, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go
Comment threadpackages/website/src/components/KitItem.astro
Outdated

@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes
merged commit 55a9259
into
mainJul 6, 2023
@lindakatcodes
lindakatcodes
deleted the

feat/1284-update-card-design-kits

branch
July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments

+1 more reviewer

@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits


4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: updates card design for kits and homepage by WillHutt · Pull Request #1291 · thisdot/starter.dev · GitHub
Skip to content
feat: updates card design for kits and homepage - #1291
Merged
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Jul 6, 2023
Merged
feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Conversation
@WillHutt
@WillHuttWillHutt
commented
Jun 23, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

Contributor
Type of change
  •  Feature
  •  Documentation change
  •  Bug fix
Summary of change
  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel

    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks
Screenshots
Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_
Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_
Checklist
@netlify
netlifyBot
commented
Jun 23, 2023•

edited

Loading

Copy link


Copy Markdown

✅ Deploy Preview for starter-dev ready!
NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
 Toggle QR Code... 

QR Code

Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 23, 2023
vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
@vyktoremariovyktoremario
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question
@WillHuttWillHutt
changed the title
feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4
suggested changes
Jun 27, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadstarters/angular-ngrx-scss/package.json
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt
changed the title
[WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt
removed
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
requested changes
Jun 27, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:
Homepage:
  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM
Individual kit page:
  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM
- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.
Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM
Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx
Outdated

Comment threadstarters/nuxt2-pinia-tailwind/package.json
Outdated

Comment threadstarters/remix-gql-tailwind/package.json
Outdated

Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇
jdwilkin4
jdwilkin4
previously approved these changes
Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@WillHutt
WillHutt
commented
Jun 29, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

ContributorAuthor
Feedback to address from Dustin:
  •  Columns/rows
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
  •  Container squares feel too skinny add more lr padding
    image
  •  Remove duplicate logos
    image
  •  Light mode title is too light
    image
  •  Make plural
    image
  •  Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image
  •  Skinny container feels really bad because it doesn't left align with the rest of the page
    image
  •  Mobile, this should probably take the full width
    image
  •  Header styles on mobile are off especially with CTAs
    image
@lindakatcodeslindakatcodes
mentioned this pull request
Jun 30, 2023
 Merged

9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt
WillHutt
commented
Jun 30, 2023•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.
jdwilkin4
jdwilkin4
suggested changes
Jul 5, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

@sonarqubecloud
sonarqubecloudBot
commented
Jul 5, 2023

Copy link


Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed
BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells
No Coverage information No Coverage information
0.0%0.0% Duplication
jdwilkin4
jdwilkin4
previously approved these changes
Jul 6, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go
Comment threadpackages/website/src/components/KitItem.astro
Outdated

@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes
merged commit 55a9259
into
mainJul 6, 2023
@lindakatcodes
lindakatcodes
deleted the

feat/1284-update-card-design-kits

branch
July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments

+1 more reviewer

@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits


4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
feat: updates card design for kits and homepage by WillHutt · Pull Request #1291 · thisdot/starter.dev · GitHub
Skip to content
feat: updates card design for kits and homepage - #1291
Merged
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Jul 6, 2023
Merged
feat: updates card design for kits and homepage#1291
lindakatcodes merged 30 commits into
mainfrom 
feat/1284-update-card-design-kits
Conversation
@WillHutt
@WillHuttWillHutt
commented
Jun 23, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

Contributor
Type of change
  •  Feature
  •  Documentation change
  •  Bug fix
Summary of change
  • This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel

    • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
    • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
    • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
    • Updates packages to reflect which kits have showcases
    • Resolves 2 failing checks
Screenshots
Homepage
deploy-preview-1291--starter-dev netlify app_ (1)
deploy-preview-1291--starter-dev netlify app_
Individual kit
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_ (1)
deploy-preview-1291--starter-dev netlify app_kits_next-react-query-tailwind_
Checklist
@netlify
netlifyBot
commented
Jun 23, 2023•

edited

Loading

Copy link


Copy Markdown

✅ Deploy Preview for starter-dev ready!
NameLink
🔨 Latest commita6cedb5
🔍 Latest deploy loghttps://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Previewhttps://deploy-preview-1291--starter-dev.netlify.app
📱 Preview on mobile
 Toggle QR Code... 

QR Code

Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 23, 2023
vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

vyktoremario
vyktoremario
reviewed
Jun 25, 2023
View reviewed changes
@vyktoremariovyktoremario
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a question
@WillHuttWillHutt
changed the title
feat: updates card design for kits and homepage[WIP] feat: updates card design for kits and homepage [WIP] Jun 26, 2023
jdwilkin4
jdwilkin4
suggested changes
Jun 27, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadstarters/angular-ngrx-scss/package.json
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

Comment threadpackages/website/src/components/KitItem.astro
@WillHuttWillHutt
changed the title
[WIP] feat: updates card design for kits and homepage [WIP] feat: updates card design for kits and homepageJun 27, 2023
@WillHuttWillHutt
removed
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
requested changes
Jun 27, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:
Homepage:
  • Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.
Screen Shot 2023-06-27 at 9 55 01 AM
Individual kit page:
  • In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?
Screen Shot 2023-06-27 at 9 59 03 AMScreen Shot 2023-06-27 at 9 59 15 AM
- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.
Screen Shot 2023-06-27 at 10 02 24 AMScreen Shot 2023-06-27 at 10 01 24 AM
Comment threadpackages/website/src/config.tsx
Comment threadpackages/website/src/config.tsx
Outdated

Comment threadstarters/nuxt2-pinia-tailwind/package.json
Outdated

Comment threadstarters/remix-gql-tailwind/package.json
Outdated

Comment threadpackages/website/src/components/ShowcaseLink.astro
@WillHuttWillHutt
added
the 
WIP
Work in Progress
label
Jun 27, 2023
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@lindakatcodeslindakatcodes
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking wonderful! Nice job! 🥇
jdwilkin4
jdwilkin4
previously approved these changes
Jun 28, 2023
View reviewed changes
lindakatcodes
lindakatcodes
previously approved these changes
Jun 28, 2023
View reviewed changes
@WillHutt
WillHutt
commented
Jun 29, 2023•

edited by lindakatcodes

Loading

Copy link


Copy Markdown

ContributorAuthor
Feedback to address from Dustin:
  •  Columns/rows
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
    
[ ] [ ] [ ] [ ]
  •  Container squares feel too skinny add more lr padding
    image
  •  Remove duplicate logos
    image
  •  Light mode title is too light
    image
  •  Make plural
    image
  •  Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
    image
    image
  •  Skinny container feels really bad because it doesn't left align with the rest of the page
    image
  •  Mobile, this should probably take the full width
    image
  •  Header styles on mobile are off especially with CTAs
    image
@lindakatcodeslindakatcodes
mentioned this pull request
Jun 30, 2023
 Merged

9 tasks
@WillHutt
refactor: c/rs, skinny cntrs, lm title, plural shwcses, l/d cramped p…
3799dee
…d, no lf align, mb f-width, and mb hd styles in ctas
@WillHutt
WillHutt
commented
Jun 30, 2023•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.
jdwilkin4
jdwilkin4
suggested changes
Jul 5, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

Left a couple of small comments 👍
Comment threadpackages/website/src/components/KitShowcases.astro
Outdated

Comment threadpackages/website/src/config.tsx
Outdated

@sonarqubecloud
sonarqubecloudBot
commented
Jul 5, 2023

Copy link


Copy Markdown

Kudos, SonarCloud Quality Gate passed! Quality Gate passed
BugA0 Bugs
VulnerabilityA0 Vulnerabilities
Security HotspotA0 Security Hotspots
Code SmellA0 Code Smells
No Coverage information No Coverage information
0.0%0.0% Duplication
jdwilkin4
jdwilkin4
previously approved these changes
Jul 6, 2023
View reviewed changes
@jdwilkin4jdwilkin4
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left one small comment about an unused line of commented out code but otherwise I think is good to go
Comment threadpackages/website/src/components/KitItem.astro
Outdated

@lindakatcodes@jdwilkin4
Remove unused comment
a6cedb5
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
@lindakatcodes
lindakatcodes
merged commit 55a9259
into
mainJul 6, 2023
@lindakatcodes
lindakatcodes
deleted the

feat/1284-update-card-design-kits

branch
July 6, 2023 15:55
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@lindakatcodeslindakatcodeslindakatcodes left review comments
@vyktoremariovyktoremariovyktoremario left review comments

+1 more reviewer

@jdwilkin4jdwilkin4jdwilkin4 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

[Pods] - Update card designs for kits


4 participants

@WillHutt@lindakatcodes@vyktoremario@jdwilkin4