Merge branch 'master' into 'production'

master -> prod contacts page update

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!100

src/components/ContactCard.tsx

@@ -18,8 +18,8 @@ const Row = styled.div`
 
 const ImageContainer = styled.div`
   position: relative;
-  height: 150px;
-  width: 150px;
+  height: 125px;
+  width: 125px;
   flex-shrink: 0;
 
   img {
@@ -33,17 +33,17 @@ const Info = styled.div`
   flex-direction: column;
   align-items: flex-start;
   margin-left: -20px;
-  min-width: 225px;
+  min-width: 150px;
   padding: 2rem;
   color: ${colors.darkBlue};
 
   & > p {
-    font-size: 1.1rem;
+    font-size: 1.0rem;
     margin: 0;
   }
 
   & > h3 {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-weight: 500;
   }
 `;

src/views/ContactsPage/ContactsPageView.tsx

@@ -70,9 +70,13 @@ const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees
 
 const Container = styled.div`
   color: ${colors.darkBlue};
+  align-items: center;
+  justify-content: center;
+  width: 50vw;
 
   & > h2 {
     text-transform: uppercase;
+    font-size: 4rem;
     width: 100%;
   }
 
@@ -80,15 +84,39 @@ const Container = styled.div`
     display: flex;
     flex-flow: row wrap;
   }
+
+  @media (max-width: 950px) {
+    width: 100vw;
+  }
+`;
+
+const ContactContainer = styled.div`
+  margin-top: -13rem;
+  overflow-x: hidden;
+  @media (max-width: 950px) {
+    margin-top: 0;
+  }
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 10px;
+  flex-direction: column;
+  margin: auto;
 `;
 
 const CommitteeContainer: React.FC<{
   committee: Committee;
 }> = ({ committee, children }) => (
   <Container>
-    <h2>
-      {committee.name_fi || committee.name_en}
-    </h2>
+    <TitleContainer>
+      <h2>
+        {committee.name_fi || committee.name_en}
+      </h2>
+    </TitleContainer>
     <div>
       {committee.roles.map((role) => (
         role.representatives.map((representative) => (
@@ -143,28 +171,31 @@ const ContactsPageView: React.FC = () => (
         </div>
       </aside>
     </TextSection>
+    <ContactContainer>
 
-    {orderedCommittees.map((json) => (
-      <React.Fragment key={json.slug}>
-        {(json.slug !== "board") && (
-          <Divider />
-        )}
-        <TextSection id={json.slug}>
-          <CommitteeContainer committee={json}>
-            {(json.slug === "board") && (
-              <p>
-                {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-                <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
-                  hallitus@sahkoinsinoorikilta.fi
+      {orderedCommittees.map((json) => (
+        <React.Fragment key={json.slug}>
+          {(json.slug !== "board") && (
+            <Divider />
+          )}
+          <TextSection id={json.slug}>
+            <CommitteeContainer committee={json}>
+              {(json.slug === "board") && (
+                <p>
+                  {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+                  <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+                    hallitus@sahkoinsinoorikilta.fi
               </BlueLink>
-                {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
-              </p>
-            )}
-          </CommitteeContainer>
-        </TextSection>
-      </React.Fragment>
-    ))}
+                  {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
+                </p>
+              )}
+            </CommitteeContainer>
+          </TextSection>
+        </React.Fragment>
+      ))}
+    </ContactContainer>
   </>
 );
 
+
 export default ContactsPageView;