my dashboard page restructured

regarding the #137 card components resized and reconfigured. Welcome bar resized as well as the subscribe bar. Co-authored-by: Mani Anand <mani.anand@fau.de>
amosproj · Jul 1, 2021 · 1d77dc1 · 1d77dc1
1 parent 736f65a
commit 1d77dc1
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 95 deletions.
diff --git a/frontend/src/components/mydashboard/MydashboardItemComponent.js b/frontend/src/components/mydashboard/MydashboardItemComponent.js
@@ -112,18 +112,15 @@ function MydashboardItemComponent() {
     }
 
     return (
-        <Container>
-            <Row horizontal='center' breakpoints={{ 1024: 'column' }}>
+        <Container fluid={true} style={{ padding: 'auto' }}>
+            <Row style={{ padding: 0, margin: 0 }}>
                 <Col xs={8} sm={8} md={8} lg={16} className='MydashboardContainer'>
-                    <div className='dashboardTitle'>
-                        <span>Latest Trends</span>
-                    </div>
                     <SlideshowComponent />
                 </Col>
-                <Col xs={2} sm={2} md={2} lg={1} />
-            </Row>
-            <Row horizontal='center' breakpoints={{ 1024: 'column' }}>
-                <Col xs={8} sm={8} md={8} lg={4} className='ProjectsCardsContainer'>
+            </Row>                
+            <Row/>
+            <Row horizontal='space-between' style={{ padding: 0, margin: 0 }}  breakpoints={{ 1024: 'column' }}>
+                <Col xs={8} sm={8} md={8} lg={4} className='MyCardsContainer'>
                     <div className='dashboardTitle w3-padding-24'>
                         <i className='fa fa-bars' style={{ color: '#643082' }} aria-hidden='true' />
                         <b>My Recent Projects</b>
@@ -141,8 +138,8 @@ function MydashboardItemComponent() {
                         </Collapsible>
                     </div>
                 </Col>
-                <Col xs={2} sm={2} md={2} lg={1} />
-                <Col xs={8} sm={8} md={8} lg={3} className='FavCardsContainer'>
+                <Col xs={2} sm={2} md={2} lg={1} style={{padding:0,maxWidth:'1.5%'}}  />
+                <Col xs={8} sm={8} md={8} lg={4} className='MyCardsContainer'>
                     <div className='dashboardTitle w3-padding-24'>
                         <i
                             className='fa fa-heart'
@@ -162,9 +159,8 @@ function MydashboardItemComponent() {
                     {renderStat('Fav Project 2', 'Generation')}
                     {renderStat('Fav Project 3', 'Industrial App')}
                 </Col>
-                <Col xs={2} sm={2} md={2} lg={1} />
-
-                <Col xs={8} sm={8} md={8} lg={3} className='ProjectsCardsContainer'>
+                <Col xs={2} sm={2} md={2} lg={1} style={{padding:0,maxWidth:'1.5%'}}  />
+                <Col xs={8} sm={8} md={8} lg={3.5} className='MyCardsContainer'>
                     <div className=' w3-padding-24'>
                         <div className='dashboardTitle'>
                             <i
@@ -195,45 +191,52 @@ function MydashboardItemComponent() {
                     </div>
                 </Col>
             </Row>
-            <Col xs={8} sm={8} md={8} lg={3} className='ChartsCardsContainer'>
-                <div className='dashboardTitle'>
-                    <span>My charts</span>
-                </div>
-                <PieChartComponent />
-            </Col>
-            <Col xs={2} sm={2} md={2} lg={1} />
-            <Col xs={8} sm={8} md={8} lg={3} className='ChartsCardsContainer'>
-                <div className='dashboardTitle'>
-                    <span>My charts</span>
-                </div>
-                <ColumnChartComponent />
-            </Col>
-            <footer className='w3-center w3-purple w3-padding-16'>
-                <p>For latest Updates</p>
-                <form className='form-inline w3-padding-16'>
-                    Subscribe :
-                    <input
-                        type='email'
-                        className='form-control'
-                        size={50}
-                        placeholder='Email Address'
-                    />
-                    <button type='button'>Sign Up</button>
-                </form>
+            <Row horizontal='space-between' style={{ padding: 0, margin: 0 }}  breakpoints={{ 1024: 'column' }}>
 
-                <p>
-                    Powered by{' '}
-                    <a
-                        href='https://www.siemens-energy.com/global/en/offerings.html'
-                        rel='noreferrer'
-                        title='W3.CSS'
-                        target='_blank'
-                        className='w3-hover-text-green'
-                    >
-                        Siemens
-                    </a>
-                </p>
-            </footer>
+                <Col xs={8} sm={8} md={8} lg={4} className='MyCardsContainer'>
+                    <div className='dashboardTitle'>
+                        <span>My charts</span>
+                    </div>
+                    <PieChartComponent />
+                </Col>
+                <Col xs={2} sm={2} md={2} lg={1} style={{padding:0,maxWidth:'1.5%'}}/>
+                <Col xs={8} sm={8} md={8} lg={4} className='MyCardsContainer'>
+                    <div className='dashboardTitle'>
+                        <span>My charts</span>
+                    </div>
+                    <ColumnChartComponent />
+                </Col>
+            </Row>
+            <Row horizontal='space-between' style={{ padding: 0, margin: 0 }}  breakpoints={{ 1024: 'column' }}>
+                <div className='ContactContainer'>
+                    <footer className='w3-center w3-purple w3-padding-16'>
+                        <p>For latest Updates</p>
+                        <form className='form-inline w3-padding-16'>
+                            Subscribe :
+                            <input
+                                type='email'
+                                className='form-control'
+                                size={50}
+                                placeholder='Email Address'
+                            />
+                            <button type='button'>Sign Up</button>
+                        </form>
+
+                        <p>
+                            Powered by{' '}
+                            <a
+                                href='https://www.siemens-energy.com/global/en/offerings.html'
+                                rel='noreferrer'
+                                title='W3.CSS'
+                                target='_blank'
+                                className='w3-hover-text-green'
+                            >
+                                Siemens
+                            </a>
+                        </p>
+                    </footer>
+                </div>
+            </Row>
         </Container>
     );
 }

diff --git a/frontend/src/components/mydashboard/SlideshowComponent.js b/frontend/src/components/mydashboard/SlideshowComponent.js
@@ -27,11 +27,11 @@ export default class SlideshowComponent extends Component {
 
     render() {
         const items = [
-            <img alt='' src={Dashboard1} />,
-            <img alt='' src={Dashboard2} />,
-            <img alt='' src={PowerTransmission} />,
-            <img alt='' src={IndustrialImage} />,
-            <img alt='' src={PowerGeneration} />
+            <img alt='' style={{marginTop:5}}  src={Dashboard1} />,
+            <img alt='' style={{marginTop:5}}   src={Dashboard2} />,
+            <img alt='' style={{marginTop:5}}  src={PowerTransmission} />,
+            <img alt='' style={{marginTop:5}}   src={IndustrialImage} />,
+            <img alt='' style={{marginTop:5}}  src={PowerGeneration} />
         ];
         return (
             <div>

diff --git a/frontend/src/components/mydashboard/mydashboard.css b/frontend/src/components/mydashboard/mydashboard.css
@@ -6,64 +6,53 @@
     cursor: 'pointer';
     min-width: 360;
     max-width: 450;
-    min-height: 460px;
-    max-height: 460px;
+    min-height: 480px;
+    max-height: 480px;
     margin-top: 10px;
     position: fixed;
+
 
 }
 
-.ChartsCardsContainer{
-    background-color: #ffffff;
-    /* border:0.5px solid #00b300; */
-    border-radius: 4px;
-    cursor: 'pointer';
-    min-width: 360;
-    max-width: 450;
-    min-height: 450px;
-    max-height: 450px;
-    margin-top: 10px;
-    margin-bottom:10px; 
-    position: fixed;
-    overflow-y: visible;
-    overflow-y: scroll;
-
-
 
+.img {
+    max-width: 100%;
+    display: block;
 }
+.MyCardsContainer {
 
-.FavCardsContainer {
+    display: flex;
+    margin-top: 20px;
+    flex-direction: column;
     background-color: #ffffff;
-    /* border:0.5px solid #00b300; */
-    border-radius: 4px;
     cursor: 'pointer';
     min-width: 360;
     max-width: 450;
     min-height: 350px;
     max-height: 350px;
-    margin-top: 10px;
     position: fixed;
     overflow-y: visible;
     overflow-y: scroll;
-} /* Make images easier to work with */
-.img {
-    max-width: 100%;
-    display: block;
+    justify-content: first baseline;
 }
-.ProjectsCardsContainer {
-    background-color: #ffffff;
-    /* border:0.5px solid #00b300; */
-    border-radius: 4px;
+
+.ContactContainer {
+
+    display: flex;
+    margin-top: 100px;
+    flex-direction: column;
     cursor: 'pointer';
-    min-width: 360;
-    max-width: 450;
-    min-height: 350px;
-    max-height: 350px;
-    margin-top: 10px;
-    margin-bottom:10px; 
+    height: 15%;
+    width: 80%;
     position: fixed;
-    overflow-y: visible;
-    overflow-y: scroll;
+    justify-content: first baseline;
+}
+
+.ContactContainer p{
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    font-size: var(--global--text-title--FontSize)-8;
 }
 
 .star {