Merge pull request #229 from ONLYOFFICE/bugfix/layout-fixes

fix layout

web/documentserver-example/csharp-mvc/Content/media.css

@@ -87,10 +87,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -312,6 +308,9 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/csharp-mvc/Content/stylesheet.css

@@ -22,6 +22,7 @@
 }
 
 body {
+    display: inline-table;
     background: #FFFFFF;
     color: #333333;
     font-family: Open Sans;
@@ -98,6 +99,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/csharp-mvc/Views/Home/Index.aspx

@@ -139,7 +139,7 @@
                     <td class="section">
                         <div class="main-panel">
                             <% var storedFiles = DocManagerHelper.GetStoredFiles(); %>
-                            <div id="portal-info"  style="display: <%= storedFiles.Any() ? "none" : "block" %>">
+                            <div id="portal-info"  style="display: <%= storedFiles.Any() ? "none" : "table-cell" %>">
                                 <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                 <span class="portal-descr">
                                     Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.

web/documentserver-example/csharp/App_Themes/media.css

@@ -87,10 +87,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -312,6 +308,9 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/csharp/App_Themes/stylesheet.css

@@ -22,6 +22,7 @@ html {
 }
 
 body {
+    display: inline-table;
     background: #FFFFFF;
     color: #333333;
     font-family: Open Sans;
@@ -98,6 +99,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/csharp/Default.aspx

@@ -140,7 +140,7 @@
                         <td class="section">
                         <% var storedFiles = GetStoredFiles(); %>
                             <div class="main-panel">
-                                <div id="portal-info" style="display: <%= storedFiles.Any() ? "none" : "block" %>">
+                                <div id="portal-info" style="display: <%= storedFiles.Any() ? "none" : "table-cell" %>">
                                     <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                     <span class="portal-descr">
                                         Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.

web/documentserver-example/java-spring/src/main/resources/static/css/stylesheet.css

@@ -98,6 +98,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/java-spring/src/main/resources/templates/index.html

@@ -127,7 +127,7 @@
                 </td>
                 <td class="section">
                     <div class="main-panel">
-                        <div id="portal-info" th:attr="tooltip=${tooltip}" th:style="${not #lists.isEmpty(files)} ? 'display: none' : 'display: block' ">
+                        <div id="portal-info" th:attr="tooltip=${tooltip}" th:style="${not #lists.isEmpty(files)} ? 'display: none' : 'display: table-cell' ">
                             <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                             <span class="portal-descr">
                                     Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.

web/documentserver-example/java/src/main/webapp/css/media.css

@@ -86,10 +86,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -299,6 +295,9 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/java/src/main/webapp/css/stylesheet.css

@@ -22,6 +22,7 @@ html {
 }
 
 body {
+    display: inline-table;
     background: #FFFFFF;
     color: #333333;
     font-family: Open Sans;
@@ -98,6 +99,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/java/src/main/webapp/index.jsp

@@ -139,7 +139,7 @@
                             <% DocumentManager.Init(request, response); %>
                             <% File[] files = DocumentManager.GetStoredFiles(null); %>
                             <div class="main-panel">
-                                <div id="portal-info" style="display: <%= files.length > 0 ? "none" : "block" %>">
+                                <div id="portal-info" style="display: <%= files.length > 0 ? "none" : "table-cell" %>">
                                     <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                     <span class="portal-descr">
                                         Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.

web/documentserver-example/nodejs/public/stylesheets/media.css

@@ -87,10 +87,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -312,6 +308,9 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/nodejs/public/stylesheets/stylesheet.css

@@ -97,6 +97,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/nodejs/views/index.ejs

@@ -133,7 +133,7 @@
                     </td>
                     <td class="section">
                         <div class="main-panel">
-                            <div id="portal-info" style="display: <%= storedFiles.length > 0 ? "none" : "block" %>">
+                            <div id="portal-info" style="display: <%= storedFiles.length > 0 ? "none" : "table-cell" %>">
                                 <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                 <span class="portal-descr">
                                     Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.

web/documentserver-example/php/css/media.css

@@ -87,10 +87,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -312,6 +308,10 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/php/css/stylesheet.css

@@ -22,6 +22,7 @@ html {
 }
 
 body {
+    display: inline-table;
     background: #FFFFFF;
     color: #333333;
     font-family: Open Sans;
@@ -97,6 +98,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/php/index.php

@@ -144,7 +144,7 @@
                                     if (!empty($storedFiles)): ?>
                                         <div id="portal-info" style="display: none">
                                     <?php else: ?>
-                                        <div id="portal-info" style="display: block">
+                                        <div id="portal-info" style="display: table-cell">
                                     <?php endif; ?>
                                         <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                         <span class="portal-descr">

web/documentserver-example/python/static/css/media.css

@@ -87,10 +87,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -312,6 +308,10 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/python/static/css/stylesheet.css

@@ -30,6 +30,7 @@ html {
 }
 
 body {
+    display: inline-table;
     background: #FFFFFF;
     color: #333333;
     font-family: Open Sans;
@@ -106,6 +107,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+    max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/python/templates/index.html

@@ -113,7 +113,7 @@
                         {% if files %}
                             <div id="portal-info" style="display: none">
                         {% else %}
-                            <div id="portal-info" style="display: block">
+                            <div id="portal-info" style="display: table-cell">
                         {% endif %}
                             <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                             <span class="portal-descr">

web/documentserver-example/ruby/app/assets/stylesheets/media.css

@@ -87,10 +87,6 @@
 }
 
 @media (max-width: 1008px) {
-    #portal-info {
-        width: 65vw;
-    }
-
     .left-panel {
         margin-left: 0;
     }
@@ -312,6 +308,10 @@
     .tableRow td:first-child {
         max-width: 17%;
     }
+
+    #portal-info {
+        max-width: 60vw;
+    }
 }
 
 .downloadContentCellShift:after {

web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss

@@ -22,6 +22,7 @@ html {
 }
 
 body {
+    display: inline-table;
     background: #FFFFFF;
     color: #333333;
     font-family: Open Sans;
@@ -98,6 +99,10 @@ header img {
     width: 896px;
 }
 
+#portal-info {
+  max-width: 65vw;
+}
+
 .portal-name {
     color: #FF6F3D;
     font-size: 24px;

web/documentserver-example/ruby/app/views/home/index.html.erb

@@ -117,7 +117,7 @@
             docs = DocumentHelper.get_stored_files(nil)
           %>
           <div class="main-panel">
-            <div id="portal-info" style="display: <%= docs.length > 0 ? "none" : "block" %>">
+            <div id="portal-info" style="display: <%= docs.length > 0 ? "none" : "table-cell" %>">
               <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
               <span class="portal-descr">
                 Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.