generated from amosproj/amos202Xss0Y-projname
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Merge Preparation and distribution of css Refactoring Co-authored-by: Irem Toroslu <irem.toroslu@fau.de>
- Loading branch information
Showing
31 changed files
with
466 additions
and
14,051 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,5 @@ node_modules | |
.idea | ||
/.vs/slnx.sqlite-journal | ||
.vs/slnx.sqlite | ||
|
||
frontend/yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
.MiniCardImageContainer { | ||
background-color: #ffffff; | ||
border: 3px solid lightslategray; | ||
border-radius: 8px; | ||
cursor: pointer; | ||
max-width: 350px; | ||
min-width: 210px; | ||
max-height: 150px; | ||
} | ||
|
||
.MiniCardImageContainer:hover { | ||
border-color: var(--global--active--highlighting-color); | ||
} | ||
|
||
.MiniCardImageContainer img { | ||
margin: auto; | ||
padding: 4px; | ||
max-height: 130px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import React, { Component } from 'react'; | ||
import { Container } from 'react-grid-system'; | ||
import { | ||
getImpactCategoriesTableHeaders, | ||
getImpactCategoriesTableData | ||
} from 'interface/projectInterface'; | ||
|
||
/** | ||
* Mobile version of the TableComponent. Restructures the Table to be displayable on a mobile screen. | ||
* Switches Rows and Headers and splits the table in two parts. | ||
*/ | ||
class MobileTableComponent extends Component { | ||
state = { | ||
headers: getImpactCategoriesTableHeaders(this.props.modelId), | ||
rows: getImpactCategoriesTableData(this.props.modelId) | ||
}; | ||
render() { | ||
const idKey = this.props.key; | ||
return ( | ||
<Container fluid={true}> | ||
{/* dynamic display of product and model */} | ||
<h5 className='TableTitle'>{this.props.productName}</h5> | ||
<h6 className='TableSubTitle'> | ||
{/* Don't display model name if model name == product name or undefined */} | ||
{this.props.modelName === this.props.productName || | ||
this.props.modelName === undefined | ||
? '' | ||
: this.props.modelName} | ||
</h6> | ||
|
||
<table className='w3-table-all w3-card-4 w3-small w3-center'> | ||
{/* style needs to be defined in js */} | ||
<tbody> | ||
{this.state.headers.map((header, index) => ( | ||
<tr | ||
style={ | ||
index === 0 | ||
? { backgroundColor: '#82baa9', fontWeight: 'bold' } | ||
: {} | ||
} | ||
key={'table1' + idKey + 'tr' + index} | ||
> | ||
<th key={'table1' + idKey + 'thead' + header.key + index}> | ||
{header.value} | ||
</th> | ||
<td key={'table1' + idKey + 'thead' + header.key + index + '3'}> | ||
{Object.values(this.state.rows[3])[index + 1]} | ||
</td> | ||
<td key={'table1' + idKey + 'thead' + header.key + index + '4'}> | ||
{Object.values(this.state.rows[4])[index + 1]} | ||
</td> | ||
<td key={'table1' + idKey + 'thead' + header.key + index + '5'}> | ||
{Object.values(this.state.rows[5])[index + 1]} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
|
||
<div style={{ margin: '20px' }} /> | ||
|
||
<table className='w3-table-all w3-card-4 w3-small w3-center'> | ||
{/* style needs to be defined in js */} | ||
<tbody> | ||
{this.state.headers.map((header, index) => ( | ||
<tr | ||
style={ | ||
index === 0 | ||
? { backgroundColor: '#82baa9', fontWeight: 'bold' } | ||
: {} | ||
} | ||
key={'table2' + idKey + 'tr' + index} | ||
> | ||
<th key={'table2' + idKey + 'thead' + header.key + index}> | ||
{header.value} | ||
</th> | ||
<td key={'table2' + idKey + 'thead' + header.key + index + '0'}> | ||
{Object.values(this.state.rows[0])[index + 1]} | ||
</td> | ||
<td key={'table2' + idKey + 'thead' + header.key + index + '1'}> | ||
{Object.values(this.state.rows[1])[index + 1]} | ||
</td> | ||
<td key={'table2' + idKey + 'thead' + header.key + index + '2'}> | ||
{Object.values(this.state.rows[2])[index + 1]} | ||
</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</table> | ||
</Container> | ||
); | ||
} | ||
} | ||
|
||
export default MobileTableComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.