/gainTime

GainTime

Painel administrativo. Simples e rápido.

Arquivos não compilados do GainTime

Instalação

  • Via git:
    • Crie uma vendor:
    $ mkdir vendors; cd vendors
    • Faça o download:
    $ git submodule add https://github.com/GainTime/gainTime.git
    • Escolha a versão com a qual deseja trabalhar: git checkout vx.y.z (opcional)
    $ git checkout v0.2

    $ git checkout v0.2.1
    • Informe ao git pra usar aquela versão no submodulo, commitando sua "pasta"
    • Pronto 😄

Estrutura

.
├── dist
│   ├── css
│   │   └── gainTime.min.css
│   ├── img
│   │   ├── logo-gT-f.png
│   │   └── logo-gT.png
│   └── js
│       └── gainTime.min.js
├── vendors
│   └── jquery-2.1.4.min.js
└── README.md

Uso

Adicione à sua <head> as linhas seguintes:

<link rel="icon" type="image/png" href="vendor/gainTime/dist/img/logo-gT.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/gainTime/dist/css/gainTime.min.css">
  • A primeira linha se refere à imagem que aparece no ícone da aba do navegador.
  • A segunda linha se refere à biblioteca de ícones que o GainTime utiliza. No caso, o FontAwesome.
  • A terceira linha se refere à estilização do GainTime.

No fim do seu arquivo, antes do fechamento da tag body, adicione as seguintes linhas:

<script src="vendors/gainTime/vendors/jquery/jquery-2.1.4.min.js"></script>
<script src="vendors/gainTime/dist/js/gainTime.min.js"></script>
  • A primeira linha se refere ao plugin de JavaScript que o GainTime utiliza, o JQuery, versão 2.1.4;
  • A segunda linha se refere aos scripts gerais do GainTime;
  • A terceira linha se refere aos scripts do GainTime que dizem respeito aos formulários.

Layout

O layout é composto por quatro partes principais:

  • header > nav.menu - O cabeçalho do site (header), onde ficam a logo (img.menu-logo), o menu de navegação (nav.menu) e a imagem de perfil do usuário (div.me).
<header>
    <img src="../assets/img/logo-gT.png" alt="GainTime" class="menu-logo">
    <div id="me">
        <img src="../assets/img/logo-gT.png" alt="Me" class="professor-image">
        <ul id="me-menu">
            <a href="#"><li>Sair</li></a>
            ...
        </ul>
    </div>
    <input type="checkbox" id="menu" class="toggle">
    <label id="menu-toggle" for="menu" onclick><i class="fa fa-bars"></i></label>
    <nav class="menu">
        <ul>
            <a href="index.php"><li><i class="fa fa-home"></i> Início</li></a>
            ...
        </ul>
    </nav>
</header>

  • section .box - A div principal que envolve todo o conteúdo "interno" do site.

    OBS: Na tela de login, pode ser substituída pela class .login.

<section class="box">
    ...
</section>
  • footer - A barra inferior do site.
<footer>
    <div>
        <p>Área administrativa GainTime</p>
    </div>
</footer>

Tabelas

As tabelas são ativas com a class table.table. Isso pode parecer redundante, mas é uma tentativa de evitar 'conflito' com plugins de calendário e pickers de data.

<table class="table">
    ...
</table>

Para auxiliar as tabelas administrativas (TBA), o GainTime dispõe de botões de ícones que indicam as ações mais comuns em uma TBA. Os botões são ativos com a class .btn-action e complementados com uma das 3 classes padrão que colorem o botão - .edit (azul), .del (vermelho), .download (verde) - e um ícone que representa a ação (FontAwesome).

...
<td>
    <a href="#" class="btn-action edit" title="#">
        <i class="fa fa-edit fa-lg"></i>
    </a>
    <a href="#" class="btn-action del" title="#">
        <i class="fa fa-trash-o fa-lg"></i>
    </a>
</td>
...

Formulários

O formulários são ativos com a class form.s-form.

<form class="s-form">
    ...
</form>

Os componentes de formulário do GainTime possuem um comportamento específico, e por isso precisam seguir a estrutura padrão, e dependem do script inputLabels para funcionar como planejado.

  • input
