Add embedded projects section to code.org/music #58352
Conversation
| @@ -225,7 +225,7 @@ div.divider { | |||
| // Add a thick box shadow to an element | |||
| // See code.org/teach for an example | |||
| .box-shadow-primary { | |||
| box-shadow: 8px 8px 0 var(--brand_primary_light); | |||
| box-shadow: 8px 8px 0 rgba(171, 223, 229, 0.50); | |||
There was a problem hiding this comment.
Lightened this up a bit to match the Figma.
| @@ -3,9 +3,6 @@ title: Music Lab | |||
| theme: responsive_full_width | |||
| --- | |||
|
|
|||
| - button_url = CDO.studio_url("/s/music-intro-2024") | |||
| - button_string = hoc_s("music_lab.button.try_music_lab") | |||
There was a problem hiding this comment.
@bethanyaconnor I ended up removing these because they don't work across views 😅
| list_item = [hoc_s("music_lab.student_projects.list_create"), hoc_s("music_lab.student_projects.list_artist"), hoc_s("music_lab.student_projects.list_share")] | ||
|
|
||
| .grid-container.gap-2 | ||
| %iframe.rounded-corners.box-shadow-primary{width: "100%", height: 300, src: CDO.studio_url("/musiclab/embed?channels=#{request.params['channels']}&library=#{request.params['library']}", CDO.default_scheme)} |
There was a problem hiding this comment.
@breville here's where this is embedded — it's not showing up for me locally (see screenshots) so let me know if I need to replace anything!
There was a problem hiding this comment.
hi Kelby, the channel IDs are environment-specific, so if you are testing locally, it means you need to create a new music project locally first. Given that this page will be unlinked for a while, I think we can go ahead and test this out on production when it makes it to there.
There was a problem hiding this comment.
optional: you could probably also extract the src string into a Ruby variable like you have for list_item.
There was a problem hiding this comment.
Ok cool! 🙌
And what's the reasoning for extracting the src string? Does it have a functional benefit or just makes the code cleaner?
| - icon_check = "fa-solid fa-check-circle" | ||
|
|
||
| :ruby | ||
| list_item = [hoc_s("music_lab.student_projects.list_create"), hoc_s("music_lab.student_projects.list_artist"), hoc_s("music_lab.student_projects.list_share")] |
| @@ -18,8 +15,8 @@ theme: responsive_full_width | |||
| =hoc_s("music_lab.banner.heading") | |||
| %p.body-one.white | |||
| =hoc_s("music_lab.banner.desc") | |||
| %a.link-button.white{href: button_url} | |||
| =button_string | |||
| %a.link-button.white{href: CDO.studio_url("/s/music-intro-2024")} | |||
There was a problem hiding this comment.
@kelbyhawn Just remembered that I think these script start URLs should have a /reset at the end of them. Presumably this resets progress for a signed-out user in a shared computer setting.
Adds the embedded student projects section to https://code.org/music
iframecoming from the student learning team (see related PR below)iframeif needed once we see the final versionRelated PR:
Jira ticket: ACQ-1839
Responsive
Responsive.mov
RTL