feat(java): implement design for mobile devices

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

@@ -138,12 +138,24 @@ header a {
     }
 
     .main-panel {
-        width: calc(100% - 32px);
-        margin: 0 16px;
-        padding: 16px 0;
+        width: 100%;
+        margin: 0;
+        padding: 28px 16px;
     }
 
     .tableHeader td:last-child, .tableRow td:last-child {
         width: 25%;
     }
+
+    header a {
+        width: auto;
+    }
+
+    .scroll-table-body {
+        top: 40px;
+    }
+
+    .tableRow {
+        padding: 8px 0;
+    }
 }

web/documentserver-example/java/src/main/webapp/css/img/mobile-logo.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5332 22.2243L0.632544 17.5921C-0.210848 17.1877 -0.210848 16.5627 0.632544 16.1951L4.07945 14.5775L10.4966 17.5921C11.34 17.9965 12.6967 17.9965 13.5034 17.5921L19.9206 14.5775L23.3675 16.1951C24.2108 16.5995 24.2108 17.2245 23.3675 17.5921L13.4668 22.2243C12.6967 22.592 11.34 22.592 10.5332 22.2243Z" fill="#FF6F3D"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5011 16.4922L0.630617 11.8546C-0.210206 11.4497 -0.210206 10.824 0.630617 10.456L3.99391 8.87329L10.5011 11.9282C11.342 12.3331 12.6946 12.3331 13.4989 11.9282L20.0061 8.87329L23.3694 10.456C24.2102 10.8608 24.2102 11.4865 23.3694 11.8546L13.4989 16.4922C12.658 16.897 11.3054 16.897 10.5011 16.4922Z" fill="#95C038"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5011 10.8195L0.630617 6.24863C-0.210206 5.84959 -0.210206 5.23289 0.630617 4.87013L10.5011 0.299281C11.342 -0.0997605 12.6946 -0.0997605 13.4989 0.299281L23.3694 4.87013C24.2102 5.26917 24.2102 5.88587 23.3694 6.24863L13.4989 10.8195C12.658 11.1822 11.3054 11.1822 10.5011 10.8195Z" fill="#5DC0E8"/>
+</svg>

web/documentserver-example/java/src/main/webapp/css/img/mobile-menu.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="20" height="2" rx="1" fill="white"/>
+    <rect y="6" width="20" height="2" rx="1" fill="white"/>
+    <rect y="12" width="20" height="2" rx="1" fill="white"/>
+</svg>

web/documentserver-example/java/src/main/webapp/css/img/plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H11V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H13V17Z" fill="#444444"/>
+</svg>

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

@@ -694,3 +694,216 @@
         max-width: none;
     }
 }
+
+@media (max-width: 592px) and (min-width: 320px) {
+    body.menu-open {
+        overflow: hidden;
+    }
+
+    header {
+        min-width: auto;
+        height: fit-content;
+    }
+
+    header a {
+        display: block;
+    }
+
+    header img {
+        margin: 0;
+    }
+
+    header, footer {
+        position: -webkit-sticky; /* Safari */
+        position: sticky;
+        top: 0;
+        z-index: 100;
+    }
+
+    .center {
+        width: 100%;
+        margin: 0;
+    }
+
+    .left-panel {
+        background-color: rgba(186, 186, 186, 0.6);
+        display: none;
+        flex-direction: row;
+        align-items: start;
+        max-width: none;
+        width: 100%;
+        margin: 0;
+        position: fixed;
+        left: 0;
+        height: calc(100% - 124px);
+        z-index:99;
+    }
+
+    .left-panel.active {
+        display: flex;
+    }
+
+    .help-block {
+        height: 100%;
+        margin: 0;
+        background-color: #F5F5F5;
+        width: 248px;
+        padding-left: 16px;
+        padding-top: 33px;
+        padding-bottom: 33px;
+        padding-right: 40px;
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .table-main {
+        width: 100%;
+    }
+
+    .mobile-close-btn {
+        display: block;
+        width: 48px;
+        height: 48px;
+        background-color: #E2E2E2;
+        border-radius: 2px;
+        border-color: #E2E2E2;
+        color: #808080;
+        cursor: pointer;
+	    outline: inherit;
+        border: none;
+    }
+
+    .main-panel {
+        width: 100%;
+        left: 0;
+        padding: 28px 16px;
+    }
+
+    #portal-info {
+        width: 100%;
+        max-width: fit-content;
+    }
+
+    menu.links {
+        width: 100%;
+        margin-top: 0;
+        padding: 0;
+    }
+
+    span.portal-name {
+        font-size: 16px;
+    }
+
+    span.portal-descr:first-child {
+        font-size: 13px;
+    }
+
+    span.portal-descr {
+        font-size: 12px;
+    }
+
+    .user-descr {
+        width: 100%;
+        max-width: none;
+        min-width: auto;
+        border-bottom: 1px solid #E5E5E5;
+        padding: 12px 0;
+        margin: 0;
+        cursor: pointer;
+    }
+
+    .user-descr ul {
+        display: none;
+    }
+
+    .user-descr ul.active {
+        display: block;
+    }
+
+    .user-descr b {
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        column-gap: 8px;
+        margin: 0;
+    }
+
+    .user-descr b::before {
+        content: url("img/plus.svg");
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+    }
+
+    .storedHeader {
+        width: 100%;
+    }
+
+    .storedHeaderClearAll {
+        padding-right: 0;
+    }
+
+    .scroll-table-body {
+        top: 36px;
+    }
+
+    .scroll-table-body tr:first-child {
+        padding-top: 0;
+    }
+
+    .tableRow {
+        border-bottom: 1px solid #e5e5e5;
+        padding: 16px 0;
+        width: 100%;
+    }
+
+    .tableRow td:first-child {
+        width: 100%;
+    }
+
+    .stored-edit span {
+        font-size: 14px;
+    }
+
+    .header-list {
+        font-size: 16px;
+    }
+
+    .firstContentCellViewers {
+        border-bottom: none !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: none !important;
+    }
+
+    .downloadContentCellShift:after {
+        display: none;
+    }
+
+    .main-nav {
+        display: none;
+    }
+
+    .responsive-nav {
+        height: 44px;
+        display: flex;
+        flex-direction: row;
+        margin: 0;
+        align-items: center;
+        column-gap: 16px;
+        padding: 10px 16px;
+        width: 100%;
+        box-sizing: border-box;
+        list-style: none;
+    }
+
+    .main {
+        height: calc(100% - 124px);
+    }
+
+    .user-block-table {
+        height: auto;
+    }
+}

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

