Tablet card feature (#118)

* Add tablet mode to vote card

* Tablet mode CardFeature

* Change CardFeature conditions of  text

packages/DApp/src/components/Card.tsx

@@ -40,6 +40,7 @@ export const CardVoteWrap = styled.div`
 
   @media (max-width: 768px) {
     width: 100%;
+    padding-top: 56px;
     box-shadow: none;
     border-radius: unset;
     border-bottom: 1px solid #e0e0e0;

packages/DApp/src/components/card/CardFeature.tsx

@@ -36,14 +36,14 @@ export const CardFeature = ({ community, heading, icon, sum, timeLeft, currentVo
 
   return (
     <CardVoteBlock>
-      <CardHeading style={{ fontWeight: timeLeft ? 'normal' : 'bold', fontSize: timeLeft ? '15px' : '17px' }}>
+      <CardHeadingFeature style={{ fontWeight: timeLeft ? 'normal' : 'bold', fontSize: timeLeft ? '15px' : '17px' }}>
         {heading}
-      </CardHeading>
+      </CardHeadingFeature>
 
       <FeatureVote>
         <FeatureIcon>{icon}</FeatureIcon>
 
-        {timeLeft && <span>{timeLeft}</span>}
+        {timeLeft && !sum && <span>{timeLeft}</span>}
 
         {sum && (
           <FeatureText>
@@ -51,6 +51,21 @@ export const CardFeature = ({ community, heading, icon, sum, timeLeft, currentVo
           </FeatureText>
         )}
       </FeatureVote>
+
+      <FeatureVoteMobile>
+        {timeLeft && !sum && (
+          <FeatureText>
+            {icon} {heading}: <span>{timeLeft}</span>
+          </FeatureText>
+        )}
+
+        {sum && (
+          <FeatureTextWeekly>
+            {icon} <span style={{ color: '#676868', fontWeight: 'normal' }}>Weekly Feature Vote: </span>
+            <span>{addCommas(sum)}</span> SNT
+          </FeatureTextWeekly>
+        )}
+      </FeatureVoteMobile>
       <div>
         {showFeatureModal && (
           <Modal heading="Feature in “Weekly Featured”?" setShowModal={setShowFeatureModal}>
@@ -78,6 +93,11 @@ export const CardFeature = ({ community, heading, icon, sum, timeLeft, currentVo
   )
 }
 
+const CardHeadingFeature = styled(CardHeading)`
+  @media (max-width: 768px) {
+    display: none;
+  }
+`
 const FeatureBottom = styled.div`
   display: flex;
   justify-content: space-between;
@@ -102,6 +122,21 @@ const FeatureVote = styled(ColumnFlexDiv)`
     font-size: 15px;
     line-height: 22px;
   }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`
+
+const FeatureVoteMobile = styled(ColumnFlexDiv)`
+  display: none;
+  text-align: center;
+  margin-bottom: 32px;
+  margin-top: -14px;
+
+  @media (max-width: 768px) {
+    display: flex;
+  }
 `
 
 const FeatureText = styled.p`
@@ -111,3 +146,10 @@ const FeatureText = styled.p`
     line-height: 22px;
   }
 `
+const FeatureTextWeekly = styled(FeatureText)`
+  & > span {
+    font-weight: bold;
+    font-size: 15px;
+    line-height: 22px;
+  }
+`

packages/DApp/src/components/card/CardVote/CardVote.tsx

@@ -142,6 +142,8 @@ const CardHeadingEndedVote = styled.p`
 
   @media (max-width: 768px) {
     max-width: 100%;
+    margin-bottom: 26px;
+    margin-top: -30px;
   }
 `
 

packages/DApp/src/components/votes/VoteChart.tsx

@@ -43,7 +43,7 @@ export function VoteChart({
 
   return (
     <Votes>
-      <VotesChart>
+      <VotesChart className={selectedVote || tabletMode ? '' : 'notModal'}>
         <VoteBox style={{ filter: voteWinner && voteWinner === 2 ? 'grayscale(1)' : 'none' }}>
           <p style={{ fontSize: voteWinner === 1 ? '42px' : '24px', marginTop: voteWinner === 2 ? '18px' : '0' }}>
             {voteConstants.against.icon}
@@ -99,6 +99,12 @@ const VotesChart = styled.div`
   align-items: center;
   position: relative;
   margin-bottom: 13px;
+
+  &.notModal {
+    @media (max-width: 768px) {
+      margin-bottom: 0;
+    }
+  }
 `
 
 const VoteBox = styled.div`
@@ -132,13 +138,15 @@ const TimeLeft = styled.div`
 
   &.notModal {
     @media (max-width: 768px) {
-      top: 0;
+      top: -16px;
     }
   }
 `
 
 const VoteGraphBarWrap = styled.div`
   position: static;
+  display: flex;
+  justify-content: center;
 
   &.notModal {
     @media (max-width: 768px) {