Commit f37c8253 authored by Felipetto's avatar Felipetto
Browse files

merge responsivo

parents 0a6b8a02 675715db
No related merge requests found
Showing with 67 additions and 109 deletions
+67 -109
div #buscar{
display: inline;
}
......@@ -58,33 +57,10 @@ table,.fixed-header {
font-weight: normal;
}
/****** FIM ******/
thead {
background-color: #207C7B;
color: white;
}
th, tr {
border: 1px none white;
padding: 2px;
align-self: center;
text-justify: newspaper;
text-align: center;
font-weight: normal;
}
tr{
font-size: 14px;
}
th{
font-size: 1.1em!important;
}
.nome-grupo {
text-align: left;
}
table{
background-color:rgba(255,255,255,0.7);
}
div {
display: flex;
flex-direction: column;
......@@ -98,19 +74,12 @@ h2 {
text-shadow: -1px 0 #207C7B, 0 1px #207C7B, -1px 0 #207C7B, 0 -1px #207C7B;}
@media only screen and (max-width: 320px) {
table{
margin-bottom:5%;
margin-top:5%;
}
.inputBuscar{
margin-top: 23%;
margin-left: 46%;
}
#buscar{
margin-bottom: 4%;
width: 100%;
width: 110%;
}
......@@ -121,13 +90,9 @@ h2 {
}
.inputBuscar{
margin-top: -7%;
margin-left: 14%;
width: 50%;
}
thead {
font-size: 3.5vw;
margin-left:5%;
margin-bottom:2%;
width: 90%;
}
:host /deep/ .ngx-datatable.material .datatable-header{/*para modificar o ngx-datatable */
font-size: 3.5vw;
......
......@@ -5,7 +5,7 @@
</div>
<div class="panel-body">
<div>
<div id="buscar" class="row">
<div id="buscar" class="row" *ngIf="atributoEmLista">
<p class="pBuscar col-md-1">Buscar: </p>
<input
type='text' class="inputBuscar col-md-4"
......@@ -20,19 +20,20 @@
[columnMode]="'force'"
[headerHeight]="50"
[rowHeight]="'auto'"
[scrollbarH]="true"
[rows]='rows'>
<!-- COLUNAS da tabela -->
<ngx-datatable-column name="Id" [width]="5"></ngx-datatable-column>
<ngx-datatable-column name="Nome" [width]="10"></ngx-datatable-column><!--ficou no html por conta do scroll horizontal e porque precisava definir um width diferente para algumas colunas -->
<ngx-datatable-column name="Unidade" [width]="10"></ngx-datatable-column>
<ngx-datatable-column name="Multiplicador" [width]="10" prop="multiplicador"> </ngx-datatable-column>
<ngx-datatable-column name="Obrigatório" [width]="10" prop="obrigatorio"></ngx-datatable-column>>
<ngx-datatable-column *ngIf="admin" name="Ações" [width]="10">
<ngx-datatable-column name="Id" [minWidth]="5"></ngx-datatable-column>
<ngx-datatable-column name="Nome" [minWidth]="10"></ngx-datatable-column><!--ficou no html por conta do scroll horizontal e porque precisava definir um width diferente para algumas colunas -->
<ngx-datatable-column name="Unidade" [minWidth]="10"></ngx-datatable-column>
<ngx-datatable-column name="Multiplicador" [minWidth]="10" prop="multiplicador"> </ngx-datatable-column>
<ngx-datatable-column name="Obrigatório" [minWidth]="10" prop="obrigatorio"></ngx-datatable-column>>
<ngx-datatable-column *ngIf="admin" name="Ações" [minWidth]="10">
<ng-template let-rowIndex="rowIndex" ngx-datatable-cell-template>
<i class="material-icons" style="cursor: pointer;" (click)="redirecionarParaCadastro(rowIndex)">edit</i>
<i class="material-icons" style="cursor: pointer;" (click)="deletarAtributo(rowIndex)">delete</i>
<i class="material-icons" style="cursor: pointer;" (click)="redirecionarParaCadastro(rowIndex)" title="Editar">edit</i>
<i class="material-icons" style="cursor: pointer;" (click)="deletarAtributo(rowIndex)" title="Excluir">delete</i>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
......
......@@ -59,14 +59,19 @@ tr:first-child {
}
@media only screen and (max-width: 768px) {
.imagem {
width: auto;
margin: 10%;
height: 100%;
}
button {
margin-top: 5px;
}
.imagem {
width: auto;
margin: 10%;
height: 100%;
}
button {
margin-top: 5px;
}
h2 {
font-size: 1.5em!important;
}
}
@media only screen and (min-width: 768px) {
......
......@@ -13,7 +13,7 @@ table,.fixed-header {
div #buscar{
display: inline;
padding-left: 10%;
padding-left: 1%;
}
.pBuscar{
......@@ -38,6 +38,7 @@ div #buscar{
align-self: center!important;
text-justify: newspaper!important;
text-align: center!important;
max-width: 100%;
}
:host /deep/ .ngx-datatable.material .datatable-header span{
......@@ -52,6 +53,7 @@ div #buscar{
text-justify: newspaper;
text-align: center;
height: 30px!important;
max-width: 100%;
}
:host /deep/ .ngx-datatable.material .datatable-header .datatable-header-cell {
color: white !important;
......@@ -68,32 +70,6 @@ div .panel-body{
overflow-x:auto;
height: 100%;
}
tr{
font-size: 15px;
width: 80%;
}
th{
font-size: 15px;
}
thead {
background-color: #207C7B;
color: white;
}
th, tr {
border: 1px none white;
padding: 2px;
align-self: center;
text-align: center;
font-weight: normal;
}
table{
background-color:rgba(255,255,255,0.7);
}
div {
display: flex;
flex-direction: column;
......@@ -111,13 +87,13 @@ h2 {
}
}*/
@media only screen and (max-height: 568px),(max-width: 320) {
table,.fixed-header {
width: 100%!important;
}
div #buscar{
display: inline;
padding-left: 2%;
}
:host /deep/ .ngx-datatable.material .datatable-header{
min-width: 130%!important;
}
}
@media only screen and (max-width: 768px) {
.inputBuscar{
......@@ -147,17 +123,11 @@ h2 {
width: 91%;
}
thead {
font-size: 3.5vw;
}
:host /deep/ .ngx-datatable.material .datatable-header{/*para modificar o ngx-datatable */
font-size: 3.5vw;
}
:host /deep/ .ngx-datatable.material .datatable-header .datatable-header-cell {
padding-left: 0px;
/*margin-right: 3.1%;*/
width: 100%!important;
}
table,.fixed-header {
......
......@@ -7,11 +7,11 @@
<div class="row justify-content-center">
<div class="panel panel-default panel-container">
<div class="panel-heading ">
<h2 class="titulo_lista">Listagem de Grupos de Receitas</h2 >
<h2 class="titulo_lista">Lista de Grupos de Receitas</h2 >
</div>
<div class="panel-body">
<div>
<div *ngIf="grupoEmLista">
<div id="buscar" class="row">
<p class="pBuscar col-md-1">Buscar: </p>
<input
......@@ -29,9 +29,9 @@
[scrollbarH]="false"
[rows]='rows'>
<ngx-datatable-column name="{{columns[0].name}}" prop="id" [maxWidth]="80"></ngx-datatable-column>
<ngx-datatable-column name="{{columns[1].name}}" class="first-title-detail label-wrap-detail" [maxWidth]="400" prop="nome"></ngx-datatable-column>
<ngx-datatable-column name="{{columns[2].name}}" prop="custo" [maxWidth]="150"></ngx-datatable-column>
<ngx-datatable-column name="{{columns[0].name}}" prop="id" [minWidth]="80"></ngx-datatable-column>
<ngx-datatable-column name="{{columns[1].name}}" class="first-title-detail label-wrap-detail" [minWidth]="100" prop="nome"></ngx-datatable-column>
<ngx-datatable-column name="{{columns[2].name}}" prop="custo" [minWidth]="80"></ngx-datatable-column>
<ngx-datatable-column *ngIf="admin"
name="{{columns[3].name}}"
[sortable]="false"
......@@ -40,8 +40,8 @@
[draggable]="false"
[resizeable]="false">
<ng-template *ngIf="admin" let-rowIndex="rowIndex" ngx-datatable-cell-template>
<i class="material-icons" style="cursor: pointer;" (click)="redirecionarParaCadastro(rowIndex)">edit</i>
<i class="material-icons" style="cursor: pointer;" (click)="deletarGrupo(rowIndex)">delete</i>
<i class="material-icons" style="cursor: pointer;" (click)="redirecionarParaCadastro(rowIndex)" title="Editar">edit</i>
<i class="material-icons" style="cursor: pointer;" (click)="deletarGrupo(rowIndex)" title="Excluir">delete</i>
</ng-template>
</ngx-datatable-column>
......@@ -49,6 +49,9 @@
</ngx-datatable>
</div>
<div id="aviso-cad" *ngIf="!grupoEmLista">
<p> Nenhuma grupo de receita cadastrado</p>
</div>
</div>
</div>
</div>
......
......@@ -16,6 +16,7 @@ export class GrupoListagemComponent implements OnInit {
grupos: Grupo[];
rows = [];
grupoEmLista:boolean = false;
admin: boolean;
columns = [];
@ViewChild(DatatableComponent) table: DatatableComponent;
......@@ -68,8 +69,12 @@ export class GrupoListagemComponent implements OnInit {
response['Grupos'].forEach(p => {
lista.push(p)
})
this.rows = lista;
if(lista.length!=0){
this.rows = lista;
this.grupoEmLista = true;//para exibir mensagem se não tiver nda cadastrado
}
else
this.grupoEmLista = false;
});
}
......
......@@ -2,8 +2,9 @@ table,.fixed-header { /*comentei pq só o fundo da tabela estava funcionando, ma
width: 100%;
margin: 0px;
overflow: auto;
max-width: 100%;
white-space: nowrap;
max-width: 100%;
min-width: 100px;
white-space: normal;
background-color: #ffffff9c!important;
}
......@@ -17,7 +18,6 @@ div #buscar{
font-weight: normal!important;
}
.inputBuscar{
width: 15em;
height: 1.5em;
float: left;
border: 1px solid #207C7B;
......@@ -44,7 +44,7 @@ div #buscar{
align-self: center;
text-justify: newspaper;
text-align: center;
height: 30px!important;
min-height: 30px!important;
}
:host /deep/ .ngx-datatable.material .datatable-header .datatable-header-cell {
color: white !important;
......
......@@ -19,6 +19,7 @@
[columnMode]="'force'"
[headerHeight]="40"
[rowHeight]="'auto'"
[scrollbarH]="true"
[rows]='rows'>
<ngx-datatable-column name="{{columns[0].name}}"></ngx-datatable-column>
<ngx-datatable-column name="{{columns[1].name}}"></ngx-datatable-column>
......@@ -32,13 +33,13 @@
[draggable]="false"
[resizeable]="false">
<ng-template let-rowIndex="rowIndex" ngx-datatable-cell-template>
<i class="material-icons" style="cursor: pointer;" (click)="redirecionarParaCadastro(rowIndex)">edit</i>
<i class="material-icons" style="cursor: pointer;" (click)="excluirIngrediente(rowIndex)">delete</i>
<i class="material-icons" style="cursor: pointer;" (click)="redirecionarParaCadastro(rowIndex)" title="Editar">edit</i>
<i class="material-icons" style="cursor: pointer;" (click)="excluirIngrediente(rowIndex)" title="Excluir">delete</i>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
<div id="aviso-cad" *ngIf="rows.length == 0">
<div id="aviso-cad" *ngIf="!ingredienteEmLista">
<p> Nenhum Ingrediente Cadastrado</p>
</div>
</div>
......
......@@ -20,6 +20,7 @@ import { UsuarioLogadoDto } from '../../usuario/usuario-logado-dto';
export class IngredienteListagemComponent implements OnInit {
ingredientes: Ingrediente[];
ingredienteEmLista:boolean = false;
usuarioLogado: UsuarioLogadoDto;
teste:string;
rows = [];
......@@ -87,7 +88,14 @@ export class IngredienteListagemComponent implements OnInit {
lista.push(p)
}
})
this.rows = lista
if(lista.length!=0){
this.rows = lista;
this.ingredienteEmLista = true;//para exibir mensagem se não tiver nda cadastrado
}
else
this.ingredienteEmLista = false;
});
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment