Ui fixes

rage · Sep 12, 2023 · 37665d0 · 37665d0
1 parent b1c7494
commit 37665d0
Show file tree

Hide file tree

Showing 144 changed files with 115 additions and 31 deletions.
diff --git a/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx b/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx
@@ -8,6 +8,7 @@ import BackgroundAndColorCustomizer from "../../components/blocks/BackgroundAndC
 import PageContext from "../../contexts/PageContext"
 import BreakFromCentered from "../../shared-module/components/Centering/BreakFromCentered"
 import { baseTheme } from "../../shared-module/styles"
+import { respondToOrLarger } from "../../shared-module/styles/respond"
 import {
   CMS_EDITOR_SIDEBAR_THRESHOLD,
   CMS_EDITOR_SIDEBAR_WIDTH,
@@ -26,6 +27,11 @@ const HeroSectionEditor: React.FC<
   const path = useContext(PageContext)?.page?.url_path
   const formattedPath = path?.replace("-", " ").replace("/", "")
 
+  const { backgroundColor, backgroundImage, backgroundRepeatX, partiallyTransparent, alignBottom } =
+    attributes
+
+  const backgroundVerticalAlignment = alignBottom ? "bottom" : "center"
+
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
@@ -39,16 +45,40 @@ const HeroSectionEditor: React.FC<
       >
         <div
           className={css`
-            background: ${baseTheme.colors.green[200]};
-            background-color: ${attributes.backgroundColor};
-            ${attributes.backgroundImage &&
-            `background-image: url("${attributes.backgroundImage}");
-            background-repeat: no-repeat;
-            background-position: ${direction} center;`}
             width: 100%;
             border-radius: 1px;
             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             padding: 7.5em 1em;
+            margin-bottom: 3rem;
+
+            background-color: ${backgroundColor ? backgroundColor : baseTheme.colors.green["200"]};
+            position: relative;
+
+            &::after {
+              background-size: 26rem;
+              width: 100%;
+              height: 100%;
+              content: "";
+              opacity: 0.3;
+              background-image: url(${backgroundImage});
+              background-repeat: ${backgroundRepeatX ? "repeat-x" : "no-repeat"};
+              background-position: center ${backgroundVerticalAlignment};
+              position: absolute;
+              top: 0px;
+              left: 0px;
+              ${respondToOrLarger.md} {
+                opacity: ${partiallyTransparent ? "1" : "0.4"};
+                background-position: ${direction} ${backgroundVerticalAlignment};
+                background-size: ${direction == "center" ? "contain" : "22rem"};
+                left: ${direction == "center" ? "0" : "30px"};
+              }
+              ${respondToOrLarger.lg} {
+                opacity: ${partiallyTransparent ? "1" : "0.4"};
+                background-position: ${direction} ${backgroundVerticalAlignment};
+                background-size: ${direction == "center" ? "contain" : "26rem"};
+                left: ${direction == "center" ? "0" : "40px"};
+              }
+            }
           `}
         >
           <div

diff --git a/services/cms/src/blocks/HeroSection/index.tsx b/services/cms/src/blocks/HeroSection/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable i18next/no-literal-string */
 import { BlockConfiguration } from "@wordpress/blocks"
 
+import { baseTheme } from "../../shared-module/styles"
 import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
 
 import HeroSectionEditor from "./HeroSectionEditor"
@@ -15,6 +16,7 @@ export interface HeroSectionAttributes {
   backgroundImage: string | undefined
   backgroundRepeatX: boolean | undefined
   alignCenter?: boolean | undefined
+  alignBottom?: boolean | undefined
   useDefaultTextForLabel?: boolean | undefined
   partiallyTransparent?: boolean | undefined
 }
@@ -44,11 +46,11 @@ const HeroSectionConfiguration: BlockConfiguration<HeroSectionAttributes> = {
     },
     backgroundColor: {
       type: "string",
-      default: "#f9f9f9",
+      default: baseTheme.colors.green[200],
     },
     fontColor: {
       type: "string",
-      default: "#f9f9f9",
+      default: baseTheme.colors.gray[700],
     },
     backgroundImage: {
       type: "string",
@@ -70,6 +72,10 @@ const HeroSectionConfiguration: BlockConfiguration<HeroSectionAttributes> = {
       type: "boolean",
       default: true,
     },
+    alignBottom: {
+      type: "boolean",
+      default: false,
+    },
   },
   edit: HeroSectionEditor,
   save: HeroSectionSave,

diff --git a/services/cms/src/blocks/InfoBox/InfoBoxEditor.tsx b/services/cms/src/blocks/InfoBox/InfoBoxEditor.tsx
@@ -1,11 +1,14 @@
 import { css } from "@emotion/css"
 import { InnerBlocks, InspectorControls } from "@wordpress/block-editor"
 import { BlockEditProps } from "@wordpress/blocks"
+import { PanelBody } from "@wordpress/components"
 import React from "react"
+import { useTranslation } from "react-i18next"
 
 import BackgroundColorCustomizer from "../../components/blocks/BackgroundColorCustomizer"
 import BreakFromCentered from "../../shared-module/components/Centering/BreakFromCentered"
 import Centered from "../../shared-module/components/Centering/Centered"
+import CheckBox from "../../shared-module/components/InputFields/CheckBox"
 import breakFromCenteredProps from "../../utils/breakfromCenteredProps"
 import BlockWrapper from "../BlockWrapper"
 
@@ -16,6 +19,7 @@ const InfoBoxEditor: React.FC<React.PropsWithChildren<BlockEditProps<InfoBoxComp
   attributes,
   setAttributes,
 }) => {
+  const { t } = useTranslation()
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
@@ -25,11 +29,24 @@ const InfoBoxEditor: React.FC<React.PropsWithChildren<BlockEditProps<InfoBoxComp
           // eslint-disable-next-line i18next/no-literal-string
           defaultBackgroundColor="#faf5f3"
         />
+
+        <div
+          className={css`
+            margin: 1rem;
+            margin-bottom: 1.5rem;
+          `}
+        >
+          <CheckBox
+            checked={attributes.noPadding}
+            onChange={(event) => setAttributes({ noPadding: event.target.checked })}
+            label={t("label-no-padding")}
+          />
+        </div>
       </InspectorControls>
       <BreakFromCentered {...breakFromCenteredProps}>
         <div
           className={css`
-            padding: 3rem;
+            ${!attributes.noPadding && `padding: 3rem;`}
             background-color: ${attributes.backgroundColor};
           `}
         >

diff --git a/services/cms/src/blocks/InfoBox/deprecated.tsx b/services/cms/src/blocks/InfoBox/deprecated.tsx
@@ -62,6 +62,7 @@ export const Deprecated1: BlockDeprecation<Deprecated1InfoBoxComponentProps> = {
     const newAttributes: InfoBoxComponentProps = {
       ...omit(attributes, ["title", "bodyText"]),
       backgroundColor: "#faf5f3",
+      noPadding: false,
     }
     return [newAttributes, newInnerBlocks]
   },

diff --git a/services/cms/src/blocks/InfoBox/index.tsx b/services/cms/src/blocks/InfoBox/index.tsx
@@ -7,6 +7,7 @@ import { Deprecated1 } from "./deprecated"
 
 export interface InfoBoxComponentProps {
   backgroundColor: string
+  noPadding: boolean
 }
 
 const InfoBoxConfiguration: BlockConfiguration<InfoBoxComponentProps> = {
@@ -18,6 +19,10 @@ const InfoBoxConfiguration: BlockConfiguration<InfoBoxComponentProps> = {
       type: "string",
       default: "#faf5f3",
     },
+    noPadding: {
+      type: "boolean",
+      default: false,
+    },
   },
   edit: InfoBoxEditor,
   save: InfoBoxSave,

diff --git a/services/cms/src/blocks/LandingPageHeroSection/LandingPageHeroSectionEditor.tsx b/services/cms/src/blocks/LandingPageHeroSection/LandingPageHeroSectionEditor.tsx
@@ -31,7 +31,11 @@ const LandingPageHeroSectionEditor: React.FC<
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
-        <BackgroundAndColorCustomizer attributes={attributes} setAttributes={setAttributes} />
+        <BackgroundAndColorCustomizer
+          attributes={attributes}
+          setAttributes={setAttributes}
+          noAlign
+        />
       </InspectorControls>
       <BreakFromCentered
         sidebar

diff --git a/services/cms/src/blocks/index.tsx b/services/cms/src/blocks/index.tsx
@@ -37,7 +37,7 @@ import UnsupportedBlock from "./UnsupportedBlock"
 export const blockTypeMapForPages = [
   ["moocfi/aside", Aside],
   ["moocfi/chapter-progress", ChapterProgress],
-  ["moocfi/congratulations", HeroSection],
+  ["moocfi/congratulations", Congratulations],
   ["moocfi/course-chapter-grid", CourseChapterGrid],
   ["moocfi/course-progress", CourseProgress],
   ["moocfi/exercise-slide", ExerciseSlide],

diff --git a/services/cms/src/components/blocks/BackgroundAndColorCustomizer.tsx b/services/cms/src/components/blocks/BackgroundAndColorCustomizer.tsx
@@ -29,6 +29,7 @@ interface RequiredAttributes {
   backgroundColor: string | undefined
   fontColor?: string | undefined
   alignCenter?: boolean | undefined
+  alignBottom?: boolean | undefined
   backgroundRepeatX: boolean | undefined
   useDefaultTextForLabel?: boolean | undefined
   partiallyTransparent?: boolean | undefined
@@ -37,11 +38,12 @@ interface RequiredAttributes {
 interface BackgroundAndColorCustomizerProps {
   attributes: RequiredAttributes
   setAttributes: (attributes: Partial<RequiredAttributes>) => void
+  noAlign?: boolean
 }
 
 const BackgroundAndColorCustomizer: React.FC<
   React.PropsWithChildren<BackgroundAndColorCustomizerProps>
-> = ({ attributes, setAttributes }) => {
+> = ({ attributes, setAttributes, noAlign }) => {
   const { t } = useTranslation()
   const alignCenter = attributes.alignCenter == undefined || attributes.alignCenter
   const useDefaultTextForLabel =
@@ -118,11 +120,20 @@ const BackgroundAndColorCustomizer: React.FC<
         checked={attributes.backgroundRepeatX}
         onChange={() => setAttributes({ backgroundRepeatX: !attributes.backgroundRepeatX })}
       />
-      <CheckBox
-        label={t("label-align-center")}
-        checked={alignCenter}
-        onChange={() => setAttributes({ alignCenter: !alignCenter })}
-      />
+      {!noAlign && (
+        <>
+          <CheckBox
+            label={t("label-align-center")}
+            checked={alignCenter}
+            onChange={() => setAttributes({ alignCenter: !alignCenter })}
+          />
+          <CheckBox
+            label={t("label-align-bottom")}
+            checked={attributes.alignBottom}
+            onChange={() => setAttributes({ alignBottom: !attributes.alignBottom })}
+          />
+        </>
+      )}
       <CheckBox
         label={t("use-default-text-for-label")}
         checked={useDefaultTextForLabel}

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/HeroSectionBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/HeroSectionBlock.tsx
@@ -33,6 +33,7 @@ const HeroSectionBlock: React.FC<React.PropsWithChildren<BlockRendererProps<Hero
         alignCenter={props.data.attributes.alignCenter ?? DEFAULT}
         backgroundColor={props.data.attributes.backgroundColor}
         backgroundRepeatX={props.data.attributes.backgroundRepeatX}
+        alignBottom={props.data.attributes.alignBottom}
       />
     </BreakFromCentered>
   )

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/InfoBox.tsx b/services/course-material/src/components/ContentRenderer/moocfi/InfoBox.tsx
@@ -9,6 +9,7 @@ import InnerBlocks from "../util/InnerBlocks"
 
 interface InfoBoxBlockAttributes {
   backgroundColor: string
+  noPadding: boolean
 }
 
 const InfoBoxBlock: React.FC<
@@ -18,7 +19,7 @@ const InfoBoxBlock: React.FC<
     <BreakFromCentered sidebar={false}>
       <div
         className={css`
-          padding: 3rem;
+          ${!props.data.attributes.noPadding && `padding: 3rem;`}
           background-color: ${props.data.attributes.backgroundColor};
         `}
       >

diff --git a/services/course-material/src/components/HeroSection.tsx b/services/course-material/src/components/HeroSection.tsx
@@ -73,11 +73,13 @@ export interface HeroSectionProps {
   backgroundImage?: string
   fontColor?: string
   alignCenter: boolean
+  alignBottom?: boolean | undefined
   backgroundColor?: string
   label?: string
   useDefaultTextForLabel?: boolean
   partiallyTransparent?: boolean
   backgroundRepeatX?: boolean
+  backgroundSizeRem?: number
 }
 
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & HeroSectionProps
@@ -90,13 +92,16 @@ const HeroSection: React.FC<React.PropsWithChildren<React.PropsWithChildren<Card
   alignCenter,
   backgroundColor,
   label,
-  partiallyTransparent: isNotPartiallyTransparent,
+  partiallyTransparent,
   backgroundRepeatX,
+  backgroundSizeRem,
+  alignBottom,
 }) => {
   const CENTER = "center"
   const LEFT = "left"
   const direction = alignCenter ? CENTER : LEFT
   const { terms } = useContext(GlossaryContext)
+  const backgroundVerticalAlignment = alignBottom ? "bottom" : "center"
   return (
     <div
       id="hero-section"
@@ -112,26 +117,26 @@ const HeroSection: React.FC<React.PropsWithChildren<React.PropsWithChildren<Card
         position: relative;
 
         &::after {
-          background-size: 26rem;
+          background-size: ${backgroundSizeRem ?? 26}rem;
           width: 100%;
           height: 100%;
           content: "";
           opacity: 0.3;
           background-image: url(${backgroundImage});
           background-repeat: ${backgroundRepeatX ? "repeat-x" : "no-repeat"};
-          background-position: center center;
+          background-position: center ${backgroundVerticalAlignment};
           position: absolute;
           top: 0px;
           left: 0px;
           ${respondToOrLarger.md} {
-            opacity: ${isNotPartiallyTransparent ? "1" : "0.4"};
-            background-position: ${direction} center;
+            opacity: ${partiallyTransparent ? "1" : "0.4"};
+            background-position: ${direction} ${backgroundVerticalAlignment};
             background-size: ${direction == "center" ? "contain" : "22rem"};
             left: ${direction == "center" ? "0" : "30px"};
           }
           ${respondToOrLarger.lg} {
-            opacity: ${isNotPartiallyTransparent ? "1" : "0.4"};
-            background-position: ${direction} center;
+            opacity: ${partiallyTransparent ? "1" : "0.4"};
+            background-position: ${direction} ${backgroundVerticalAlignment};
             background-size: ${direction == "center" ? "contain" : "26rem"};
             left: ${direction == "center" ? "0" : "40px"};
           }

diff --git a/shared-module/src/locales/en/cms.json b/shared-module/src/locales/en/cms.json
@@ -5,15 +5,17 @@
   "add-task": "Add task",
   "answer-required": "Answer required",
   "are-you-sure-you-want-to-discard-changes": "Are you sure you want to discard unsaved changes?",
+  "authors-block": "Author's Block",
+  "authors-block-description": "Authors block is use to display brief bio and photo of author(s) of a specific page",
   "available-repository-exercises": "Available repository exercises",
   "background": "Background",
   "background-color": "Background color",
   "background-image": "Background image",
   "block-list": "Current blocks",
   "block-menu": "Add block / All available blocks",
   "block-props": "Block properties",
-  "button-text-export-all-pages": "Export all pages",
   "button-text-create": "Create",
+  "button-text-export-all-pages": "Export all pages",
   "button-text-select-media": "Select media (not implemented)",
   "chapter-progress-placeholder": "Chapter progress placeholder",
   "chapter-progress-placeholder-explanation": "This block is used to display Chapter progress. To display the whole course progress, you should use the Course Progress block.",
@@ -41,8 +43,10 @@
   "glossary-placeholder": "Glossary Placeholder",
   "glossary-placeholder-explanation": "This block will contain the glossary of the course.",
   "header-export": "Export",
+  "label-align-bottom": "Align bottom",
   "label-align-center": "Align center",
   "label-email-subject": "Email subject",
+  "label-no-padding": "No padding",
   "label-repeat-background-x": "Repeat background horizontally",
   "label-template-name": "Template name",
   "label-title": "Title",
@@ -68,8 +72,6 @@
   "partially-transparent-background": "Make background image partially transparent",
   "partners-block": "Partners Block",
   "partners-block-description": "Partners block is use to display all partner's logo in the landing page",
-  "authors-block": "Author's Block",
-  "authors-block-description": "Authors block is use to display brief bio and photo of author(s) of a specific page",
   "peer-review-accepting-strategy": "Peer review accepting strategy",
   "peer-review-accepting-threshold": "Peer review accepting threshold",
   "peer-review-question": "Peer review question",

diff --git a/shared-module/src/locales/en/course-material.json b/shared-module/src/locales/en/course-material.json
@@ -10,6 +10,7 @@
   "attempted-exercises-required-for-completion": "Attempted exercises required for completion",
   "audio-notification-description": "Hear the current page content read aloud",
   "audio-player": "Listen",
+  "author": "Authors",
   "available-in-languages": "Available in {{num}} languages",
   "available-on-date-at-time": "Available {{ date }} at {{ time }}",
   "block-invalid-without-course": "This block cannot be used on a page not related to a course.",
@@ -148,7 +149,6 @@
   "table-of-contents": "Select a page in the chapter",
   "template-exercise-instructions": "You can submit your answer to each question to save their state before submitting the exam. You will see the results after you submit the exam or the timer runs out.",
   "term": "Term",
-  "author": "Authors",
   "test-version-of-course-text": "Test version of the course. For evaluation purposes only.",
   "things-to-know-before-you-start": "Things to know before you start!",
   "this-course-has-no-pages": "This course has no pages",