diff --git a/CHANGELOG.md b/CHANGELOG.md index 2912636c..33e7bcfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ # Change Log +- php-laravel: mobile index page view - ruby: new mobile index page view - python: new mobile index page view - php: new mobile index page view diff --git a/web/documentserver-example/php-laravel/public/css/app.css b/web/documentserver-example/php-laravel/public/css/app.css index c8282bc4..d65c1542 100644 --- a/web/documentserver-example/php-laravel/public/css/app.css +++ b/web/documentserver-example/php-laravel/public/css/app.css @@ -64,6 +64,14 @@ header img { margin: 10px 0 22px 32px; } +.responsive-nav { + display: none; +} + +.mobile-close-btn { + display: none; +} + .center { position: relative; margin: 0 auto 0; @@ -741,7 +749,6 @@ footer table tr td:first-child { .contentCells { display: block; - border-bottom: 1px solid #EFEFEF; font-family: 'Open Sans', sans-serif; font-size: 16px; padding: 4px; @@ -973,3 +980,103 @@ html { top: 50%; transform: translate(-50%, -50%); } + +.tableRow td:last-child { + display: none; +} + +#mobileContextMenu { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(51, 51, 51, 0.3); + display: flex; + justify-content: center; + align-items: flex-end; + z-index: 100; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0s linear 0.4s; +} + +#mobileContextMenu.active { + visibility: visible; + opacity: 1; + transition: opacity 0.3s ease; +} + +#mobileContextMenu .context-body { + width: 100%; + max-height: 100%; + transform: translateY(100%); + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: none; +} + +#mobileContextMenu.active .context-body { + transform: translateY(0); +} + +#mobileContextMenu table { + background-color: white; + width: 100%; + margin-top: 150px; + padding-bottom: 96px; +} + +#mobileContextMenu thead { + padding: 12px 16px 0; + height: 48px; + position: sticky; + top: -1px; + display: flex; + align-items: center; + background-color: white; +} + +#mobileContextMenu thead:not(.is-pinned)::after { + content: ''; + position: absolute; + left: 16px; + right: 16px; + bottom: 0px; + height: 1px; + background: #e2e2e2; +} + +#mobileContextMenu thead.is-pinned { + box-shadow: 0px 4px 6px 0px #CCCCCC4D; + transition: all 0.4s ease-out; +} + +#mobileContextMenu tbody { + padding: 0 16px; + display: block +} + +#mobileContextMenu tr { + display: block; + padding: 12px; +} + +.context-section { + padding: 24px 0 6px !important; + font-size: 13px; + font-weight: 600; + color: #808080; +} + +#mobileContextMenu a:not(.stored-edit) { + display: flex; + flex-direction: row; + align-items: center; + text-decoration: none; +} + +#mobileContextMenu img { + margin-right: 8px; +} \ No newline at end of file diff --git a/web/documentserver-example/php-laravel/public/css/forgotten.css b/web/documentserver-example/php-laravel/public/css/forgotten.css index cd6a53d2..103b7533 100644 --- a/web/documentserver-example/php-laravel/public/css/forgotten.css +++ b/web/documentserver-example/php-laravel/public/css/forgotten.css @@ -49,8 +49,8 @@ .tableHeader td:last-child, .tableRow td:last-child { width: 10%; - text-align: center; - padding: 0 !important; + text-align: right; + display: revert; } .tableHeader { @@ -79,6 +79,11 @@ menu.links { .scroll-table-body { overflow-y: auto; + width: 100%; +} + +.scroll-table-body td { + padding: 0 !important; } .stored-list { diff --git a/web/documentserver-example/php-laravel/public/css/media.css b/web/documentserver-example/php-laravel/public/css/media.css index 1872b874..98db0b1c 100755 --- a/web/documentserver-example/php-laravel/public/css/media.css +++ b/web/documentserver-example/php-laravel/public/css/media.css @@ -273,8 +273,8 @@ } .tableHeaderCellAction{ - width: 18%; - padding-right: 54px; + width: 19%; + padding-right: 58px; } .tableHeaderCellDownload { @@ -454,60 +454,6 @@ padding: 16px 0 6px; } - .tableRow, - menu.links { - width: 40%; - } - - .tableRow td { - border: none; - } - - .firstContentCellShift { - border: none; - flex-basis: 10%; - } - - .downloadContentCellShift { - max-width: 7%; - margin-right: 24px; - margin-left: 0; - } - - .contentCells-icon { - width: 11%; - } - - .tableRow td:last-child { - width: 7%; - padding-right: 0px; - border: none; - } - - .contentCells-shift { - padding-right: 0px; - } - - .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%; - } /* Mobile Upload*/ .blockUI.blockMsg.blockPage.ui-dialog.ui-widget.ui-corner-all.ui-widget-content.ui-draggable { width: 344px !important; @@ -582,104 +528,7 @@ } } -@media (max-width: 560px) and (min-width: 510px) { - .contentCells-icon { - width: 11%; - } - - .downloadContentCellShift { - padding-right: 16px; - max-width: 4%; - } -} - -@media (max-width: 510px) and (min-width: 470px) { - .tableRow, - menu.links { - width: 35%; - } - - .tableRow td:first-child{ - width: 83%; - } - .contentCells-icon { - width: 10%; - } - - .downloadContentCellShift { - max-width: 6%; - padding-right: 6px; - } - - .firstContentCellShift { - flex-basis: 9%; - } - - .tableRow td:last-child { - padding-right: 28px; - } -} - -@media (max-width: 470px) and (min-width: 420px) { - .tableRow, - menu.links { - width: 30%; - } - .tableRow td:first-child{ - width: 85%; - } - .contentCells-icon { - width: 10%; - } - - .downloadContentCellShift { - max-width: 3%; - padding-right: 0px; - padding-left: 0; - } - - .firstContentCellShift { - margin-left: 2px; - flex-basis: 14%; - } - - .tableRow td:last-child { - width: 5%; - padding-right: 63px; - } - .firstContentCellViewers{ - padding-right: 2px; - width: 12%; - } - .contentCellsEmpty{ - display: none; - } -} - @media (max-width: 420px) { - .tableRow, - menu.links { - 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; @@ -690,10 +539,6 @@ padding-right: 5px; margin: 0; } - .firstContentCellViewers{ - padding-right: 2px; - width: 11%; - } } @media (max-width: 1160px) { @@ -702,11 +547,6 @@ } } -@media (min-width: 593px) { - .contentCellsEmpty { - display: none; - } -} @media (max-width: 769px) and (min-width: 715px){ .tableRow, .storedHeader, @@ -718,11 +558,6 @@ padding-right: 26px; } } -@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%; @@ -763,3 +598,253 @@ max-width: none; } } + +@media (max-width: 592px) { + 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; + align-items: start; + width: 100%; + margin: 0; + position: fixed; + left: 0; + height: calc(100% - 44px); + z-index: 101; + } + + .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 { + width: 100%; + top: 36px; + height: calc(100% - 34px); + } + + .scroll-table-body tr:first-child { + padding-top: 0; + } + + .tableRow { + border-bottom: 1px solid #e5e5e5; + padding: 12px 0; + width: 100%; + flex-wrap: nowrap; + } + + .tableRow td:first-child { + width: 100%; + } + + .tableRow td:last-child { + display: block; + width: 24px; + height: 24px; + } + + .contentCells { + padding: 0; + font-size: 13px; + } + + .contentCells-icon { + width: auto; + display: none; + } + + .stored-edit { + height: 12px; + padding: 6px 0 6px 34px; + } + + .stored-edit span { + font-size: 13px; + } + + .header-list { + font-size: 16px; + } + + .firstContentCellViewers { + margin: 0; + } + + .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; + } + + .upload-panel { + padding: 12px 0; + } + + .user-block-table td select { + height: 48px; + padding-left: 12px; + border-radius: 6px; + border-color: #aaaaaa; + } + + .user-block-table tr:last-child { + display: none; + } +} \ No newline at end of file diff --git a/web/documentserver-example/php-laravel/public/images/mobile-logo.svg b/web/documentserver-example/php-laravel/public/images/mobile-logo.svg new file mode 100644 index 00000000..e8b8cb5d --- /dev/null +++ b/web/documentserver-example/php-laravel/public/images/mobile-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/documentserver-example/php-laravel/public/images/mobile-menu.svg b/web/documentserver-example/php-laravel/public/images/mobile-menu.svg new file mode 100644 index 00000000..89290a60 --- /dev/null +++ b/web/documentserver-example/php-laravel/public/images/mobile-menu.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/documentserver-example/php-laravel/public/images/open-context.svg b/web/documentserver-example/php-laravel/public/images/open-context.svg new file mode 100644 index 00000000..da089869 --- /dev/null +++ b/web/documentserver-example/php-laravel/public/images/open-context.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/documentserver-example/php-laravel/resources/js/app.js b/web/documentserver-example/php-laravel/resources/js/app.js index 09fe46f3..de916129 100644 --- a/web/documentserver-example/php-laravel/resources/js/app.js +++ b/web/documentserver-example/php-laravel/resources/js/app.js @@ -578,3 +578,91 @@ function getUrlVars() { } return vars; }; + +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 toggleContextMenu(event) { + let contextMenu = document.querySelector("#mobileContextMenu"); + let target = event.currentTarget.parentNode.parentNode.cloneNode(true); + + const closeContextMenu = () => { + contextMenu.classList.remove("active"); + } + if (contextMenu.classList.contains("active") || !target.classList.contains("tableRow")) { + if (event.target.id == "mobileContextMenuBody") closeContextMenu(); + return; + } + + let contextBody = document.querySelector("#mobileContextMenuBody"); + contextBody.innerHTML = ""; + + let startY = 0; + let startScroll = 0; + contextBody.addEventListener('touchstart', (e) => { + startY = e.touches[0].clientY; + startScroll = contextBody.scrollTop; + }); + contextBody.addEventListener('touchmove', (e) => { + const currentY = e.touches[0].clientY; + const diff = currentY - startY; + + if (diff > 10 && (contextBody.scrollTop === 0 || contextBody.scrollTop === startScroll)) { + closeContextMenu(); + } + }); + + let thead = document.createElement("thead"); + thead.appendChild(target.children[0]); + const observer = new IntersectionObserver( + ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1), + { threshold: [1] } + ); + observer.observe(thead); + + let tbody = document.createElement("tbody"); + for (let td of Array.from(target.children).slice(0, -1)){ + if (td.getAttribute("data-section")){ + let section = document.createElement("tr"); + section.innerText = td.getAttribute("data-section"); + section.classList.add("context-section"); + tbody.appendChild(section); + } + + if (td.children.length == 0) continue; + + let action = document.createElement("div"); + action.innerText = td.children[0].children[0].getAttribute("title"); + td.children[0].appendChild(action); + td.children[0].onclick = () => { + setTimeout(() => window.location.reload(), 0); + } + td.style.display = "block"; + td.classList.remove("downloadContentCellShift"); + td.classList.remove("firstContentCellViewers"); + + let tr = document.createElement("tr"); + tr.appendChild(td); + tbody.appendChild(tr); + } + + let table = document.createElement("table"); + table.appendChild(thead); + table.appendChild(tbody); + + contextBody.appendChild(table); + contextMenu.classList.add("active"); +} + +window.toggleSidePanel = toggleSidePanel; +window.toggleContextMenu = toggleContextMenu; \ No newline at end of file diff --git a/web/documentserver-example/php-laravel/resources/views/index.blade.php b/web/documentserver-example/php-laravel/resources/views/index.blade.php index f6aadd67..7ee08448 100644 --- a/web/documentserver-example/php-laravel/resources/views/index.blade.php +++ b/web/documentserver-example/php-laravel/resources/views/index.blade.php @@ -41,11 +41,23 @@
-
+
ONLYOFFICE
+ +
  • + + ONLYOFFICE + +
    • +
  • + + ONLYOFFICE + +
    • +
    @@ -118,6 +130,9 @@
    +
    @@ -175,17 +190,18 @@ @if ($file['format']->isEditable()) - + - Open in editor for full size screens + Open for full size screens - Open in editor for mobile devices + Open for mobile devices @else + @endif @@ -193,7 +209,7 @@ @if (!$file['format']->isPDF()) - Open in editor for comment + Open for comment @else @@ -204,12 +220,12 @@ @if ($file['format']->isFillable()) - Open in editor for filling in forms + Open for filling in forms - Open in editor for filling in forms for mobile devices + Open for filling in forms for mobile devices @else @@ -218,13 +234,13 @@ @if ($file['format']->isWord()) - Open in editor for review + Open for review @elseif ($file['format']->isCell()) - Open in editor without access to change the filter + Open without access to change the filter @else @@ -235,7 +251,7 @@ @if ($file['format']->isWord()) - Open in editor without content control modification + Open without content control modification @else @@ -243,14 +259,14 @@ @endif @endif - + - Open in viewer for full size screens + Open for full size screens - Open in viewer for mobile devices + Open for mobile devices @@ -260,13 +276,13 @@ @if ($file['format']->getType() != null) - + Convert @else - + @endif @@ -277,6 +293,11 @@ Delete + + + Open context menu + + @endforeach @@ -390,7 +411,7 @@
    EDIT
    CANCEL
    - form> + @@ -417,6 +438,11 @@
    +
    +
    +
    +
    +