updated UI

components/demo-day/page.ftd

@@ -3,18 +3,48 @@
 -- component page:
 caption title:
 optional body body:
+optional string desc:
+boolean $open: false
 dd.demo-day-video list latest-video-list:
 
 -- ds.section-column:
 margin: $ds.spaces.vertical-gap.zero
 align-content: top-left
 
+-- ds.row:
+align-content: left
+spacing: $ds.spaces.horizontal-gap.space-between
+
 -- ds.heading-large: $page.title
 color: $ds.colors.shadow
 
+-- ftd.image:
+src: $assets.files.assets.info.svg
+$on-click$: $ftd.toggle($a = $page.open)
+width.fixed.px: 24
+
+-- ftd.column:
+if: {  page.open }
+;;width.fixed.px: 662
+width: fill-container
+padding.px: 24
+anchor: parent
+right.px: 0
+background.solid: $ds.colors.background.step-1
+top.px: 70
+border-radius.px: 8
+;;shadow: $s
+
 -- ds.copy-regular: $page.body
 if: { page.body != NULL }
 
+-- end: ftd.column
+
+-- end: ds.row
+
+-- ds.copy-regular: $page.desc
+if: { page.desc != NULL }
+
 -- ds.row:
 align-content: left
 wrap: true
@@ -37,51 +67,56 @@ author-avatar: $obj.author-avatar
 
 
 
+
+
+
+
 -- component latest-videos:
 caption title:
 body desc:
 string youtube:
 string author-name:
 ftd.image-src author-avatar:
 
--- ds.column:
-width.fixed.px: 430
+-- ds.row:
 align-content: left
-spacing: $ds.spaces.vertical-gap.zero
+spacing: $ds.spaces.horizontal-gap.large
 background.solid: $ds.colors.background.step-2
+inset: $ds.spaces.inset-square.medium
 
 -- ftd.iframe:
 youtube: $latest-videos.youtube
-width: fill-container
+width.fixed.px: 500
 border-radius.px: 8
-height.fixed.px: 200
+height.fixed.px: 300
 
 -- ds.column:
-inset: $ds.spaces.inset-wide.medium
-align-content: left
+align-content: top-left
 
 -- ds.heading-medium: $latest-videos.title
 
 -- ds.copy-regular: $latest-videos.desc
 
--- ds.row: 
+-- ftd.row: 
 align-content: left
+spacing.fixed.px: 12
 
 -- ftd.image:
 src: $latest-videos.author-avatar
-width.fixed.px: 50
-height.fixed.px: 50
+width.fixed.px: 32
+height.fixed.px: 32
 border-radius.percent: 100
-fit: cover
+fit: contain
+background.solid: $ds.colors.background.base
 
--- ds.heading-tiny: $latest-videos.author-name
+-- ds.copy-small: $latest-videos.author-name
 color: $ds.colors.info.text
 
--- end: ds.row
+-- end: ftd.row
 
 -- end: ds.column
 
--- end: ds.column
+-- end: ds.row
 
 -- end: latest-videos
 
@@ -91,6 +126,8 @@ color: $ds.colors.info.text
 
 
 
+
+
 -- component month-update:
 caption title:
 optional body body:
@@ -106,16 +143,16 @@ color: $ds.colors.shadow
 -- ds.copy-regular: $month-update.body
 if: { month-update.body != NULL }
 
--- ds.row:
+-- ds.column:
 align-content: left
-wrap: true
-spacing: $ds.spaces.horizontal-gap.large
+spacing: $ds.spaces.vertical-gap.large
 
 -- months-info: $obj.title
 for: $obj in $month-update.months-list
 date: $obj.date
+body: $obj.body
 
--- end: ds.row
+-- end: ds.column
 
 -- end: ds.section-column
 
@@ -125,38 +162,26 @@ date: $obj.date
 
 -- component months-info:
 caption title:
-boolean $open: false
+optional body body:
 dd.all-date list date:
 
 -- ds.column:
-border: $ds.borders.uniform.small
 align-content: left
-inset: $ds.spaces.inset-wide.medium
-
--- ds.row:
-$on-click$: $ftd.toggle($a = $months-info.open)
-align-content: left
-spacing: $ds.spaces.horizontal-gap.space-between
 
 -- ds.copy-large: $months-info.title
+color: $ds.colors.text-strong
 
--- ftd.image:
-src: $assets.files.assets.right-arrow.svg
-src if { months-info.open }: $assets.files.assets.down-arrow.svg
-width.fixed.px: 18
-
--- end: ds.row
+-- ds.copy-regular: $months-info.body
+if: { months-info.body != NULL }
 
--- ds.row:
-if: { months-info.open }
+-- ds.column:
 align-content: left
-wrap: true
 
 -- date-content: $obj.title
 for: $obj in $months-info.date
 link: $obj.link
 
--- end: ds.row
+-- end: ds.column
 
 -- end: ds.column
 
@@ -170,14 +195,7 @@ link: $obj.link
 caption title:
 string link:
 
--- ds.column:
-width.fixed.px: 120
-background.solid: $ds.colors.background.step-1
-inset: $ds.spaces.inset-wide.small
-
 -- ds.copy-regular: $date-content.title
 link: $date-content.link
 
