IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: People: added header loader

Browse Source
This commit is contained in:
Viktor Fomin 2020-11-12 13:31:19 +03:00
parent 97d9d58a29
commit 0bb00e39db
1 changed files with 104 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
products/ASC.People/Client/public/index.html
View File

@ -47,27 +47,15 @@
}
.temp-header-container {
-webkit-box-align: center;
align-items: center;
background-color: rgb(15, 64, 113);
display: flex;
z-index: 185;
width: calc(100vw - 64px);
display: grid;
grid-template-columns: 24px 168px 1fr 36px;
grid-template-rows: 1fr;
grid-column-gap: 16px;
width: calc(100vw - 16px);
height: 56px;
padding: 0 32px;
}
.temp-header-container .header-items-wrapper {
width: 960px;
}
.temp-header-container .temp-header-logo-wrapper {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.temp-header-container .temp-header-logo-icon {
width: 146px;
height: 24px;
position: relative;
padding: 4px 20px 0 30px;
cursor: pointer;
padding-right: 16px;
}
.temp-content-loader {
padding: 16px;
@ -85,6 +73,22 @@
display: none;
}
}
.burger-loader-svg{
width: 24px;
height: 24px;
padding-left: 16px;
}
.logo-loader-svg{
width: 168px;
height: 24px;
position: relative;
cursor: pointer;
padding-left: 16px;
}
.avatar-loader-svg{
width: 36px;
height: 36px;
}
</style>
<title>ONLYOFFICE</title>
</head>
@ -93,6 +97,77 @@
<div id="temp-content">
<header class="temp-header-container">
<div id="burger-loader-svg" class="burger-loader-svg">
<svg
role="img"
width="100%"
height="100%"
aria-labelledby="loading-aria0"
preserveAspectRatio="none"
>
<rect
rx="3"
ry="3"
width="24"
height="24"
style="fill: url('#fill0')"
></rect>
<defs>
<linearGradient id="fill0">
<stop offset="0.599964" stop-color="#fff" stop-opacity="0.25">
</stop>
</linearGradient>
</defs>
</svg>
</div>
<div id="logo-loader-svg" class="logo-loader-svg">
<svg
role="img"
width="100%"
height="100%"
aria-labelledby="loading-aria01"
preserveAspectRatio="none"
>
<rect
rx="3"
ry="3"
width="168"
height="24"
style="fill: url('#fill01')"
></rect>
<defs>
<linearGradient id="fill01">
<stop offset="0.599964" stop-color="#fff" stop-opacity="0.25">
</stop>
</linearGradient>
</defs>
</svg>
</div>
<div></div>
<div id="avatar-loader-svg" class="avatar-loader-svg">
<svg
role="img"
width="100%"
height="100%"
aria-labelledby="loading-aria01"
preserveAspectRatio="none"
>
<circle
cx="18"
cy="18"
r="18"
width="36"
height="36"
style="fill: url('#fill02')"
></circle>
<defs>
<linearGradient id="fill02">
<stop offset="0.599964" stop-color="#fff" stop-opacity="0.25">
</stop>
</linearGradient>
</defs>
</svg>
</div>
</header>
<div class="temp-content-loader">
@ -164,5 +239,16 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script>
if (localStorage.getItem("asc_auth_key")){
let el = document.getElementById("burger-loader-svg");
let el1 = document.getElementById("logo-loader-svg");
let el2 = document.getElementById("avatar-loader-svg");
el.style.display = "block";
el1.style.display = "block";
el2.style.display = "block";
}
</script>
</body>
</html>