feat(csharp): implement design for mobile devices

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

@@ -138,12 +138,24 @@ header a {
     }
 
     .main-panel {
-        width: calc(100% - 32px);
+        width: 100%;
-        margin: 0 16px;
+        margin: 0;
-        padding: 16px 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/csharp/App_Themes/images/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/csharp/App_Themes/images/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/csharp/App_Themes/images/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/csharp/App_Themes/media.css

@@ -708,3 +708,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("images/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/csharp/App_Themes/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/csharp/Default.aspx

@@ -45,11 +45,23 @@
 <body>
     <form id="form1" runat="server">
         <header>
-            <div class="center">
+            <div class="center main-nav">
                 <a href="./">
                     <img src ="app_themes/images/logo.svg" alt="ONLYOFFICE" />
                 </a>
             </div>
+            <menu class="responsive-nav">
+                <li>
+                  <a href="#" onclick="toggleSidePanel(event)">
+                    <img src="app_themes/images/mobile-menu.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+                <li>
+                  <a href="./">
+                    <img src ="app_themes/images/mobile-logo.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+            </menu>
         </header>
         <div class="center main">
             <table class="table-main">
@@ -124,6 +136,9 @@
                                     </tbody>
                                 </table>
                             </div>
+                            <button class="mobile-close-btn" onclick="toggleSidePanel(event)">
+                                <img src="app_themes/images/close.svg" alt="">
+                            </button>
                         </td>
                         <td class="section">
                         <% var storedFiles = GetStoredFiles(); %>
@@ -150,7 +165,7 @@
                                     <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>
                                     <% foreach (User user in Users.getAllUsers())
                                       { %>
-                                      <div class="user-descr">
+                                      <div class="user-descr" onclick="toggleUserDescr(event)">
                                        <b><%= user.name.IsEmpty() ? "Anonymous" : user.name %></b>
                                            <ul>
                                            <% foreach (string description in user.descriptions)

web/documentserver-example/csharp/Forgotten.aspx

@@ -42,11 +42,23 @@
 <body>
     <form id="form1" runat="server">
         <header>
-            <div class="center">
+            <div class="center main-nav">
                 <a href="./">
                     <img src ="app_themes/images/logo.svg" alt="ONLYOFFICE" />
                 </a>
             </div>
+            <menu class="responsive-nav">
+                <li>
+                  <a href="#">
+                    <img src="app_themes/images/mobile-menu.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+                <li>
+                  <a href="./">
+                    <img src ="app_themes/images/mobile-logo.svg" alt="ONLYOFFICE" />
+                  </a>
+                </li>
+            </menu>
         </header>
         <div class="center main">
             <table class="table-main">

web/documentserver-example/csharp/script/jscript.js

@@ -421,4 +421,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");
+    }
 }