banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Don't set display:flex in js

Browse Source 
We'll use -webkit- and -ms- prefixes in css, it will not work well in js.
pull/5742/merge
Aleksander Machniak 7 years ago
parent 2b3ab9635b
commit 9fb943ada1
2 changed files with 49 additions and 49 deletions
Show Stats Download Patch File Download Diff File

59
skins/elastic/styles/layout.less
Unescape Escape View File

@ -18,7 +18,7 @@
@page-font-size: 14px;
@page-min-width: 240px;
@layout-taskmenu-width: 70px;
@layout-taskmenu-width: 5rem;
@layout-header-height: 2.5rem;
@layout-header-font-size: 1rem;
@ -101,18 +101,21 @@ body > #layout {
}
&.sidebar {
display: flex;
min-width: 220px;
background-color: @color-layout-sidebar-background;
flex: 2;
}
&.list {
display: flex;
flex: 3;
min-width: 300px;
background-color: @color-layout-list-background;
flex: 3;
}
&.menu {
display: flex;
width: @layout-taskmenu-width;
background-color: @color-taskmenu-background;
@ -183,34 +186,31 @@ html.iframe body {
min-width: 260px;
flex: 3;
}
body > #layout > div:not(.selected) {
display: none;
}
body > #layout > div.menu,
body > #layout > div.content {
display: flex;
}
}
@media screen and (max-width: @screen-width-medium) {
body > #layout > div.menu a,
body > #layout > div.menu a:before,
body > #layout > div.menu {
width: 45px;
}
body > #layout > div.menu span.inner {
display: none;
width: @layout-taskmenu-width/2;
a,
a:before {
width: @layout-taskmenu-width/2;
}
a {
height: @layout-taskmenu-width/2;
}
span.inner {
display: none;
}
}
}
@media screen and (max-width: @screen-width-small) {
body > #layout > div > .header > .toolbar:not(.searchbar),
body > #layout > div:not(.selected) {
body > #layout > div > .header > .toolbar:not(.searchbar) {
display: none;
}
body > #layout > div.menu {
display: flex;
}
body > #layout > div.sidebar,
body > #layout > div.list {
max-width: none;
@ -235,11 +235,7 @@ html.iframe body {
}
@media screen and (max-width: @screen-width-xs) {
body > #layout > div.menu span.inner {
display: block;
}
body > #layout > div.menu {
display: none;
position: absolute;
z-index: 100;
top: 0;
@ -251,11 +247,16 @@ html.iframe body {
opacity: .96;
text-align:center;
border-radius: 4pt;
}
body > #layout > div.menu a,
body > #layout > div.menu a:before {
display: inline-block;
width: 100px;
span.inner {
display: block;
}
a,
a:before {
display: inline-block;
width: 100px;
}
}
}

39
skins/elastic/ui.js
Unescape Escape View File

@ -102,7 +102,7 @@ function rcube_elastic_ui()
buttons.back_sidebar.on('click', function() { show_sidebar(); return false; });
buttons.back_list.on('click', function() { show_list(); return false; });
$('body').on('click', function() { if (mode == 'phone') layout.menu.hide(); });
$('body').on('click', function() { if (mode == 'phone') layout.menu.addClass('hidden'); });
// Set content frame title in parent window
if (rcmail.is_framed()) {
@ -584,14 +584,14 @@ function rcube_elastic_ui()
{
screen_resize_small();
layout.menu.hide();
layout.menu.addClass('hidden');
};
function screen_resize_tablet()
{
screen_resize_small();
layout.menu.css('display', 'flex');
layout.menu.removeClass('hidden');
};
function screen_resize_small()
@ -600,18 +600,17 @@ function rcube_elastic_ui()
if (layout.content.length) {
show = got_content = layout.content.is(env.last_selected);
layout.content.css('display', show ? 'flex' : 'none');
layout.content[show ? 'removeClass' : 'addClass']('hidden');
}
if (layout.list.length) {
show = !got_content && layout.list.is(env.last_selected);
layout.list.css('display', show ? 'flex' : 'none');
layout.list[show ? 'removeClass' : 'addClass']('hidden');
}
if (layout.sidebar.length) {
show = !got_content && (layout.sidebar.is(env.last_selected) || !layout.list.length);
layout.sidebar.css('display', show ? 'flex' : 'none');
layout.sidebar[show ? 'removeClass' : 'addClass']('hidden');
}
if (got_content) {
@ -633,15 +632,15 @@ function rcube_elastic_ui()
if (layout.list.length) {
show = layout.list.is(env.last_selected) || !layout.sidebar.is(env.last_selected);
layout.list.css('display', show ? 'flex' : 'none');
layout.list[show ? 'removeClass' : 'addClass']('hidden');
}
if (layout.sidebar.length) {
show = !layout.list.length || layout.sidebar.is(env.last_selected);
layout.sidebar.css('display', show ? 'flex' : 'none');
layout.sidebar[show ? 'removeClass' : 'addClass']('hidden');
}
layout.content.css('display', 'flex');
layout.menu.css('display', 'flex');
layout.content.removeClass('hidden');
layout.menu.removeClass('hidden');
buttons.back_list.hide();
$.each(content_buttons, function() { $(this).show(); });
$('ul.toolbar.popupmenu').removeClass('popupmenu');
@ -653,7 +652,7 @@ function rcube_elastic_ui()
function screen_resize_wide()
{
$.each(layout, function(name, item) { item.css('display', 'flex'); });
$.each(layout, function(name, item) { item.removeClass('hidden'); });
buttons.back_list.hide();
$.each(content_buttons, function() { $(this).show(); });
$('ul.toolbar.popupmenu').removeClass('popupmenu');
@ -666,8 +665,8 @@ function rcube_elastic_ui()
function show_sidebar()
{
// show sidebar and hide list
layout.list.hide();
layout.sidebar.css('display', 'flex');
layout.list.addClass('hidden');
layout.sidebar.removeClass('hidden');
};
function show_list()
@ -677,8 +676,8 @@ function rcube_elastic_ui()
}
else {
// show list and hide sidebar and content
layout.sidebar.hide();
layout.list.css('display', 'flex');
layout.sidebar.addClass('hidden');
layout.list.removeClass('hidden');
hide_content();
}
};
@ -686,7 +685,7 @@ function rcube_elastic_ui()
function hide_content()
{
// show sidebar or list, hide content frame
//$(layout.content).hide();
//$(layout.content).addClass('hidden');
env.last_selected = layout.list[0] || layout.sidebar[0];
screen_resize();
@ -710,13 +709,13 @@ function rcube_elastic_ui()
// show menu widget
function show_menu()
{
var display = 'flex';
var show = true;
if (mode == 'phone') {
display = layout.menu.is(':visible') ? 'none' : 'block';
show = layout.menu.is(':visible') ? false : true;
}
layout.menu.css('display', display);
layout.menu[show ? 'removeClass' : 'addClass']('hidden');
};
/**

Write Preview
Loading…
Cancel
Save