I am developing a simple system in react and I am having difficulties in the visual part, for example for the mobile:
I need to leave my system this way:
It'slikethis:
Thewebsystemneedstolookthisway:
My,ontheweb,lookslikethis:
HowcanIplacethecontentjustbelowtheiconandtakeuptheremainingspacenexttotheicononthemobileandchangetheshapeofthewebdesign?IfthesolutionisonlyinthedesignthatIneedthemobile,itisalreadygreat.
AnexampleoftheJSofanywidget:
importReactfrom'react';constWidgetOrder=(props)=>(<divclassName="row">
<div className="info-box">
<div className="col-md-3 col-sm-6 col-xs-12">
<span className="info-box-icon logo-Order">
<i className="fa fa-envelope-open"></i>
</span>
<div className="info-box-content">
<span className="info-box-number">{props.title}</span>
<span className="info-box-text">New Orders</span>
</div>
</div>
</div>
</div>
);
export default WidgetOrder;
The render function of Home.JS :
render(){
return(
<div className="container text-center">
<div className="row">
<WidgetOrder title={this.state.data.newOrders} //apos DATA. vai as tags do JSON pra pegar
/>
<WidgetCom title={this.state.data.comments}
/>
<WidgetUser title={this.state.data.newUsers}
/>
<WidgetView title={this.state.data.pageViews}
/>
</div>
</div>
);
}
Html page in question removed from Chrome f12:
.logo-Order {
background-color: #00c3ff;
color: #fff;
}
.row {
text-align: center;
}
.info-box-content {
padding: 5px 22px;
margin-left: 90px;
}
.info-box {
display: block;
min-height: 90px;
background-color: #FFFFFF;
width: 100%;
border-radius: 6px;
margin-bottom: 15px;
}
.info-box-text {
display: block;
font-size: 14px;
}
.info-box-number {
display: block;
font-size: 25px;
}
.info-box-icon {
display: block;
float: left;
height: 90px;
width: 90px;
font-size: 45px;
line-height: 90px;
}<div class="container text-center">
<div class="row">
<div class="row">
<div class="info-box">
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="info-box-icon logo-Order">
<i class="fa fa-envelope-open"></i>
</span>
<div class="info-box-content">
<span class="info-box-number">132</span>
<span class="info-box-text">NewOrders</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="info-box">
<div class="col-md-3 col-sm-6 col-xs12">
<span class="info-box-icon logoCom">
<i class="fa fa-comment-o"></i>
</span>
<div class="info-box-content">
<span class="info-boxnumber">58</span>
<span class="info-box-text">Comments</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="info-box">
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="info-box-icon logo-User">
<i class="fa fa-male"></i>
</span>
<div class="info-box-content">
<span class="info-box-number">26</span>
<span class="info-box-text">News Users</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="info-box">
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="info-box-icon logo-View">
<i class="fa fa-tasks"></i>
</span>
<div class="info-box-content">
<span class="info-box-number">18962</span>
<span class="info-box-text">Page Views</span>
</div>
</div>
</div>
</div>
</div>
</div>I started studying React recently and got the models ready.