4

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.

7
  • Henrique, ótimo! Fiz um edit à pergunta. Montei um exemplo que dá para correr. Se puderes juntar mais HTML/CSS para reproduzir o que tens nas imagens é muito mais fácil para nós darmos uma resposta pois temos os dados todos relevantes (que ainda faltam). Entretanto vou limpando comentários antigos para a pergunta ficar mais limpa.
    – Sergio
    Commented 4/11/2017 às 21:33
  • Quais partes você precisa do HTML/CSS? Isso tudo eu peguei do browser, onde fica no projeto? Commented 4/11/2017 às 21:34
  • O HTML que colocaste é só de 1 widget. Nas imagens tens 4. O posicionamento deles depende do HTML e CSS. Se juntares o HTML dos 4 com o elemento HTML "pai" comum já dá para responder.
    – Sergio
    Commented 4/11/2017 às 21:35
  • Adicionado, novamente agradeço sua ajuda ;) Commented 4/11/2017 às 21:44
  • Boa. Aqui na Suécia onde vivo já é tarde e vou dormir. Amanhã dou uma olhada aqui e ajudo mais se ninguém tiver ajudado ainda. Devo-te um pedido de desculpa pois esqueci-me que essa ferramenta do site já aceita React... por isso podiamos ter montado a demo com o teu código React. Faço isso na resposta depois se ninguém tiver respondido. Mas entretanto junta o CSS que falta ainda. Clica em "Executar" no snippet da pergunta e vais ver o que falta. Até breve!
    – Sergio
    Commented 4/11/2017 às 22:25

1 Resposta 1

-1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .