Merge branch hotfix/v6.3.2 into develop

fix for IE 11

Readme.md

@@ -1,14 +1,18 @@
-## Document Server integration example
+## Integration examples
 
-These examples show the way to integrate [ONLYOFFICE Document Server][2] into your own website or application using one of the programming languages. The package contains examples written in .Net (C# MVC), .Net (C#), Java, Node.js, PHP and Ruby.
+Test examples are simple document management systems that can be built into your
+application for testing (please, do not use it for production without proper code
+modifications).
+
+These examples show the way to integrate [ONLYOFFICE Docs][2] into your own website or application using one of the programming languages. The package contains examples written in .Net (C# MVC), .Net (C#), Java, Node.js, PHP and Ruby.
 
 You should change `http://documentserver` to your server address in these files:
-* .Net (C# MVC) - `web/documentserver-example/csharp-mvc/web.appsettings.config`
-* .Net (C#) - `web/documentserver-example/csharp/settings.config`
-* Java - `web/documentserver-example/java/src/main/resources/settings.properties`
-* Node.js - `web/documentserver-example/nodejs/config/default.json`
-* PHP - `web/documentserver-example/php/config.php`
-* Ruby - `web/documentserver-example/ruby/config/application.rb`
+* [.Net (C# MVC)](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/csharp-mvc) - `web/documentserver-example/csharp-mvc/web.appsettings.config`
+* [.Net (C#)](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/csharp) - `web/documentserver-example/csharp/settings.config`
+* [Java](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/java) - `web/documentserver-example/java/src/main/resources/settings.properties`
+* [Node.js](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/nodejs) - `web/documentserver-example/nodejs/config/default.json`
+* [PHP](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/php) - `web/documentserver-example/php/config.php`
+* [Ruby](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/ruby) - `web/documentserver-example/ruby/config/application.rb`
 
 More information on how to use these examples can be found here: [http://api.onlyoffice.com/editors/demopreview](http://api.onlyoffice.com/editors/demopreview "http://api.onlyoffice.com/editors/demopreview")
 

web/documentserver-example/README.md

@@ -1,17 +0,0 @@
-# Integration examples
-
-## To start integrating document editors into your own website you need to do the following:
-
-1. Download [Document Server installation](https://www.onlyoffice.com/developer-edition-request.aspx?from=api.onlyoffice.com) and set it up on your local server.
-
-2. Select the programming language and clone the source code for the sample of online editors integration into your web site.
-
-3. [Edit the configuration files](https://api.onlyoffice.com/editors/advanced) in the sample changing the default path for the one to the editors installed at step 1 and other advanced parameters available for editor configuration.
-
-4. In case the example and Document Server are installed on different computers, make sure that your server with the example installed has access to the Document Server with the address which you specify instead of **documentserver** in the configuration files. And you must also make sure that the Document Server in its turn has access to the server with the example installed with the address which you specify instead of **example.com** in the configuration files.
-
-Please note that the integration examples are used to demonstrate document editors functions and the ways to connect **Document Server** to your own application. **DO NOT USE** these examples on your own server without **PROPER CODE MODIFICATIONS**!
-
-The result should look like the [demo preview](https://api.onlyoffice.com/editors/demopreview#DemoPreview) on our web site.
-
-If you have any further questions, please contact us at [integration@onlyoffice.com](mailto:integration@onlyoffice.com).

web/documentserver-example/csharp-mvc/App_Start/BundleConfig.cs

@@ -43,7 +43,8 @@ namespace OnlineEditorsExampleMVC
             // create a style bundle
             bundles.Add(new StyleBundle("~/Content/css").Include(
                 "~/Content/stylesheet.css",
-                "~/Content/jquery-ui.css"
+                "~/Content/jquery-ui.css",
+                "~/Content/media.css"
                             ));
 
             // create an editor style bundle

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x:hidden;
 }
 
 form {
@@ -64,6 +65,7 @@ header img {
 }
 
 .center {
+    position:relative;
     margin: 0 auto 0;
     width: 1152px;
 }
@@ -354,19 +356,29 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+}
+footer > .center {
+    width: 100%;
 }
-
 footer table {
+    width:100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100%;
     height: 64px;
 }
 
 footer table td {
+    position:relative;
     padding-left: 32px;
 }
 
@@ -381,9 +393,15 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color:#aaaaaa;
+    width:max-content;
+    position:relative;
+    margin-left:auto;
+    margin-right:14%;
 }
 
 .help-block {
@@ -681,4 +699,62 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+    .menu span {
+        content: "";
+        width: 26px;
+        height: 3px;
+        background: rgb(194, 194, 194);
+    }
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+    .tableRow td:first-child {
+        display: flex;
+        flex-grow: 1;
+        max-width: 25%;
+    }
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+

web/documentserver-example/csharp-mvc/Helpers/DocManagerHelper.cs

@@ -139,7 +139,7 @@ namespace OnlineEditorsExampleMVC.Helpers
         // get the file version by the history path
         public static int GetFileVersion(string historyPath)
         {
-            if (!Directory.Exists(historyPath)) return 0;  // if the history path doesn't exist, then the file version is 0
+            if (!Directory.Exists(historyPath)) return 1;  // if the history path doesn't exist, then the file version is 1
             return Directory.EnumerateDirectories(historyPath).Count() + 1;  // take only directories from the history folder and count them
         }
 

web/documentserver-example/csharp-mvc/Models/FileModel.cs

@@ -97,7 +97,7 @@ namespace OnlineEditorsExampleMVC.Models
             {
                 new Dictionary<string, string>()
                 {
-                    { "image", templatesImageUrl },
+                    { "image", "" },
                     { "title", "Blank" },
                     { "url", createUrl },
                 },

web/documentserver-example/csharp-mvc/README.md

@@ -13,33 +13,43 @@ See the detailed guide to learn how to install Document Server [for Windows](htt
 ## Step 2. Download the .Net (C# MVC) code for the editors integration
 
 Download the [.Net (C# MVC) example](https://api.onlyoffice.com/editors/demopreview) from our site.
-You need to connnect the editors to your web site. Specify path to the editors installation in the *settings.config* file:
+You need to connnect the editors to your website. Specify path to the editors installation in the *settings.config* file:
 ```
 <add key="files.docservice.url.site" value="https://documentserver/" />
 ```
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *DocEditor.aspx* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *DocEditor.aspx* file.
 
 ## Step 3. Install the prerequisites
 Сheck if your system meets the system requirements:
-* Microsoft .NET Framework: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
-* Internet Information Services: version 7 or later.
+* **Microsoft .NET Framework**: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
+* **Internet Information Services**: version 7 or later.
 
 ## Step 4. Run your website with the editors
-1. Run the Internet Information Service (IIS) manager
-	Start -> ControlPanel -> System and Security -> Administrative Tools -> Internet Information Services (IIS) Manager
-2. Add your website in the IIS Manager
+1. Run the Internet Information Service (IIS) Manager:
+
+	**Start** -> **Control Panel** -> **System and Security** -> **Administrative Tools** -> **Internet Information Services (IIS) Manager**
+2. Add your website in the IIS Manager.
+	
 	On the **Connections** panel right-click the **Sites** node in the tree, then click **Add Website**.
+
 	![add](screenshots/add.png)
 3. In the **Add Website** dialog box specify the name of the folder with the .Net (C# MVC) project in the **Site name** box.
+	
 	Specify the path to the folder with your project in the **Physical Path** box.
+	
 	Specify the unique value used only for this website in the **Port** box.
+	
 	![sitename](screenshots/sitename.png)
-4. Check for the .NET platform version specified in IIS manager for you web site. Choose **v4.0.** version.
-	Click the **Application Pool** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+4. Check for the .NET platform version specified in IIS Manager for you website. Choose **v4.0.** version.
+	
+	**Application Pools** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+	
 	![platform](screenshots/platform.png)
-5. Browse your website with the IIS manager:
+5. Browse your website with the IIS Manager:
+
 	Right-click the site -> **Manage Website** -> **Browse**
+	
 	![browse](screenshots/browse.png)
 
 ## Step 5. Check accessibility

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

@@ -182,10 +182,10 @@
                                                             var canEdir = DocManagerHelper.EditedExts.Contains(Path.GetExtension(storedFile.Name).ToLower());
                                                         %>
 
-                                                            <tr class="tableRow" title="<%= storedFile.Name %>">
+                                                            <tr class="tableRow" title="<%= storedFile.Name %> [<%= DocManagerHelper.GetFileVersion(storedFile.Name, HttpContext.Current.Request.UserHostAddress) %>]">
                                                                 <td class="contentCells">
                                                                     <a class="stored-edit <%= docType %>" href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name }) %>" target="_blank">
-                                                                        <span title="<%= storedFile.Name %>"><%= storedFile.Name %></span>
+                                                                        <span><%= storedFile.Name %></span>
                                                                     </a>
                                                                 </td>
                                                                 <% if (canEdir) { %>
@@ -199,40 +199,52 @@
                                                                             <img src="content/images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices"/>
                                                                         </a>
                                                                     </td>
-                                                                    <td class="contentCells contentCells-icon">
-                                                                        <% if (docType == "word") { %>
-                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "review" }) %>" target="_blank">
-                                                                                <img src="content/images/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
-                                                                            </a>
-                                                                        <% } else if (docType == "cell") { %>
-                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "filter" }) %>" target="_blank">
-                                                                                <img src="content/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
-                                                                            </a>
-                                                                        <% } %>
-                                                                    </td>
                                                                     <td class="contentCells contentCells-icon">
                                                                         <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "comment" }) %>" target="_blank">
                                                                             <img src="content/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
                                                                         </a>
                                                                     </td>
-                                                                    <td class="contentCells contentCells-icon">
-                                                                        <% if (docType == "word") { %>
+                                                                    <% if (docType == "word") { %>
+                                                                        <td class="contentCells contentCells-icon">
+                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "review" }) %>" target="_blank">
+                                                                                <img src="content/images/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
+                                                                            </a>
+                                                                        </td>
+                                                                    <% } else if (docType == "cell") { %>
+                                                                        <td class="contentCells contentCells-icon">
+                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "filter" }) %>" target="_blank">
+                                                                                <img src="content/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
+                                                                            </a>
+                                                                         </td>
+                                                                    <% } %>
+                                                                    <% if (docType != "word" && docType != "cell") { %>
+                                                                        <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                                    <% } %>
+                                                                    <% if (docType == "word") { %>
+                                                                        <td class="contentCells contentCells-icon">
                                                                             <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "fillForms" }) %>" target="_blank">
                                                                                 <img src="content/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                                             </a>
-                                                                        <% } %>
-                                                                    </td>
-                                                                    <td class="contentCells contentCells-shift contentCells-icon">
-                                                                        <% if (docType == "word") { %>
+                                                                        </td>
+                                                                     <% } else { %>
+                                                                        <td class="contentCells contentCells-icon"></td>
+                                                                    <% } %>
+                                                                    <% if (docType == "word"){ %>
+                                                                        <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                                             <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "blockcontent" }) %>" target="_blank">
                                                                                 <img src="content/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
                                                                             </a>
-                                                                        <% } %>
-                                                                    </td>
+                                                                        </td>
+                                                                    <% } else { %>
+                                                                        <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                                    <% } %>
+                                                                    <% if (docType != "word" && docType != "cell") { %>
+                                                                        <td class="contentCells contentCells-icon "></td>
+                                                                    <% } %>
                                                                 <% } else { %>
-                                                                    <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                                    <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                                 <% } %>
-                                                                <td class="contentCells contentCells-icon">
+                                                                <td class="contentCells contentCells-icon firstContentCellViewers">
                                                                     <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "view" }) %>" target="_blank">
                                                                         <img src="content/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                                     </a>
