feature(csharp): add navbar

This commit is contained in:
Serik Ibragimov
2024-04-17 13:29:38 +05:00
parent b1167516d4
commit 8be3cfd66a
5 changed files with 80 additions and 10 deletions

View File

@ -0,0 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 17V11H12V17H17V9H20L10 0L0 9H3V17H8Z" fill="#444444"/>
</svg>

After

Width:  |  Height:  |  Size: 173 B

View File

@ -79,7 +79,8 @@
margin-left: 0; margin-left: 0;
} }
.tableRow { .tableRow,
menu.links {
width: 90%; width: 90%;
} }
@ -119,7 +120,8 @@
.contentCells-icon{ .contentCells-icon{
width: 5%; width: 5%;
} }
.tableRow { .tableRow,
menu.links {
width: 55%; width: 55%;
} }
@ -175,7 +177,8 @@
} }
@media (max-width: 715px) { @media (max-width: 715px) {
.tableRow { .tableRow,
menu.links {
width: 45%; width: 45%;
} }
} }
@ -263,7 +266,8 @@
padding-left: 0; padding-left: 0;
} }
.tableRow { .tableRow,
menu.links {
width: 75%; width: 75%;
} }
@ -293,7 +297,8 @@
width: 580px; width: 580px;
} }
.tableRow { .tableRow,
menu.links {
width: 95%; width: 95%;
} }
@ -407,7 +412,8 @@
padding: 16px 0 6px; padding: 16px 0 6px;
} }
.tableRow { .tableRow,
menu.links {
width: 40%; width: 40%;
} }
@ -538,7 +544,8 @@
} }
@media (max-width: 510px) and (min-width: 470px) { @media (max-width: 510px) and (min-width: 470px) {
.tableRow { .tableRow,
menu.links {
width: 35%; width: 35%;
} }
@ -564,7 +571,8 @@
} }
@media (max-width: 470px) and (min-width: 420px) { @media (max-width: 470px) and (min-width: 420px) {
.tableRow { .tableRow,
menu.links {
width: 30%; width: 30%;
} }
.tableRow td:first-child{ .tableRow td:first-child{
@ -599,7 +607,8 @@
} }
@media (max-width: 420px) and (min-width: 320px) { @media (max-width: 420px) and (min-width: 320px) {
.tableRow { .tableRow,
menu.links {
width: 25%; width: 25%;
} }
@ -649,7 +658,8 @@
} }
} }
@media (max-width: 769px) and (min-width: 715px){ @media (max-width: 769px) and (min-width: 715px){
.tableRow{ .tableRow,
menu.links {
width: 50%; width: 50%;
} }
} }

View File

@ -298,6 +298,43 @@ label .checkbox {
border-bottom: 1px solid #D0D5DA; border-bottom: 1px solid #D0D5DA;
} }
.links {
display: flex;
padding: 0;
column-gap: 30px;
align-items: center;
list-style: none;
border-bottom: 1px solid #E2E2E2;
margin: 0;
margin-bottom: 24px;
}
.links li {
padding: 4px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.links li.active {
border-bottom: 2px solid #FF6F3D;
}
.links li.active a {
color: #FF6F3D;
}
.links li.active a img {
filter: invert(55%) sepia(67%) saturate(2727%) hue-rotate(335deg) brightness(104%) contrast(101%);
}
.links a {
display: inline-block;
padding: 2px 0;
line-height: 20px;
font-size: 13px;
text-decoration: none;
}
#mainProgress { #mainProgress {
color: #333333; color: #333333;
display: none; display: none;

View File

@ -128,6 +128,16 @@
<td class="section"> <td class="section">
<% var storedFiles = GetStoredFiles(); %> <% var storedFiles = GetStoredFiles(); %>
<div class="main-panel"> <div class="main-panel">
<menu class="links">
<li class="home-link active" >
<a href="./">
<img src="app_themes/images/home.svg" alt="Home"/>
</a>
</li>
<li>
<a href="/Forgotten.aspx">Forgotten files</a>
</li>
</menu>
<div id="portal-info" style="display: <%= storedFiles.Any() ? "none" : "table-cell" %>"> <div id="portal-info" style="display: <%= storedFiles.Any() ? "none" : "table-cell" %>">
<span class="portal-name">ONLYOFFICE Document Editors Welcome!</span> <span class="portal-name">ONLYOFFICE Document Editors Welcome!</span>
<span class="portal-descr"> <span class="portal-descr">

View File

@ -55,6 +55,16 @@
<td class="left-panel section"></td> <td class="left-panel section"></td>
<td class="section"> <td class="section">
<div class="main-panel"> <div class="main-panel">
<menu class="links">
<li class="home-link" >
<a href="./">
<img src="app_themes/images/home.svg" alt="Home"/>
</a>
</li>
<li class="active">
<a href="/Forgotten.aspx">Forgotten files</a>
</li>
</menu>
<div class="stored-list"> <div class="stored-list">
<div class="storedHeader"> <div class="storedHeader">
<div class="storedHeaderText"> <div class="storedHeaderText">