...
 
Commits (5)
......@@ -45,7 +45,7 @@ function MainBanner() {
<div>
<Card id={`${contrastString}mainBannerCard`}>
<Row>
<Col s={12} m={6}>
<Col s={12} m={5} offset={'m1'}>
<img alt='Logo do SMPPIR com descrição' id={'bannerLogo'} src={img} style={{width: 250}}/>
</Col>
<Col s={12} m={4} offset={'m1'}>
......@@ -61,4 +61,4 @@ function MainBanner() {
);
}
export default MainBanner;
\ No newline at end of file
export default MainBanner;
......@@ -44,25 +44,31 @@ function MainCard(props){
useEffect(() => { });
var { color, title, subpages, text, image } = props;
var { color, title, subpages, text, image, dropdown } = props;
var contrastString = state.contrast;
if (contrastString === "Contrast")
color = 'mainPageContrast'
const listItems = subpages['links'].map((subp, i) =>
<Link onClick={() => { setPageAction(subp) }} key={subp} className={color + ' waves-effect waves spacingInCard '} to={subpages['route']} >
{subp}
</Link>
);
var length = 0;
const links = subpages['links'];
var dropdownItems = [];
var listItems = [];
var visibility = 'none';
// If there are too many links put them in the dropdown.
for (var i = listItems.length - 2; i > 0; i--) {
dropdownItems.push(listItems.pop());
visibility = 'inline-block';
for (var i=0; i < links.length; i++){
var subp = links[i]
length = length + subp.length;
var link =
<Link onClick={() => { setPageAction(subp) }} key={subp} className={color + ' waves-effect waves spacingInCard '} to={subpages['route']} >
{subp}
</Link>
if (length < 50 || !dropdown){
listItems.push(link)
} else {
dropdownItems.push(link)
visibility = 'inline-block';
}
}
return (
......@@ -72,22 +78,22 @@ function MainCard(props){
>
<div className={'listMainPage'}>
{listItems}
<Dropdown
options={{ hover: true, constrainWidth: false }}
trigger={
<Link
style={{ display: visibility }}
className={color + ' waves-effect waves spacingInCard '} to={'#'}
>
<Icon className={'dropdown-icon'}>expand_more</Icon>
</Link>
}
>
{dropdownItems}
</Dropdown>
</div>
<Dropdown
options={{ hover: true, constrainWidth: false }}
trigger={
<Link
style={{ display: visibility }}
className={color} to={'#'}
>
<Icon className={'dropdown-icon'}>expand_more</Icon>
</Link>
}
>
{dropdownItems}
</Dropdown>
</Card>
);
}
export default MainCard;
\ No newline at end of file
export default MainCard;
......@@ -45,18 +45,18 @@ function MainPage() {
</Row>
<Row className={'mainPageRow'}>
<Col m={12} l={5} offset={'l1'} >
<MainCard color='mainPageGreen' title='Cotas' subpages={subpages5} text={text5} image={'cotas_raciais.png'} />
<MainCard dropdown='true' color='mainPageGreen' title='Cotas' subpages={subpages5} text={text5} image={'cotas_raciais.png'} />
</Col>
<Col m={12} l={5} className={'mainPageMargin'}>
<MainCard color='mainPageRed' title='Comunidades Quilombolas' subpages={subpages1} text={text1} image={'brasil_quilombola.png'} />
<MainCard dropdown='true' color='mainPageRed' title='Brasil Quilombola' subpages={subpages1} text={text1} image={'brasil_quilombola.png'} />
</Col>
</Row>
<Row className={'mainPageRow'}>
<Col m={12} l={5} offset={'l1'}>
<MainCard color='mainPageYellow' title='Povos Ciganos' subpages={subpages3} text={text3} image={'ciganos.png'}/>
<MainCard dropdown='true' color='mainPageYellow' title='Povos Ciganos' subpages={subpages3} text={text3} image={'ciganos.png'}/>
</Col>
<Col m={12} l={5} className={'mainPageMargin'}>
<MainCard color='mainPageDarkBlue' title='Comunidades de Matriz Africana e Povos de Terreiro' subpages={subpages4} text={text4} image={'matriz_africana4.png'} />
<MainCard dropdown='true' color='mainPageDarkBlue' title='Comunidades de Matriz Africana e Povos de Terreiro' subpages={subpages4} text={text4} image={'matriz_africana4.png'} />
</Col>
</Row>
<Row>
......
......@@ -34,7 +34,6 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
text-decoration: underline;
}
#bannerLogo{
margin-left: 20%;
margin-top: 3%;
}
......@@ -52,4 +51,4 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
#ContrastmainBannerLink{
color: yellow;
text-decoration: underline;
}
\ No newline at end of file
}
......@@ -72,7 +72,6 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
.listMainPage{
max-width: 94%;
max-height:35px;
overflow: hidden;
display: inline-block;
}
......