Utilização de todo o espaço da tela para desenvolvimento

Utilização de todo o espaço da tela para desenvolvimento

  
Estou precisando desenvolver um telão de informações usando uma smartv, mas estou tendo dificuldades de utilizar todo o espaço disponível na tela. Há uma forma de se fazer isso ?

Obrigado
Ola Roberto,

Se estiverem a utilizar a Platform 9, no Theme da aplicação mudem o tipo de grid para Fluid e o Base Theme para "LondonFluid" (em vez do actual "LondonFixed")
http://www.outsystems.com/forums/discussion/12642/fluids-grids-new-in-platform-9/#Post45887

Isso vai fazer com que as applicações utilizem 100% da largura do ecra.

Cumprimentos,
João Rosado
Obrigado João! Realmente as alterações já geraram um maior aproveitamento da tela. Mas eu ainda tenho algumas restrições, como pequenas margens à esquerda e direita, e mesmo os blocos de header e título que tomam uma boa parte da tela. Para resolver isso deverei programar um thema próprio?

Muito obrigado
Depende da quantidade de customizações.
Se forem so alguns ajustes de tamanhos nos estilos base, eu evitaria copiar totalmente os temas, ajustando apenas no tema do modulo os estilos necessários.

Por exemplo as margens do container principal estao declaradas no estilo "ThemeGrid_Container", tal como é possivel observar utilizando um debugger no browser (F12)



Sendo assim para reduzir as margens para 1% (por exemplo) basta na stylesheet do tema do modulo adicionares:

div.ThemeGrid_Container {
    padding-left: 1%;
    padding-right: 1%;
}



Nota: neste caso em particular tive de acrescentar "div" antes do .ThemeGrid_Container para a customização ganhar prioridade. Mas em geral basta colocar ".ThemeGrid_Container".

Cumprimentos,
João Rosado

Perfeito João, funcionou legal. Tem como eu diminuir também a altura do menu e do título, e do espaço entre o título e o container principal?

Muito obrigado
João,

Vc consegue me dar uma dica para no tema London_Fixed eu diminuir o espacejamento que existe entre o título e o maincontent e entre o menu e o título?

Muito obrigado
Ola Roberto,

Eu tentei explicar com a imagem como é possivel chegar a essa costumização. Parece que não expliquei bem :)
Aqui vai uma nova tentativa com um video a demostrar para o espacamento do titulo.

Nota:Neste exemplo estou a usar Firefox. Mas o procedimento sera semelante em outros browsers.
http://screencast.com/t/wQPVZJyQUu8E

Portanto, a ideia é abrir o Inspector perto da zona problematica e ver (passando o rato pelos varios elementos) qual é que tem uma margin (a amarelo neste exemplo) ou um padding (a roxo, no caso anterior do ThemeGrid_Container)

Por fim é so copiar o estilo em questao para o a Stylesheet do modulo (apenas com a linha relevante):

.Title_Section {
    margin-top: 5px;
}


Cumprimentos,
João Rosado



Very useful your explanation!

Thanks João!
João, muito obrigado pela atenção! Agora está perfeitamente compreendido. Para alteração de tamanho de fontes e cores, vejo que deverei usar o mesmo procedimento, correto?

Abraços,

Roberto
SIm,

Mas quanto á questao das cores recomendo que vejam o site de documentacao do London Theme (se ainda não passaram por lá): http://labs.outsystems.net/LondonTheme/Color.aspx

Existe tambem no site a opção de Customize, que permite gerar uma customização de cores com base em uma imagem. Ficando assim com um todos os estilos necessarios e é so alterar os códigos das cores.

Cumprimentos,
João Rosado
Very nice!

Tks João Rosado
Olá João,

Seguindo sua orientação, consegui determinar todos os comandos CSS que eu precisava para mudar o layout. Somente um não conseguí, que é o espaço entre o title e o menu (na parte de cima). Anexo figura explicativa. Será que vc consegue me ajudar?

Muito obrigado,

Roberto

Bom dia,

Experimenta utilizar isto:

.Main.Content {
margin top: 5px;
}

Com os placeholders Title e Actions ocultados, vai fazer subir o placeholder MainContent para cima.

Cumprimentos.
Ola Roberto,

Não tenho a certeza se pela imagem percebi bem, mas assumindo que ja não existe nenhuma margem no .Title_Section, pode ser o padding the está definido no .Content

Tenta assim (so a repetir neste meu exemplo o .Title_Section outra vez visto que no meu post anterior eu sugeri 5px como exemplo):

.Title_Section {
     margin-top: 0px;
}

.Content {
    padding-top: 100px;
}


Podem tentar reduzir mais o valor do padding-top, mas tem de ter cuidado para o titulo não ficar escondido por tras do menu.

Cumprimentos,
João Rosado
Obirgado João! É esse mesmo o comando, e a sua recomendação está correta. Se for usar o menu, não há muito como alterá-lo.

Grato,

Roberto