diff --git a/misc/db-docs/template.html b/misc/db-docs/template.html index 3d3f13d91202..05a02a1415a7 100644 --- a/misc/db-docs/template.html +++ b/misc/db-docs/template.html @@ -1,87 +1,89 @@ - + + -$for(author-meta)$ + $for(author-meta)$ -$endfor$ -$if(date-meta)$ + $endfor$ + $if(date-meta)$ -$endif$ -$if(keywords)$ + $endif$ + $if(keywords)$ -$endif$ -$if(description-meta)$ + $endif$ + $if(description-meta)$ -$endif$ + $endif$ $if(title-prefix)$$title-prefix$ – $endif$$pagetitle$ -$for(css)$ + $for(css)$ -$endfor$ -$for(header-includes)$ + $endfor$ + $for(header-includes)$ $header-includes$ -$endfor$ -$if(math)$ + $endfor$ + $if(math)$ $math$ -$endif$ + $endif$ @@ -89,42 +91,44 @@ + -$for(include-before)$ -$include-before$ -$endfor$ -Index -$body$ -$for(include-after)$ -$include-after$ -$endfor$ - + }); + + diff --git a/services/cms/package-lock.json b/services/cms/package-lock.json index 1810b0211427..92754afcab6d 100644 --- a/services/cms/package-lock.json +++ b/services/cms/package-lock.json @@ -12,6 +12,8 @@ "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@fontsource-variable/inter": "^5.1.0", + "@fontsource/inter": "^5.1.0", "@fontsource/josefin-sans": "^5.0.19", "@fontsource/lato": "^5.0.19", "@fontsource/raleway": "^5.0.17", @@ -2823,6 +2825,16 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, + "node_modules/@fontsource-variable/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg==" + }, + "node_modules/@fontsource/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==" + }, "node_modules/@fontsource/josefin-sans": { "version": "5.0.19", "resolved": "https://registry.npmjs.org/@fontsource/josefin-sans/-/josefin-sans-5.0.19.tgz", @@ -32236,6 +32248,16 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, + "@fontsource-variable/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg==" + }, + "@fontsource/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==" + }, "@fontsource/josefin-sans": { "version": "5.0.19", "resolved": "https://registry.npmjs.org/@fontsource/josefin-sans/-/josefin-sans-5.0.19.tgz", diff --git a/services/cms/package.json b/services/cms/package.json index 8d4f6fedc498..80a6bad4bb0a 100644 --- a/services/cms/package.json +++ b/services/cms/package.json @@ -15,6 +15,8 @@ "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@fontsource-variable/inter": "^5.1.0", + "@fontsource/inter": "^5.1.0", "@fontsource/josefin-sans": "^5.0.19", "@fontsource/lato": "^5.0.19", "@fontsource/raleway": "^5.0.17", diff --git a/services/cms/src/blocks/Ingress/IngressEditor.tsx b/services/cms/src/blocks/Ingress/IngressEditor.tsx new file mode 100644 index 000000000000..b7e2b9cb912f --- /dev/null +++ b/services/cms/src/blocks/Ingress/IngressEditor.tsx @@ -0,0 +1,61 @@ +/* eslint-disable i18next/no-literal-string */ +import { css } from "@emotion/css" +import { RichText } from "@wordpress/block-editor" +import { BlockEditProps } from "@wordpress/blocks" +import React from "react" + +import BlockWrapper from "../BlockWrapper" + +import { InstructionBoxAttributes } from "." + +import { headingFont, primaryFont } from "@/shared-module/common/styles" + +const IngressEditor: React.FC< + React.PropsWithChildren> +> = ({ clientId, attributes, setAttributes }) => { + const { title, subtitle } = attributes + + return ( + +
+ setAttributes({ title: value })} + placeholder={"Heading: "} + /> + setAttributes({ subtitle: value })} + placeholder={"Write a text here"} + /> +
+ + ) +} + +export default IngressEditor diff --git a/services/cms/src/blocks/Ingress/IngressSave.tsx b/services/cms/src/blocks/Ingress/IngressSave.tsx new file mode 100644 index 000000000000..23c446c9116d --- /dev/null +++ b/services/cms/src/blocks/Ingress/IngressSave.tsx @@ -0,0 +1,11 @@ +import { InnerBlocks } from "@wordpress/block-editor" + +const IngressSave: React.FC = () => { + return ( +
+ +
+ ) +} + +export default IngressSave diff --git a/services/cms/src/blocks/Ingress/index.tsx b/services/cms/src/blocks/Ingress/index.tsx new file mode 100644 index 000000000000..8ca4a38bcc7c --- /dev/null +++ b/services/cms/src/blocks/Ingress/index.tsx @@ -0,0 +1,35 @@ +/* eslint-disable i18next/no-literal-string */ +import { BlockConfiguration } from "@wordpress/blocks" +import { formatLtr } from "@wordpress/icons" + +import InstructionBoxEditor from "./IngressEditor" +import InstructionBoxSave from "./IngressSave" + +export interface InstructionBoxAttributes { + title: string + subtitle: string +} + +const InstructionBoxConfiguration: BlockConfiguration = { + title: "Ingress", + description: "Ingress", + category: "text", + attributes: { + title: { + type: "string", + source: "html", + selector: "h1", + default: "Welcome message for course...", + }, + subtitle: { + type: "string", + source: "html", + selector: "p", + }, + }, + icon: formatLtr, + edit: InstructionBoxEditor, + save: InstructionBoxSave, +} + +export default InstructionBoxConfiguration diff --git a/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx b/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx new file mode 100644 index 000000000000..caef3e9a7b14 --- /dev/null +++ b/services/cms/src/blocks/LogoLink/LogoLinkEditor.tsx @@ -0,0 +1,45 @@ +import { css } from "@emotion/css" +import { InnerBlocks } from "@wordpress/block-editor" +import { BlockEditProps, Template } from "@wordpress/blocks" +import React from "react" + +import BlockWrapper from "../BlockWrapper" + +const ALLOWED_NESTED_BLOCKS = ["core/image", "core/columns"] + +const LOGO_LINK_TEMPLATE: Template[] = [ + [ + "core/columns", + { isStackedOnMobile: true }, + [ + ["core/column", {}, [["core/image"]]], + ["core/column", {}, [["core/image"]]], + ["core/column", {}, [["core/image"]]], + ], + ], +] + +const LogoLinkEditor: React.FC>>> = ({ + clientId, +}) => { + return ( + +
+
+ +
+
+ + ) +} + +export default LogoLinkEditor diff --git a/services/cms/src/blocks/LogoLink/LogoLinkSave.tsx b/services/cms/src/blocks/LogoLink/LogoLinkSave.tsx new file mode 100644 index 000000000000..0699e10ef0e0 --- /dev/null +++ b/services/cms/src/blocks/LogoLink/LogoLinkSave.tsx @@ -0,0 +1,11 @@ +import { InnerBlocks } from "@wordpress/block-editor" + +const LogoLinkSave: React.FC = () => { + return ( +
+ +
+ ) +} + +export default LogoLinkSave diff --git a/services/cms/src/blocks/LogoLink/index.tsx b/services/cms/src/blocks/LogoLink/index.tsx new file mode 100644 index 000000000000..d3c34bd0613e --- /dev/null +++ b/services/cms/src/blocks/LogoLink/index.tsx @@ -0,0 +1,18 @@ +/* eslint-disable i18next/no-literal-string */ +import { BlockConfiguration } from "@wordpress/blocks" + +import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories" + +import LogoLinkEditor from "./LogoLinkEditor" +import LogoLinkSave from "./LogoLinkSave" + +const LogoLinkConfiguration: BlockConfiguration = { + title: "Logo Link", + description: "Logo Link", + category: MOOCFI_CATEGORY_SLUG, + attributes: {}, + edit: LogoLinkEditor, + save: LogoLinkSave, +} + +export default LogoLinkConfiguration diff --git a/services/cms/src/blocks/Terminology/TerminologyBlockEditor.tsx b/services/cms/src/blocks/Terminology/TerminologyBlockEditor.tsx new file mode 100644 index 000000000000..1683af46a4f7 --- /dev/null +++ b/services/cms/src/blocks/Terminology/TerminologyBlockEditor.tsx @@ -0,0 +1,92 @@ +import { css } from "@emotion/css" +import { InnerBlocks, InspectorControls, RichText } from "@wordpress/block-editor" +import { BlockEditProps, Template } from "@wordpress/blocks" +import React from "react" +import { useTranslation } from "react-i18next" + +import BackgroundColorCustomizer from "../../components/blocks/BackgroundColorCustomizer" +import BlockWrapper from "../BlockWrapper" + +import { TerminologyBlockAttributes } from "." + +import { primaryFont } from "@/shared-module/common/styles" + +const ALLOWED_NESTED_BLOCKS = ["core/heading", "core/paragraph"] +const LANDING_PAGE_HERO_SECTION_TEMPLATE: Template[] = [ + ["core/paragraph", { content: "Insert body text...", placeholder: "Insert body text..." }], +] + +const TerminologyBlockEditor: React.FC< + React.PropsWithChildren> +> = ({ clientId, attributes, setAttributes }) => { + const { title, blockName } = attributes + const { t } = useTranslation() + return ( + + + + +
+
+ setAttributes({ blockName: value })} + placeholder={t("terminology")} + /> + setAttributes({ title: value })} + placeholder={t("welcome-message-for-course")} + /> + +
+
+ + ) +} + +export default TerminologyBlockEditor diff --git a/services/cms/src/blocks/Terminology/TerminologyBlockSave.tsx b/services/cms/src/blocks/Terminology/TerminologyBlockSave.tsx new file mode 100644 index 000000000000..ba158c6f6362 --- /dev/null +++ b/services/cms/src/blocks/Terminology/TerminologyBlockSave.tsx @@ -0,0 +1,11 @@ +import { InnerBlocks } from "@wordpress/block-editor" + +const TerminologyBlockSave: React.FC = () => { + return ( +
+ +
+ ) +} + +export default TerminologyBlockSave diff --git a/services/cms/src/blocks/Terminology/index.tsx b/services/cms/src/blocks/Terminology/index.tsx new file mode 100644 index 000000000000..20c9648fd04d --- /dev/null +++ b/services/cms/src/blocks/Terminology/index.tsx @@ -0,0 +1,44 @@ +/* eslint-disable i18next/no-literal-string */ +import { BlockConfiguration } from "@wordpress/blocks" + +import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories" + +import LandingPageHeroSectionEditor from "./TerminologyBlockEditor" +import LandingPageHeroSectionSave from "./TerminologyBlockSave" + +export interface TerminologyBlockAttributes { + title: string + primaryColor: string + content: string + blockName: string +} + +const LandingPageHeroSectionConfiguration: BlockConfiguration = { + title: "Terminology Block", + description: "Terminology Block.", + category: MOOCFI_CATEGORY_SLUG, + attributes: { + title: { + type: "string", + source: "html", + selector: "h1", + default: "Welcome message for course...", + }, + blockName: { + type: "string", + default: "Terminology", + }, + primaryColor: { + type: "string", + default: "#FFFFFF", + }, + content: { + type: "string", + default: "Type the block's content here", + }, + }, + edit: LandingPageHeroSectionEditor, + save: LandingPageHeroSectionSave, +} + +export default LandingPageHeroSectionConfiguration diff --git a/services/cms/src/blocks/index.tsx b/services/cms/src/blocks/index.tsx index c28a72b84bc3..7c7f6cda8625 100644 --- a/services/cms/src/blocks/index.tsx +++ b/services/cms/src/blocks/index.tsx @@ -23,16 +23,19 @@ import HeroSection from "./HeroSection" import HightlightBox from "./HighlightBox" import Iframe from "./Iframe" import InfoBox from "./InfoBox" +import Ingress from "./Ingress" import InstructionBox from "./InstructionBox" import LandingPageCopyText from "./LandingPageCopyText" import LandingPageHeroSection from "./LandingPageHeroSection" import Latex from "./Latex" import LearningObjectives from "./LearningObjectives" +// import LogoLink from "./LogoLink" import Map from "./Map" import PagesInChapter from "./PagesInChapter" import PartnersBlock from "./Partners" import ResearchFormQuestion from "./ResearchConsentQuestion" import TableBox from "./TableBox" +import TerminologyBlock from "./Terminology" import TopLevelPage from "./TopLevelPage" import UnsupportedBlock from "./UnsupportedBlock" @@ -70,6 +73,9 @@ export const blockTypeMapForPages = [ ["moocfi/partners", PartnersBlock], ["moocfi/top-level-pages", TopLevelPage], ["moocfi/code-giveaway", CodeGiveaway], + ["moocfi/ingress", Ingress], + ["moocfi/terminology-block", TerminologyBlock], + // ["moocfi/logo-link", LogoLink], // eslint-disable-next-line @typescript-eslint/no-explicit-any ] as Array<[string, BlockConfiguration>]> diff --git a/services/course-material/package-lock.json b/services/course-material/package-lock.json index 015f5f3ffa84..e4a4e9238ef6 100644 --- a/services/course-material/package-lock.json +++ b/services/course-material/package-lock.json @@ -11,6 +11,8 @@ "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@fontsource-variable/inter": "^5.1.0", + "@fontsource/inter": "^5.1.0", "@fontsource/josefin-sans": "^5.0.19", "@fontsource/lato": "^5.0.19", "@fontsource/raleway": "^5.0.17", @@ -2573,6 +2575,16 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" }, + "node_modules/@fontsource-variable/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg==" + }, + "node_modules/@fontsource/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==" + }, "node_modules/@fontsource/josefin-sans": { "version": "5.0.19", "resolved": "https://registry.npmjs.org/@fontsource/josefin-sans/-/josefin-sans-5.0.19.tgz", @@ -18381,6 +18393,16 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" }, + "@fontsource-variable/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-Wj2dUGP0vUpxRGQTXQTCNJO+aLcFcQm+gUPXfj/aS877bQkEPBPv9JvZJpwdm2vzelt8NTZ+ausKlBCJjh2XIg==" + }, + "@fontsource/inter": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.0.tgz", + "integrity": "sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==" + }, "@fontsource/josefin-sans": { "version": "5.0.19", "resolved": "https://registry.npmjs.org/@fontsource/josefin-sans/-/josefin-sans-5.0.19.tgz", diff --git a/services/course-material/package.json b/services/course-material/package.json index 7b9c05a64735..1dcb87d5d84e 100644 --- a/services/course-material/package.json +++ b/services/course-material/package.json @@ -12,6 +12,8 @@ "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", + "@fontsource-variable/inter": "^5.1.0", + "@fontsource/inter": "^5.1.0", "@fontsource/josefin-sans": "^5.0.19", "@fontsource/lato": "^5.0.19", "@fontsource/raleway": "^5.0.17", diff --git a/services/course-material/src/components/ContentRenderer/index.tsx b/services/course-material/src/components/ContentRenderer/index.tsx index e39f79c70737..21c78ce23ebf 100644 --- a/services/course-material/src/components/ContentRenderer/index.tsx +++ b/services/course-material/src/components/ContentRenderer/index.tsx @@ -51,15 +51,18 @@ import HeroSectionBlock from "./moocfi/HeroSectionBlock" import HighlightBox from "./moocfi/HighglightBox" import { IframeBlock } from "./moocfi/IframeBlock" import InfoBox from "./moocfi/InfoBox" +import Ingress from "./moocfi/Ingress" import InstructionBoxBlock from "./moocfi/InstructionBox" import LandingPageCopyTextBlock from "./moocfi/LandingPageCopyTextBlock" import LandingPageHeroSectionBlock from "./moocfi/LandingPageHeroSectionBlock" import LearningObjectiveBlock from "./moocfi/LearningObjectiveBlock" +import LogoLink from "./moocfi/LogoLink" import Map from "./moocfi/Map" import PagesInChapterBlock from "./moocfi/PagesInChapterBlock" import PartnersBlock from "./moocfi/PartnersBlock" import ResearchConsentQuestionBlock from "./moocfi/ResearchConsentQuestionBlock" import TableBox from "./moocfi/TableBox" +import TerminologyBlock from "./moocfi/TerminologyBlock" import TopLevelPageBlock from "./moocfi/TopLevelPagesBlock/index" import { NewProposedBlockEdit } from "@/shared-module/common/bindings" @@ -161,6 +164,9 @@ export const blockToRendererMap: { [blockName: string]: any } = { "moocfi/research-consent-question": ResearchConsentQuestionBlock, "moocfi/exercise-custom-view-block": ExerciseCustomViewBlock, "moocfi/code-giveaway": CodeGiveawayBlock, + "moocfi/ingress": Ingress, + "moocfi/terminology-block": TerminologyBlock, + "moocfi/logo-link": LogoLink, } const highlightedBlockStyles = css` diff --git a/services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx index ab2aba3cf346..4e310911639b 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx @@ -15,7 +15,7 @@ interface InfoBoxBlockAttributes { // eslint-disable-next-line i18next/no-literal-string const Wrapper = styled.div` background: #f7f8f9; - padding: 2rem 2rem 1rem 2rem; + padding: 1.25rem 1.4rem 0.4rem 1.4rem; margin-bottom: 1rem; h3 { @@ -29,6 +29,10 @@ const Wrapper = styled.div` /*Overwrite InnerBlock Component styles*/ + .course-material-block { + margin: 1.25rem 0 !important; + } + figure { margin: 0; img { diff --git a/services/course-material/src/components/ContentRenderer/moocfi/CourseObjective/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/CourseObjective/index.tsx index c732bcda618b..528cb1133dc7 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/CourseObjective/index.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/CourseObjective/index.tsx @@ -75,7 +75,7 @@ const Objective = styled.div` background: #f7f8f9; position: relative; overflow: hidden; - padding: 2rem; + padding: 1.25rem; border: 2px solid #edf0f2; .paragraph { diff --git a/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/index.tsx index b4c7469c6cf6..cef1cdf2e8a3 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/index.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/index.tsx @@ -5,10 +5,9 @@ import HighlightItem from "./HilightItem" import { baseTheme } from "@/shared-module/common/styles" -const HilightContainer = styled.div` +const HighlightContainer = styled.div` display: flex; flex-direction: row; - padding: 1rem 0; ` export interface CompletionRequirementsTabulationProps { @@ -22,7 +21,7 @@ const CompletionRequirementsTabulation: React.FC< const { t } = useTranslation() return ( <> - + {!!pointsRequiredForCompletion && ( )} - + ) } diff --git a/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CourseProgress.tsx b/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CourseProgress.tsx index e1ee463b9890..d41404226c21 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CourseProgress.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/CourseProgressBlock/CourseProgress.tsx @@ -9,7 +9,6 @@ import TempAccordionItem from "./TempAccordionItem" import { UserCourseInstanceProgress } from "@/shared-module/common/bindings" import Progress from "@/shared-module/common/components/CourseProgress" -import { respondToOrLarger } from "@/shared-module/common/styles/respond" export interface CourseProgressProps { userCourseInstanceProgress: UserCourseInstanceProgress[] @@ -19,15 +18,11 @@ const Wrapper = styled.div` background-color: rgba(242, 245, 247, 0.8); margin: 3px 0 6px 0; padding: 0; - - ${respondToOrLarger.md} { - padding: 0.8rem 3rem 1.5rem 3rem; - } ` const TotalWrapper = styled.div` background-color: rgb(242, 245, 247); margin: 3px 0 3px 0; - padding: 0.8rem 3rem 1.5rem 3rem; + padding: 0.8rem 3rem 0 3rem; ` const CourseProgress: React.FC> = ({ diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx index dc9e70d15bc7..80fe64478af7 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx @@ -116,6 +116,9 @@ const ExerciseTask: React.FC> = ({ font-weight: 400; color: ${baseTheme.colors.gray[500]}; padding: 0.75rem 1rem; + align-items: center; + display: flex; + font-size: 1rem; svg { margin-right: 0.5rem; diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx index 2a13cecac0bf..91f4a7f12e55 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx @@ -120,7 +120,7 @@ export const makeExerciseButtonMutedStyles = css` const DeadlineText = styled.div` display: flex; justify-content: center; - font-size: 1.125rem; + font-size: 1rem; padding: 1rem; border-radius: 0.25rem; margin-bottom: 0.625rem; @@ -376,7 +376,7 @@ const ExerciseBlock: React.FC< >
>> = ( + props, +) => { + return ( +
+ {props.data.attributes.title && ( +

+ {props.data.attributes.title} +

+ )} +

+ {props.data.attributes.subtitle} +

+
+ ) +} + +export default withErrorBoundary(Ingress) diff --git a/services/course-material/src/components/ContentRenderer/moocfi/LogoLink.tsx b/services/course-material/src/components/ContentRenderer/moocfi/LogoLink.tsx new file mode 100644 index 000000000000..0836c6c377da --- /dev/null +++ b/services/course-material/src/components/ContentRenderer/moocfi/LogoLink.tsx @@ -0,0 +1,35 @@ +import { css } from "@emotion/css" +import React from "react" + +import { BlockRendererProps } from ".." +import InnerBlocks from "../util/InnerBlocks" + +import BreakFromCentered from "@/shared-module/common/components/Centering/BreakFromCentered" +import Centered from "@/shared-module/common/components/Centering/Centered" +import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary" + +interface InfoBoxBlockAttributes { + backgroundColor: string + noPadding: boolean +} + +const LogoLink: React.FC>> = ( + props, +) => { + return ( + +
+ + + +
+ + ) +} + +export default withErrorBoundary(LogoLink) diff --git a/services/course-material/src/components/ContentRenderer/moocfi/PagesInChapterBlock/PagesInChapter.tsx b/services/course-material/src/components/ContentRenderer/moocfi/PagesInChapterBlock/PagesInChapter.tsx index 6d6f3112b50a..270fa6ea2897 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/PagesInChapterBlock/PagesInChapter.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/PagesInChapterBlock/PagesInChapter.tsx @@ -40,11 +40,11 @@ const PagesInChapter: React.FC> = ( className={cx( INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS, css` - font-size: 2rem; - font-weight: 600; + font-size: 1.875rem; + font-weight: 500; text-align: center; color: #1a2333; - margin-bottom: 2rem; + margin-bottom: 1.6rem; `, )} > diff --git a/services/course-material/src/components/ContentRenderer/moocfi/TerminologyBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/TerminologyBlock.tsx new file mode 100644 index 000000000000..ec8213536c47 --- /dev/null +++ b/services/course-material/src/components/ContentRenderer/moocfi/TerminologyBlock.tsx @@ -0,0 +1,67 @@ +import { css } from "@emotion/css" +import React from "react" + +import { BlockRendererProps } from ".." +import InnerBlocks from "../util/InnerBlocks" + +import Centered from "@/shared-module/common/components/Centering/Centered" +import { primaryFont } from "@/shared-module/common/styles" +import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary" + +interface InfoBoxBlockAttributes { + title: string + primaryColor: string + content: string + blockName: string +} + +const TerminologyBlock: React.FC< + React.PropsWithChildren> +> = (props) => { + return ( +
+ + {props.data.attributes.blockName} + +

{props.data.attributes.title}

+ + + +
+ ) +} + +export default withErrorBoundary(TerminologyBlock) diff --git a/services/course-material/src/components/EditProposalDialog.tsx b/services/course-material/src/components/EditProposalDialog.tsx index 15ed50b96b89..8f626e61929f 100644 --- a/services/course-material/src/components/EditProposalDialog.tsx +++ b/services/course-material/src/components/EditProposalDialog.tsx @@ -7,7 +7,7 @@ import { postProposedEdits } from "../services/backend" import { NewProposedBlockEdit } from "@/shared-module/common/bindings" import Button from "@/shared-module/common/components/Button" import useToastMutation from "@/shared-module/common/hooks/useToastMutation" -import { baseTheme } from "@/shared-module/common/styles" +import { baseTheme, primaryFont } from "@/shared-module/common/styles" interface Props { courseId: string @@ -106,9 +106,7 @@ const EditProposalDialog: React.FC> = ({ >
> = ({ >
> = ({ )}
> = ({