Wrapping Up

- Removed unused code - Pictures now dynamically size on mobile - Enhanced text - Removed horizontal scroll bar
Hjwallace · May 23, 2022 · d9b0e95 · d9b0e95
1 parent aee5c5e
commit d9b0e95
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 37 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>HJW Digital Corp Demo</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,9 @@
 .App {
   text-align: center;
+  overflow-x:hidden;
+
 }
 
-
 .App-header {
   background-color: #ffffff;
   display: flex;
@@ -27,7 +28,7 @@
 }
 
 .headerBar {
-  background-color: rgb(60, 62, 65);
+  background-color: #4F4F4F;
   width: 100%;
   margin-bottom: 15px;
   padding: 5px;
@@ -46,36 +47,188 @@
   display: block;
 }
 
-/* Was causing Off Center and overflows
-div {
-  display: flex;
-  flex-wrap: wrap;
+.allButton {
+  box-sizing: border-box;
+
+  width: 91px;
+  height: 51px;
+  left: 435px;
+  top: 42px;
+
+  background: #000000;
+  border: 3px solid #FFFFFF;
+  color:#FFFFFF;
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
 }
-*/
 
 .adminButton {
   box-Sizing: border-box;
-  position: absolute;
-  width: "5%";
-  height: 51;
-  left: 568;
-  top: 42;
+  width: 150px;
+  height: 51px;
+  left: 568px;
+  top: 42px;
+  background: #FFFFFF;
+  border: 3px solid #CF8D62;
+  color:#CF8D62;
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  text-align: center;
+
+
+}
+
+.commButton {
+  box-sizing: border-box;
+
+  width: 115px;
+  height: 51px;
+  left: 798px;
+  top: 42px;
+
+  background: #FFFFFF;
+  border: 3px solid #A60006;
+  color: #A60006;
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  text-align: center;
+}
+
+.designButton {
+  box-sizing: border-box;
+
+  width: 116px;
+  height: 51px;
+  left: 955px;
+  top: 42px;
+
+  background: #FFFFFF;
+  border: 3px solid #D9CB00;
+  color: #D9CB00;
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.devButton {
+  box-sizing: border-box;
+
+  width: 90px;
+  height: 51px;
+  left: 1113px;
+  top: 42px;
+
+  background: #FFFFFF;
+  border: 3px solid #0071DD;
+  color:#0071DD;
+
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.uxButton {
+  box-sizing: border-box;
+
+  width: 80px;
+  height: 51px;
+  left: 1245px;
+  top: 42px;
+
+  background: #FFFFFF;
+  border: 3px solid #15A245;
+  color: #15A245;
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.videoButton {
+  box-sizing: border-box;
+
+  width: 97px;
+  height: 51px;
+  left: 1367px;
+  top: 42px;
+
   background: #FFFFFF;
-  border: "3px solid #CF8D62";
-  color:"#CF8D62";
+  border: 3px solid #6600AA;
+  color: #6600AA;
+
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.buttonContainer {
+  display: inline-block;
 }
 
+.buttonContainer > button {
+  margin-top: 15px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
 
 @media all and (max-width: 480px)  {
   .flex-item {
     width: 100%;
     display: inline-flex;    
   }
 
+  #logo {
+    margin-left:20%;
+    padding: 10px;
+  }
+
+  .filterText {
+    display: none !important;
+  }
+
+  .buttonContainer > button {
+    display: none;
+  }
+
+  .profilePicture {
+    width: 100px !important;
+    height: 100px !important;
+  }
+
   .employeeText {
-    padding-top:25%;
+    padding-top:10%;
     padding-left: 5%;
+
   }
 
+  .employeeText > h5 , p {
+    text-align: left !important;
+    width: auto;
+  }
 }
 
diff --git a/src/App.js b/src/App.js
@@ -42,10 +42,10 @@ class App extends React.Component {
 
             <header className='headerBar'>
 
-              <div style={{float:"left"}}>
-                <img src={logo}/>
+              <div style={{float:"left", marginLeft:25}} >
+                <img src={logo} alt="Ball State Logo" id="logo"/>
               </div>
-
+              
               <FilterButtons />
 
             </header>
@@ -55,7 +55,7 @@ class App extends React.Component {
 
             {items.map(item => (
 
-              <Employee id={item.id} image={item.image} name={item.name} team={item.team} />
+              <Employee key={item.id} id={item.id} image={item.image} name={item.name} team={item.team} />
 
             ))}
 

diff --git a/src/components/Employee.js b/src/components/Employee.js
@@ -6,6 +6,7 @@ class Employee extends Component {
 
     var borderStyle = '';
     var pictureLink = '';
+    var teamFiltered = '';
 
     switch(this.props.team) {
         case "Admin &amp; PM":
@@ -26,27 +27,36 @@ class Employee extends Component {
         case "Video":
             borderStyle = {width:200 , height: 200, border:'3px solid #6600AA'};
             break;
+        default:
+            break;
     }
 
-
+    //Handler for if the employee does not have a picture
     if (this.props.image == null){
         pictureLink = require("./Placeholder.png");
     } else {
         pictureLink = this.props.image;
     }
-
+
+    //Fix & display issue
+    if(this.props.team.includes('&amp;')){
+        teamFiltered = this.props.team.replace('&amp;','&');
+    } else {
+        teamFiltered = this.props.team;
+    }   
 
     return(
 
-        <div key={this.props.id} className="flex-item">   
+        <div key={this.props.id} className="flex-item"> 
+
                 <div>
-                  <img src={pictureLink} style={borderStyle} className="photoBorder"/>
+                  <img src={pictureLink} style={borderStyle} className="profilePicture"/>
                 </div>
 
                 <div className='employeeText'>
                   <h5 style={{textAlign: 'center', margin: 0, padding:0}}>{this.props.name}</h5>
 
-                  <p style={{textAlign: 'center', margin: 0, padding:0, fontSize: 15}}>{this.props.team}</p>
+                  <p style={{textAlign: 'center', margin: 0, padding:0, fontSize: 15}}>{teamFiltered + " Team"}</p>
                 </div>
         </div>
 

diff --git a/src/components/FilterButtons.js b/src/components/FilterButtons.js
@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import '../App.css';
 
 class FilterButtons extends Component {
 
@@ -14,9 +13,7 @@ class FilterButtons extends Component {
 
             for (let x = 0; x < divs.length; x++) 
             {
-                const div = divs[x];
-                const content = div.textContent.trim();
-
+                const div = divs[x];              
 
                 if (div.textContent.indexOf(position) <= 0){
                     div.style.display = "none";
@@ -41,15 +38,17 @@ class FilterButtons extends Component {
 
         return(
 
-            <div>
+            <div className='buttonContainer'>
+
+                <p style={{display:"inline", color:"#FFFFFF", marginRight: 10}} className="filterText">Filter:</p>
 
-                <button onClick={() => ShowAll()} className="adminButton">All</button>
-                <button onClick={() => Filter("Admin")}>Admin &amp; PM</button>
-                <button onClick={() => Filter("Communication")}>Communication</button>
-                <button onClick={() => Filter("Design")}>Design</button>
-                <button onClick={() => Filter("Development")}>Development</button>
-                <button onClick={() => Filter("UX")}>UX</button>
-                <button onClick={() => Filter("Video")}>Video</button>
+                <button onClick={() => ShowAll()} className="allButton">All</button>
+                <button onClick={() => Filter("Admin")} className="adminButton">Admin &amp; PM</button>
+                <button onClick={() => Filter("Communication")} className="commButton">Comm</button>
+                <button onClick={() => Filter("Design")} className="designButton">Design</button>
+                <button onClick={() => Filter("Development")} className="devButton">Dev</button>
+                <button onClick={() => Filter("UX")} className="uxButton">UX</button>
+                <button onClick={() => Filter("Video")} className="videoButton">Video</button>
 
             </div>