organization page responsive

Author: lazycipher

src/user/dashboard/dashboard.js

@@ -63,8 +63,8 @@ class Dashboard extends Component {
 
       <div className="dashboard">
         <Navigation dashboard={this.state.dashboard} />
-        <div className="content-container">
-          <div className="news">
+        <div className="dashboard__container">
+          <div className="dashboard__container__news">
             {this.state.isLoading ? (
               notifyUsersLoading()
             ) : (
@@ -77,7 +77,7 @@ class Dashboard extends Component {
             )}
             {this.state.isLoading ? newsFeedLoading() : <NewsFeed allMix={allMix} allProjects={allProjects} allPosts={allPosts} allEvents={allEvents}/>}
           </div>
-          <div className="promotions">
+          <div className="dashboard__promotions">
             {this.state.isLoading ? portfolioLoading() : <Portfolio />}
           </div>
         </div>

src/user/dashboard/dashboard.scss

@@ -1,27 +1,27 @@
-.content-container {
+.dashboard__container {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .news {
+  .dashboard__container__news {
     margin-left: 13vw;
     flex-grow: 4;
     .notify-user {
       display: flex;
       padding: 20px 0px 20px 30px;
     }
   }
-  .promotions {
+  .dashboard__promotions {
     height: 256px;
     flex-direction: row;
     flex-grow: 2;
     padding: 20px 12px 20px 0px;
   }
   @media (min-width: 320px) and (max-width: 1024px){
-    .promotions {
+    .dashboard__promotions {
       display: none;
     }
-    .news {
+    .dashboard__container__news {
       margin-left: 0;
     }
   }

src/user/organization/org-contact/OrgContact.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
 import "./org-contact.scss";
-import { Card, Avatar, CardContent } from '@material-ui/core';
+import { Avatar, CardContent } from '@material-ui/core';
 import { connect } from 'react-redux'
 import { getOrgProfile } from '../../../actions/orgAction'
+import { Card, ListGroup } from 'react-bootstrap';
 
 class OrgContact extends Component {
     constructor(props) {
@@ -24,27 +25,28 @@ class OrgContact extends Component {
             <div className="contact">
                 <h2>Contact</h2>
                 <Card className="contact-us">
-                    <CardContent>
-                        <div className="email-content">
+                    <Card.Body>
+                        <div className="contact__content">
                             <p className="initial">Email</p><br/>
-                            <div className="email-info">
-                                {this.props.admins.map(i => { return <div className='info'> <Avatar className="avatar" alt='Random'>R</Avatar> <p>{i.email}</p> </div> })}
-                            </div>
-                            <div className='designation'>
-                                {this.props.admins.map(i => { return <p>{i.designation}</p> })}
-                            </div>
+                            <ListGroup className="contact__content__collection">
+                                {this.props.admins.map(i => { return <ListGroup.Item className="contact_item"> <Avatar className="avatar" alt='Random'>R</Avatar> <div className="data_container"><span className="data">{i.email}</span> <span className="designation">{i.designation}</span></div> </ListGroup.Item>})}
+                            </ListGroup>
                         </div>
-                        <div className="email-content">
+                        <div className="contact__content">
                             <p className='initial'>Website</p>
-                            <p className='info'>{this.state.website}</p>
-                            <p className='hidden'>Community</p>
+                            <ListGroup className="contact__content__collection">
+                                 <ListGroup.Item className="contact_item"> {this.state.website}</ListGroup.Item>
+                            </ListGroup>
                         </div>
-                        <div className='email-content'>
+                        <div className='contact__content'>
                             <p className="initial">Community email</p>
-                            <p className='info'>{this.state.email}</p>
+                            <ListGroup className="contact__content__collection">
+                                 <ListGroup.Item className="contact_item"> {this.state.email}</ListGroup.Item>
+                            </ListGroup>
                             <p></p>
                         </div>
-                    </CardContent>
+                        
+                    </Card.Body>
                 </Card>
             </div>
         )

src/user/organization/org-contact/org-contact.scss

@@ -6,33 +6,38 @@
         border: solid 1px #dfe9f1;
         overflow: auto;
         margin-bottom: 5px;
-        .email-content {
+        .contact__content {
             display: flex;
             flex-direction: row;
-            justify-content: space-between;
+            margin-bottom: 1vh;
             .designation {
-                text-align: right;
                 color: rgba(0, 0, 0, 0.5);
-                font-weight: 650;
+                font-weight: bold;
             }
             .initial {
                 color: rgba(0, 0, 0, 0.5);
                 font-weight: 550;
+                flex: 1;
+            }
+            .data_container {
+                flex: 2;
+            }
+            .data {
+                display: block;
             }
             .hidden {
                 visibility: hidden;
             }
-            .email-info {
+            .contact__content__collection {
+                flex: 3;
+            }
+            .contact_item {
                 display: flex;
-                flex-direction: column;
-                .info {
-                    display: flex;
-                    flex-direction: row;
-                    .avatar {
-                        width: 25px;
-                        height: 25px;
-                        margin-right: 5px;
-                    }
+                padding: 0;
+                border: 0;
+                margin-bottom: 1rem;
+                div {
+                    margin-right: 10px;
                 }
             }
         }

src/user/organization/org-info/org-info.scss

@@ -120,3 +120,20 @@
 .org-followbtn {
   margin: 10px;
 }
+
+@media (min-width: 320px) and (max-width: 1024px){
+  
+  .org-details {
+    width: 100%;
+    margin: auto 2vw;
+    .org-image {
+      .org-pic {
+        .orgpic {
+          width: 120px;
+          height: 120px;
+        }
+      }
+    }
+  }
+
+}