gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix multiple group marking as done

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-09 22:42:44 +01:00
parent 8a296d99c4
commit a1576fd348
2 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/roadmap/content-drawer.tsx
View File

@ -53,8 +53,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
onClick={() => { onClick={() => {
localStorage.setItem(groupId, 'done'); localStorage.setItem(groupId, 'done');
document document
.querySelector(`[data-group-id*="-${groupId}"]`) .querySelectorAll(`[data-group-id*="-${groupId}"]`)
?.classList?.add('done'); .forEach((item) => item?.classList?.add('done'));
onClose(); onClose();
}} }}
colorScheme="green" colorScheme="green"
@ -62,7 +62,11 @@ export function ContentDrawer(props: ContentDrawerProps) {
size="xs" size="xs"
iconSpacing={0} iconSpacing={0}
> >
<Text as="span" d={['block', 'none', 'none', 'block']} ml="10px"> <Text
as="span"
d={['block', 'none', 'none', 'block']}
ml="10px"
>
Mark as Done Mark as Done
</Text> </Text>
</Button> </Button>
@ -72,8 +76,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
onClick={() => { onClick={() => {
localStorage.removeItem(groupId); localStorage.removeItem(groupId);
document document
.querySelector(`[data-group-id*="-${groupId}"]`) .querySelectorAll(`[data-group-id*="-${groupId}"]`)
?.classList?.remove('done'); .forEach((item) => item?.classList?.remove('done'));
onClose(); onClose();
}} }}
colorScheme="red" colorScheme="red"
@ -81,7 +85,11 @@ export function ContentDrawer(props: ContentDrawerProps) {
size="xs" size="xs"
iconSpacing={0} iconSpacing={0}
> >
<Text as="span" d={['block', 'none', 'none', 'block']} ml="10px"> <Text
as="span"
d={['block', 'none', 'none', 'block']}
ml="10px"
>
Mark as Pending Mark as Pending
</Text> </Text>
</Button> </Button>

12
content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
View File

@ -1 +1,11 @@
# Learn the basics # CSS Basics
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>