@@ -247,7 +259,7 @@
                                                                         <img src="content/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                                     </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-icon contentCells-shift">
+                                                                <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                                     <a href="webeditor.ashx?type=download&fileName=<%= HttpUtility.UrlEncode(storedFile.Name) %>">
                                                                         <img class="icon-download" src="content/images/download.svg" alt="Download" title="Download" />
                                                                     </a>
@@ -337,7 +349,7 @@
     </footer>
 
     <%: Scripts.Render("~/bundles/jquery", "~/bundles/scripts") %>
-    
+
     <script language="javascript" type="text/javascript">
         var ConverExtList = '<%= string.Join(",", DocManagerHelper.ConvertExts.ToArray()) %>';
         var EditedExtList = '<%= string.Join(",", DocManagerHelper.EditedExts.ToArray()) %>';

web/documentserver-example/csharp-mvc/WebEditor.ashx.cs

@@ -137,9 +137,9 @@ namespace OnlineEditorsExampleMVC
 
                 var fileName = Path.GetFileName(body["filename"].ToString());
                 var filePass = body["filePass"] != null ? body["filePass"].ToString() : null;
-                var fileUri = DocManagerHelper.GetFileUri(fileName, true);
+                var fileUri = DocManagerHelper.GetDownloadUrl(fileName);
 
