csharp-mvc: fix getting extension

Feature/adaptive fix

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/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/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/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/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/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/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/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/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

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/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/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>