From 1d93824ea3a280655842057d9ddc6ed463b0b4fa Mon Sep 17 00:00:00 2001
From: Janos SUTO <sj@acts.hu>
Date: Sat, 14 Mar 2020 17:14:12 +0100
Subject: [PATCH] attempt to merge the mobile fix

Signed-off-by: Janos SUTO <sj@acts.hu>
---
 .../theme/default/assets/css/responsive.css   | 121 ++++++++++
 .../default/assets/css/responsive.css.map     |   7 +
 .../theme/default/assets/css/responsive.scss  | 212 ++++++++++++++++++
 .../default/templates/common/layout-audit.tpl |   6 +-
 .../default/templates/common/layout-email.tpl |  26 ++-
 .../templates/common/layout-search.tpl        |  37 +--
 .../theme/default/templates/common/layout.tpl |   2 +
 .../theme/default/templates/message/auto.tpl  |   2 +
 .../theme/default/templates/message/view.tpl  |   3 +-
 9 files changed, 383 insertions(+), 33 deletions(-)
 create mode 100644 webui/view/theme/default/assets/css/responsive.css
 create mode 100644 webui/view/theme/default/assets/css/responsive.css.map
 create mode 100644 webui/view/theme/default/assets/css/responsive.scss

diff --git a/webui/view/theme/default/assets/css/responsive.css b/webui/view/theme/default/assets/css/responsive.css
new file mode 100644
index 00000000..264b4d39
--- /dev/null
+++ b/webui/view/theme/default/assets/css/responsive.css
@@ -0,0 +1,121 @@
+/** Respsonsive adjustments **/
+#logo-lg {
+  max-width: 100%; }
+
+@media (min-width: 980px) {
+  body {
+    padding-top: 0; } }
+@media (max-width: 767px) {
+  body {
+    padding-left: 10px;
+    padding-right: 10px; }
+    body .navbar-fixed-top, body .navbar-fixed-bottom, body .navbar-static-top {
+      margin-left: -10px;
+      margin-right: -10px; } }
+
+#menu {
+  position: relative;
+  z-index: 100; }
+
+@media (max-width: 979px) {
+  .nav-collapse.collapse {
+    position: absolute;
+    top: 52px;
+    width: 100vw;
+    margin: 0 0 0 -5px; } }
+@media (max-width: 767px) {
+  #searchcontainer {
+    min-width: auto;
+    max-width: 100%; } }
+#searchcontainer .control-group .controls .dropdown-backdrop {
+  display: none; }
+@media (max-width: 767px) {
+  #searchcontainer .control-group .controls button {
+    font-size: 14px;
+    width: 44%; }
+    #searchcontainer .control-group .controls button .caret {
+      margin-top: 9px;
+      margin-right: 0;
+      margin-left: -5px; }
+    #searchcontainer .control-group .controls button#button_search, #searchcontainer .control-group .controls button #button_options {
+      width: 28%; } }
+#searchcontainer .control-group .dropdown-menu {
+  left: auto;
+  right: 0; }
+
+@media (max-width: 979px) {
+  #searchpopup1 {
+    max-width: 100%; } }
+  @media (max-width: 979px) and (max-width: 767px) {
+    #searchpopup1 {
+      top: 40px; } }
+@media (max-width: 979px) {
+    #searchpopup1 form {
+      padding-left: 15px;
+      padding-right: 15px;
+      margin-bottom: 0; } }
+
+@media (min-width: 980px) {
+  #piler1.container, #piler1.container-fluid {
+    margin-top: 60px; } }
+
+@media (max-width: 767px) {
+  #mainscreen {
+    min-width: auto;
+    max-width: 100%;
+    left: 10px;
+    right: 10px; } }
+@media (max-width: 767px) {
+  #mainscreen #mailcontframe table#results th, #mainscreen #mailcontframe table#resultstable th {
+    line-height: normal;
+    font-size: 14px;
+    white-space: nowrap; }
+  #mainscreen #mailcontframe #pagingrow, #mainscreen #mailcontframe #functionrow {
+    height: auto;
+    min-height: 33px; } }
+@media (max-width: 767px) {
+  #mainscreen #mailcontframe #messagelistfooter #functionrow #functionbox {
+    float: none;
+    width: 100%; }
+    #mainscreen #mailcontframe #messagelistfooter #functionrow #functionbox a.btn-custom {
+      padding: 9px;
+      height: auto; }
+    #mainscreen #mailcontframe #messagelistfooter #functionrow #functionbox .add-on {
+      width: 40%; }
+    #mainscreen #mailcontframe #messagelistfooter #functionrow #functionbox #tag_value {
+      min-width: auto;
+      max-width: none;
+      width: calc(58% - 96px); } }
+#mainscreen #mailpreviewframe #notesbox {
+  display: none; }
+@media (max-width: 767px) {
+  #mainscreen #mailpreviewframe .messageheader, #mainscreen #mailpreviewframe #notesbox {
+    position: static; }
+  #mainscreen #mailpreviewframe #notesbox {
+    top: auto;
+    right: auto;
+    max-width: 100%;
+    overflow: hidden; }
+    #mainscreen #mailpreviewframe #notesbox .add-on {
+      display: block;
+      text-align: left; }
+    #mainscreen #mailpreviewframe #notesbox input[type='text'] {
+      max-width: 70%; }
+    #mainscreen #mailpreviewframe #notesbox input[type='button'] {
+      width: calc(30% - 10px); } }
+
+#piler1.container span#A1 {
+  display: block; }
+@media (max-width: 767px) {
+  #piler1.container {
+    max-width: 100%;
+    width: auto; }
+    #piler1.container h2 {
+      font-size: 28px; }
+    #piler1.container h3 {
+      font-size: 18px;
+      line-height: 26px; }
+      #piler1.container h3 > strong {
+        display: block; } }
+
+/*# sourceMappingURL=responsive.css.map */
diff --git a/webui/view/theme/default/assets/css/responsive.css.map b/webui/view/theme/default/assets/css/responsive.css.map
new file mode 100644
index 00000000..331a6096
--- /dev/null
+++ b/webui/view/theme/default/assets/css/responsive.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,+BAA+B;AAE/B,QAAS;EACP,SAAS,EAAE,IAAI;;AAKf,yBAAyB;EAF3B,IAAK;IAGD,WAAW,EAAE,CAAC;AAEhB,yBAA0B;EAL5B,IAAK;IAMD,YAAY,EAAE,IAAI;IAClB,aAAa,EAAE,IAAI;IAEnB,0EAA4D;MAC1D,WAAW,EAAE,KAAK;MAClB,YAAY,EAAE,KAAK;;AAKzB,KAAM;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;;AAGd,yBAA0B;EACxB,sBAAuB;IACrB,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,UAAU;AAMpB,yBAA0B;EAF5B,gBAAiB;IAGb,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;AAMb,4DAAmB;EACjB,OAAO,EAAE,IAAI;AAGf,yBAA0B;EACxB,gDAAO;IACL,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,GAAG;IAEV,uDAAO;MACL,UAAU,EAAE,GAAG;MACf,YAAY,EAAE,CAAC;MACf,WAAW,EAAE,IAAI;IAGnB,gIAAiC;MAC/B,KAAK,EAAE,GAAG;AAMlB,8CAAe;EACb,IAAI,EAAE,IAAI;EACV,KAAK,EAAE,CAAC;;AAMZ,yBAA0B;EAD5B,aAAc;IAEV,SAAS,EAAE,IAAI;EAEf,gDAA0B;IAJ9B,aAAc;MAKR,GAAG,EAAE,IAAI;AAJb,yBAA0B;IAOxB,kBAAK;MACH,YAAY,EAAE,IAAI;MAClB,aAAa,EAAE,IAAI;MACnB,aAAa,EAAE,CAAC;;AAOpB,yBAA0B;EACxB,0CAA+B;IAE7B,UAAU,EAAE,IAAI;;AAOpB,yBAA0B;EAF5B,WAAY;IAGR,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;AAIX,yBAA0B;EAEtB,6FAAG;IACD,WAAW,EAAE,MAAM;IACnB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;EAGvB,8EAAyB;IACvB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,IAAI;AASd,yBAA0B;EAD5B,uEAAa;IAET,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IAEX,oFAAa;MACX,OAAO,EAAE,GAAG;MACZ,MAAM,EAAE,IAAI;IAGd,+EAAQ;MACN,KAAK,EAAE,GAAG;IAEZ,kFAAW;MACT,SAAS,EAAE,IAAI;MACf,SAAS,EAAE,IAAI;MACf,KAAK,EAAE,gBAAgB;AASjC,uCAAU;EACR,OAAO,EAAE,IAAI;AAGf,yBAA0B;EACxB,qFAA0B;IACxB,QAAQ,EAAE,MAAM;EAElB,uCAAU;IACR,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,MAAM;IAEhB,+CAAQ;MACN,OAAO,EAAE,KAAK;MACd,UAAU,EAAE,IAAI;IAIhB,0DAAe;MACb,SAAS,EAAE,GAAG;IAGhB,4DAAiB;MACf,KAAK,EAAE,gBAAgB;;AAYjC,yBAAQ;EACN,OAAO,EAAE,KAAK;AAGhB,yBAA0B;EAN5B,iBAAkB;IAOd,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,IAAI;IAEX,oBAAG;MACD,SAAS,EAAE,IAAI;IAEjB,oBAAG;MACD,SAAS,EAAE,IAAI;MACf,WAAW,EAAE,IAAI;MAEjB,6BAAS;QACP,OAAO,EAAE,KAAK",
+"sources": ["responsive.scss"],
+"names": [],
+"file": "responsive.css"
+}
diff --git a/webui/view/theme/default/assets/css/responsive.scss b/webui/view/theme/default/assets/css/responsive.scss
new file mode 100644
index 00000000..db2b6402
--- /dev/null
+++ b/webui/view/theme/default/assets/css/responsive.scss
@@ -0,0 +1,212 @@
+/** Respsonsive adjustments **/
+
+#logo-lg {
+  max-width: 100%;
+}
+
+body {
+  // overwrites from metro-bootstrap.css
+  @media(min-width: 980px) {
+    padding-top: 0;
+  }
+  @media (max-width: 767px) {
+    padding-left: 10px;
+    padding-right: 10px;
+
+    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+}
+
+#menu {
+  position: relative;
+  z-index: 100;
+}
+
+@media (max-width: 979px) {
+  .nav-collapse.collapse {
+    position: absolute;
+    top: 52px;
+    width: 100vw;
+    margin: 0 0 0 -5px;
+  }
+}
+
+#searchcontainer {
+
+  @media (max-width: 767px) {
+    min-width: auto;
+    max-width: 100%;
+  }
+
+  .control-group {
+
+    .controls {
+      .dropdown-backdrop {
+        display: none;
+      }
+
+      @media (max-width: 767px) {
+        button {
+          font-size: 14px;
+          width: 44%;
+
+          .caret {
+            margin-top: 9px;
+            margin-right: 0;
+            margin-left: -5px;
+          }
+
+          &#button_search, #button_options {
+            width: 28%;
+          }
+        }
+      }
+    }
+
+    .dropdown-menu {
+      left: auto;
+      right: 0;
+    }
+  }
+}
+
+#searchpopup1 {
+  @media (max-width: 979px) {
+    max-width: 100%;
+
+    @media (max-width: 767px) {
+      top: 40px;
+    }
+
+    form {
+      padding-left: 15px;
+      padding-right: 15px;
+      margin-bottom: 0;
+    }
+  }
+
+}
+
+#piler1 {
+  @media (min-width: 980px) {
+    &.container, &.container-fluid {
+      // offset for menu bar
+      margin-top: 60px;
+    }
+  }
+}
+
+#mainscreen {
+
+  @media (max-width: 767px) {
+    min-width: auto;
+    max-width: 100%;
+    left: 10px;
+    right: 10px;
+  }
+
+  #mailcontframe {
+    @media (max-width: 767px) {
+      table#results, table#resultstable {
+        th {
+          line-height: normal;
+          font-size: 14px;
+          white-space: nowrap;
+        }
+      }
+      #pagingrow, #functionrow {
+        height: auto;
+        min-height: 33px;
+      }
+    }
+
+    #messagelistfooter {
+
+      #functionrow {
+
+        #functionbox {
+          @media (max-width: 767px) {
+            float: none;
+            width: 100%;
+
+            a.btn-custom {
+              padding: 9px;
+              height: auto;
+            }
+
+            .add-on {
+              width: 40%;
+            }
+            #tag_value {
+              min-width: auto;
+              max-width: none;
+              width: calc(58% - 96px);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  #mailpreviewframe {
+    #notesbox {
+      display: none;
+    }
+
+    @media (max-width: 767px) {
+      .messageheader, #notesbox {
+        position: static;
+      }
+      #notesbox {
+        top: auto;
+        right: auto;
+        max-width: 100%;
+        overflow: hidden;
+
+        .add-on {
+          display: block;
+          text-align: left;
+        }
+
+        input {
+          &[type='text'] {
+            max-width: 70%;
+          }
+
+          &[type='button'] {
+            width: calc(30% - 10px);
+          }
+        }
+
+
+      }
+    }
+  }
+}
+
+#piler1.container {
+
+  span#A1 {
+    display: block;
+  }
+
+  @media (max-width: 767px) {
+    max-width: 100%;
+    width: auto;
+
+    h2 {
+      font-size: 28px;
+    }
+    h3 {
+      font-size: 18px;
+      line-height: 26px;
+
+      > strong {
+        display: block;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/webui/view/theme/default/templates/common/layout-audit.tpl b/webui/view/theme/default/templates/common/layout-audit.tpl
index 8912ccfd..81dd6ba1 100644
--- a/webui/view/theme/default/templates/common/layout-audit.tpl
+++ b/webui/view/theme/default/templates/common/layout-audit.tpl
@@ -5,6 +5,7 @@
     <title><?php print $title; ?></title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta http-equiv="Content-Language" content="<?php print DEFAULT_LANG; ?>" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <?php if(SITE_KEYWORDS) { ?><meta name="keywords" content="<?php print SITE_KEYWORDS; ?>" /><?php } ?>
     <?php if(SITE_DESCRIPTION) { ?><meta name="description" content="<?php print SITE_DESCRIPTION; ?>" /><?php } ?>
     <?php if(PROVIDED_BY) { ?><meta name="author" content="<?php print PROVIDED_BY; ?>" /><?php } ?>
@@ -12,6 +13,7 @@
     <meta name="robots" content="all" />
 
     <link href="/view/theme/default/assets/css/metro-bootstrap.css" rel="stylesheet" />
+    <link href="/view/theme/default/assets/css/responsive.css" rel="stylesheet" />
 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!-- original location: http://html5shim.googlecode.com/svn/trunk/html5.js -->
@@ -88,7 +90,7 @@
 
             <div id="mailcontframe">
                <div id="sspinner" class="alert alert-info lead"><i class="icon-spinner icon-spin icon-2x pull-left"></i><?php print $text_working; ?></div>
-               <div id="resultscontainer" class="boxlistcontent"> 
+               <div id="resultscontainer" class="boxlistcontent">
                   <?php print $content; ?>
                </div>
             </div>
@@ -96,7 +98,7 @@
 <?php if(Registry::get('auditor_user') == 1 || Registry::get('data_officer') == 1) { ?>
 
             <script type="text/javascript">
-               var mailviewsplit = new rcube_splitter({id:'splitter2', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: 341});
+               var mailviewsplit = new rcube_splitter({id:'splitter2', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: (document.getElementById('mainscreen').clientHeight / 2)});
                split.add_onload('mailviewsplit.init()');
             </script>
 
diff --git a/webui/view/theme/default/templates/common/layout-email.tpl b/webui/view/theme/default/templates/common/layout-email.tpl
index bab0d680..cfe155a1 100644
--- a/webui/view/theme/default/templates/common/layout-email.tpl
+++ b/webui/view/theme/default/templates/common/layout-email.tpl
@@ -5,26 +5,28 @@
    <title><?php print $title; ?></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="<?php print DEFAULT_LANG; ?>" />
+   <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <?php if(SITE_KEYWORDS) { ?><meta name="keywords" content="<?php print SITE_KEYWORDS; ?>" /><?php } ?>
    <?php if(SITE_DESCRIPTION) { ?><meta name="description" content="<?php print SITE_DESCRIPTION; ?>" /><?php } ?>
    <?php if(PROVIDED_BY) { ?><meta name="author" content="<?php print PROVIDED_BY; ?>" /><?php } ?>
    <meta name="rating" content="general" />
    <meta name="robots" content="all" />
 
-    <link href="/view/theme/default/assets/css/metro-bootstrap.css" rel="stylesheet">
+   <link href="/view/theme/default/assets/css/metro-bootstrap.css" rel="stylesheet" />
+   <link href="/view/theme/default/assets/css/responsive.css" rel="stylesheet" />
 
-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!-- original location: http://html5shim.googlecode.com/svn/trunk/html5.js -->
-    <!--[if lt IE 9]>
-      <script src="/view/theme/default/assets/js/html5.js"></script>
-    <![endif]-->
+   <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+   <!-- original location: http://html5shim.googlecode.com/svn/trunk/html5.js -->
+   <!--[if lt IE 9]>
+     <script src="/view/theme/default/assets/js/html5.js"></script>
+   <![endif]-->
 
-    <!-- Fav and touch icons -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/view/theme/default/assets/ico/apple-touch-icon-144-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/view/theme/default/assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/view/theme/default/assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="/view/theme/default/assets/ico/apple-touch-icon-57-precomposed.png">
-    <?php if(BRANDING_FAVICON) { ?><link rel="shortcut icon" href="<?php print BRANDING_FAVICON; ?>" /><?php } ?>
+   <!-- Fav and touch icons -->
+   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/view/theme/default/assets/ico/apple-touch-icon-144-precomposed.png">
+   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/view/theme/default/assets/ico/apple-touch-icon-114-precomposed.png">
+   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/view/theme/default/assets/ico/apple-touch-icon-72-precomposed.png">
+   <link rel="apple-touch-icon-precomposed" href="/view/theme/default/assets/ico/apple-touch-icon-57-precomposed.png">
+   <?php if(BRANDING_FAVICON) { ?><link rel="shortcut icon" href="<?php print BRANDING_FAVICON; ?>" /><?php } ?>
 
    <script type="text/javascript">
 
diff --git a/webui/view/theme/default/templates/common/layout-search.tpl b/webui/view/theme/default/templates/common/layout-search.tpl
index 647c5a12..e5ef8879 100644
--- a/webui/view/theme/default/templates/common/layout-search.tpl
+++ b/webui/view/theme/default/templates/common/layout-search.tpl
@@ -14,23 +14,24 @@
    <meta name="robots" content="all" />
    <meta http-equiv="x-ua-compatible" content="IE=edge">
 
-    <link href="/view/theme/default/assets/css/metro-bootstrap.css" rel="stylesheet">
+   <link href="/view/theme/default/assets/css/metro-bootstrap.css" rel="stylesheet" />
+   <link href="/view/theme/default/assets/css/responsive.css" rel="stylesheet" />
 
-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!-- original location: http://html5shim.googlecode.com/svn/trunk/html5.js -->
-    <!--[if lt IE 9]>
-      <script src="/view/theme/default/assets/js/html5.js"></script>
-      <style>body{padding-top:70px;}</style>
-    <![endif]-->
+   <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+   <!-- original location: http://html5shim.googlecode.com/svn/trunk/html5.js -->
+   <!--[if lt IE 9]>
+     <script src="/view/theme/default/assets/js/html5.js"></script>
+     <style>body{padding-top:70px;}</style>
+   <![endif]-->
 
-    <!-- Fav and touch icons -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/view/theme/default/assets/ico/apple-touch-icon-144-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/view/theme/default/assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/view/theme/default/assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="/view/theme/default/assets/ico/apple-touch-icon-57-precomposed.png">
-    <?php if(BRANDING_FAVICON) { ?><link rel="shortcut icon" href="<?php print BRANDING_FAVICON; ?>" /><?php } ?>
+   <!-- Fav and touch icons -->
+   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/view/theme/default/assets/ico/apple-touch-icon-144-precomposed.png">
+   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/view/theme/default/assets/ico/apple-touch-icon-114-precomposed.png">
+   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/view/theme/default/assets/ico/apple-touch-icon-72-precomposed.png">
+   <link rel="apple-touch-icon-precomposed" href="/view/theme/default/assets/ico/apple-touch-icon-57-precomposed.png">
+   <?php if(BRANDING_FAVICON) { ?><link rel="shortcut icon" href="<?php print BRANDING_FAVICON; ?>" /><?php } ?>
 
-    <?php print JS_CODE; ?>
+   <?php print JS_CODE; ?>
 </head>
 
 <body onload="Piler.add_shortcuts();">
@@ -122,20 +123,20 @@
             <div id="mailrightcontent">
               <div id="mailcontframe">
                 <div id="sspinner" class="alert alert-info lead"><i class="icon-spinner icon-spin icon-2x pull-left"></i><?php print $text_working; ?></div>
-                <div id="messagelistcontainer" class="boxlistcontent" style="top:0"> 
-                
+                <div id="messagelistcontainer" class="boxlistcontent" style="top:0">
+
                 <?php print $content; ?>
 
                 </div>
               </div>
 
         <script type="text/javascript">
-          var mailviewsplit = new rcube_splitter({id:'splitter2', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: 341});
+          var mailviewsplit = new rcube_splitter({id:'splitter2', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'h', relative: true, start: (document.getElementById('mainscreen').clientHeight / 2)});
           split.add_onload('mailviewsplit.init()');
         </script>
 
               <div id="mailpreviewframe"></div>
-              
+
           </div>
 
         </div>
diff --git a/webui/view/theme/default/templates/common/layout.tpl b/webui/view/theme/default/templates/common/layout.tpl
index d3aeff10..34e5a5ed 100644
--- a/webui/view/theme/default/templates/common/layout.tpl
+++ b/webui/view/theme/default/templates/common/layout.tpl
@@ -5,6 +5,7 @@
     <title><?php print $title; ?></title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta http-equiv="Content-Language" content="<?php print DEFAULT_LANG; ?>" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <?php if(SITE_KEYWORDS) { ?><meta name="keywords" content="<?php print SITE_KEYWORDS; ?>" /><?php } ?>
     <?php if(SITE_DESCRIPTION) { ?><meta name="description" content="<?php print SITE_DESCRIPTION; ?>" /><?php } ?>
     <?php if(PROVIDED_BY) { ?><meta name="author" content="<?php print PROVIDED_BY; ?>" /><?php } ?>
@@ -12,6 +13,7 @@
     <meta name="robots" content="all" />
 
     <link href="/view/theme/default/assets/css/metro-bootstrap.css" rel="stylesheet" />
+    <link href="/view/theme/default/assets/css/responsive.css" rel="stylesheet" />
 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!-- original location: http://html5shim.googlecode.com/svn/trunk/html5.js -->
diff --git a/webui/view/theme/default/templates/message/auto.tpl b/webui/view/theme/default/templates/message/auto.tpl
index 6c2c1af2..8b5cc619 100644
--- a/webui/view/theme/default/templates/message/auto.tpl
+++ b/webui/view/theme/default/templates/message/auto.tpl
@@ -59,6 +59,8 @@
        if ($message['verification'] == 1) { ?><?php print $text_verified_flag; ?> <i class="verified icon-ok-sign icon-large" title="<?php print $text_verified_flag; ?>"></i><?php } else { ?><?php print $text_unverified_flag; ?> <i class="unverified icon-remove-sign icon-large" title="<?php print $text_unverified_flag; ?>"></i><?php }
     } ?>
 
+       | <a href="#" onclick="($('#notesbox').is(':hidden'))?$('#notesbox').show():$('#notesbox').hide();"><i class="icon-file-alt"></i>&nbsp;<?php print $text_create_note; ?></a>
+
     </p>
 </div>
 
diff --git a/webui/view/theme/default/templates/message/view.tpl b/webui/view/theme/default/templates/message/view.tpl
index 100ce9aa..a81023ac 100644
--- a/webui/view/theme/default/templates/message/view.tpl
+++ b/webui/view/theme/default/templates/message/view.tpl
@@ -38,10 +38,11 @@
     <?php } ?>
        | <a href="#" onclick="Piler.print_div('messageblock');"><i class="icon-print"></i>&nbsp;<?php print $text_print_message; ?></a>
 
-    <?php if(ENABLE_ON_THE_FLY_VERIFICATION == 0) {    
+    <?php if(ENABLE_ON_THE_FLY_VERIFICATION == 0) {
        if ($message['verification'] == 1) { ?><?php print $text_verified_flag; ?> <i class="verified icon-ok-sign icon-large" title="<?php print $text_verified_flag; ?>"></i><?php } else { ?><?php print $text_unverified_flag; ?> <i class="unverified icon-remove-sign icon-large" title="<?php print $text_unverified_flag; ?>"></i><?php }
     } ?>
 
+       | <a href="#" onclick="($('#notesbox').is(':hidden'))?$('#notesbox').show():$('#notesbox').hide();"><i class="icon-file-alt"></i>&nbsp;<?php print $text_create_note; ?></a>
     </p>
 </div>