From 606bfbcd6fd219a19286cf85319f4c132e3b957f Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Mon, 10 Aug 2020 22:32:15 +0530
Subject: [PATCH] Fix scaling of quick view cards on smaller devices
---
.../pages/ModuleResources/index.tsx | 7 +++--
.../pages/ModuleResources/style.module.scss | 30 ++++++++++++-------
2 files changed, 25 insertions(+), 12 deletions(-)
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index c95c397d5..cfd071b66 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -41,7 +41,7 @@ const ModuleResources: React.FC = () => {
<Row>
{[...Array(4)].map((e, i) => (
- <Col xs={6} sm={6} md={3} key={i}>
+ <Col xs={12} sm={6} md={6} lg={4} xl={3} key={i}>
<Card className={styles.quickViewCard}>
<Card.Img variant="top" src={graphIllustration} />
<Card.Body>
@@ -52,9 +52,12 @@ const ModuleResources: React.FC = () => {
/>
</Card.Body>
<Card.Footer>
- <Badge pill className={styles.quickViewTag}>
+ <Badge pill className={classNames(styles.quickViewTag, styles.tagTeal)}>
New
</Badge>
+ <Badge pill className={classNames(styles.quickViewTag, styles.tagBlue)}>
+ Week 1
+ </Badge>
</Card.Footer>
</Card>
</Col>
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index 5315e907b..23ad2dcf1 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -12,9 +12,9 @@
border-radius: 8px;
background-color: $gray-100;
border-color: $gray-100;
- transition: 0s all;
- -webkit-transition: 0s all;
- -moz-transition: 0s all;
+ transition: 0.2s background-color;
+ -webkit-transition: 0.2s background-color;
+ -moz-transition: 0.2s back-ground-color;
}
.serachBar::placeholder {
@@ -42,10 +42,9 @@
background-color: $gray-100;
border-color: $gray-100;
color: $gray-500;
- transition: 0s all;
- -webkit-transition: 0s all;
- -moz-transition: 0s all;
- margin-left: 1px;
+ transition: 0.2s background-color;
+ -webkit-transition: 0.2s background-color;
+ -moz-transition: 0.2s back-ground-color;
}
@@ -78,6 +77,7 @@
padding: 0.5rem;
display: flex;
justify-content: space-between;
+ align-items: center;
border-top: 1px solid $gray-300;
}
@@ -101,15 +101,25 @@
border-top-right-radius: 8px;
}
-$new-tag-background: transparentize($blue-100, 0.5);
+$blue-tag-background: transparentize($blue-100, 0.5);
+$teal-tag-background: transparentize($teal-100, 0.5);
.quickViewTag {
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
- color: $blue-700;
- background: $new-tag-background;
border-radius: 4px;
+ margin-right: 8px;
+}
+
+.tagBlue {
+ color: $blue-700;
+ background: $blue-tag-background;
+}
+
+.tagTeal {
+ color: $teal-700;
+ background: $teal-tag-background;
}
.folderCard {
--
GitLab