@@ -65,6 +65,14 @@ header img {
     margin: 10px 0 22px 32px;
 }
 
+.responsive-nav {
+    display: none;
+}
+
+.mobile-close-btn {
+    display: none;
+}
+
 .center {
     position: relative;
     margin: 0 auto 0;

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

@@ -38,11 +38,23 @@
     </head>
     <body>
         <header>
-            <div class="center">
+            <div class="center main-nav">
                 <a href="./">
                     <img src ="css/img/logo.svg" alt="ONLYOFFICE" />
                 </a>
             </div>
+            <menu class="responsive-nav">
+                <li>
+                  <a href="#">
+                    <img src="css/img/mobile-menu.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+                <li>
+                  <a href="./">
+                    <img src ="css/img/mobile-logo.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+            </menu>
         </header>
         <div class="center main">
             <table class="table-main">

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

@@ -43,11 +43,23 @@
     </head>
     <body>
         <header>
-            <div class="center">
+            <div class="center main-nav">
                 <a href="./">
                     <img src ="css/img/logo.svg" alt="ONLYOFFICE" />
                 </a>
             </div>
+            <menu class="responsive-nav">
+                <li>
+                  <a href="#" onclick="toggleSidePanel(event)">
+                    <img src="css/img/mobile-menu.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+                <li>
+                  <a href="./">
+                    <img src ="css/img/mobile-logo.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+            </menu>
         </header>
         <div class="center main">
             <table class="table-main">
@@ -120,6 +132,9 @@
                                     </table>
                                 </div>
                             </div>
+                            <button class="mobile-close-btn" onclick="toggleSidePanel(event)">
+                                <img src="css/img/close.svg" alt="">
+                            </button>
                         </td>
                         <td class="section">
                             <% DocumentManager.init(request, response); %>
@@ -146,7 +161,7 @@
                                     <span class="portal-descr">Please do NOT use this integration example on your own server without proper code modifications, it is intended for testing purposes only. In case you enabled this test example, disable it before going for production.</span>
                                     <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
                                     <% for (User user : Users.getAllUsers()) { %>
-                                        <div class="user-descr">
+                                        <div class="user-descr" onclick="toggleUserDescr(event)">
                                             <b><%= user.getName() == null ? "Anonymous" : user.getName() %></b>
                                             <ul>
                                                 <% for (String description : user.getDescriptions()) { %>

web/documentserver-example/java/src/main/webapp/scripts/jscript.js

@@ -415,4 +415,27 @@ if (typeof jQuery !== "undefined") {
     }).mouseout(function () {
         jq("div.tooltip").remove();
     });
+}
+
+function toggleSidePanel(event) {
+    event.preventDefault();
+    let sidePanel = document.querySelector(".left-panel");
+    let body = document.querySelector("body");
+    if (sidePanel.classList.contains("active")) {
+        sidePanel.classList.remove("active");
+        body.classList.remove("menu-open");
+    } else {
+        sidePanel.classList.add("active")
+        body.classList.add("menu-open");
+    }
+}
+
+function toggleUserDescr(event) {
+    let list = event.currentTarget.querySelector("ul");
+    let cursor = window.getComputedStyle(event.currentTarget).getPropertyValue("cursor");
+
+    if (cursor === "pointer") {
+        if (list.classList.contains("active")) list.classList.remove("active");
+        else list.classList.add("active");
+    }
 }