BJ
Alterar a largura da janela em cortina lateral
Bom dia!
Investiguei o Framework e encontrei o código abaixo em admin.js:
Certamente alterei o valor 320 mas não surtiu efeito algum no sistema, por gentileza alguém pode me dar esta dica, preciso aumentar a largura da janela, tanto para desktop como para mobile.
Grato pela atenção.
Investiguei o Framework e encontrei o código abaixo em admin.js:
Template.onAfterLoad = function(url, data) {
Template.updateDebugPanel();
if ((url.indexOf("target_container=adianti_right_panel") !== -1) || (data.indexOf('adianti_target_container="adianti_right_panel"') !== -1) ) {
if ($('#adianti_right_panel').is(":visible") == false) {
$('body').css("overflow", "hidden");
$('#adianti_right_panel').show('slide',{direction:'right'},320);
}
}
else if (url.indexOf('&static=1') == -1) {
if ($('#adianti_right_panel').is(":visible")) {
$('#adianti_right_panel').hide();
$('body').css('overflow', 'unset');
}
}
};
Certamente alterei o valor 320 mas não surtiu efeito algum no sistema, por gentileza alguém pode me dar esta dica, preciso aumentar a largura da janela, tanto para desktop como para mobile.
Grato pela atenção.
Se você olhar no arquivo layout.html do seu tema, vai ver o seguinte:
Ou seja, é utilizada uma versão minificada desse arquivo. É esse arquivo que precisa alterar.
Salve Beto, eu também, tive essa curiosidade e encontrei a solução no arquivo: admin.min.css, especificamente nesta regra:
".right-panel{right:0;position:fixed;top:0;border-right:1px solid silver;width:700px;height:100%;....".
Este tamanho 700px é o que aumenta a largura do painel. É preciso atualizar a página com CTRL+F5 para surtir o efeito.
Obs. no arquivo admin-all.min.js, vc vai encontrar a regra que permite alterar o efeito (slide) de abertura do painel, se da esquerda p/ a direita ou vice-versa.
Abraço,
Paulo
Salve Beto,
Um detalhezinho que esqueci, mas o valor 320 que vc alterou tem a ver com a velocidade (tempo) da abertura...
Grande abraço,
Paulo
Bom dia!
Agradeço pelas dicas do Nataniel e do Paulo!
Consegui alterar a largura com as vossas dicas, vou deixar aqui a solução do problema para futuras consultas.
1 - Localizei o código abaixo no arquivo admin.css:
2 - colei no arquivo application.css e fiz algumas alterações, incluindo também um gatilho intermediário para ficar responsivo também em tablets:
Bom dia Beto,
Meu caro, sabemos que o recomendado é sempre replicar nossas necessidades no arquivo application.css, sendo assim, usando sua dica de colocar esta parte do código nele, não estou conseguindo aumentar o tamanho do right-panel, somente quando altero direto no admin.min.css !!! inclusive levei, além da sua dica sugerida, esta parte também que é a que tem resolvido aqui no meu caso:
.right-panel
{
right:0;
position:fixed;
top:0;border-right:1px solid silver;
width:780px; <<------------------------------------------------------ o default é 700 e estou usando 780
height:100%;
float:right;
z-index:1030;
display:none;
overflow:auto;
opacity:1;
overflow-x:hidden;box-shadow:0 10px 50px 0 rgba(50,50,50,.34);
background:red;
border-left:1px solid silver
}
Agora Vc consegue me ajudar nesta questão ? me mostrar como ficou no seu application !!! rsrsrs
obs. usando pelo application.css, já dei ctrl + F5, sai e entrei do navegador e por aí não funfa !!!
Bom dia Paulo!
O segredo está no uso da expressão "!important" logo após o valor que deseja alterar, antes do ponto e vírgula:
Exemplo: width:780px important;
Pelo que entendi, esta expressão diz para o Framework que ele deve considerar o valor do arquivo application.css e não o valor original.
Outro detalhe importante é que quando eu alterei exatamente este parâmetro, o resultado não foi o que eu esperava, a janela alargou, mas afetou a responsividade, por isso continuei pesquisando o código e encontrei a propriedade @media screen, que me parece ser o mecanismo de gatilho para a responsividade, fiz uma pesquisa do tamanho médio dos dispositivos moveis, tablets e smartfones, fiz testes e consegui 3 estágios de responsividade, max 1400px em 600px, max 1000px em 400px e max 500px em 350px.
Após feitas as alterações, o ctrl + F5 limpa o cache e atualiza a página para exibir as mesmas.
Espero ter ajudado.
Abraços.
Salve beto,
Rapaz...devo estar sem sorte ou fazendo algo errado na solução via application.css, e por este caminho não consigo. Veja meu código no application:
.right-panel
{
right:0;
position:fixed;
top:0;border-right:1px solid silver;
width:780px !important;
height:100%;
float:right;
z-index:1030;
display:none;
overflow:auto;
opacity:1;
overflow-x:hidden;box-shadow:0 10px 50px 0 rgba(50,50,50,.34);
background:#fff;
border-left:1px solid silver
}
@media screen and (max-width: 1400px) {
.right-panel {
width: 600px !important; }
}
@media screen and (max-width: 1000px) {
.right-panel {
width: 400px !important; }
}
@media screen and (max-width: 500px) {
.right-panel {
width: 350px !important; }
}
Fazendo uma inspeção, percebo que ele sempre busca no arquivo original: admin.min.css !!!
Abs,
Paulo
Salve Paulo!
Apague do application.css parte do código logo abaixo, deixe os três @media screen, salve e tente o ctrl + F5.