diff --git a/src/components/ExpandedCard/ExpandedCard.css b/src/components/ExpandedCard/ExpandedCard.css index b278e03..7c7da88 100644 --- a/src/components/ExpandedCard/ExpandedCard.css +++ b/src/components/ExpandedCard/ExpandedCard.css @@ -64,21 +64,46 @@ margin-left: 10px; } -.stats-dropdown { +.stats-dropdown, +.stats-dropup { display: none; - width: 25px; - height: 25px; - margin: 10px 10px 30px; - transform: rotate(90deg); +} + +.wiki-link { + margin-right: 20px; } @media (max-width: 1110px) { - .hide-stats { - display: none; + .stats-column-con { + display: flex; + flex-direction: column; + } + + .stats-column-con-active { + display: flex; + flex-direction: column; + position: absolute; + top: 35%; } .stats-dropdown { - display: block + display: block; + width: 25px; + height: 25px; + margin: 10px 10px 30px; + transform: rotate(90deg); + } + + .stats-dropup { + display: block; + transform: rotate(-90deg); + width: 25px; + height: 25px; + margin: 10px 10px 30px; + } + + .hide-stats { + display: none; } .exp-name { @@ -114,22 +139,22 @@ background-image: linear-gradient(rgb(255, 255, 255, 0), rgb(255, 255, 255, 1)); } + .active-drop { + border-bottom-left-radius: unset; + border-bottom-right-radius: unset; + } + .stats-column-2 { - width: 27%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; - padding-left: 10px; + width: 100%; + background-color: white; } - .stats-column-1, - .stats-column-2 { + .stats-column-1 { background-color: rgba(255, 255, 255, 0.5); } - .wiki-link { - margin-right: 34px; - } - .exp-description { margin-right: 20px; } @@ -138,10 +163,21 @@ margin-bottom: 20px; } - @media (max-width: 900px) { - .expanded-card { - width: 90%; - left: 5%; - } + .drop { + margin-left: 10px; + } + + .exp-links-container { + justify-content: space-around; + } + + .wiki-link { + margin-right: unset; + } +} +@media (max-width: 900px) { + .expanded-card { + width: 90%; + left: 5%; } } diff --git a/src/components/ExpandedCard/ExpandedCard.js b/src/components/ExpandedCard/ExpandedCard.js index c3d92fb..8415374 100644 --- a/src/components/ExpandedCard/ExpandedCard.js +++ b/src/components/ExpandedCard/ExpandedCard.js @@ -22,23 +22,25 @@ const ExpandedCard = ({ stats, removeCard }) => {
{`Description: ${stats.description}`}
-Stats
-{`Dog Friendly: ${stats.dogFriendly}`}
-{`Energy Level: ${stats.energyLevel}`}
-{`Origin: ${stats.origin}`}
-{`Temperament: ${stats.temperament}`}
-External Links
+Stats
+{`Dog Friendly: ${stats.dogFriendly}`}
+{`Energy Level: ${stats.energyLevel}`}
+{`Origin: ${stats.origin}`}
+{`Temperament: ${stats.temperament}`}
+External Links