Fixes for Mobile Responsive layout - Styles.less

layouts/v7/skins/vtiger/style.less

@@ -134,9 +134,9 @@ body{
         padding-right: 0;
         position: absolute;
         width: 100%;
-        height: 42px;
+        height: 43px;
 /*        border-top:1px solid #ddd;*/
-        border-bottom:1px solid #ddd
+        border-bottom:1px solid #eee
     }
     .app-nav .module-action-bar .module-action-content{
         background: @blockBackground;
@@ -174,7 +174,6 @@ body{
     .main-container .content-area{
         width: 100%;
         padding-left:283px;
-        padding-top: 15px;
         min-height: 768px;
     }
     .main-container .settingsPageDiv{
@@ -253,8 +252,16 @@ body{
     padding-top:5px;
 }*/
 .global-nav .navbar-nav > li div a{
-    padding : 15px;
+    padding : 13px;
+}
+#navbar > ul > li > div > div > a{
+    float: left;
 }
+
+#navbar > ul > li > div > a{
+    float: left;
+}
+
 .global-nav>ul{
     margin-right: 20px;
 }
@@ -277,7 +284,7 @@ body{
     height: 100%;
     width: 100%;
     color: @search-link-color;
-    margin-top: 4px;
+    margin: 4px;
     padding: 0px 10px;
     text-decoration: none;
     vertical-align: top;
@@ -414,9 +421,9 @@ body{
 
 .app-nav .app-indicator-icon-container {
     top: 0px;
-    height: 42px;
+    height: 43px;
     text-align: center;
-    line-height: 42px;
+    line-height: 43px;
 /*    background-color: #2c3b49;*/
     color: #ffffff;
     /*border-bottom: 1px solid #272B46;*/
@@ -816,6 +823,10 @@ a.menu-item:hover{
     margin: 10px 0;   
 }
 
+#logout-footer > div > span > a {
+    float : none;
+}
+
 .app-home {
     background: @app_home;
 }
@@ -848,7 +859,7 @@ a.menu-item:hover{
 /******** View styles (List/Edit/Detail..) *******/
 /*************************************************/
 .viewContent .content-area{
-    padding-left : 50px;
+    padding-left : 3%;
 }
 
 .viewContent .content-area.full-width{
@@ -1590,6 +1601,7 @@ ul.unstyled{
     width: 100%;
     border: 1px solid #ddd;
     margin-top: 10px;
+    overflow: scroll;
 }
 
 .listview-table{
@@ -1632,6 +1644,7 @@ ul.unstyled{
         vertical-align: middle;
         width: 100%;
         display: inline-block;
+        word-break: normal;
     }
 }
 .listViewEntries .relatedListEntryValues .value{
@@ -1926,7 +1939,7 @@ input[type=checkbox]:checked{
     padding-top:5px;
 }
 .detailViewButtoncontainer button.btn {
-	margin: 0px 1px !important;
+	margin: 1px !important;
 }
 .detailview-header .recordBasicInfo > .info-row{
     margin-bottom: 4px;
@@ -2384,7 +2397,6 @@ strong, b, th{
     max-width:85%;  //TN-#34716
     display: inline-block;
     vertical-align: middle;
-    height: 26px;
 }
 
 .related-tabs .tab-label{
@@ -5692,7 +5704,9 @@ hr{
 //related tabs css
 .related-tabs.row .nav>li{
     padding:0 10px;
-    margin:0 2px;
+    margin:0 2px 3px 2px;
+    width: 90px;
+    text-align: center;
 }
 
 .massEditTabs.nav>li{
@@ -5730,6 +5744,7 @@ hr{
     .nav-tabs>li.active,.nav-tabs>li:hover,.nav-tabs>li.active:focus {
         border: none;
         border-bottom: 3px solid @relatedtabsborderbottomcolor;
+        margin-bottom: 0;
     }
 }
 
@@ -6755,7 +6770,8 @@ div.tooltip-inner{
 //Detailview and edit view Changes
 .detailview-header-block{ 
     background: white; 
-    padding: 15px; 
+    padding: 15px;
+    padding-top: 25px;
 } 
 
 .detailViewContainer .content-area,
@@ -8456,9 +8472,123 @@ input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
 .moduleIcon .custom-module {
 	font-weight: bold;
 }
-.navbar-fixed-top {
-    z-index: 1095 !important;
+.margin0 {
+    margin : 0
+}
+.border0 {
+    border: 0;
+}
+.padding0 {
+    padding: 0;
 }
-body .fc {
-overflow:auto;
+.rounded0 {
+    border-radius: 0;
 }
+.bg-white {
+    background: #FFFFFF;
+}
+@media all and (min-width:0px) and (max-width: 600px) {
+    //Responsive Table
+    table.summary-table>tbody>tr>td,
+    table.summary-table>tbody>tr>th,
+    table.summary-table>tfoot>tr>td,
+    table.summary-table>tfoot>tr>th,
+    table.summary-table>thead>tr>td,
+    table.summary-table>thead>tr>th,
+    .quickCreateContent>table.table>tbody>tr>td,
+    .quickCreateContent>table.table>tbody>tr>th,
+    .quickCreateContent>table.table>tfoot>tr>td,
+    .quickCreateContent>table.table>tfoot>tr>th,
+    .quickCreateContent>table.table>thead>tr>td,
+    .quickCreateContent>table.table>thead>tr>th,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>tbody>tr>td,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>tbody>tr>th,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>tfoot>tr>td,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>tfoot>tr>th,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>thead>tr>td,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>thead>tr>th,
+    .detailview-table>tbody>tr>td,
+    .detailview-table>tbody>tr>th,
+    .detailview-table>tfoot>tr>td,
+    .detailview-table>tfoot>tr>th,
+    .detailview-table>thead>tr>td,
+    .detailview-table>thead>tr>th {
+        display: block;
+        min-width: 100%!important;
+    }
+
+    table.summary-table>thead>tr>th,
+    .quickCreateContent>table.table>thead>tr>th,
+    .fieldBlockContainer>table.table:not(#lineItemResult)>thead>tr>th,
+    .detailview-table>thead>tr>th {
+        display: none;
+    }
+    .editElement div {
+        float: left;
+    }
+    #detailView td.fieldValue .edit {
+        width: 100%;
+        float: none !important;
+        display: inline-block;
+    }
+    table.summary-table td.fieldValue .inputElement,
+    .quickCreateContent>table.table td.fieldValue .inputElement,
+    .fieldBlockContainer>table.table:not(#lineItemResult) td.fieldValue .inputElement,
+    .fieldBlockContainer>table.table:not(#lineItemResult) td.fieldValue .input-group {
+        width: 100%;
+        float: none !important;
+    }
+    #detailView td.fieldLabel {
+        padding-top: 20px;
+    }
+    #detailView td.fieldValue {
+        border-bottom: 1px solid #eee;
+        padding-bottom: 20px;
+    }
+    #detailView td.fieldValue>span:first-child {
+        border: 0;
+        border-bottom: 1px dashed #aaa;
+    }
+    //Search bar
+    .search-link {
+        border:0;
+    }
+    #page>nav.navbar {
+        border-bottom: 1px solid #eee;
+    }
+    .modal-overlay-footer
+    {
+        border-left: 0;
+    }
+    .app-footer {
+        font-size: 11px;
+    }
+    body {
+        font-size: 13px;
+    }
+    .overlay-container-60{
+        margin-left:0px ;
+    }
+    .overlayPageContent {
+        padding-bottom: 0;
+        &.fade{
+            overflow: scroll;
+        }
+    }
+    .overlayDetail .modal-content{
+        position:relative;
+    }
+    .mCSB_inside > .mCSB_container {
+        margin-right: 0;
+    }
+    #mCSB_9_scrollbar_vertical {
+        display: none;
+    }
+    .lineItemInputBox {
+        width: 100%;
+    }
+    #comment1 {
+        border-left-color: #ccc;
+    }
+}
+