Fix for the positionings of card contents

HRahikainen · Nov 18, 2019 · c009b69 · c009b69
1 parent 4210f32
commit c009b69
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 94 deletions.
diff --git a/junction-ayy/src/App.css b/junction-ayy/src/App.css
@@ -55,10 +55,29 @@ ul {
 
 .card-small {
   height: 220px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }
 
 .card-large {
   height: 560px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-small .card-header {
+  margin-bottom: 12px;
+}
+.card-small p {
+  margin-bottom: 6px;
+}
+
+.card-content {
+  flex-grow: 1;
+}
+.card-footer {
+  text-align: center;
 }
 
 .game-main {

diff --git a/junction-ayy/src/squares/AyyFeed.jsx b/junction-ayy/src/squares/AyyFeed.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { StyledCard } from "../StyledCard";
-import circle_img from "../assets/news-circle.svg";
+import news_circle from "../assets/news-circle.svg";
 
 const AYY_DATA = [
   {
@@ -30,25 +30,29 @@ const AYY_DATA = [
 export function AyyFeed() {
   return (
     <StyledCard className="card-large ayy-feed">
-      <h3>AYY NEWS</h3>
-      {AYY_DATA.map((article, key) => {
-        return (
-          <div className="article" style={{ margin: "12px" }} key={key}>
-            <h4>{article.title}</h4>
-            <p className="text-small">{article.date}</p>
-          </div>
-        );
-      })}
-      <img
-        className="circle-img margin-r-small"
-        alt="news circle image"
-        src={circle_img}
-        style={{
-          width: "100px",
-          margin: "24px auto 24px 300px",
-          alignSelf: "center"
-        }}
-      />
+      <div className="card-header">
+        <h3>AYY NEWS</h3>
+      </div>
+
+      <div className="card-content">
+        {AYY_DATA.map((article, key) => {
+          return (
+            <div className="article" style={{ margin: "12px" }} key={key}>
+              <h4>{article.title}</h4>
+              <p className="text-small">{article.date}</p>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="card-footer">
+        <img
+          className="circle-img margin-r-small"
+          alt="news circle image"
+          src={news_circle}
+          style={{ width: "200px" }}
+        />
+      </div>
     </StyledCard>
   );
 }
@@ -57,18 +61,19 @@ export function AyyFeedSummary() {
   const latestTitle = AYY_DATA[0].title;
 
   return (
-    <StyledCard className="card-small ayy-feed ">
-      <div
-        className="content flex justify"
-        style={{ flexDirection: "column", textAlign: "center" }}
-      >
-        <h4 style={{ marginBottom: "12px" }}>AYY NEWS</h4>
-        <p className="ayy-small-title margin-r-medium">{latestTitle}</p>
+    <StyledCard className="card-small ayy-feed">
+      <div className="card-header">
+        <h4>AYY NEWS</h4>
+      </div>
+      <div className="card-content">
+        <p className="ayy-small-title">{latestTitle}</p>
+      </div>
+      <div className="card-footer">
         <img
           className="circle-img margin-r-small"
           alt="news circle image"
-          src={circle_img}
-          style={{ width: "100px", marginTop: "12px" }}
+          src={news_circle}
+          style={{ width: "100px" }}
         />
       </div>
     </StyledCard>

diff --git a/junction-ayy/src/squares/Messages.jsx b/junction-ayy/src/squares/Messages.jsx
@@ -11,38 +11,52 @@ import messages from "../assets/messages-circle.svg";
 export function Messages() {
   return (
     <StyledCard className="card-large social">
-      <div className="justify flex">
+      <div className="card-header">
         <h3>Messages</h3>
       </div>
-      {MESSAGES.map((message, key) => {
-        const classN = message.important ? "message important" : "message";
-        const whichIcon = message.important ? faExclamation : faEnvelope;
 
-        return (
-          <div className={classN} key={key}>
-            <div className="text flex justify" style={{ margin: "12px 24px" }}>
-              <div className="message flex" style={{ width: "30em" }}>
-                <FontAwesomeIcon
-                  icon={whichIcon}
-                  className="margin-r-medium"
-                  style={{ width: "12px", color: "var(--colorWhite_900)" }}
-                />
-                <span>{message.text}</span>
+      <div className="card-content">
+        {MESSAGES.map((message, key) => {
+          const classN = message.important ? "message important" : "message";
+          const whichIcon = message.important ? faExclamation : faEnvelope;
+
+          return (
+            <div className={classN} key={key}>
+              <div
+                className="text flex justify"
+                style={{ margin: "12px 24px" }}
+              >
+                <div className="message flex" style={{ width: "30em" }}>
+                  <FontAwesomeIcon
+                    icon={whichIcon}
+                    className="margin-r-medium"
+                    style={{ width: "12px", color: "var(--colorWhite_900)" }}
+                  />
+                  <span>{message.text}</span>
+                </div>
+                <p className="from" style={{ color: "var(--colorWhite_600)" }}>
+                  {"- "}
+                  {message.from}
+                </p>
               </div>
-              <p className="from" style={{ color: "var(--colorWhite_600)" }}>
-                {"- "}
-                {message.from}
-              </p>
             </div>
-          </div>
-        );
-      })}
-      <img
-        className="circle-img margin-r-small"
-        alt="messages circle image"
-        src={messages}
-        style={{ width: "100px", margin: "140px auto 24px 300px" }}
-      />
+          );
+        })}
+      </div>
+
+      <div
+        className="card-footer"
+        style={{
+          textAlign: "center"
+        }}
+      >
+        <img
+          className="circle-img margin-r-small"
+          alt="messages circle image"
+          src={messages}
+          style={{ width: "200px" }}
+        />
+      </div>
     </StyledCard>
   );
 }
@@ -52,24 +66,20 @@ export function MessagesSummary() {
   const other = MESSAGES.length - important;
 
   return (
-    <StyledCard
-      className="card-small social summary "
-      style={{ justifyContent: "space-between" }}
-    >
-      <div
-        className="flex justify"
-        style={{ flexDirection: "column", textAlign: "center" }}
-      >
-        <h4 style={{ marginBottom: "12px" }}>Messages</h4>
-        <div className="content">
-          <p style={{ marginBottom: "6px" }}>
-            <FontAwesomeIcon icon={faExclamation} /> {important} important
-            messages
-          </p>
-          <p>
-            <FontAwesomeIcon icon={faEnvelope} /> {other} other messags
-          </p>
-        </div>
+    <StyledCard className="card-small social summary ">
+      <div className="card-header">
+        <h4>Messages</h4>
+      </div>
+      <div className="card-content">
+        <p>
+          <FontAwesomeIcon icon={faExclamation} /> {important} important
+          messages
+        </p>
+        <p>
+          <FontAwesomeIcon icon={faEnvelope} /> {other} other messags
+        </p>
+      </div>
+      <div className="card-footer">
         <img
           className="circle-img margin-r-small"
           alt="messages circle image"

diff --git a/junction-ayy/src/squares/Sustainability.jsx b/junction-ayy/src/squares/Sustainability.jsx
@@ -33,18 +33,19 @@ export function Sustainability() {
 
   return (
     <StyledCard className="card-large sustainability">
-      <h3>Energy consumption</h3>
-      <p style={{ margin: "12px" }}>
-        When compared to the weekly average values.
-      </p>
-      <div className="flex justify">
+      <div className="card-header">
+        <h3>Energy consumption</h3>
+      </div>
+      <div className="card-content" style={{ textAlign: "center" }}>
         <img
           className="chart-img"
           alt="chart image"
           src={chart}
-          style={{ width: "620px", margin: "24px auto auto 24px" }}
+          style={{ maxWidth: "100%", maxHeight: "490px", bottom: "0px" }}
         />
       </div>
+
+      <div className="card-footer"></div>
     </StyledCard>
   );
 }
@@ -77,24 +78,21 @@ export function SustainabilitySummary() {
 
   return (
     <StyledCard className="card-small sustainability">
-      <div
-        className="flex justify"
-        style={{ flexDirection: "column", textAlign: "center" }}
-      >
-        <h4 style={{ marginBottom: "12px" }}>
-          Energy consumption (last week):
-        </h4>
-        <div className="content">
-          <p style={{ marginBottom: "6px" }}>
-            Electricity consumption: {electricityData.current_week} kWh
-          </p>
-          <p>Water consumption: {waterData.current_week} m^3</p>
-        </div>
+      <div className="card-header">
+        <h4>Energy consumption (last week):</h4>
+      </div>
+      <div className="card-content">
+        <p>Electricity consumption: {electricityData.current_week} kWh</p>
+        <p>
+          Water consumption: {waterData.current_week} m<sup>3</sup>
+        </p>
+      </div>
+      <div className="card-footer">
         <img
           className="circle-img margin-r-small"
           alt="energy circle image"
           src={energy}
-          style={{ width: "100px", marginTop: "24px" }}
+          style={{ width: "100px" }}
         />
       </div>
     </StyledCard>