From 7ea25181f0d4789c3777f4ecd07b7e40620dc1d5 Mon Sep 17 00:00:00 2001 From: meenu kumari <118257515+MeenuKumari28@users.noreply.github.com> Date: Tue, 26 Nov 2024 12:12:05 +0530 Subject: [PATCH] updated UI --- assets/info.svg | 7 +++ components/demo-day/page.ftd | 106 ++++++++++++++++++++--------------- ds.ftd | 2 +- pages/demo-day/index.ftd | 23 ++++---- records/demo-day.ftd | 1 + scenarios/demo-day/index.ftd | 38 +++++++++---- 6 files changed, 107 insertions(+), 70 deletions(-) create mode 100644 assets/info.svg diff --git a/assets/info.svg b/assets/info.svg new file mode 100644 index 00000000..98adab25 --- /dev/null +++ b/assets/info.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/components/demo-day/page.ftd b/components/demo-day/page.ftd index 0f5ec673..d2dd318a 100644 --- a/components/demo-day/page.ftd +++ b/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,6 +67,10 @@ author-avatar: $obj.author-avatar + + + + -- component latest-videos: caption title: body desc: @@ -44,44 +78,45 @@ 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 \ No newline at end of file +-- end: date-content diff --git a/ds.ftd b/ds.ftd index 5a619d2a..52bd8773 100644 --- a/ds.ftd +++ b/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 diff --git a/pages/demo-day/index.ftd b/pages/demo-day/index.ftd index 8a2e2f3d..74b656cf 100644 --- a/pages/demo-day/index.ftd +++ b/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 diff --git a/records/demo-day.ftd b/records/demo-day.ftd index 5217e5b3..3bf74cd3 100644 --- a/records/demo-day.ftd +++ b/records/demo-day.ftd @@ -9,6 +9,7 @@ ftd.image-src author-avatar: -- record months: caption title: +optional body body: all-date list date: diff --git a/scenarios/demo-day/index.ftd b/scenarios/demo-day/index.ftd index 9d7419da..b696f408 100644 --- a/scenarios/demo-day/index.ftd +++ b/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 \ No newline at end of file