diff --git a/web/documentserver-example/csharp-mvc/Content/media.css b/web/documentserver-example/csharp-mvc/Content/media.css index 75504229..3f8f7f8a 100644 --- a/web/documentserver-example/csharp-mvc/Content/media.css +++ b/web/documentserver-example/csharp-mvc/Content/media.css @@ -48,7 +48,7 @@ .left-panel { margin-left: 48px; - width: 95%; + width: 20%; } } @@ -87,9 +87,12 @@ } @media (max-width: 1008px) { + #portal-info { + width: 65vw; + } + .left-panel { margin-left: 0; - width: 94%; } .main-panel { @@ -125,10 +128,6 @@ height: 80px; } - .left-panel { - width: 90%; - } - .main-panel { left: 0; padding: 48px 18px 24px; @@ -333,6 +332,9 @@ @media (max-width: 593px ) { + #portal-info { + width: 50vw; + } .file-upload{ width: 100%; } @@ -347,15 +349,6 @@ top: 31px; } - .menu { - display: flex; - } - - header .center > a { - position: absolute; - left: 30px; - } - footer table tr { justify-content: center; } diff --git a/web/documentserver-example/csharp-mvc/Content/stylesheet.css b/web/documentserver-example/csharp-mvc/Content/stylesheet.css index e9a0c3cd..9ff33a0f 100644 --- a/web/documentserver-example/csharp-mvc/Content/stylesheet.css +++ b/web/documentserver-example/csharp-mvc/Content/stylesheet.css @@ -357,7 +357,7 @@ footer { color: #AAAAAA; height: 64px; width: 100%; - position: absolute; + position: relative; left: 0; bottom: 0; } @@ -595,29 +595,6 @@ footer table tr td:first-child { margin: -2px 5px; } -.tooltip { - background: #FFFFFF; - border-radius: 5px; - box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15); - color: #666666; - line-height: 160%; - max-width: 455px; - padding: 14px; - position: absolute; -} - -.tooltip ul { - margin: 0; -} - -.arrow { - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; - border-right: 8px solid #FFFFFF; - position: absolute; - transform: translate(-50%, -50%); -} - .user-block-table { height: 100%; padding-top: 14px; @@ -704,26 +681,6 @@ footer table tr td:first-child { letter-spacing: -0.02em; word-wrap: break-word; } -.menu { - cursor: pointer; - display: none; - flex-wrap: nowrap; - flex-direction: column; - justify-content: space-between; - top: 10px; - left: 12px; - position: absolute; - content: ""; - height: 26px; - width: 30px; -} - - .menu span { - content: ""; - width: 26px; - height: 3px; - background: rgb(194, 194, 194); - } html { overflow-x: hidden; @@ -762,3 +719,22 @@ html { margin-left: auto; } +.user-descr { + display: inline-table; + width: 30vw; + min-width: 200px; + max-width: 400px; +} + +.user-descr > b { + margin-left: 25px; +} + +#portal-info { + display: block; + width: 70vw; +} + +.portal-descr:nth-child(3) { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/web/documentserver-example/csharp-mvc/Scripts/jscript.js b/web/documentserver-example/csharp-mvc/Scripts/jscript.js index a39c37a0..ab94f6b0 100644 --- a/web/documentserver-example/csharp-mvc/Scripts/jscript.js +++ b/web/documentserver-example/csharp-mvc/Scripts/jscript.js @@ -278,30 +278,58 @@ if (typeof jQuery != "undefined") { }); }); - jq(".info").mouseover(function (event) { - var target = event.target; - var id = target.dataset.id ? target.dataset.id : target.id; - var tooltip = target.dataset.tooltip; - - jq("
" + tooltip + "
").appendTo("body"); - - var left = jq("#" + id).offset().left + jq("#" + id).outerWidth(); - - var topElement = jq("#" + id).offset().top; - var halfHeightElement = jq("#" + id).outerHeight() / 2; - - var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement); - var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2; - if (heightToFooter > (halfHeightTooltip + 10)) { - var top = topElement + halfHeightElement - halfHeightTooltip; - } else { - var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10; + function showUserTooltip (isMobile) { + if ( jq("div#portal-info").is(":hidden") ) { + jq("div#portal-info").show(); + jq("div.stored-list").hide(); + } else if (isMobile && jq("div#portal-info").is(":visible")) { + jq("div#portal-info").hide(); + jq("div.stored-list").show(); } + }; - jq("div.tooltip").css({ "top": top, "left": left + 10 }); - jq("div.arrow").css({ "top": topElement + halfHeightElement, "left": left + 6 }); - }).mouseout(function () { - jq("div.tooltip").remove(); - jq("div.arrow").remove(); - }); + var fileList = jq("tr.tableRow"); + if (fileList.length > 0) { + console.log(jq("div#portal-info").is(":visible")); + jq("div#portal-info").hide(); + } + + var mouseIsOverTooltip = false; + var hideTooltipTimeout = null; + if (/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i + .test(navigator.userAgent)) { + if (fileList.length > 0) { + if (hideTooltipTimeout != null) { + clearTimeout(hideTooltipTimeout); + } + jq(".info").on("touchend", function () { + showUserTooltip(true); + }); + } + } else { + jq(".info").mouseover(function (event) { + if (fileList.length > 0) { + if (hideTooltipTimeout != null) { + clearTimeout(hideTooltipTimeout); + } + showUserTooltip(false); + + jq("div#portal-info").mouseenter(function () { + mouseIsOverTooltip = true; + }).mouseleave(function () { + mouseIsOverTooltip = false; + jq("div.stored-list").show(); + jq("div#portal-info").hide(); + }) + } + }).mouseleave(function () { + hideTooltipTimeout = setTimeout(function () { + if (mouseIsOverTooltip == false && fileList.length > 0) { + jq("div.stored-list").show(); + jq("div#portal-info").hide(); + } + }, 500); + }); + } +} } \ No newline at end of file diff --git a/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx b/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx index 3355fc83..4611c57d 100644 --- a/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx +++ b/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx @@ -82,31 +82,18 @@ Username - + - <% foreach (User user in Users.getAllUsers()) - { %> - - <% } %> - + <% } %> + - Language - + Language editors interface