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

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

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

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