Joplin/nim-theNewWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
bruno
2022-07-31 16:45:47 -04:00
commit 382b315e96
13 changed files with 1407 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
Executable
+316
View File
File diff suppressed because one or more lines are too long
public/logo.html
Executable
+72
View File
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<svg class="svg-icon" viewBox="0 0 20 20">
<path
d="M17.237,3.056H2.93c-0.694,0-1.263,0.568-1.263,1.263v8.837c0,0.694,0.568,1.263,1.263,1.263h4.629v0.879c-0.015,0.086-0.183,0.306-0.273,0.423c-0.223,0.293-0.455,0.592-0.293,0.92c0.07,0.139,0.226,0.303,0.577,0.303h4.819c0.208,0,0.696,0,0.862-0.379c0.162-0.37-0.124-0.682-0.374-0.955c-0.089-0.097-0.231-0.252-0.268-0.328v-0.862h4.629c0.694,0,1.263-0.568,1.263-1.263V4.319C18.5,3.625,17.932,3.056,17.237,3.056 M8.053,16.102C8.232,15.862,8.4,15.597,8.4,15.309v-0.89h3.366v0.89c0,0.303,0.211,0.562,0.419,0.793H8.053z M17.658,13.156c0,0.228-0.193,0.421-0.421,0.421H2.93c-0.228,0-0.421-0.193-0.421-0.421v-1.263h15.149V13.156z M17.658,11.052H2.509V4.319c0-0.228,0.193-0.421,0.421-0.421h14.308c0.228,0,0.421,0.193,0.421,0.421V11.052z">
</path>
</svg>
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="menu-icon">
<g>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</g>
</svg>
<svg class="sidebar-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
<g>
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
</g>
</svg>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="489px" height="489.001px" viewBox="0 0 489 489.001" style="enable-background:new 0 0 489 489.001;"
xml:space="preserve">
<g>
<path d="M355.768,0H86.218C53.33,0,26.577,26.753,26.577,59.636v369.729c0,32.883,26.752,59.636,59.641,59.636h316.566
c32.889-0.001,59.641-26.754,59.641-59.637V109.16L355.768,0z M402.784,446.479H86.218c-9.437,0-17.119-7.678-17.119-17.113V59.636
c0-9.437,7.683-17.114,17.119-17.114H334.86v47.604c0,21.043,17.109,38.162,38.152,38.375l46.891,0.477v300.388
C419.903,438.801,412.219,446.479,402.784,446.479z" />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</body>
</html>
public/logo.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

public/script.js
Executable
+6
View File
@@ -0,0 +1,6 @@
const menuIconButton = document.querySelector("[data-menu-icon-btn]")
const sidebar = document.querySelector("[data-sidebar]")
menuIconButton.addEventListener("click", () => {
sidebar.classList.toggle("open")
})
public/styles.css
Executable
+253
View File
@@ -0,0 +1,253 @@
body {
margin: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--accent-color: #0053b8;
--lightest-gray: rgb(244, 244, 244);
--light-gray: rgb(144, 144, 144);
--medium-gray: rgb(96, 96, 96);
--dark-gray: rgb(13, 13, 13);
--header-height: 40px;
--animation-duration: 200ms;
--animation-timing-curve: ease-in-out;
--blue-joplin-color: #0053b8;
--light-blue-joplin-color: rgb(237, 241, 243);
}
.header {
display: flex;
align-items: center;
position: sticky;
top: 0;
background-color: white;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.4);
padding: 0 0.5rem;
height: var(--header-height);
}
.login {
font-size: large;
fill: var(--blue-joplin-color);
max-width: fit-content;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-icon-btn {
background: none;
border: none;
padding: 0;
}
.menu-icon {
width: 25px;
height: 25px;
fill: var(--medium-gray);
cursor: pointer;
}
.menu-icon:hover {
fill: var(--dark-gray);
}
.sidebar {
flex-shrink: 0;
overflow: hidden;
width: 75px;
border-right: 1px solid var(--light-gray);
display: flex;
flex-direction: column;
height: calc(100vh - var(--header-height));
padding-top: 1rem;
align-items: center;
justify-content: stretch;
transition: width var(--animation-duration) var(--animation-timing-curve);
position: sticky;
left: 0;
top: var(--header-height);
}
.sidebar .hidden-sidebar {
opacity: 0;
width: 0;
transition: opacity var(--animation-duration) var(--animation-timing-curve);
}
.sidebar.open .hidden-sidebar {
width: 100%;
height: auto;
opacity: 1;
}
.sidebar .top-sidebar {
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar .channel-logo {
display: block;
width: 30px;
height: 30px;
transition: var(--animation-duration) var(--animation-timing-curve);
}
.sidebar.open .channel-logo {
width: 90px;
height: 90px;
}
.sidebar .channel-logo > img {
width: 100%;
height: 100%;
}
.middle-sidebar {
overflow-y: auto;
overflow-x: hidden;
flex-grow: 1;
margin: 1rem 0;
}
.middle-sidebar,
.bottom-sidebar {
width: 100%;
}
.container {
display: flex;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* border: 5px solid #FFFF00; */
text-align: center;
}
.content {
margin: 1rem;
}
.sidebar-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
list-style: none;
}
.sidebar.open .sidebar-link {
justify-content: flex-start;
}
.sidebar-icon {
width: 25px;
height: 25px;
flex-shrink: 0;
fill: var(--blue-joplin-color);
}
.sidebar-list .hidden-sidebar {
margin-left: 1.5rem;
white-space: nowrap;
}
.sidebar-link {
display: flex;
width: 100%;
padding: 0.7rem 0;
color: var(--light-gray);
text-decoration: none;
align-items: center;
padding-left: 25px;
}
.sidebar-list-item {
position: relative;
width: 100%;
fill: var(--light-gray);
}
.sidebar-list-item.active {
fill: var(--accent-color);
background-color: var(--light-blue-joplin-color);
}
.sidebar-list-item:hover {
background-color: var(--light-blue-joplin-color);
}
.sidebar-list-item.active::before {
content: "";
background-color: var(--accent-color);
height: 100%;
left: 0;
width: 3px;
position: absolute;
}
.sidebar.open {
width: 200px;
}
.your-channel {
color: var(--dark-gray);
font-size: 0.75rem;
font-weight: bold;
margin-bottom: 0.15rem;
margin-top: 0.5rem;
}
.channel-name {
color: var(--medium-gray);
font-size: 0.75rem;
}
.sidebar .top-sidebar {
height: 30px;
transition: height var(--animation-duration) var(--animation-timing-curve);
}
.sidebar.open .top-sidebar {
height: 125px;
}
.sidebar .top-sidebar .hidden-sidebar {
text-align: center;
width: 100%;
}
/* .svg-icon {
width: 2em;
height: 2em;
}
.svg-icon:hover {
fill: var(--animation-duration);
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
} */