-                var extension = (Path.GetExtension(fileUri).ToLower() ?? "").Trim('.');
+                var extension = (Path.GetExtension(fileName).ToLower() ?? "").Trim('.');
                 var internalExtension = DocManagerHelper.GetInternalExtension(FileUtility.GetFileType(fileName)).Trim('.');
 
                 // check if the file with such an extension can be converted

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -64,6 +65,7 @@ header img {
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
@@ -120,6 +122,7 @@ header img {
 label .checkbox {
     margin: 0 5px 3px 0;
     vertical-align: middle;
+    cursor: pointer;
 }
 
 .try-editor-list {
@@ -353,20 +356,32 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
 }
 
-footer table {
-    border-spacing: 0;
+    footer > .center {
+        width: 100%;
+    }
+
+    footer table {
+        width: 100%;
+        border-spacing: 0;
 }
 
 footer table tr {
-    height: 64px;
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            align-content: center;
+            flex-wrap: wrap;
+            width: 100%;
+            height: 64px;
 }
 
 footer table td {
-    padding-left: 32px;
+            position: relative;
+            padding-left: 32px;
 }
 
 footer a,
@@ -381,8 +396,16 @@ footer a:hover {
     text-decoration: none;
 }
 
+    footer table tr td:first-child {
+        margin-left: 14%;
+    }
+
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
 }
 
 .help-block {
@@ -501,12 +524,12 @@ footer a:hover {
 
 .tableHeader tr {
     background: transparent;
-    cursor: default;
-    height: 40px;
-    -khtml-user-select: none;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
+        cursor: default;
+        height: 40px;
+        -khtml-user-select: none;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
 }
 
 .tableHeaderCell {
@@ -610,10 +633,10 @@ footer a:hover {
     border: 1px solid #D0D5DA;
     box-sizing: border-box;
     border-radius: 3px;
-    cursor: pointer;
-    margin-top: 5px;
-    padding: 2px 5px;
-    width: 100%;
+            cursor: pointer;
+            margin-top: 5px;
+            padding: 2px 5px;
+            width: 100%;
 }
 
 .icon-delete {
@@ -680,4 +703,62 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+    .menu span {
+        content: "";
+        width: 26px;
+        height: 3px;
+        background: rgb(194, 194, 194);
+    }
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+    .tableRow td:first-child {
+        display: flex;
+        flex-grow: 1;
+        max-width: 25%;
+    }
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}

web/documentserver-example/csharp/Default.aspx

@@ -34,6 +34,7 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
 
     <link rel="stylesheet" type="text/css" href="app_themes/stylesheet.css" />
+    <link rel="stylesheet" type="text/css" href="app_themes/media.css" />
 
     <link rel="stylesheet" type="text/css" href="app_themes/jquery-ui.css" />
 
@@ -182,10 +183,10 @@
                                                         var canEdit = EditedExts.Contains(Path.GetExtension(storedFile.Name).ToLower());
                                                         %>
 
-                                                        <tr class="tableRow" title="<%= storedFile.Name %>">
+                                                        <tr class="tableRow" title="<%= storedFile.Name %> [<%= GetFileVersion(storedFile.Name, HttpContext.Current.Request.UserHostAddress) %>]">
                                                             <td class="contentCells">
                                                                 <a class="stored-edit <%= docType %>" href="<%= editUrl %>" target="_blank">
-                                                                    <span title="<%= storedFile.Name %>"><%= storedFile.Name %></span>
+                                                                    <span><%= storedFile.Name %></span>
                                                                 </a>
                                                             </td>
                                                             <% if (canEdit) { %>
@@ -200,39 +201,51 @@
                                                                     </a>
                                                                 </td>
                                                                 <td class="contentCells contentCells-icon">
-                                                                    <% if (docType == "word") { %>
+                                                                    <a href="<%= editUrl + "&editorsType=desktop&editorsMode=comment" %>" target="_blank">
+                                                                         <img src="app_themes/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
+                                                                    </a>
+                                                                </td>
+                                                                <% if (docType == "word") { %>
+                                                                    <td class="contentCells contentCells-icon">
                                                                         <a href="<%= editUrl + "&editorsType=desktop&editorsMode=review" %>" target="_blank">
                                                                             <img src="app_themes/images/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
                                                                         </a>
-                                                                    <% } else if (docType == "cell") { %>
+                                                                    </td>
+                                                                <% } else if (docType == "cell") { %>
+                                                                    <td class="contentCells contentCells-icon">
                                                                         <a href="<%= editUrl + "&editorsType=desktop&editorsMode=filter" %>" target="_blank">
                                                                             <img src="app_themes/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
                                                                         </a>
-                                                                    <% } %>
-                                                                </td>
-                                                                <td class="contentCells contentCells-icon">
-                                                                    <a href="<%= editUrl + "&editorsType=desktop&editorsMode=comment" %>" target="_blank">
-                                                                        <img src="app_themes/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
+                                                                    </td>
+                                                                <% } %>
+                                                                <%if (docType != "word" && docType != "cell") { %>
+                                                                    <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                                <% } %>
+                                                                <% if (docType == "word") { %>
+                                                                    <td class="contentCells contentCells-icon">
+                                                                    <a href="<%= editUrl + "&editorsType=desktop&editorsMode=fillForms" %>" target="_blank">
+                                                                        <img src="app_themes/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                                     </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-icon">
-                                                                    <% if (docType == "word") { %>
-                                                                        <a href="<%= editUrl + "&editorsType=desktop&editorsMode=fillForms" %>" target="_blank">
-                                                                            <img src="app_themes/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
-                                                                        </a>
-                                                                    <% } %>
-                                                                </td>
-                                                                <td class="contentCells contentCells-shift contentCells-icon">
-                                                                    <% if (docType == "word") { %>
+                                                                <% } else { %>
+                                                                    <td class="contentCells contentCells-icon"></td>
+                                                                <% } %>
+                                                                <% if (docType == "word") { %>
+                                                                    <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                                         <a href="<%= editUrl + "&editorsType=desktop&editorsMode=blockcontent" %>" target="_blank">
                                                                             <img src="app_themes/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
                                                                         </a>
-                                                                    <% } %>
-                                                                </td>
+                                                                    </td>
+                                                                <% } else{%>
+                                                                    <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                                <%} %>
+                                                                <%if (docType != "word" && docType != "cell"){%>
+                                                                    <td class="contentCells contentCells-icon "></td>
+                                                                <% } %>
                                                             <% } else { %>
-                                                                <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                                <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                             <% } %>
-                                                            <td class="contentCells contentCells-icon">
+                                                            <td class="contentCells contentCells-icon firstContentCellViewers">
                                                                 <a href="<%= editUrl + "&editorsType=desktop&editorsMode=view" %>" target="_blank">
                                                                     <img src="app_themes/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                                 </a>
@@ -247,7 +260,7 @@
                                                                     <img src="app_themes/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                                 </a>
                                                             </td>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
+                                                            <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                                 <a href="webeditor.ashx?type=download&fileName=<%= HttpUtility.UrlEncode(storedFile.Name) %>">
                                                                     <img class="icon-download" src="app_themes/images/download.svg" alt="Download" title="Download" />
                                                                 </a>

web/documentserver-example/csharp/Default.aspx.cs

@@ -202,7 +202,7 @@ namespace OnlineEditorsExample
         // get the last file version by its history directory
         public static int GetFileVersion(string historyPath)
         {
-            if (!Directory.Exists(historyPath)) return 0;
+            if (!Directory.Exists(historyPath)) return 1;
             return Directory.EnumerateDirectories(historyPath).Count() + 1;  // run through all the file versions and count them
         }
 
@@ -384,7 +384,8 @@ namespace OnlineEditorsExample
                 fileUrl.Path = HttpRuntime.AppDomainAppVirtualPath
                     + (HttpRuntime.AppDomainAppVirtualPath.EndsWith("/") ? "" : "/")
                     + "webeditor.ashx";
-                fileUrl.Query = "type=download&fileName=" + HttpUtility.UrlEncode(_fileName);
+                fileUrl.Query = "type=download&fileName=" + HttpUtility.UrlEncode(_fileName)
+                + "&userAddress=" + HttpUtility.UrlEncode(HttpContext.Current.Request.UserHostAddress);
 
                 // get the url to the converted file
                 string newFileUri;

web/documentserver-example/csharp/DocEditor.aspx.cs

@@ -167,7 +167,7 @@ namespace OnlineEditorsExample
             {
                 new Dictionary<string, string>()
                 {
-                    { "image", templatesImageUrl },
+                    { "image", "" },
                     { "title", "Blank" },
                     { "url", createUrl }
                 },

web/documentserver-example/csharp/README.md

@@ -20,29 +20,40 @@ Connect the editors to your website by specifying the path to the editors instal
 ```
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *DocEditor.aspx* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *DocEditor.aspx* file.
 
 ## Step 3. Install the prerequisites
 
 Check that your system meets the requirements:
-* Microsoft .NET Framework: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
-* Internet Information Services: version 7 or later.
+* **Microsoft .NET Framework**: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
+* **Internet Information Services**: version 7 or later.
 
 ## Step 4. Run your website with the editors
-1. Run the Internet Information Service (IIS) manager
-	Start -> ControlPanel -> System and Security -> Administrative Tools -> Internet Information Services (IIS) Manager
-2. Add your website in the IIS Manager
+1. Run the Internet Information Service (IIS) Manager:
+
+	**Start** -> **Control Panel** -> **System and Security** -> **Administrative Tools** -> **Internet Information Services (IIS) Manager**
+
+2. Add your website in the IIS Manager.
+	
 	On the **Connections** panel right-click the **Sites** node in the tree, then click **Add Website**.
+
 	![add](screenshots/add.png)
 3. In the **Add Website** dialog box specify the name of the folder with the .Net (C#) project in the **Site name** box.
+	
 	Specify the path to the folder with your project in the **Physical Path** box.
+	
 	Specify the unique value used only for this website in the **Port** box.
+
 	![sitename](screenshots/sitename.png)
-4. Check for the .NET platform version specified in IIS manager for you website. Choose **v4.0.** version.
-	Click the **Application Pool** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+4. Check for the .NET platform version specified in IIS Manager for you website. Choose **v4.0.** version.
+	
+	**Application Pools** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+
 	![platform](screenshots/platform.png)
-5. Browse your website with the IIS manager:
+5. Browse your website with the IIS Manager:
+
 	Right-click the site -> **Manage Website** -> **Browse**
+	
 	![browse](screenshots/browse.png)
 
 ## Step 5. Check accessibility

web/documentserver-example/java/README.md

@@ -10,7 +10,7 @@ It is aimed at testing the editors. Please, do not use it for production without
 
 Download and install ONLYOFFICE Docs (packaged as Document Server). 
 
-See the detailed guide to learn how to install Document Server [for Windows](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx). 
+See the detailed guide to learn how to [install Document Server for Windows](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx). 
 
 ### Step 2. Download the Java code for the editors integration
 
@@ -24,14 +24,14 @@ files.docservice.url.site=https://documentserver/
 
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *\src\main\webapp\editor.jsp* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *\src\main\webapp\editor.jsp* file.
 
 ### Step 3. Install the prerequisites
 
 To run the Java example code, install the Java version appropriate for your OS and web server **Apache Tomcat**:
 
-* Java (download from [the Oracle official website](https://www.java.com/en/download/manual.jsp));
-* Apache Tomcat (download from [the official website](http://tomcat.apache.org/)).
+* **Java** (download from [the Oracle official website](https://www.java.com/en/download/manual.jsp));
+* **Apache Tomcat** (download from [the official website](http://tomcat.apache.org/)).
 
 ### Step 4. Run Apache Tomcat
 
@@ -43,9 +43,9 @@ To run the Java example code, install the Java version appropriate for your OS a
 	C:\Program Files\Java\jdk1.8.0_65
 	```
 
-	In **Windows 7** right click **My Computer** and select **Properties**, then click **Advanced**.
+	In **Windows 7**, right click **My Computer** and select **Properties**, then click **Advanced**.
 
-	In **Windows 8** go to **Control Panel** -> **System** -> **Advanced System Settings**.
+	In **Windows 8**, go to **Control Panel** and select **System**, then click **Advanced System Settings**.
 
 	Click the **Environment Variables** button.
 
@@ -53,7 +53,7 @@ To run the Java example code, install the Java version appropriate for your OS a
 
 	In the **Variable Name** field, enter **JAVA_HOME** if you installed the **JDK** (Java Development Kit) or **JRE_HOME** if you installed the **JRE** (Java Runtime Environment).
 
-	In the **Variable Value** field, enter your **JDK** or **JRE** installation path, for example C:\Program Files\Java\jdk1.8.0_65.
+	In the **Variable Value** field, enter your **JDK** or **JRE** installation path, for example *C:\Program Files\Java\jdk1.8.0_65*.
 
 	![make-var](screenshots/make-var.png)
 
@@ -94,6 +94,7 @@ To run the Java example code, install the Java version appropriate for your OS a
 	![manager](screenshots/manager.jpg)
 
 2. Tomcat Web Application Manager will request the **username** and the **password:**
+
 	![author](screenshots/author.jpg)
    
 
@@ -106,11 +107,14 @@ To run the Java example code, install the Java version appropriate for your OS a
 	</tomcat-users>
 	```
 
-3. Upload the Java project in Tomcat Web Application Manager. For that click **Choose File** in the **WAR file to deploy** section and find the **.war** file in the Java project folder, then click **Deploy**.
+3. Upload the Java project in Tomcat Web Application Manager. For that click **Choose File** in the **WAR file to deploy** section and find the *.war* file in the Java project folder, then click **Deploy**.
+
 	![upload-app](screenshots/upload-app.jpg)
+
 	![war-file](screenshots/war-file.jpg) 
 
 4. You will see the project in the **Application List**:
+	
 	![manager-app](screenshots/manager-app.jpg) 
    
 5. Click the link with the application name to run it.
@@ -127,7 +131,7 @@ Make sure that the Document Server has access to the server with the example ins
 
 Download and install ONLYOFFICE Docs (packaged as Document Server). 
 
-See the detailed guide to learn how to install Document Server [for Linux](https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx). 
+See the detailed guide to learn how to [install Document Server for Linux](https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx). 
 
 ### Step 2. Install the prerequisites and run the website with the editors
 
@@ -159,13 +163,13 @@ See the detailed guide to learn how to install Document Server [for Linux](https
     nano src/main/resources/settings.properties
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     files.docservice.url.site=https://documentserver/
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 5. Install **Maven**:
 
@@ -191,22 +195,22 @@ See the detailed guide to learn how to install Document Server [for Linux](https
     sudo nano /var/lib/tomcat8/conf/tomcat-users.xml
     ```
 
-   Insert the line:
+   Insert the lines:
 
     ```
     <role rolename="manager-gui"/>
     <user username="USERNAME" password="PASSWORD" roles="manager-gui"/>
     ```
 
-	Where the **USERNAME** and **PASSWORD** are your own credentials data.
+	where the **USERNAME** and **PASSWORD** are your own credentials data.
 
-	Restart tomcat:
+	Restart Tomcat:
 
 	```
 	systemctl restart tomcat8
 	```
 
-9. Open the tomcat administration page in browser with the admin user credentions:
+9. Open the Tomcat administration page in browser with the admin user credentions:
 
     ```
     http://localhost:8080/manager/html
@@ -234,15 +238,15 @@ Make sure that the Document Server has access to the server with the example ins
 	nano src/main/resources/settings.properties
 	```
 	
-2. Edit the following lines:
+2. Edit the following line:
 
 	```
 	files.docservice.url.site=https://documentserver/
 	```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-3. Run the next command in the java example directory:
+3. Run the next command in the Java example directory:
 
 	```
 	docker-compose up

web/documentserver-example/java/src/main/java/controllers/IndexServlet.java

@@ -179,7 +179,7 @@ public class IndexServlet extends HttpServlet
 
             String fileName = FileUtility.GetFileName((String) body.get("filename"));
             String filePass = body.get("filePass") != null ? (String) body.get("filePass") : null;
-            String fileUri = DocumentManager.GetFileUri(fileName, true);
+            String fileUri = DocumentManager.GetDownloadUrl(fileName);
             String fileExt = FileUtility.GetFileExtension(fileName);
             FileType fileType = FileUtility.GetFileType(fileName);
             String internalFileExt = DocumentManager.GetInternalExtension(fileType);

web/documentserver-example/java/src/main/java/entities/FileModel.java

@@ -67,7 +67,7 @@ public class FileModel
 
         // add templates for the "Create New" from menu option
         Map<String, String> templateForBlankDocument = new HashMap<>();
-        templateForBlankDocument.put("image", templatesImageUrl);
+        templateForBlankDocument.put("image", "");
         templateForBlankDocument.put("title", "Blank");
         templateForBlankDocument.put("url", createUrl);
         templates.add(templateForBlankDocument);

web/documentserver-example/java/src/main/java/helpers/DocumentManager.java

@@ -199,7 +199,7 @@ public class DocumentManager
     {
         File dir = new File(historyPath);
 
-        if (!dir.exists()) return 0;  // if the history path doesn't exist, then the file version is 0
+        if (!dir.exists()) return 1;  // if the history path doesn't exist, then the file version is 1
 
         File[] dirs = dir.listFiles(new FileFilter() {  // take only directories from the history folder
             @Override

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -64,6 +65,7 @@ header img {
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
@@ -354,19 +356,31 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+}
+
+footer > .center {
+    width: 100%;
 }
 
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100%;
     height: 64px;
 }
 
 footer table td {
+    position: relative;
     padding-left: 32px;
 }
 
@@ -382,8 +396,15 @@ footer a:hover {
     text-decoration: none;
 }
 
+footer table tr td:first-child {
+    margin-left: 14%;
+}
+
 .copy {
-    padding-left: 510px;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
 }
 
 .help-block {
@@ -622,7 +643,11 @@ footer a:hover {
 }
 
 .left-panel {
-    width: 256px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    max-width: 240px;
+    width: 100%;
     background: #F5F5F5;
 }
 
@@ -681,4 +706,62 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+.menu span {
+    content: "";
+    width: 26px;
+    height: 3px;
+    background: rgb(194, 194, 194);
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}

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

@@ -39,6 +39,11 @@
     <body>
         <header>
             <div class="center">
+                <div class="menu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
                 <a href="">
                     <img src ="css/img/logo.svg" alt="ONLYOFFICE" />
                 </a>
@@ -172,11 +177,12 @@
                                                     <% for (Integer i = 0; i < files.length; i++) {
                                                         String docType = FileUtility.GetFileType(files[i].getName()).toString().toLowerCase();
                                                         Boolean canEdit = DocumentManager.GetEditedExts().contains(FileUtility.GetFileExtension(files[i].getName()));
+                                                        String version=" ["+DocumentManager.GetFileVersion(DocumentManager.HistoryDir(DocumentManager.StoragePath(files[i].getName(), null)))+"]";
                                                     %>
-                                                        <tr class="tableRow" title="<%= files[i].getName() %>">
+                                                        <tr class="tableRow" title="<%= files[i].getName() %> [<%= version %>]">
                                                             <td class="contentCells">
                                                                 <a class="stored-edit <%= docType %>" href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>" target="_blank">
-                                                                    <span title="<%= files[i].getName() %>"><%= files[i].getName() %></span>
+                                                                    <span><%= files[i].getName() %></span>
                                                                 </a>
                                                             </td>
                                                             <% if (canEdit) { %>
@@ -190,40 +196,52 @@
                                                                         <img src="css/img/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices"/>
                                                                     </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-icon">
-                                                                    <% if (docType.equals("word")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=review" target="_blank">
-                                                                            <img src="css/img/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
-                                                                        </a>
-                                                                    <% } else if (docType.equals("cell")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=filter" target="_blank">
-                                                                            <img src="css/img/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
-                                                                        </a>
-                                                                    <% } %>
-                                                                </td>
                                                                 <td class="contentCells contentCells-icon">
                                                                     <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=comment" target="_blank">
                                                                         <img src="css/img/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
                                                                     </a>
                                                                 </td>
+                                                                <% if (docType.equals("word")) { %>
                                                                 <td class="contentCells contentCells-icon">
-                                                                    <% if (docType.equals("word")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=fillForms" target="_blank">
-                                                                            <img src="css/img/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
-                                                                        </a>
-                                                                    <% } %>
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=review" target="_blank">
+                                                                        <img src="css/img/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
+                                                                    </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-shift contentCells-icon">
-                                                                    <% if (docType.equals("word")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=blockcontent" target="_blank">
-                                                                            <img src="css/img/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
-                                                                        </a>
-                                                                    <% } %>
+                                                                <% } else if (docType.equals("cell")) { %>
+                                                                <td class="contentCells contentCells-icon">
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=filter" target="_blank">
+                                                                        <img src="css/img/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter"/>
+                                                                    </a>
                                                                 </td>
+                                                                <% } %>
+                                                                <% if (!docType.equals("cell") && !docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                                <% } %>
+                                                                <% if (docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-icon">
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=fillForms" target="_blank">
+                                                                        <img src="css/img/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
+                                                                    </a>
+                                                                </td>
+                                                                <% } else { %>
+                                                                <td class="contentCells contentCells-icon "></td>
+                                                                <% } %>
+                                                                <% if (docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=blockcontent" target="_blank">
+                                                                        <img src="css/img/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
+                                                                    </a>
+                                                                </td>
+                                                                <% } else { %>
+                                                                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                                <% } %>
+                                                                <% if (!docType.equals("cell") && !docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-icon "></td>
+                                                                <% } %>
                                                             <% } else { %>
-                                                                <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                            <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                             <% } %>
-                                                            <td class="contentCells contentCells-icon">
+                                                            <td class="contentCells contentCells-icon firstContentCellViewers">
                                                                 <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=view" target="_blank">
                                                                     <img src="css/img/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                                 </a>
@@ -238,7 +256,7 @@
                                                                     <img src="css/img/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                                 </a>
                                                             </td>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
+                                                            <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                                 <a href="IndexServlet?type=download&fileName=<%=URLEncoder.encode(files[i].getName(), "UTF-8")%>">
                                                                     <img class="icon-download" src="css/img/download.svg" alt="Download" title="Download" />
                                                                 </a>

web/documentserver-example/nodejs/README.md

@@ -24,15 +24,15 @@ You need to connect the editors to your website. Specify the path to the editors
 
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *\views\editor.ejs* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *\views\editor.ejs* file.
 
 ### Step 3. Install Node.js environment
 
-Install the **node.js** environment which is going to be used to run the Node.js project. Please follow the link at the official website: https://nodejs.org/en/download/ choosing the correct version for your Windows OS (32-bit or 64-bit).
+Install the **node.js** environment which is going to be used to run the Node.js project. Please follow the link at the [official website](https://nodejs.org/en/download/) choosing the correct version for your Windows OS (32-bit or 64-bit).
 
 ### Step 4. Run the Node.js code
 
-We will run the code in Node.js runtime environment and will interact with it using the command line interface (cmd).
+We will run the code in Node.js runtime environment and will interact with it using the **command line interface (cmd)**.
 
 1. Launch the **Command Prompt** and switch to the folder with the Node.js project code, for example:
 
@@ -40,7 +40,7 @@ We will run the code in Node.js runtime environment and will interact with it us
     cd /d "C:\Node.js Example"
     ```
 
-2. Node.js comes with a package manager, **node package manager (npm)**, which is automatically installed along with Node.js. To run the Node.js code, install the project modules using the following npm command:
+2. Node.js comes with a package manager, **node package manager (npm)**, which is automatically installed along with Node.js. To run the Node.js code, install the project modules using the following *npm* command:
 
     ```
     npm install
@@ -114,13 +114,13 @@ See the detailed guide to learn how to [install Document Server for Linux](https
     nano config/default.json
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     "siteUrl": "https://documentserver/"
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 6. Run the project with Node.js:
 

web/documentserver-example/nodejs/app.js

@@ -644,7 +644,7 @@ app.get("/editor", function (req, res) {  // define a handler for editing docume
         var createUrl = docManager.getCreateUrl(fileUtility.getFileType(fileName), userid, type, lang);
         var templates = [
             {
-                "image": templatesImageUrl,
+                "image": "",
                 "title": "Blank",
                 "url": createUrl
             },

web/documentserver-example/nodejs/helpers/docManager.js

@@ -270,7 +270,7 @@ docManager.getStoredFiles = function () {
 
         if (!stats.isDirectory()) {  // if the element isn't a directory
             let historyPath = docManager.historyPath(storedFiles[i], userAddress);  // get the path to the file history
-            let version = 1;
+            let version = 0;
             if (historyPath != "") {  // if the history path exists
                 version = docManager.countVersion(historyPath);  // get the last file version
             }
@@ -281,7 +281,7 @@ docManager.getStoredFiles = function () {
                 name: storedFiles[i],
                 documentType: fileUtility.getFileType(storedFiles[i]),
                 canEdit: configServer.get("editedDocs").indexOf(fileUtility.getFileExtension(storedFiles[i])) != -1,
-                version: version
+                version: version+1
             };
 
             if (!result.length) {  // if the result array is empty

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

@@ -0,0 +1,83 @@
+.tableRow td:first-child{
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+.downloadContentCells{
+    margin-left: auto;
+}
+.tableRow td:last-child:after{
+    top: 33px;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 2%;
+    position: absolute;
+    width: 100%;
+}
+
+@media (min-width: 1280px) {
+    .tableHeaderCellRemove{
+        padding-right:24px ;
+        text-align: center;
+    }
+    .tableHeaderCellDownload{
+        padding-right: 11px;
+    }
+    .tableHeaderCellViewers{
+        width: 24%;
+        text-align: center;
+    }
+    .tableHeaderCellEditors{
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 980px){
+    .tableHeaderCellRemove{
+        padding-left: 7px;
+    }
+}
+@media (max-width: 980px) and (min-width: 890px){
+    .tableHeaderCellRemove{
+        padding-left: 16px;
+    }
+    .tableHeaderCellDownload{
+        width: 21%;
+        padding-right: 0;
+    }
+    .tableHeaderCellViewers{
+        width: 23%;
+    }
+}
+@media (max-width: 890px) and (min-width: 769px){
+    .tableRow td:first-child{
+        max-width: 50%;
+    }
+    .contentCells-shift{
+        padding-right: 26px;
+    }
+}
+@media (max-width: 769px) and (min-width: 593px){
+    .tableRow td:first-child{
+        max-width: 40%;
+    }
+}
+@media (max-width: 769px) {
+    .tableRow td{
+        top: 32px;
+        border: none;
+    }
+    .tableRow td:last-child:after{
+        width: 90%;
+    }
+}
+@media (max-width: 593px){
+    .tableRow td:first-child{
+        width: 100%;
+    }
+    .tableRow td:last-child:after{
+        top: 67px;
+        height: 1%;
+    }
+}

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin: auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x:hidden ;
 }
 
 form {
@@ -63,11 +64,13 @@ header img {
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
 
 .main{
+    display: table;
     height: calc(100% - 136px);
     min-height: 536px;
 }
@@ -360,19 +363,30 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
-}
 
+    width: 100%;
+}
+footer > .center{
+    width: 100%;
+}
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100%;
     height: 64px;
 }
 
 footer table td {
+    position: relative;
     padding-left: 32px;
 }
 
@@ -387,9 +401,15 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
 }
 
 .help-block {
@@ -696,4 +716,66 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+.menu span {
+    content: "";
+    width: 26px;
+    height: 3px;
+    background: rgb(194, 194, 194);
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+.tableHeaderCellDownload{
+    padding-right: 28px;
+}
+

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

@@ -161,7 +161,7 @@
             "onRequestMailMergeRecipients": onRequestMailMergeRecipients,
         };
 
-        var config = {<%- include("config") %>, events};
+        var config = {<%- include("config") %>, events: events};
 
         var connectEditor = function () {
             addMentions();

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

@@ -27,10 +27,16 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
     <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/media.css">
 </head>
 <body>
     <header>
         <div class="center">
+            <div class="menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
             <a href="">
                 <img src ="images/logo.svg" alt="ONLYOFFICE" />
             </a>
@@ -169,47 +175,59 @@
                                                 <tr class="tableRow" title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]">
                                                     <td class="contentCells">
                                                         <a class="stored-edit <%= storedFiles[i].documentType %>" href="editor?fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <span title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]"><%= storedFiles[i].name %></span>
+                                                            <span><%= storedFiles[i].name %></span>
                                                         </a>
                                                     </td>
                                                     <% if (storedFiles[i].canEdit) { %>
-                                                    <td class="contentCells contentCells-icon">
-                                                        <a href="editor?type=desktop&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens" /></a>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
-                                                        <a href="editor?type=mobile&mode=edit&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" /></a>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
+                                                        <td class="contentCells contentCells-icon">
+                                                            <a href="editor?type=desktop&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                <img src="images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens" /></a>
+                                                        </td>
+                                                        <td class="contentCells contentCells-icon">
+                                                            <a href="editor?type=mobile&mode=edit&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                <img src="images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" /></a>
+                                                        </td>
+                                                        <td class="contentCells contentCells-icon">
+                                                            <a href="editor?type=desktop&mode=comment&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                <img src="images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" /></a>
+                                                        </td>
                                                         <% if (storedFiles[i].documentType == "word") { %>
-                                                        <a href="editor?type=desktop&mode=review&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>
+                                                            <td class="contentCells contentCells-icon">
+                                                                <a href="editor?type=desktop&mode=review&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>
+                                                            </td>
                                                         <% } else if (storedFiles[i].documentType == "cell") { %>
-                                                        <a href="editor?type=desktop&mode=filter&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>
+                                                            <td class="contentCells contentCells-icon">
+                                                                <a href="editor?type=desktop&mode=filter&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>
+                                                            </td>
+                                                        <% } %>
+                                                        <% if (storedFiles[i].documentType !== "word" && storedFiles[i].documentType !== "cell") {%>
+                                                            <td class="contentCells contentCells-icon contentCellsEmpty"></td>
                                                         <% } %>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
-                                                        <a href="editor?type=desktop&mode=comment&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" /></a>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
                                                         <% if (storedFiles[i].documentType == "word") { %>
-                                                        <a href="editor?type=desktop&mode=fillForms&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" /></a>
+                                                            <td class="contentCells contentCells-icon">
+                                                                <a href="editor?type=desktop&mode=fillForms&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" /></a>
+                                                            </td>
+                                                        <% } else { %>
+                                                            <td class="contentCells contentCells-icon "></td>
                                                         <% } %>
-                                                    </td>
-                                                    <td class="contentCells contentCells-shift contentCells-icon">
                                                         <% if (storedFiles[i].documentType == "word") { %>
-                                                        <a href="editor?type=desktop&mode=blockcontent&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification" /></a>
+                                                            <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                                                                <a href="editor?type=desktop&mode=blockcontent&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification" /></a>
+                                                            </td>
+                                                        <% } else { %>
+                                                            <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
                                                         <% } %>
-                                                    </td>
+                                                        <% if (storedFiles[i].documentType !== "word" && storedFiles[i].documentType !== "cell") {%>
+                                                            <td class="contentCells contentCells-icon "></td>
+                                                        <%}%>
                                                     <% } else { %>
-                                                        <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                        <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                     <% } %>
-                                                    <td class="contentCells contentCells-icon">
+                                                    <td class="contentCells contentCells-icon firstContentCellViewers">
                                                         <a href="editor?type=desktop&mode=view&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
                                                             <img src="images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens" /></a>
                                                     </td>
@@ -221,7 +239,7 @@
                                                         <a href="editor?type=embedded&mode=embedded&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
                                                             <img src="images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode" /></a>
                                                     </td>
-                                                    <td class="contentCells contentCells-icon contentCells-shift">
+                                                    <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                         <a href="download?fileName=<%= encodeURIComponent(storedFiles[i].name) %>">
                                                             <img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a>
                                                     </td>
@@ -233,7 +251,7 @@
                                             <% } %>
                                         </tbody>
                                     </table>
-                                </div>  
+                                </div>
                             </div>
                             <% } %>
                         </div>

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

@@ -28,6 +28,8 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
     <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/media.css">
+    <link rel="stylesheet" type="text/css" href="stylesheets/media-wopi.css">
 </head>
 
 <body>
@@ -185,13 +187,13 @@
                                                                     <% } %>
                                                                 </td>
                                                             <% } %>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
+                                                            <td class="contentCells contentCells-icon contentCells-shift downloadContentCells">
                                                                 <a href="wopi/files/<%= encodeURIComponent(storedFiles[i].name) %>/contents">
-                                                                    <img class="icon-download" src="images/download-24.png" alt="Download" title="Download" /></a>
+                                                                    <img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a>
                                                             </td>
                                                             <td class="contentCells contentCells-icon contentCells-shift">
                                                                 <a class="delete-file" data="<%= encodeURIComponent(storedFiles[i].name) %>">
-                                                                    <img class="icon-delete" src="images/delete-24.png" alt="Delete" title="Delete" /></a>
+                                                                    <img class="icon-delete" src="images/delete.svg" alt="Delete" title="Delete" /></a>
                                                             </td>
                                                         </tr>
                                                     <% } %>
@@ -236,4 +238,4 @@
     <script type="text/javascript" src="javascripts/jscript.js"></script>
 </body>
 
-</html>
+</html>

web/documentserver-example/php/README.md

@@ -12,7 +12,7 @@ Download and install ONLYOFFICE Docs (packaged as Document Server).
 
 See the detailed guide to learn how to [install Document Server for Windows](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx?from=api_php_example).
 
-### Step 2. Download the PHP code
+### Step 2. Download the PHP code for the editors integration
 
 Download the [PHP example](https://api.onlyoffice.com/editors/demopreview) from our site.
 
@@ -24,13 +24,13 @@ $GLOBALS['DOC_SERV_SITE_URL'] = "https://documentserver/";
 
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *doceditor.php* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *doceditor.php* file.
 
 ### Step 3. Install the prerequisites
 
-You can use any web server capable of runnig PHP code to run the example. We will demonstrate how to run the PHP example using the **Internet Information Services (IIS)** web server. To set up and configure PHP on IIS, **PHP Manager for IIS** will be used.
+You can use any web server capable of running PHP code to run the example. We will demonstrate how to run the PHP example using the **Internet Information Services (IIS)** web server. To set up and configure PHP on IIS, **PHP Manager for IIS** will be used.
 
-* **IIS: version 7** or later (refer to [Microsoft official website](https://www.iis.net/learn/application-frameworks/scenario-build-a-php-website-on-iis/configuring-step-1-install-iis-and-php) to learn how to install **IIS**);
+* **IIS**: version 7 or later (refer to [Microsoft official website](https://www.iis.net/learn/application-frameworks/scenario-build-a-php-website-on-iis/configuring-step-1-install-iis-and-php) to learn how to install IIS);
 * **PHP** (download it from the [http://php.net](https://php.net/downloads.php) site);
 * **PHP Manager for IIS** (download it from the [Microsoft open source site](https://phpmanager.codeplex.com/releases/view/69115)).
 
@@ -38,15 +38,15 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 1. **PHP Manager for IIS** configuration.
 
-	After **PHP Manager for IIS** installation is complete, launch the **IIS Manager:**
+	After PHP Manager for IIS installation is complete, launch the **IIS Manager:**
 
-	Start -> ControlPanel -> System and Security -> Administrative Tools -> Internet Information Services (IIS) Manager
+	**Start** -> **Control Panel** -> **System and Security** -> **Administrative Tools** -> **Internet Information Services (IIS) Manager**
 
-	and find the **PHP Manager** feature in the **Features View** in **IIS**.
+	and find the **PHP Manager** feature in the **Features View** in IIS.
 
 	![manager](screenshots/manager.png)
 
-	You need to register the installed PHP version in **IIS** using **PHP Manager**.
+	You need to register the installed PHP version in IIS using PHP Manager.
 
 	Double-click **PHP Manager** to open it, click the **Register new PHP version** task and specify the full path to the main PHP executable file location. For example: *C:\Program Files\PHP\php-cgi.exe*.
 	
@@ -58,7 +58,7 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 2. Configure IIS to handle PHP requests.
 
-	For IIS to host PHP applications, you must add handler mapping that tells IIS to pass all the PHP-specific requests to the PHP application framework by using the FastCGI protocol.
+	For IIS to host PHP applications, you must add handler mapping that tells IIS to pass all the PHP-specific requests to the PHP application framework by using the **FastCGI** protocol.
 
 	Double-click the **Handler Mappings** feature:
 	
@@ -66,16 +66,16 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 	In the **Action** panel, click **Add Module Mapping**. In the **Add Module Mapping** dialog box, specify the configuration settings as follows:
 
-	* Request path: ***.php**,
-	* Module: **FastCgiModule**,
-	* Executable: **"C:\[Path to your PHP installation]\php-cgi.exe"**,
-	* Name: **PHP via FastCGI**.
+	* **Request path**: *.php,
+	* **Module**: FastCgiModule,
+	* **Executable**: "C:\[Path to your PHP installation]\php-cgi.exe",
+	* **Name**: PHP via FastCGI.
 
 	Click **OK**.
 	
 	![handler-add](screenshots/handler-add.png)
 
-	After IIS manager configuration is complete, everything is ready for running the **PHP** example.
+	After IIS manager configuration is complete, everything is ready for running the PHP example.
 
 ### Step 5. Run your website with the editors
 
@@ -87,7 +87,7 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 2. In the **Add Website** dialog box, specify the name of the folder with the PHP project in the **Site name** box.
 
-	Specify the path to the folder with your project in the **Physical Path** box.
+	Specify the path to the folder with your project in the **Physical path** box.
 
 	Specify the unique value used only for this website in the **Port** box.
 	
@@ -147,13 +147,13 @@ See the detailed guide to learn how to [install Document Server for Linux](https
     nano config.php
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     $GLOBALS['DOC_SERV_SITE_URL'] = "https://documentserver/";
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 5. Set permission for site:
 

web/documentserver-example/php/common.php

@@ -258,7 +258,7 @@ function getVersionDir($histDir, $version) {
 
 // get a number of the last file version from the history directory
 function getFileVersion($histDir) {
-    if (!file_exists($histDir) || !is_dir($histDir)) return 0;  // check if the history directory exists
+    if (!file_exists($histDir) || !is_dir($histDir)) return 1;  // check if the history directory exists
 
     $cdir = scandir($histDir);
     $ver = 1;

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -63,6 +64,7 @@ header img {
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
@@ -353,19 +355,30 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
-}
 
+    width: 100%;
+}
+footer > .center{
+    width: 100%;
+}
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100%;
     height: 64px;
 }
 
 footer table td {
+    position: relative;
     padding-left: 32px;
 }
 
@@ -380,9 +393,16 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
+
 }
 
 .help-block {
@@ -680,4 +700,61 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+.menu span {
+    content: "";
+    width: 26px;
+    height: 3px;
+    background: rgb(194, 194, 194);
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}

web/documentserver-example/php/doceditor.php

@@ -66,7 +66,7 @@
     $createUrl = getCreateUrl($filename, $user->id, $type);
     $templates = array(
         array (
-            "image" => $templatesImageUrl,
+            "image" => "",
             "title" => "Blank",
             "url" => $createUrl
         ),

web/documentserver-example/php/index.php

@@ -37,7 +37,7 @@
         <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
 
         <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
-
+        <link rel="stylesheet" type="text/css" href="css/media.css">
         <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
     </head>
     <body>
@@ -175,79 +175,81 @@
                                                     <table cellspacing="0" cellpadding="0" width="100%">
                                                         <tbody>
                                                             <?php foreach ($storedFiles as &$storeFile) {
-                                                                echo '<tr class="tableRow" title="'.$storeFile->name.'">';
+                                                                echo '<tr class="tableRow" title="'.$storeFile->name.' ['.getFileVersion(getHistoryDir(getStoragePath($storeFile->name))).']">';
                                                                 echo ' <td class="contentCells">';
                                                                 echo '  <a class="stored-edit '.$storeFile->documentType.'" href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'" target="_blank">';
-                                                                echo '   <span title="'.$storeFile->name.'">'.$storeFile->name.'</span>';
+                                                                echo '   <span>'.$storeFile->name.'</span>';
                                                                 echo '  </a>';
                                                                 echo ' </td>';
                                                                 if ($storeFile->canEdit) {
                                                                     echo ' <td class="contentCells contentCells-icon">';
                                                                     echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=edit&type=desktop" target="_blank">';
                                                                     echo '   <img src="css/images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens" /></a>';
-                                                                    echo '  </a>';
                                                                     echo ' </td>';
                                                                     echo ' <td class="contentCells contentCells-icon">';
                                                                     echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=edit&type=mobile" target="_blank">';
                                                                     echo '   <img src="css/images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" /></a>';
-                                                                    echo '  </a>';
-                                                                    echo ' <td class="contentCells contentCells-icon">';
-                                                                    if ($storeFile->documentType == "word") {
-                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=review&type=desktop" target="_blank">';
-                                                                        echo '   <img src="css/images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>';
-                                                                        echo '  </a>';
-                                                                    } else if ($storeFile->documentType == "cell") {
-                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=filter&type=desktop" target="_blank">';
-                                                                        echo '   <img src="css/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>';
-                                                                        echo '  </a>';
-                                                                    }
                                                                     echo ' </td>';
                                                                     echo ' <td class="contentCells contentCells-icon">';
                                                                     echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=comment&type=desktop" target="_blank">';
                                                                     echo '   <img src="css/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" /></a>';
-                                                                    echo '  </a>';
                                                                     echo ' </td>';
-                                                                    echo ' <td class="contentCells contentCells-icon">';
                                                                     if ($storeFile->documentType == "word") {
+                                                                        echo ' <td class="contentCells contentCells-icon">';
+                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=review&type=desktop" target="_blank">';
+                                                                        echo '   <img src="css/images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>';
+                                                                        echo ' </td>';
+                                                                    } else if ($storeFile->documentType == "cell") {
+                                                                        echo ' <td class="contentCells contentCells-icon">';
+                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=filter&type=desktop" target="_blank">';
+                                                                        echo '   <img src="css/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>';
+                                                                        echo ' </td>';
+                                                                    }
+                                                                    if($storeFile->documentType!="word" && $storeFile->documentType!="cell"){
+                                                                       echo ' <td class="contentCells contentCells-icon contentCellsEmpty"></td>';
+                                                                    }
+                                                                    if ($storeFile->documentType == "word") {
+                                                                        echo ' <td class="contentCells contentCells-icon ">';
                                                                         echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=fillForms&type=desktop" target="_blank">';
                                                                         echo '   <img src="css/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" /></a>';
-                                                                        echo '  </a>';
+                                                                        echo ' </td>';
+                                                                    }
+                                                                    else{
+                                                                        echo ' <td class="contentCells contentCells-icon "></td> ';
                                                                     }
-                                                                    echo ' </td>';
-                                                                    echo ' <td class="contentCells contentCells-icon contentCells-shift">';
                                                                     if ($storeFile->documentType == "word") {
+                                                                        echo ' <td class="contentCells contentCells-icon contentCells-shift firstContentCellShift">';
                                                                         echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=blockcontent&type=desktop" target="_blank">';
                                                                         echo '   <img src="css/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification" /></a>';
-                                                                        echo '  </a>';
+                                                                        echo ' </td>';
+                                                                    } else{
+                                                                       echo ' <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td> ';
+                                                                    }
+                                                                    if($storeFile->documentType!="word" && $storeFile->documentType!="cell"){
+                                                                        echo ' <td class="contentCells contentCells-icon"></td>';
                                                                     }
-                                                                    echo ' </td>';
                                                                 } else {
-                                                                    echo '<td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>';
+                                                                    echo '<td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>';
                                                                 }
-                                                                echo ' <td class="contentCells contentCells-icon">';
+                                                                echo ' <td class="contentCells contentCells-icon firstContentCellViewers">';
                                                                 echo '  <a href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'&action=view&type=desktop" target="_blank">';
                                                                 echo '   <img src="css/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo ' <td class="contentCells contentCells-icon">';
                                                                 echo '  <a href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'&action=view&type=mobile" target="_blank">';
                                                                 echo '   <img src="css/images/mobile.svg" alt="Open in viewer for mobile devices" title="Open in viewer for mobile devices" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo ' <td class="contentCells contentCells-icon contentCells-shift">';
                                                                 echo '  <a href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'&action=embedded&type=embedded" target="_blank">';
                                                                 echo '   <img src="css/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
-                                                                echo ' <td class="contentCells contentCells-icon contentCells-shift">';
+                                                                echo ' <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">';
                                                                 echo '  <a href="webeditor-ajax.php?type=download&fileName='.urlencode($storeFile->name).'">';
                                                                 echo '   <img class="icon-download" src="css/images/download.svg" alt="Download" title="Download" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo ' <td class="contentCells contentCells-icon contentCells-shift">';
                                                                 echo '  <a class="delete-file" data="'.$storeFile->name.'">';
                                                                 echo '   <img class="icon-delete" src="css/images/delete.svg" alt="Delete" title="Delete" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo '</tr>';
                                                             } ?>

web/documentserver-example/php/webeditor-ajax.php

@@ -204,7 +204,11 @@ function convert() {
 
         $fileUri = $post["fileUri"];
         if ($fileUri == NULL || $fileUri == "") {
-            $fileUri = FileUri($fileName, TRUE);
+            $fileUri =  $fileUri=serverPath(TRUE) . '/'
+                . "webeditor-ajax.php"
+                . "?type=download"
+                . "&fileName=" . urlencode($fileName)
+                . "&userAddress=" . getClientIp();
         }
         $key = getDocEditorKey($fileName);
 

web/documentserver-example/python/readme.md

@@ -12,7 +12,7 @@ See the detailed guide to learn how to install Document Server [for Windows](htt
 
 ## Step 2. Install the prerequisites and run the website with the editors
 
-1. Python comes preinstalled on most Linux distributions, and is available as a package on all others. Python 3.9 is required. Please proceed to [official documentation](https://docs.python.org/3/using/unix.html) if you have any troubles.
+1. **Python** comes preinstalled on most Linux distributions, and is available as a package on all others. Python 3.9 is required. Please proceed to [official documentation](https://docs.python.org/3/using/unix.html) if you have any troubles.
 
 2. Download the archive with the Python example and unpack it:
 
@@ -45,15 +45,13 @@ See the detailed guide to learn how to install Document Server [for Windows](htt
     nano config.py
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     DOC_SERV_SITE_URL = 'https://documentserver/'
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
-
-	And the **exampleserver** is the name of the server with the Python Example.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 6. Run the **Python** server:
 

web/documentserver-example/python/src/utils/docManager.py

@@ -206,7 +206,7 @@ def getStoredFiles(req):
 
     for f in files:
         if os.path.isfile(os.path.join(directory, f)):
-            fileInfos.append({ 'type': fileUtils.getFileType(f), 'title': f, 'url': getFileUri(f, True, req), 'canEdit': isCanEdit(fileUtils.getFileExt(f))}) # write information about file type, title and url
+            fileInfos.append({'version':historyManager.getFileVersion(historyManager.getHistoryDir(getStoragePath(f, req))), 'type': fileUtils.getFileType(f), 'title': f, 'url': getFileUri(f, True, req), 'canEdit': isCanEdit(fileUtils.getFileExt(f))}) # write information about file type, title and url
 
     return fileInfos
 

web/documentserver-example/python/src/views/actions.py

@@ -70,7 +70,7 @@ def convert(request):
         body = json.loads(request.body)
         filename = fileUtils.getFileName(body.get("filename"))
         filePass = body.get("filePass")
-        fileUri = docManager.getFileUri(filename, True,request)
+        fileUri = docManager.getDownloadUrl(filename,request)
         fileExt = fileUtils.getFileExt(filename)
         fileType = fileUtils.getFileType(filename)
         newExt = docManager.getInternalExtension(fileType)  # internal editor extensions: .docx, .xlsx or .pptx
@@ -145,7 +145,7 @@ def edit(request):
     createUrl = docManager.getCreateUrl(edType, request)
     templates = [
         {
-            'image': templatesImageUrl,
+            'image': '',
             'title': 'Blank',
             'url': createUrl
         },

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -41,6 +41,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -72,6 +73,7 @@ header img {
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
@@ -362,19 +364,30 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
-}
 
+    width: 100%;
+}
+footer > .center{
+    width: 100%;
+}
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100%;
     height: 64px;
 }
 
 footer table td {
+    position: relative;
     padding-left: 32px;
 }
 
@@ -389,9 +402,16 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
+    /*padding-left: 510px;*/
 }
 
 .help-block {
@@ -689,4 +709,62 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+.menu span {
+    content: "";
+    width: 26px;
+    height: 3px;
+    background: rgb(194, 194, 194);
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}

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

@@ -38,6 +38,7 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="{% static "css/stylesheet.css" %}" />
     <link rel="stylesheet" type="text/css" href="{% static "css/jquery-ui.css" %}" />
+    <link rel="stylesheet" type="text/css" href="{% static "css/media.css" %}" />
 </head>
 <body>
     <header>
@@ -141,10 +142,10 @@
                                         <table cellspacing="0" cellpadding="0" width="100%">
                                             <tbody>
                                                 {% for file in files %}
-                                                    <tr class="tableRow" title="{{ file.title }}">
+                                                    <tr class="tableRow" title="{{ file.title }} [{{file.version}}]">
                                                         <td class="contentCells">
                                                             <a class="stored-edit {{ file.type }}" href="edit?filename={{ file.title }}" target="_blank">
-                                                                <span title="{{ file.title }}">{{ file.title }}</span>
+                                                                <span>{{ file.title }}</span>
                                                             </a>
                                                         </td>
                                                         {% if file.canEdit %}
@@ -158,40 +159,52 @@
                                                                     <img src="{% static "images/mobile.svg" %}" alt="Open in editor for mobile devices" title="Open in editor for mobile devices"/>
                                                                 </a>
                                                             </td>
-                                                            <td class="contentCells contentCells-icon">
-                                                                {% if file.type == 'word' %}
-                                                                    <a href="edit?filename={{ file.title }}&type=desktop&mode=review" target="_blank">
-                                                                        <img src="{% static "images/review.svg" %}" alt="Open in editor for review" title="Open in editor for review"/>
-                                                                    </a>
-                                                                {% elif file.type == 'cell' %}
-                                                                    <a href="edit?filename={{ file.title }}&type=desktop&mode=filter" target="_blank">
-                                                                        <img src="{% static "images/filter.svg" %}" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
-                                                                    </a>
-                                                                {% endif %}
-                                                            </td>
                                                             <td class="contentCells contentCells-icon">
                                                                 <a href="edit?filename={{ file.title }}&type=desktop&mode=comment" target="_blank">
                                                                     <img src="{% static "images/comment.svg" %}" alt="Open in editor for comment" title="Open in editor for comment"/>
                                                                 </a>
                                                             </td>
-                                                            <td class="contentCells contentCells-icon">
-                                                                {% if file.type == 'word' %}
+                                                            {% if file.type == 'word' %}
+                                                                <td class="contentCells contentCells-icon">
+                                                                    <a href="edit?filename={{ file.title }}&type=desktop&mode=review" target="_blank">
+                                                                        <img src="{% static "images/review.svg" %}" alt="Open in editor for review" title="Open in editor for review"/>
+                                                                    </a>
+                                                                </td>
+                                                            {% elif file.type == 'cell' %}
+                                                                <td class="contentCells contentCells-icon">
+                                                                    <a href="edit?filename={{ file.title }}&type=desktop&mode=filter" target="_blank">
+                                                                        <img src="{% static "images/filter.svg" %}" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
+                                                                    </a>
+                                                                </td>
+                                                            {% endif %}
+                                                            {% if file.type!='word' && file.type!='cell' %}
+                                                                <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                            {% endif %}
+                                                            {% if file.type == 'word' %}
+                                                                <td class="contentCells contentCells-icon">
                                                                     <a href="edit?filename={{ file.title }}&type=desktop&mode=fillForms" target="_blank">
                                                                         <img src="{% static "images/fill-forms.svg" %}" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                                     </a>
-                                                                {% endif %}
-                                                            </td>
-                                                            <td class="contentCells contentCells-shift contentCells-icon">
-                                                                {% if file.type == 'word' %}
+                                                                </td>
+                                                            {% else %}
+                                                                <td class="contentCells contentCells-icon "></td>
+                                                            {% endif %}
+                                                            {% if file.type == 'word' %}
+                                                                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                                     <a href="edit?filename={{ file.title }}&type=desktop&mode=blockcontent" target="_blank">
                                                                         <img src="{% static "images/block-content.svg" %}" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
                                                                     </a>
-                                                                {% endif %}
-                                                            </td>
+                                                                </td>
+                                                            {% else %}
+                                                                 <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                            {% endif %}
+                                                            {% if file.type!='word' && file.type!='cell' %}
+                                                                <td class="contentCells contentCells-icon "></td>
+                                                            {% endif %}
                                                         {% else %}
-                                                            <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                            <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                         {% endif %}
-                                                        <td class="contentCells contentCells-icon">
+                                                        <td class="contentCells contentCells-icon firstContentCellViewers">
                                                             <a href="edit?filename={{ file.title }}&type=desktop&mode=view" target="_blank">
                                                                 <img src="{% static "images/desktop.svg" %}" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                             </a>
@@ -206,7 +219,7 @@
                                                                 <img src="{% static "images/embeded.svg" %}" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                             </a>
                                                         </td>
-                                                        <td class="contentCells contentCells-icon contentCells-shift">
+                                                        <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                             <a href="download?fileName={{ file.title }}">
                                                                 <img class="icon-download" src="{% static "images/download.svg" %}" alt="Download" title="Download" />
                                                             </a>
@@ -222,10 +235,10 @@
                                         </table>
                                     </div>
                                 </div>
-                            {% endif %} 
+                            {% endif %}
                         </div>
                     </td>
-                </tr>   
+                </tr>
             </tbody>
         </table>
     </div>

web/documentserver-example/ruby/README.md

@@ -50,13 +50,13 @@ See the detailed guide to learn how to install Document Server [for Windows](htt
     nano config/application.rb
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     Rails.configuration.urlSite="https://documentserver/"
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 6. Run the **Rails** application:
 

web/documentserver-example/ruby/app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
 //= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css
+//= link_directory ../stylesheets .css
+// = link_directory ../media .css

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

@@ -0,0 +1,612 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 95%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    .left-panel {
+        margin-left: 0;
+        width: 94%;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .left-panel {
+        width: 90%;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: end;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: start;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: end;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: end;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: start;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    .menu {
+        display: flex;
+    }
+
+    header .center > a {
+        position: absolute;
+        left: 30px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 15%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -64,6 +65,7 @@ header img {
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
@@ -354,19 +356,30 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
-}
 
+    width: 100%;
+}
+footer > .center{
+    width: 100%;
+}
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100%;
     height: 64px;
 }
 
 footer table td {
+    position: relative;
     padding-left: 32px;
 }
 
@@ -381,9 +394,16 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
+    //padding-left: 510px;
 }
 
 .help-block {
@@ -681,4 +701,62 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+.menu {
+    cursor: pointer;
+    display: none;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-between;
+    top: 23px;
+    left: 12px;
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 30px;
+}
+
+.menu span {
+    content: "";
+    width: 26px;
+    height: 3px;
+    background: rgb(194, 194, 194);
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}

web/documentserver-example/ruby/app/controllers/home_controller.rb

@@ -97,7 +97,7 @@ class HomeController < ApplicationController
       
       file_name = File.basename(body["filename"])
       file_pass = body["filePass"] ? body["filePass"] : nil
-      file_uri = DocumentHelper.get_file_uri(file_name, true)
+      file_uri = DocumentHelper.get_download_url(file_name)
       extension = File.extname(file_name).downcase
       internal_extension = DocumentHelper.get_internal_extension(FileUtility.get_file_type(file_name))
 

web/documentserver-example/ruby/app/models/document_helper.rb

@@ -134,7 +134,7 @@ class DocumentHelper
     # get the last file version
     def get_file_version(hist_dir)
       if !Dir.exist?(hist_dir)
-        return 0
+        return 1
       end
 
       ver = 1

web/documentserver-example/ruby/app/models/file_model.rb

@@ -87,7 +87,7 @@ class FileModel
     templatesImageUrl = DocumentHelper.get_template_image_url(document_type) # templates image url in the "From Template" section
     templates = [
       {
-        :image => templatesImageUrl,
+        :image => "",
         :title => "Blank",
         :url => create_url
       },

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

@@ -153,10 +153,10 @@
                           editUrl = "editor?fileName=#{URI::encode(d)}"
                           docType = FileUtility.get_file_type(d) 
                           canEdit = DocumentHelper.edited_exts.include?(File.extname(d).downcase) %>
-                          <tr class="tableRow" title="<%= d %>">
+                          <tr class="tableRow" title="<%= d %> [<%= DocumentHelper.get_file_version(DocumentHelper.history_dir(DocumentHelper.storage_path(d, nil))) %>]">
                             <td class="contentCells">
                                 <a class="stored-edit <%= docType %>" href="<%= editUrl %>" target="_blank">
-                                    <span title="<%= d %>"><%= d %></span>
+                                    <span><%= d %></span>
                                 </a>
                             </td>
                             <% if canEdit %>
@@ -170,40 +170,52 @@
                                       <img src="assets/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices"/>
                                   </a>
                               </td>
-                              <td class="contentCells contentCells-icon">
-                                  <% if docType.eql?("word") %>
-                                      <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=review" %>" target="_blank">
-                                          <img src="assets/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
-                                      </a>
-                                  <% elsif docType.eql?("cell") %>
-                                      <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=filter" %>" target="_blank">
-                                          <img src="assets/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
-                                      </a>
-                                  <% end %>
-                              </td>
                               <td class="contentCells contentCells-icon">
                                   <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=comment" %>" target="_blank">
                                       <img src="assets/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
                                   </a>
                               </td>
-                              <td class="contentCells contentCells-icon">
-                                  <% if docType.eql?("word") %>
-                                      <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=fillForms" %>" target="_blank">
-                                          <img src="assets/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
+                              <% if docType.eql?("word") %>
+                                 <td class="contentCells contentCells-icon">
+                                      <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=review" %>" target="_blank">
+                                          <img src="assets/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
                                       </a>
-                                  <% end %>
-                              </td>
-                              <td class="contentCells contentCells-shift contentCells-icon">
+                                  </td>
+                              <% elsif docType.eql?("cell") %>
+                                <td class="contentCells contentCells-icon">
+                                    <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=filter" %>" target="_blank">
+                                        <img src="assets/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
+                                    </a>
+                                </td>
+                              <% end %>
+                              <% if !docType.eql?("word") && !docType.eql?("cell")%>
+                                <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                              <% end %>
                                   <% if docType.eql?("word") %>
-                                      <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=blockcontent" %>" target="_blank">
-                                          <img src="assets/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
-                                      </a>
+                                    <td class="contentCells contentCells-icon">
+                                        <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=fillForms" %>" target="_blank">
+                                            <img src="assets/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
+                                        </a>
+                                    </td>
+                                  <% else %>
+                                    <td class="contentCells  contentCells-icon "></td>
+                                  <% end %>
+                                  <% if docType.eql?("word") %>
+                                    <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                                        <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=blockcontent" %>" target="_blank">
+                                            <img src="assets/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
+                                        </a>
+                                    </td>
+                                  <% else %>
+                                    <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift" ></td>
+                                  <% end %>
+                                  <% if !docType.eql?("word") && !docType.eql?("cell")%>
+                                      <td class="contentCells contentCells-icon "></td>
                                   <% end %>
-                              </td>
                             <% else %>
-                              <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                              <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                             <% end %>
-                            <td class="contentCells contentCells-icon">
+                            <td class="contentCells contentCells-icon firstContentCellViewers">
                                 <a href="<%= "#{editUrl}&editorsType=desktop&editorsMode=view" %>" target="_blank">
                                     <img src="assets/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                 </a>
@@ -218,7 +230,7 @@
                                     <img src="assets/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                 </a>
                             </td>
-                            <td class="contentCells contentCells-shift contentCells-icon">
+                            <td class="contentCells contentCells-shift contentCells-icon downloadContentCellShift">
                               <a href="<%= "download?fileName=#{URI::encode(d)}" %>">
                                 <img class="icon-download" src="assets/download.svg" alt="Download" title="Download" />
                               </a>