From 2e44868754d5e1215059e4a147d5772f224b358b Mon Sep 17 00:00:00 2001 From: Evelyn Cho Date: Sun, 20 Oct 2024 11:34:01 -0700 Subject: [PATCH 1/2] made change to daily bruin app.js --- yarn.lock | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 yarn.lock diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..e69de29 From 65d43cd1650fe2fa38629836e9fcee59d1bce8e3 Mon Sep 17 00:00:00 2001 From: Evelyn Cho Date: Thu, 31 Oct 2024 19:06:57 -0700 Subject: [PATCH 2/2] Updated articleCard based on feedbacks (w/only one graphite underline appearing) --- src/components/ArticleCard.js | 108 +++++++++++++++++++++-- src/images/ArticleCardBubble.svg | 3 + src/images/ArticleCardBubbleGraphite.svg | 3 + src/images/ArticleCardGraphite.svg | 3 + 4 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 src/images/ArticleCardBubble.svg create mode 100644 src/images/ArticleCardBubbleGraphite.svg create mode 100644 src/images/ArticleCardGraphite.svg diff --git a/src/components/ArticleCard.js b/src/components/ArticleCard.js index b451854..a2ebb7e 100644 --- a/src/components/ArticleCard.js +++ b/src/components/ArticleCard.js @@ -1,6 +1,63 @@ import styled from "styled-components"; +import graphiteUnderline from '../images/ArticleCardGraphite.svg'; +import bubble from '../images/ArticleCardBubble.svg'; +import bubbleGraphite from '../images/ArticleCardBubbleGraphite.svg'; + +const GraphiteUnderline = styled("img")` + position: absolute; + bottom: -5px; + left: 0; + width: 100%; + height: auto; + opacity: 0; + transition: opacity 0.3s ease; +`; + +const BubbleWrapper = styled.div` + position: absolute; + display: flex; + align-items: center; + justify-content: flex-start; + margin-top: 2em; + bottom: 3em; + left: 0; + + @media (max-width: 900px) { + justify-content: center; + margin-top: 1em; + } +`; + +const Bubble = styled.img` + position: absolute; + width: 72px; + height: 42px; + flex-shrink: 0; + left: 0; + top: 0; + + @media (max-width: 900px) { + margin: 0; + } +`; + +const BubbleGraphite = styled.img` + position: absolute; + width: 70px; + height: 40px; + flex-shrink: 0; + opacity: 0; + transition: opacity 0.3s ease; + left: 0; + top: 0; + + @media (max-width: 900px) { + margin: 0; + } +`; const ArticleContainer = styled("div")` + position: relative; display: flex; flex-direction: row; text-align: left; @@ -10,22 +67,46 @@ const ArticleContainer = styled("div")` font-style: normal; margin: 2%; background: white; + // flex-wrap: wrap; + max-width: 100%; + // padding-bottom: 2em; + + @media (max-width: 900px) { + flex-direction: column; + align-items: center; + text-align: center; + } + + &:hover ${GraphiteUnderline} { + opacity: 1; + } + + &:hover ${BubbleGraphite} { + opacity: 1; + } `; const TitleContainer = styled("div")` - margin-top: 1em; + margin-top: 0.5em; font-size: 33px; font-weight: 500; line-height: 43px; /* 130.303% */ - &:hover { - text-decoration: underline; - } + max-width: 100%; + position: relative; + overflow-wrap: break-word; + word-break: break-word; + + // &:hover { + // text-decoration: underline; + // } `; const ImgContainer = styled("div")` border: 2px solid #000; background: #949494; width: 400.361px; + max-width: 100%; + max-height: 100%; height: 300px; display: flex; flex-shrink: 0; @@ -38,14 +119,25 @@ const ArticleCard = ({ props }) => { Article -
- {props.article_title} -
+
+ {props.article_title} + +
{props.article_byline}
+
+ {/*
prevents the bubble from overlapping with text in different screen size*/} +
+
+
+ + + + +
); diff --git a/src/images/ArticleCardBubble.svg b/src/images/ArticleCardBubble.svg new file mode 100644 index 0000000..819bac1 --- /dev/null +++ b/src/images/ArticleCardBubble.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/ArticleCardBubbleGraphite.svg b/src/images/ArticleCardBubbleGraphite.svg new file mode 100644 index 0000000..c94014a --- /dev/null +++ b/src/images/ArticleCardBubbleGraphite.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/ArticleCardGraphite.svg b/src/images/ArticleCardGraphite.svg new file mode 100644 index 0000000..7e70f13 --- /dev/null +++ b/src/images/ArticleCardGraphite.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file