mirror of
https://github.com/ONLYOFFICE/document-server-integration.git
synced 2026-02-10 18:05:10 +08:00
feature(nodejs): replace design for mobile version with new one
This commit is contained in:
Serik Ibragimov
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -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>
|
||||
|
After Width: | Height: | Size: 278 B |
3
web/documentserver-example/nodejs/public/images/plus.svg
Normal file
3
web/documentserver-example/nodejs/public/images/plus.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 416 B |
@ -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");
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -32,11 +32,27 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="center">
|
||||
<a href="./">
|
||||
<img src ="images/logo.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<menu class="main-nav">
|
||||
<li>
|
||||
<a href="./">
|
||||
<img src ="images/logo.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
<menu class="responsive-nav">
|
||||
<li>
|
||||
<a href="#" onclick="toggleLeftPanel(event)">
|
||||
<img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./">
|
||||
<img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="center main">
|
||||
<table class="table-main">
|
||||
@ -108,6 +124,9 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mobile-close-btn" onclick="toggleLeftPanel(event)">
|
||||
<img src="images/close.svg" alt="">
|
||||
</button>
|
||||
</td>
|
||||
<td class="section">
|
||||
<div class="main-panel">
|
||||
@ -129,16 +148,18 @@
|
||||
</span>
|
||||
<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>
|
||||
<% users.forEach(user => { %>
|
||||
<div class="user-descr">
|
||||
<b><%= user.name == null ? 'Anonymous' : user.name %></b>
|
||||
<ul>
|
||||
<% user.descriptions.forEach(description => { %>
|
||||
<li><%= description %></li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<% }) %>
|
||||
<ul class="users-list">
|
||||
<% users.forEach(user => { %>
|
||||
<li class="user-descr" onclick="toggleUserDescr(event)">
|
||||
<b><%= user.name == null ? 'Anonymous' : user.name %></b>
|
||||
<ul>
|
||||
<% user.descriptions.forEach(description => { %>
|
||||
<li><%= description %></li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<%if (storedFiles.length > 0)
|
||||
{%>
|
||||
|
||||
@ -34,11 +34,27 @@
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="center">
|
||||
<a href="wopi">
|
||||
<img src="images/logo.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<menu class="main-nav">
|
||||
<li>
|
||||
<a href="./">
|
||||
<img src ="images/logo.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
<menu class="responsive-nav">
|
||||
<li>
|
||||
<a href="#" onclick="toggleLeftPanel(event)">
|
||||
<img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./">
|
||||
<img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="center main">
|
||||
<table class="table-main">
|
||||
@ -99,6 +115,9 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="mobile-close-btn" onclick="toggleLeftPanel(event)">
|
||||
<img src="images/close.svg" alt="">
|
||||
</button>
|
||||
</td>
|
||||
<td class="section">
|
||||
<div class="main-panel">
|
||||
|
||||
Reference in New Issue
Block a user