Some improvements for phones layout

skins/elastic/styles/layout.less

@@ -18,9 +18,16 @@
 @page-font-size:        14px;
 @page-min-width:        240px;
 
-@taskmenu-width:        70px;
+@layout-taskmenu-width:        70px;
+
+@layout-header-height:                  2.5rem;
+@layout-header-font-size:               1rem;
+@layout-small-header-height:            3.6rem;
+@layout-small-header-font-size:         1.2rem;
+
+@layout-small-menu-record-height:       3.6rem;
+@layout-small-menu-record-font-size:    1.2rem;
 
-@layout-header-height-mobile:    2.5rem;
 
 /*** Responsive design - Layout ***/
 
@@ -106,13 +113,13 @@ body > #layout {
         }
 
         &.menu {
-            width: @taskmenu-width;
+            width: @layout-taskmenu-width;
             background-color: @color-taskmenu-background;
 
             a,
             a:before {
                 display: block;
-                width: @taskmenu-width;
+                width: @layout-taskmenu-width;
             }
         }
 
@@ -127,10 +134,10 @@ body > #layout {
         & > .header,
         & > .footer {
             background-color: @color-layout-header-background;
-            font-size: 1rem;
+            font-size: @layout-header-font-size;
             font-weight: bold;
-            line-height: 2.5rem;
-            height: 2.5rem;
+            line-height: @layout-header-height;
+            height: @layout-header-height;
             padding: 0 .25em;
             margin: 0;
             position: relative; /* for absolute positioning of searchbar */
@@ -186,10 +193,6 @@ html.iframe body {
 }
 
 @media screen and (max-width: @screen-width-medium) {
-    html:not(.iframe) {
-        font-size: 120%;
-    }
-
     body > #layout > div.menu a,
     body > #layout > div.menu a:before,
     body > #layout > div.menu {
@@ -212,6 +215,20 @@ html.iframe body {
     body > #layout > div.list {
         max-width: none;
     }
+    body > #layout > div > .header,
+    body > #layout > div > .footer {
+        line-height: @layout-small-header-height;
+        height: @layout-small-header-height;
+        font-size: @layout-small-header-font-size;
+
+        a.button.icon:before {
+            font-size: 1.5em;
+            height: @layout-small-header-height;
+            margin: 0;
+            width: 1.4em;
+        }
+    }
+
     .hidden-small {
         display: none !important;
     }

skins/elastic/styles/widgets/buttons.less

@@ -127,3 +127,9 @@ a.rcmaddcontact:before {
     margin-left: 5px;
     font-size: inherit;
 }
+
+@media screen and (max-width: @screen-width-small) {
+    .btn:focus {
+        box-shadow: none;
+    }
+}

skins/elastic/styles/widgets/dialogs.less

@@ -37,6 +37,7 @@ div.popover-body {
 
 body.layout-mode-phone .popover {
     margin: 0 !important;
+    padding: 0;
     left: initial !important;
     right: 0;
     bottom: 0;
@@ -55,8 +56,9 @@ body.layout-mode-phone .popover {
         display: block;
         border-radius: 0;
         padding: 0 .5em;
-        height: 2.5rem; /* TODO: layout var */
-        line-height: 2.5rem; /* TODO: layout var */
+        height: @layout-small-header-height;
+        line-height: @layout-small-header-height;
+        font-size: @layout-small-header-font-size;
         color: #888; /* TODO: color */
     }
 
@@ -67,8 +69,8 @@ body.layout-mode-phone .popover {
     .toolbarmenu.listing,
     .popupmenu.toolbar.listing {
         li a {
-            line-height: 2.5rem; /* TODO: layout var */
-            font-size: 1rem;
+            line-height: @layout-small-menu-record-height;
+            font-size: @layout-small-menu-record-font-size;
             padding: 0 .5em;
 
             &:before {

skins/elastic/styles/widgets/jqueryui.less

@@ -77,12 +77,12 @@
         }
 
         .ui-dialog-titlebar {
-            height: @layout-header-height-mobile;
+            height: @layout-small-header-height;
         }
 
         .ui-dialog-title {
-            line-height: @layout-header-height-mobile;
-            font-size: 1rem;
+            line-height: @layout-small-header-height;
+            font-size: @layout-small-header-font-size;
         }
 
         .ui-dialog-content {

skins/elastic/styles/widgets/lists.less

@@ -11,7 +11,8 @@
 
 /*** List and treelist widgets ***/
 
-@var-listing-line-height:   2.4em;
+@listing-line-height:           2.5rem;
+@listing-small-line-height:     3.6rem;
 
 .listing {
     tbody td,
@@ -20,7 +21,11 @@
         border-bottom: 1px solid #f4f4f4;
         cursor: default;
         font-weight: normal;
-        line-height: @var-listing-line-height;
+        line-height: @listing-line-height;
+
+        @media screen and (max-width: @screen-width-small) {
+            line-height: @listing-small-line-height;
+        }
     }
 
     tbody td,
@@ -31,7 +36,9 @@
         padding: 0 .5em;
         white-space: nowrap;
         vertical-align: middle;
-        line-height: @var-listing-line-height;
+/*
+        line-height: @listing-line-height;
+*/
         color: @color-list;
     }
 
@@ -108,9 +115,13 @@ ul.listing {
         input[type=checkbox] {
             position: absolute;
             top: 0;
-            right: .2em;
-            height: @var-listing-line-height;
+            right: .5em;
+            height: @listing-line-height;
             vertical-align: middle;
+
+            @media screen and (max-width: @screen-width-small) {
+                height: @listing-small-line-height;
+            }
         }
     }
 }
@@ -227,8 +238,8 @@ ul.listing {
 ul.treelist li {
     div.treetoggle {
         position: absolute;
-        top: 1.2em;
-        left: 1.3em;
+        top: 1.2rem;
+        left: 1.2em;
         width: .8em;
         height: .8em;
         line-height: .8em;