--- end: ds.column
-
--- end: date-content
+-- end: date-content

ds.ftd

@@ -1,5 +1,5 @@
 -- import: fastn-community.github.io/design-system
-export: borders, button, icon-button, primary-button, toggle-image-link, secondary-button, circle-text-button, phosphor-icon-button, inline-row, footer-link, copyright-text, page-widths, header-link, page, heading-hero, heading-large, heading-medium, heading-small, heading-tiny, copy-large, copy-regular, copy-small, fine-print, source-code, link, section-row, section-column, column, element-radius, radius, row, flush, gap, hv, spaces, border-data, border-bottom, alert, container, text-input, danger-button, checkbox, link-button, floater, copy-to-clipboard-text, copy-to-clipboard-icon, label-text, package-info, storybook, code
+export: borders, button, icon-button, primary-button, toggle-image-link, secondary-button, circle-text-button, phosphor-icon-button, circle-button, inline-row, footer-link, copyright-text, page-widths, header-link, page, heading-hero, heading-large, heading-medium, heading-small, heading-tiny, copy-large, copy-regular, copy-small, fine-print, source-code, link, section-row, section-column, column, element-radius, radius, row, flush, gap, hv, spaces, border-data, border-bottom, alert, container, text-input, danger-button, checkbox, link-button, floater, copy-to-clipboard-text, copy-to-clipboard-icon, label-text, package-info, storybook, code
 exposing: page-widths
 
 

pages/demo-day/index.ftd

@@ -20,30 +20,27 @@ ud.user-data user-data:
 dd.demo-day-video list latest-video-list:
 dd.months list months-list:
 
+-- ds.page: Latest Demo Day - Nov 22 2024
+theme-switcher: true
+
 -- ds.section-column:
 inset: $ds.spaces.inset-square.medium
 spacing: $ds.spaces.vertical-gap.large
 margin: $ds.spaces.vertical-gap.large
 align-content: top-left
 
--- p.page: Latest Demo Day Video Update
+-- p.page: Latest Demo Day - Nov 22 2024
 latest-video-list: $page.latest-video-list
+desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+
+FifthTry has a tradition of weekly Demo Days on Fridays. We follow a `demo-day-driven development` approach, where everyone at FifthTry showcases their weekly progress. As an `open-source` company, we build open-source products and aim to make our decision-making process public as well. This event is open to everyone, and you can find the meeting links in our [`Discord community`](https://discord.gg fastn-stack-793929082483769345). Under the Latest Demo Days, you can find a summary of each team member's contributions from every Friday.
 
-FifthTry has a tradition of weekly Demo Days on Fridays. We 
-follow a `demo-day-driven development` approach, where everyone 
-at FifthTry showcases their weekly progress. As an 
-`open-source` company, we build open-source products and aim to 
-make our decision-making process public as well. This event 
-is open to everyone, and you can find the meeting links 
-in our [`Discord community`](https://discord.gg/fastn-stack-793929082483769345). 
-Under the Latest Demo Days, you can 
-find a summary of each team member's contributions from 
-every Friday.
-
--- p.month-update: Checkout More videos
+-- p.month-update: 2024
 months-list: $page.months-list
 
 -- end: ds.section-column
 
+-- end: ds.page
+
 -- end: page
 

records/demo-day.ftd

@@ -9,6 +9,7 @@ ftd.image-src author-avatar:
 
 -- record months:
 caption title:
+optional body body:
 all-date list date:
 
 

scenarios/demo-day/index.ftd

@@ -19,27 +19,36 @@ youtube: S465goV853U
 author-name: Meenu Kumari
 author-avatar: $assets.files.assets.team.meenu.jpeg
 
-This video contain the work i did this week.
-This video contain the work i did this week.
-This video contain the work i did this week.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+sunt in culpa qui officia deserunt mollit anim id est laborum
 
 -- dd.demo-day-video: Demo day video update #12
 youtube: S465goV853U
 author-name: Meenu Kumari
 author-avatar: $assets.files.assets.team.meenu.jpeg
 
-This video contain the work i did this week.
-This video contain the work i did this week.
-This video contain the work i did this week.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+sunt in culpa qui officia deserunt mollit anim id est laborum
 
 -- dd.demo-day-video: Demo day video update #12
 youtube: S465goV853U
 author-name: Meenu Kumari
 author-avatar: $assets.files.assets.team.meenu.jpeg
 
-This video contain the work i did this week.
-This video contain the work i did this week.
-This video contain the work i did this week.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+sunt in culpa qui officia deserunt mollit anim id est laborum
 
 -- end: video-data
 
@@ -51,18 +60,23 @@ This video contain the work i did this week.
 -- dd.months: Nov
 date: $nov-dates
 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat.
+
 -- end: months-list
 
 
 -- dd.all-date list nov-dates:
 
--- dd.all-date: 1st Nov
+-- dd.all-date: - 1st Nov
 link: /
 
--- dd.all-date: 8th Nov 
+-- dd.all-date: - 8th Nov 
 link: /
 
--- dd.all-date: 15th Nov 
+-- dd.all-date: - 15th Nov 
 link: /
 
 -- end: nov-dates