<div class="field has-label">
    <label for="myInput">My Input</label>
    <input id="myInput" type="text" name="" value="">
</div>
  • textarea
<div>
    <!-- Utilize menot se você quer um field que não se move -->
    <div class="field menot">
        <label for="myText">My Text</label>
    </div>
    <textarea id="myText" class="form-input" name="" rows="3"></textarea>
</div>
  • radio, checkbox - Nestes casos a label que representa o título do bloco de inputs é opcional, e por tanto o .field-mark também o é.
<div>
    <!-- opcional -->
    <div class="field-mark menot">
        <label>Options</label>
    </div>
    <!--  -->
    <label class="radio">
       <input type="radio" name="user[isAdmin]" required value="1"> op1
    </label>
    <label class="radio">
       <input type="radio" name="user[isAdmin]" value="0"> op2
    </label>
</div>
<div>
    <!-- opcional -->
    <div class="field-mark menot">
        <label>Options</label>
    </div>
    <!--  -->
    <label class="checkbox">
       <input type="checkbox" name="user[isAdmin]" required value="1"> op1
    </label>
    <label class="checkbox">
       <input type="checkbox" name="user[isAdmin]" value="0"> op2
    </label>
</div>
  • input type file
<div class="input-file">
    <div class="btn btn-file">
        <i class="fa fa-upload"></i>
        <input type="file" class="real" name="file" value="">
        <input type="hidden" name="MAX_FILE_SIZE" value="20971520"/>
    </div>
    <div class="field">
        <input class="false" type="text" value="" placeholder="Nenhum arquivo foi selecionado.">
    </div>
</div>

Componentes

Botões

Utilize as classes de botão em tags <a>, <input>, ou <button>. Os botões são ativos com a class .btn, e complementados com uma class de cor. Temo 3 classes de cor típicas para botão - .send (verde), .wait (amarelo), .cancel (vermelho).

<button class="btn send">...</button>
<!-- Botão maior que o padrão -->
<button class="btn btn-lg send">..</button>

Mensagens

As classes de mensagem ocupam uma width: 100%, e podem ser fixas (.msg-fixed), ou temporárias (.msg). As mensagens temporárias ficam visíveis por 3 segundos após serem impressas. As classes de mensgem devem vir acompanhadas por uma classe de cor.

<div class="msg success">This is a temporary message.</div>
<div class="msg-fixed warning">This is a fixed message</div>

Título

Os títulos ou cabeçalhos das páginas são ativos com a classe .top-bar. As .top-bar podem conter, ou não, um botão de ação. Este botão deve conter a classe btn-add para que fique com a cor principal do projeto e alinhado à direita.

<div class="top-bar">
    <h1><i class="fa fa-file-pdf-o"></i> My page</h1>
    <a href="#" class="btn btn-add"><i class="fa fa-plus"></i>Adicionar</a>
</div>

Complementos

Cores

As classes de cor aplicam background-color.

/* Semanticamente preparado para mensagens e alertas */
.fail vermelho #F44336
.success verde #7CB124
.warning amarelo #FCF8E3

/* Semanticamente preparado para botões de ação */
.del vermelho #F44336
.download verde #7cb124
.edit azul #2196f3

/* Semanticamente preparado para botões de confirmação */
.cancel vermelho #EF4836
.send verde #2ECC71
.wait amarelo #F5AB35

Direções

As classes de direção forçam o posicionamento de um elemento à esquerda ou à direita.

<div class="to-right"></div>
<div class="to-left"></div>

Visibilidade

As classes de visibilidade tornam elementos visíveis ou invisíveis.

  • Elementos ocultos em celulares (max-width: 767px)
<div class="hxs"></div>
  • Elementos visíveis apenas em celuares (max-width: 767px)
<div class="sxs"></div>
  • Elementos invisíveis
<div class="invisible"></div>
  • Elementos não-invisíveis
<div class="visible"></div>

Afaste-me da footer

Para afastar um elemento da footer, utilize a class .last.

<section class="box last">
    ...
</section>

Vendors

O GainTime utiliza JQuery