Checks on Education Page (academicpages#197)

WideSu · Jun 5, 2022 · bf25028 · bf25028
1 parent e9d4f8e
commit bf25028
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/src/components/degreeCard/DegreeCard.css b/src/components/degreeCard/DegreeCard.css
@@ -59,7 +59,7 @@
   max-width: inherit;
   /* width: 100%; */
   border-radius: 0px 0px 7px 7px;
-  padding: 5px;
+  padding: 10px;
   justify-content: center;
   align-items: center;
   /* box-shadow: 5px 5px 5px #d3d3d3; */
@@ -77,7 +77,6 @@
   border-left: 1px solid #d9dbdf;
   border-right: 1px solid #d9dbdf;
   border-radius: 7px;
-  width: 90%;
   margin: 10px;
   box-shadow: 5px 5px 5px #d9dbdf;
 }
@@ -136,7 +135,7 @@
   }
 
   .card-body {
-    width: 100%;
+    width: 100% !important;
   }
 
   .card-title {

diff --git a/src/components/degreeCard/DegreeCard.js b/src/components/degreeCard/DegreeCard.js
@@ -8,21 +8,26 @@ class DegreeCard extends Component {
     const theme = this.props.theme;
     return (
       <div className="degree-card">
-        <Flip left duration={2000}>
-          <div className="card-img">
-            <img
-              style={{
-                maxWidth: "100%",
-                maxHeight: "100%",
-                transform: "scale(0.9)",
-              }}
-              src={require(`../../assests/images/${degree.logo_path}`)}
-              alt={degree.alt_name}
-            />
-          </div>
-        </Flip>
+        {degree.logo_path && (
+          <Flip left duration={2000}>
+            <div className="card-img">
+              <img
+                style={{
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                  transform: "scale(0.9)",
+                }}
+                src={require(`../../assests/images/${degree.logo_path}`)}
+                alt={degree.alt_name}
+              />
+            </div>
+          </Flip>
+        )}
         <Fade right duration={2000} distance="40px">
-          <div className="card-body">
+          <div
+            className="card-body"
+            style={{ width: degree.logo_path ? "90%" : "100%" }}
+          >
             <div
               className="body-header"
               style={{ backgroundColor: theme.headerColor }}
@@ -41,28 +46,30 @@ class DegreeCard extends Component {
                 </h3>
               </div>
             </div>
-            <div classname="body-content">
+            <div className="body-content">
               {degree.descriptions.map((sentence) => {
                 return (
                   <p className="content-list" style={{ color: theme.text }}>
                     {sentence}
                   </p>
                 );
               })}
-              <a
-                href={degree.website_link}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div
-                  className="visit-btn"
-                  style={{ backgroundColor: theme.headerColor }}
+              {degree.website_link && (
+                <a
+                  href={degree.website_link}
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  <p className="btn" style={{ color: theme.text }}>
-                    Visit Website
-                  </p>
-                </div>
-              </a>
+                  <div
+                    className="visit-btn"
+                    style={{ backgroundColor: theme.headerColor }}
+                  >
+                    <p className="btn" style={{ color: theme.text }}>
+                      Visit Website
+                    </p>
+                  </div>
+                </a>
+              )}
             </div>
           </div>
         </Fade>