- {isHeaderVisible && (
-
- )}
-
- {explanatoryMessage &&
{explanatoryMessage}
}
-
-
-
-
- {isExpanded && (
-
- {children}
- {actions.childAddable && (
+
+
+ {isHeaderVisible && (
+
+ )}
+
+ {explanatoryMessage &&
{explanatoryMessage}
}
+
- )}
+
- )}
+ {isExpanded && (
+
+ {children}
+ {actions.childAddable && (
+
+ )}
+
+ )}
+
-
+
);
};
diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
index f6b0b943e..64d195a6a 100644
--- a/src/course-outline/subsection-card/SubsectionCard.jsx
+++ b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -9,8 +9,9 @@ import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data
import { RequestStatus } from '../../data/constants';
import CardHeader from '../card-header/CardHeader';
import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
+import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
import TitleButton from '../card-header/TitleButton';
-import { getItemStatus, scrollToElement } from '../utils';
+import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
import messages from './messages';
const SubsectionCard = ({
@@ -46,6 +47,7 @@ const SubsectionCard = ({
visibilityState,
hasChanges,
});
+ const borderStyle = getItemStatusBorder(subsectionStatus);
const handleExpandContent = () => {
setIsExpanded((prevState) => !prevState);
@@ -98,44 +100,56 @@ const SubsectionCard = ({
}, [savingStatus]);
return (
-
- {isHeaderVisible && (
-
- )}
- {isExpanded && (
-
- {children}
- {actions.childAddable && (
-
- )}
-
- )}
-
+
+
+ {isHeaderVisible && (
+
+ )}
+ {isExpanded && (
+
+ {children}
+ {actions.childAddable && (
+
+ )}
+
+ )}
+
+
);
};
diff --git a/src/course-outline/unit-card/UnitCard.jsx b/src/course-outline/unit-card/UnitCard.jsx
index 0abb1943d..7a341eef0 100644
--- a/src/course-outline/unit-card/UnitCard.jsx
+++ b/src/course-outline/unit-card/UnitCard.jsx
@@ -7,8 +7,9 @@ import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data
import { RequestStatus } from '../../data/constants';
import CardHeader from '../card-header/CardHeader';
import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
+import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
import TitleLink from '../card-header/TitleLink';
-import { getItemStatus, scrollToElement } from '../utils';
+import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
const UnitCard = ({
unit,
@@ -41,6 +42,7 @@ const UnitCard = ({
visibilityState,
hasChanges,
});
+ const borderStyle = getItemStatusBorder(unitStatus);
const handleClickMenuButton = () => {
dispatch(setCurrentItem(unit));
@@ -91,25 +93,39 @@ const UnitCard = ({
}
return (
-
-
-
+
+
+
+
+
);
};
diff --git a/src/course-outline/unit-card/UnitCard.scss b/src/course-outline/unit-card/UnitCard.scss
index a1cbda28f..cf30dfcc2 100644
--- a/src/course-outline/unit-card/UnitCard.scss
+++ b/src/course-outline/unit-card/UnitCard.scss
@@ -1,9 +1,5 @@
.unit-card {
- @include pgn-box-shadow(1, "centered");
-
- padding: $spacer 2rem;
- margin-bottom: 1.5rem;
- background: $light-100;
+ flex-grow: 1;
.unit-card__content {
margin: $spacer;
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
index 2dccd59b3..7032212d9 100644
--- a/src/course-outline/utils.jsx
+++ b/src/course-outline/utils.jsx
@@ -75,6 +75,40 @@ const getItemStatusBadgeContent = (status, messages, intl) => {
}
};
+/**
+ * Get section border color
+ * @param {string} status - value from on getItemStatus util
+ * @returns {
+ * borderLeft: string,
+ * }
+ */
+const getItemStatusBorder = (status) => {
+ switch (status) {
+ case ITEM_BADGE_STATUS.live:
+ return {
+ borderLeft: '5px solid #00688D',
+ };
+ case ITEM_BADGE_STATUS.publishedNotLive:
+ return {
+ borderLeft: '5px solid #0D7D4D',
+ };
+ case ITEM_BADGE_STATUS.staffOnly:
+ return {
+ borderLeft: '5px solid #000000',
+ };
+ case ITEM_BADGE_STATUS.unpublishedChanges:
+ return {
+ borderLeft: '5px solid #F0CC00',
+ };
+ case ITEM_BADGE_STATUS.draft:
+ return {
+ borderLeft: '5px solid #F0CC00',
+ };
+ default:
+ return {};
+ }
+};
+
/**
* Get formatted highlights form values
* @param {Array
} currentHighlights - section highlights
@@ -150,6 +184,7 @@ const getVideoSharingOptionText = (id, messages, intl) => {
export {
getItemStatus,
getItemStatusBadgeContent,
+ getItemStatusBorder,
getHighlightsFormValues,
getVideoSharingOptionText,
scrollToElement,