drawer v2 design review fixes (#1959)

* use max-height instead of height as fallback for line clamping the description * reduce gap between info items * also reduce gap between icon and label * instead of using gap, use left margin on the label * fix gap created by there being no platform for a resource * set similar resource endpoints to return 12 results by default * adjust slick carousel settings so an empty space isn't shown at the end of scrolling * fix tablet size drawer width * revert global carousel changes * adjust horizontal padding to 28px from 32 to fix carousel paging issue
mitodl · Jan 14, 2025 · f7417a5 · f7417a5
1 parent 7631164
commit f7417a5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx
@@ -168,7 +168,7 @@ const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
     }),
     minWidth: (theme) => ({
       [theme.breakpoints.down("md")]: {
-        minWidth: "100%",
+        maxWidth: "100%",
       },
     }),
   },

diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx
@@ -55,15 +55,14 @@ const Separator: React.FC = () => (
 const InfoItems = styled.section({
   display: "flex",
   flexDirection: "column",
-  gap: "16px",
+  gap: "12px",
   maxWidth: "100%",
 })
 
 const InfoItemContainer = styled.div({
   display: "flex",
   alignSelf: "stretch",
   alignItems: "baseline",
-  gap: "16px",
   ...theme.typography.subtitle3,
   color: theme.custom.colors.black,
   svg: {
@@ -72,9 +71,6 @@ const InfoItemContainer = styled.div({
     height: "20px",
     flexShrink: 0,
   },
-  [theme.breakpoints.down("sm")]: {
-    gap: "12px",
-  },
 })
 
 const IconContainer = styled.span({
@@ -88,8 +84,12 @@ const IconContainer = styled.span({
 })
 
 const InfoLabel = styled.div({
+  marginLeft: "12px",
   width: "85px",
   flexShrink: 0,
+  [theme.breakpoints.down("sm")]: {
+    marginLeft: 0,
+  },
 })
 
 const InfoValue = styled.div({

diff --git a/...ends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx b/...ends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx
@@ -42,7 +42,7 @@ const OuterContainer = styled.div({
 const Container = styled.div({
   display: "flex",
   flexDirection: "column",
-  padding: "0 32px 24px",
+  padding: "0 28px 24px",
   width: DRAWER_WIDTH,
   [theme.breakpoints.down("md")]: {
     width: "auto",
@@ -55,7 +55,7 @@ const TitleSectionContainer = styled.div({
   position: "sticky",
   justifyContent: "space-between",
   top: "0",
-  padding: "24px 32px",
+  padding: "24px 28px",
   gap: "16px",
   zIndex: 1,
   backgroundColor: theme.custom.colors.white,
@@ -187,7 +187,7 @@ const Description = styled.p({
 const DescriptionCollapsed = styled(Description)({
   display: "-webkit-box",
   overflow: "hidden",
-  height: `calc(${theme.typography.body2.lineHeight} * 5)`,
+  maxHeight: `calc(${theme.typography.body2.lineHeight} * 5)`,
   "@supports (-webkit-line-clamp: 5)": {
     WebkitLineClamp: 5,
     WebkitBoxOrient: "vertical",
@@ -279,7 +279,7 @@ const CarouselContainer = styled.div({
   flexGrow: 1,
   alignItems: "flex-start",
   width: DRAWER_WIDTH,
-  padding: "32px",
+  padding: "32px 28px",
   gap: "32px",
   borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
   background: theme.custom.colors.lightGray1,
@@ -533,14 +533,14 @@ const CallToActionSection = ({
         >
           {cta}
         </StyledLink>
-        <PlatformContainer>
-          {platformImage ? (
+        {platformImage ? (
+          <PlatformContainer>
             <Platform>
               <OnPlatform>on</OnPlatform>
               <StyledPlatformLogo platformCode={platformCode} height={26} />
             </Platform>
-          ) : null}
-        </PlatformContainer>
+          </PlatformContainer>
+        ) : null}
         <ButtonContainer>
           {user?.is_learning_path_editor && (
             <CallToActionButton

diff --git a/learning_resources/views.py b/learning_resources/views.py
@@ -222,7 +222,7 @@ def similar(self, request, *_, **kwargs):
         Returns:
         QuerySet of similar LearningResource for the resource matching the id parameter
         """
-        limit = int(request.GET.get("limit", 10))
+        limit = int(request.GET.get("limit", 12))
         pk = int(kwargs.get("id"))
         learning_resource = get_object_or_404(LearningResource, id=pk)
         learning_resource = LearningResource.objects.for_search_serialization().get(
@@ -263,7 +263,7 @@ def vector_similar(self, request, *_, **kwargs):
         Returns:
         QuerySet of similar LearningResource for the resource matching the id parameter
         """
-        limit = int(request.GET.get("limit", 10))
+        limit = int(request.GET.get("limit", 12))
         pk = int(kwargs.get("id"))
 
         try: