diff --git a/web/documentserver-example/nodejs/public/images/mobile-logo.svg b/web/documentserver-example/nodejs/public/images/mobile-logo.svg new file mode 100644 index 00000000..e8b8cb5d --- /dev/null +++ b/web/documentserver-example/nodejs/public/images/mobile-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/documentserver-example/nodejs/public/images/mobile-menu.svg b/web/documentserver-example/nodejs/public/images/mobile-menu.svg new file mode 100644 index 00000000..b40f1158 --- /dev/null +++ b/web/documentserver-example/nodejs/public/images/mobile-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/documentserver-example/nodejs/public/images/plus.svg b/web/documentserver-example/nodejs/public/images/plus.svg new file mode 100644 index 00000000..673a1f23 --- /dev/null +++ b/web/documentserver-example/nodejs/public/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/documentserver-example/nodejs/public/javascripts/jscript.js b/web/documentserver-example/nodejs/public/javascripts/jscript.js index a84cf1d0..41d3985a 100644 --- a/web/documentserver-example/nodejs/public/javascripts/jscript.js +++ b/web/documentserver-example/nodejs/public/javascripts/jscript.js @@ -20,6 +20,7 @@ var language; var userid; var directUrl; var formatManager; +var leftPanelToggle = false; window.onload = function () { fetch('formats') @@ -610,3 +611,26 @@ function collectParams(startParams) { }); return startChar + params.join("&"); } + +function toggleLeftPanel(event) { + leftPanelToggle = !leftPanelToggle; + event.preventDefault(); + let leftPanel = document.querySelector(".left-panel"); + if (leftPanelToggle) { + leftPanel.classList.remove("hide"); + leftPanel.classList.add("active") + } else { + leftPanel.classList.remove("active"); + leftPanel.classList.add("hide"); + } +} + +function toggleUserDescr(event) { + let list = event.currentTarget.querySelector("ul"); + let cursor = window.getComputedStyle(event.currentTarget).getPropertyValue("cursor"); + + if (cursor === 'pointer') { + if (list.classList.contains("open")) list.classList.remove("open"); + else list.classList.add("open"); + } +} \ No newline at end of file diff --git a/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css b/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css index 7b405467..eaada0d6 100644 --- a/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css +++ b/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css @@ -141,9 +141,6 @@ .contentCells-wopi { width: 100%; } - .contentCells-icon { - width: 1%; - } .contentCells-shift { padding-right: 30px; padding-left: 3px; @@ -154,3 +151,16 @@ width: 100%; } } +@media (max-width: 592px) and (min-width: 320px) { + .tableRow td:last-child:after{ + display: none; + } + + .contentCells-wopi { + width: auto; + } + + .downloadContentCells { + margin-left: 24px; + } +} diff --git a/web/documentserver-example/nodejs/public/stylesheets/media.css b/web/documentserver-example/nodejs/public/stylesheets/media.css index 65b928f2..611ac10d 100644 --- a/web/documentserver-example/nodejs/public/stylesheets/media.css +++ b/web/documentserver-example/nodejs/public/stylesheets/media.css @@ -74,6 +74,12 @@ } } +@media (max-width: 1279px) and (min-width: 1024px) { + menu.main-nav { + padding-left: 64px; + } +} + @media (max-width: 1080px) { .copy { margin-right: 32px; @@ -125,6 +131,12 @@ } } +@media (max-width: 1023px) and (min-width: 593px) { + menu.main-nav { + padding-left: 40px; + } +} + @media (max-width: 769px) and (min-width: 593px) { .contentCells-icon{ width: 5%; @@ -770,3 +782,229 @@ max-width: none; } } +@media (max-width: 592px) and (min-width: 320px) { + header { + min-width: auto; + } + + header, footer { + position: -webkit-sticky; /* Safari */ + position: sticky; + top: 0; + z-index: 99; + } + + .main-nav { + display: none; + } + + .responsive-nav { + height: 24px; + display: flex; + flex-direction: row; + margin: 0; + align-items: center; + column-gap: 16px; + padding: 10px 16px; + width: 100%; + } + + .left-panel { + background-color: rgba(186, 186, 186, 0.6); + display: none; + align-items: start; + width: 100%; + margin: 0; + position: fixed; + left: 0; + overflow-y: hidden; + height: calc(100% - 124px); + z-index:99; + } + + .left-panel.hide { + display: none; + } + + .left-panel.active { + display: flex; + } + + .help-block { + height: calc(100% - 66px); + margin: 0; + background-color: #F5F5F5; + width: 192px; + padding: 33px 40px 33px 16px; + overflow-y: scroll; + } + + .help-block::-webkit-scrollbar { + display: none; + } + + .help-block { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + + .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; + } + + .center { + width: 100%; + margin: 0; + } + + .table-main { + width: 100%; + } + + .main { + height: calc(100% - 124px); + } + + .main-panel { + width: 100%; + left: 0; + padding: 28px 16px; + row-gap: 12px; + } + + menu.links { + width: 100%; + margin: 0; + padding: 0; + } + + #portal-info { + width: 100%; + max-width: fit-content; + } + + #portal-info .portal-name { + font-size: 16px; + } + + #portal-info span:nth-child(2) { + font-size: 13px; + } + + #portal-info .portal-descr { + font-size: 12px; + } + + .users-list>li:first-child { + margin-top: 12px; + border-top: 1px solid #E5E5E5; + } + + .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.open { + 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%; + padding: 12px 0; + } + + .scroll-table-body tr:first-child { + padding-top: 0; + } + + .tableRow { + width: 100%; + row-gap: 16px; + padding: 16px 0; + border-bottom: 1px solid #e5e5e5; + } + + .tableRow td:first-child { + width: 100%; + } + + .tableRow td { + padding: 0; + } + + .firstContentCellViewers { + border-bottom: none !important; + } + + .firstContentCellViewers ~ td { + border-bottom: none !important; + } + + .downloadContentCellShift:after { + display: none; + } + + .stored-edit { + padding: 0; + padding-left: 26px; + display: flex; + align-items: center; + } + + .stored-edit span { + font-size: 14px; + line-height: 22px; + } + + .clear-all { + font-size: 11px; + width: 112px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + } + + .scroll-table-body { + position: static; + } + + .user-block-table { + height: auto; + } +} diff --git a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css index ca41a726..ad4230b2 100644 --- a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css +++ b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css @@ -53,14 +53,34 @@ a:visited { header { background: #333333; - height: 48px; - margin: 0 auto; - min-width: 1152px; - width: auto; + width: 100%; } -header img { - margin: 10px 0 22px 32px; +.main-nav { + margin: 0; + display: flex; + align-items: center; + padding-left: 192px; + height: 48px; +} + +.main-nav, .responsive-nav { + list-style: none; + column-gap: 24px; +} + +.main-nav li, .mobile-nav li { + display: flex; + align-items: center; + height: 24px; +} + +.responsive-nav { + display: none; +} + +.mobile-close-btn { + display: none; } .center { @@ -975,6 +995,12 @@ html { padding-right: 28px; } +ul.users-list { + list-style: none; + padding: 0; + margin: 0; +} + .user-descr { display: inline-table; width: 30vw; diff --git a/web/documentserver-example/nodejs/views/index.ejs b/web/documentserver-example/nodejs/views/index.ejs index 0d55cb86..b2e2b7bf 100755 --- a/web/documentserver-example/nodejs/views/index.ejs +++ b/web/documentserver-example/nodejs/views/index.ejs @@ -32,11 +32,27 @@
-
- - ONLYOFFICE - -
+
@@ -108,6 +124,9 @@
+
@@ -129,16 +148,18 @@ 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. You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions. - <% users.forEach(user => { %> -
- <%= user.name == null ? 'Anonymous' : user.name %> - -
- <% }) %> +
<%if (storedFiles.length > 0) {%> diff --git a/web/documentserver-example/nodejs/views/wopiIndex.ejs b/web/documentserver-example/nodejs/views/wopiIndex.ejs index 9d23e769..c48b3026 100755 --- a/web/documentserver-example/nodejs/views/wopiIndex.ejs +++ b/web/documentserver-example/nodejs/views/wopiIndex.ejs @@ -34,11 +34,27 @@
-
- - ONLYOFFICE - -
+
@@ -99,6 +115,9 @@
+