Skip to content
This repository has been archived by the owner on Jan 3, 2023. It is now read-only.

Commit

Permalink
Add fold mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShirasawaSama
ShirasawaSama committed Apr 13, 2020
1 parent 7d23f10 commit a08005a
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 141 deletions.
256 changes: 155 additions & 101 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,114 +13,168 @@
<div class="blocks" id="blocks0"></div>
<div class="blocks" id="blocks1"></div>
<div class="blocks" id="blocks2"></div>
<button id="go-left">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M352 112h32v32h-32v-32z" />
<path d="M320 144h32v32h-32v-32z" />
<path d="M288 176h32v32h-32v-32z" />
<path d="M256 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M256 272h32v32h-32v-32z" />
<path d="M288 304h32v32h-32v-32z" />
<path d="M320 336h32v32h-32v-32z" />
<path d="M352 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M384 112h32v32h-32v-32z" />
<path d="M352 144h32v32h-32v-32z" />
<path d="M320 176h32v32h-32v-32z" />
<path d="M288 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M288 272h32v32h-32v-32z" />
<path d="M320 304h32v32h-32v-32z" />
<path d="M352 336h32v32h-32v-32z" />
<path d="M384 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="go-right">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M96 112h32v32h-32v-32z" />
<path d="M128 144h32v32h-32v-32z" />
<path d="M160 176h32v32h-32v-32z" />
<path d="M192 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M192 272h32v32h-32v-32z" />
<path d="M160 304h32v32h-32v-32z" />
<path d="M128 336h32v32h-32v-32z" />
<path d="M96 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M128 112h32v32h-32v-32z" />
<path d="M160 144h32v32h-32v-32z" />
<path d="M192 176h32v32h-32v-32z" />
<path d="M224 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M224 272h32v32h-32v-32z" />
<path d="M192 304h32v32h-32v-32z" />
<path d="M160 336h32v32h-32v-32z" />
<path d="M128 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="close">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M96 112h32v32h-32v-32z" />
<path d="M352 112h32v32h-32v-32z" />
<path d="M128 144h32v32h-32v-32z" />
<path d="M320 144h32v32h-32v-32z" />
<path d="M160 176h32v32h-32v-32z" />
<path d="M288 176h32v32h-32v-32z" />
<path d="M192 208h32v32h-32v-32z" />
<path d="M256 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M192 272h32v32h-32v-32z" />
<path d="M256 272h32v32h-32v-32z" />
<path d="M160 304h32v32h-32v-32z" />
<path d="M288 304h32v32h-32v-32z" />
<path d="M128 336h32v32h-32v-32z" />
<path d="M320 336h32v32h-32v-32z" />
<path d="M96 368h32v32h-32v-32z" />
<path d="M352 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M128 112h32v32h-32v-32z" />
<path d="M384 112h32v32h-32v-32z" />
<path d="M160 144h32v32h-32v-32z" />
<path d="M352 144h32v32h-32v-32z" />
<path d="M192 176h32v32h-32v-32z" />
<path d="M320 176h32v32h-32v-32z" />
<path d="M224 208h32v32h-32v-32z" />
<path d="M288 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M224 272h32v32h-32v-32z" />
<path d="M288 272h32v32h-32v-32z" />
<path d="M192 304h32v32h-32v-32z" />
<path d="M320 304h32v32h-32v-32z" />
<path d="M160 336h32v32h-32v-32z" />
<path d="M352 336h32v32h-32v-32z" />
<path d="M128 368h32v32h-32v-32z" />
<path d="M384 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="hide">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 512 512">
<path fill="#e0e0e0" d="M96 240h288v32h-288v-32z"></path>
<path fill="#889597" d="M384 240h32v32h-32v-32z"></path>
</svg>
</button>
<div id="top-buttons">
<button id="go-left">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M352 112h32v32h-32v-32z" />
<path d="M320 144h32v32h-32v-32z" />
<path d="M288 176h32v32h-32v-32z" />
<path d="M256 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M256 272h32v32h-32v-32z" />
<path d="M288 304h32v32h-32v-32z" />
<path d="M320 336h32v32h-32v-32z" />
<path d="M352 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M384 112h32v32h-32v-32z" />
<path d="M352 144h32v32h-32v-32z" />
<path d="M320 176h32v32h-32v-32z" />
<path d="M288 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M288 272h32v32h-32v-32z" />
<path d="M320 304h32v32h-32v-32z" />
<path d="M352 336h32v32h-32v-32z" />
<path d="M384 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="go-right">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M96 112h32v32h-32v-32z" />
<path d="M128 144h32v32h-32v-32z" />
<path d="M160 176h32v32h-32v-32z" />
<path d="M192 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M192 272h32v32h-32v-32z" />
<path d="M160 304h32v32h-32v-32z" />
<path d="M128 336h32v32h-32v-32z" />
<path d="M96 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M128 112h32v32h-32v-32z" />
<path d="M160 144h32v32h-32v-32z" />
<path d="M192 176h32v32h-32v-32z" />
<path d="M224 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M224 272h32v32h-32v-32z" />
<path d="M192 304h32v32h-32v-32z" />
<path d="M160 336h32v32h-32v-32z" />
<path d="M128 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="shrink">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M352 112h32v32h-32v-32z" />
<path d="M320 144h32v32h-32v-32z" />
<path d="M288 176h32v32h-32v-32z" />
<path d="M256 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M256 272h32v32h-32v-32z" />
<path d="M288 304h32v32h-32v-32z" />
<path d="M320 336h32v32h-32v-32z" />
<path d="M352 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M384 112h32v32h-32v-32z" />
<path d="M352 144h32v32h-32v-32z" />
<path d="M320 176h32v32h-32v-32z" />
<path d="M288 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M288 272h32v32h-32v-32z" />
<path d="M320 304h32v32h-32v-32z" />
<path d="M352 336h32v32h-32v-32z" />
<path d="M384 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="spread">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M96 112h32v32h-32v-32z" />
<path d="M128 144h32v32h-32v-32z" />
<path d="M160 176h32v32h-32v-32z" />
<path d="M192 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M192 272h32v32h-32v-32z" />
<path d="M160 304h32v32h-32v-32z" />
<path d="M128 336h32v32h-32v-32z" />
<path d="M96 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M128 112h32v32h-32v-32z" />
<path d="M160 144h32v32h-32v-32z" />
<path d="M192 176h32v32h-32v-32z" />
<path d="M224 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M224 272h32v32h-32v-32z" />
<path d="M192 304h32v32h-32v-32z" />
<path d="M160 336h32v32h-32v-32z" />
<path d="M128 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="close">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512">
<g data-sound="true" fill="#fdfcfb">
<path d="M96 112h32v32h-32v-32z" />
<path d="M352 112h32v32h-32v-32z" />
<path d="M128 144h32v32h-32v-32z" />
<path d="M320 144h32v32h-32v-32z" />
<path d="M160 176h32v32h-32v-32z" />
<path d="M288 176h32v32h-32v-32z" />
<path d="M192 208h32v32h-32v-32z" />
<path d="M256 208h32v32h-32v-32z" />
<path d="M224 240h32v32h-32v-32z" />
<path d="M192 272h32v32h-32v-32z" />
<path d="M256 272h32v32h-32v-32z" />
<path d="M160 304h32v32h-32v-32z" />
<path d="M288 304h32v32h-32v-32z" />
<path d="M128 336h32v32h-32v-32z" />
<path d="M320 336h32v32h-32v-32z" />
<path d="M96 368h32v32h-32v-32z" />
<path d="M352 368h32v32h-32v-32z" />
</g>
<g data-sound="true" fill="#889597">
<path d="M128 112h32v32h-32v-32z" />
<path d="M384 112h32v32h-32v-32z" />
<path d="M160 144h32v32h-32v-32z" />
<path d="M352 144h32v32h-32v-32z" />
<path d="M192 176h32v32h-32v-32z" />
<path d="M320 176h32v32h-32v-32z" />
<path d="M224 208h32v32h-32v-32z" />
<path d="M288 208h32v32h-32v-32z" />
<path d="M256 240h32v32h-32v-32z" />
<path d="M224 272h32v32h-32v-32z" />
<path d="M288 272h32v32h-32v-32z" />
<path d="M192 304h32v32h-32v-32z" />
<path d="M320 304h32v32h-32v-32z" />
<path d="M160 336h32v32h-32v-32z" />
<path d="M352 336h32v32h-32v-32z" />
<path d="M128 368h32v32h-32v-32z" />
<path d="M384 368h32v32h-32v-32z" />
</g>
</svg>
</button>
<button id="hide">
<svg data-sound="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 512 512">
<path fill="#e0e0e0" d="M96 240h288v32h-288v-32z"></path>
<path fill="#889597" d="M384 240h32v32h-32v-32z"></path>
</svg>
</button>
</div>
<main id="root"></main>
<style>.hide { display: none !important }</style>
<script>
(() => {
const blocks0 = document.getElementById('blocks0')
const blocks1 = document.getElementById('blocks1')
const blocks2 = document.getElementById('blocks2')
const count = window.innerWidth / 20 | 0
const count = 40 // window.innerWidth / 20 | 0
const colors2 = ['#7e512f', '#8c6a48', '#8b6428', '#885b3c', '#754b2e', '#c38a58', '#775237', '#775236',
'#905536', '#675432', '#735337', '#754b2e', '#975a35', '#70472f', '#8c6948', '#5f4939',
'#7e512f', '#8b6428', '#675d46', '#645634', '#6f6449']
Expand Down
4 changes: 2 additions & 2 deletions src/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const SideBar: React.FC = () => {
<motion.p className='name' key={name} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
{name}</motion.p>
</AnimatePresence>
<ul className='list'>
<ul className='list' id='sidebar-list'>
<li className={pathname === '/' ? 'active' : null}>
<Link to='/'><img src={homeIcon} alt='' /><span data-sound>{$('Home')}</span></Link>
</li>
Expand Down Expand Up @@ -134,7 +134,7 @@ const SideBar: React.FC = () => {
<a className='version' role='button' data-sound onClick={openVersionSwitch}>
{$('Version')}: <span data-sound>{versionName}</span>
</a>
<a className='version' role='button' data-sound style={{ margin: 0 }} onClick={openVersionSwitch}>
<a className='version' id='sidebar-switch' role='button' data-sound onClick={openVersionSwitch}>
[{$('Click here to switch versions')}]
</a>
<Profile onClose={() => setProfile(false)} open={openProfile} />
Expand Down
20 changes: 14 additions & 6 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body {
position: relative;
overflow: hidden;
top: 80px;
height: 516px;
height: calc(100% - 70px);
color: var(--text-color-0);
filter: drop-shadow(1px 4px 6px #00000077);
-webkit-app-region: drag;
Expand All @@ -38,19 +38,22 @@ a.link:hover, a[role='link']:hover { color: var(--link-hover-color); }
margin-top: 5px;
height: 30px;
will-change: width;
width: 800px;
transform: translateZ(0);
background-size: 100% 100%;
background: var(--top-color);
box-shadow: inset 0 0 20px -2px var(--top-shadow);
filter: var(--top-filter);
clip-path: polygon(80px 0, 0 100%, 100% 100%, calc(100% - 80px) 0);
clip-path: polygon(10% 0, 0 100%, 100% 100%, calc(100% - 10%) 0);
}
.top::after {
content: '';
width: 100%;
height: 100%;
}

#top-buttons { transition: opacity 1s }

.blocks {
z-index: 1060;
transition: width 3s;
Expand Down Expand Up @@ -129,23 +132,28 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
overflow-x: hidden !important;
}

#close, #hide, #go-left, #go-right {
#top-buttons button {
z-index: 2050;
background-color: unset;
border: none;
position: fixed;
margin-top: 3px;
top: 33px;
cursor: pointer;
transition: .3s;
}
#close:hover, #hide:hover, #go-left:hover, #go-right:hover { transform: scale(1.1) }
#top-buttons button:hover { transform: scale(1.1) }
#hide {
right: 54px;
margin-top: 1px;
margin-top: -2px;
}
#close { right: 22px }
#go-left { left: 24px }
#go-right { left: 52px }
#shrink { right: 90px }
#spread {
left: 32px;
display: none;
}

.rc-dialog-mask, #pl-drag {
left: 20px;
Expand Down
Loading

0 comments on commit a08005a

Please sign in to comment.