TransWikia.com

Ajustes no CSS do React.JS

Stack Overflow em Português Asked by Henrique Hermes on December 19, 2021

Estou desenvolvendo um sistema simples no react e estou com dificuldades na parte visual, por exemplo para o mobile:

Preciso deixar meu sistema dessa forma:

inserir a descrição da imagem aqui

Está dessa forma:

inserir a descrição da imagem aqui

O sistema da web precisa ser desse jeito:

inserir a descrição da imagem aqui

O meu, na web, fica assim:

inserir a descrição da imagem aqui

Como posso colocar o conteúdo logo abaixo do ícone e ocupar o espaço restando ao lado do ícone no mobile e mudar a forma do design na web? Caso a solução seja somente no design que preciso do mobile, já está ótimo.

Um exemplo do JS de um widget qualquer:

import React from 'react';

const WidgetOrder = (props) =>(
  <div className="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;

A função render do 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 da página em questão retirada do f12 do Chrome:

.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>

Comecei a estudar React recentemente e peguei os modelos prontos.

cssreact

2 Answers

Basicamente você vai usar display:flex nos cards, e na div que organiza os cards você pode usar display:grid. Quanto a responsividade é só você adaptar usando media query do css. Fiz um exemplo no CodePen usando HTML E CSS simples. Basta pegar e adaptar pro seu projeto.

.container {
  display: flex;
  justify-content: center;
}
.grid-container {
  display: grid;
  grid-template-columns: 500px 500px;
  grid-gap: 13pt;
}
.card-container {
  width: 500px;
  height: 150px;
  background: #fff;
  display: flex;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  gap: 10pt;
  align-items: center; 
}

.icon {
  width: 150px;
  height: 100%;
  background: #7ea9f7;
}

.details {
  font-family: 'Roboto', sans-serif;
  color: #6e6e6e
}

.details h3 {
  color: #404040
}

details p {
  color: #6e6e6e
}

@media only screen and (max-width: 1033px) {
  .grid-container {
    display: grid;
    grid-template-columns: 500px;
  }
}
<div class="container">
  <div class="grid-container">
    <div class="card-container">
      <span class="icon"><!--O icone vai aqui dentro--></span>
      <span class="details">
        <h3>120</h3>
        <p>New Orders</p>
      </span>
    </div>
      <div class="card-container">
      <span class="icon"><!--O icone vai aqui dentro--></span>
      <span class="details">
        <h3>120</h3>
        <p>New Orders</p>
      </span>
    </div>
      <div class="card-container">
      <span class="icon"><!--O icone vai aqui dentro--></span>
      <span class="details">
        <h3>120</h3>
        <p>New Orders</p>
      </span>
    </div>
        <div class="card-container">
      <span class="icon"><!--O icone vai aqui dentro--></span>
      <span class="details">
        <h3>120</h3>
        <p>New Orders</p>
      </span>
    </div>
  </div>
</div>

Answered by David Fernando on December 19, 2021

Suas Divs estão com Display: Block; tente usar Display: flex; depois insira o flex-direction: row (Acho que o padrão é Collumn); feito isso é só ajustar as divs que estão por dentro colocando o tamanho fixo na Div que contem a imagem e Width e Height de 100% para a outra div.

Answered by Rafael Mendes on December 19, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP