mirror of
https://github.com/NoCrypt/migu.git
synced 2026-03-11 17:45:32 +00:00
sidebar
This commit is contained in:
ThaUnknown
parent
14d071ee40
commit
327940e3fe
7 changed files with 240 additions and 12 deletions
10
.prettierrc
Normal file
10
.prettierrc
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"useTabs": false,
|
||||
"jsxSingleQuote": true,
|
||||
"printWidth": 180,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"svelteBracketNewLine": false,
|
||||
"arrowParens": "avoid",
|
||||
"trailingComma": "none"
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ function createWindow () {
|
|||
mainWindow = new BrowserWindow({
|
||||
width: 1600,
|
||||
height: 900,
|
||||
backgroundColor: '#2e2c29',
|
||||
backgroundColor: '#191c20',
|
||||
autoHideMenuBar: true,
|
||||
experimentalFeatures: true,
|
||||
webPreferences: {
|
||||
|
|
|
|||
|
|
@ -4,17 +4,18 @@
|
|||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
<meta name="theme-color" content="#191c20">
|
||||
<title>Miru</title>
|
||||
|
||||
<link rel='icon' href='/favicon.ico'>
|
||||
<link href='/lib/halfmoon.css' rel='stylesheet'>
|
||||
<link href="/lib/Material-Icons.css" rel="stylesheet">
|
||||
|
||||
<script defer src='/lib/halfmoon.js'></script>
|
||||
<script defer type="module" src="/src/main.js"></script>
|
||||
<script src='/lib/halfmoon.js'></script>
|
||||
</head>
|
||||
|
||||
<body class='with-custom-webkit-scrollbars with-custom-css-scrollbars dark-mode bg-very-dark'>
|
||||
<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sidebar-shortcut-enabled="true">
|
||||
</body>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,56 @@
|
|||
<script>
|
||||
import Sidebar from './lib/Sidebar.svelte'
|
||||
// import anitomyscript from 'anitomyscript'
|
||||
// const WebTorrent = require('webtorrent')
|
||||
// const wt = new WebTorrent()
|
||||
// console.log(wt)
|
||||
// anitomyscript('[GJM] Irozuku Sekai no Ashita kara - 08 [F0C587E8].mkv').then(console.log)
|
||||
</script>
|
||||
|
||||
<div class="page-wrapper with-sidebar" data-sidebar-type="full-height overlayed-sm-and-down" data-sidebar-hidden="hidden">
|
||||
<div class="sticky-alerts" />
|
||||
<div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()" />
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--accent-color: #e5204c;
|
||||
--dm-link-text-color: var(--dm-muted-text-color) !important;
|
||||
--dm-link-text-color-hover: var(--dm-text-color) !important;
|
||||
--base-html-font-size: 50%;
|
||||
--base-html-font-size-1600: 62.5%;
|
||||
--base-html-font-size-1920: 70%;
|
||||
--tooltip-width: 17rem;
|
||||
--card-border-width: 0;
|
||||
--sidebar-border-width: 0;
|
||||
--input-border-width: 0;
|
||||
}
|
||||
:global(.pointer) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* sidebar patches */
|
||||
.page-wrapper.with-sidebar[data-sidebar-hidden] {
|
||||
--sidebar-width: var(--sidebar-minimised);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-wrapper.with-sidebar[data-sidebar-type~='overlayed-sm-and-down'] > :global(.content-wrapper) {
|
||||
left: var(--sidebar-minimised);
|
||||
width: calc(100% - var(--sidebar-minimised));
|
||||
}
|
||||
}
|
||||
|
||||
.page-wrapper.with-sidebar[data-sidebar-hidden] > :global(.content-wrapper) {
|
||||
left: var(--sidebar-width);
|
||||
width: calc(100% - var(--sidebar-width));
|
||||
}
|
||||
.page-wrapper.with-sidebar[data-sidebar-hidden] > :global(.sidebar) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.page-wrapper.with-sidebar[data-sidebar-hidden] :global(.text) {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,170 @@
|
|||
<script>
|
||||
$: links = [
|
||||
{
|
||||
click: halfmoon.toggleSidebar.bind(halfmoon),
|
||||
image: 'logo_cut.png',
|
||||
icon: 'menu',
|
||||
text: 'Open Menu'
|
||||
},
|
||||
{
|
||||
click: () => {},
|
||||
icon: 'home',
|
||||
text: 'Home Page'
|
||||
},
|
||||
{
|
||||
click: () => {},
|
||||
icon: 'schedule',
|
||||
text: 'Airing Schedule'
|
||||
},
|
||||
{
|
||||
click: () => {},
|
||||
icon: 'queue_music',
|
||||
text: 'Now Playing'
|
||||
},
|
||||
{
|
||||
click: () => {},
|
||||
icon: 'tune',
|
||||
text: 'Settings'
|
||||
},
|
||||
{
|
||||
click: () => {
|
||||
'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token'
|
||||
},
|
||||
icon: 'login',
|
||||
text: 'Login With AniList'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-menu h-full d-flex flex-column m-0 pb-5">
|
||||
{#each links as { click, icon, text, image }, i (i)}
|
||||
<div
|
||||
class="sidebar-link sidebar-link-with-icon pointer"
|
||||
class:brand={i === 0}
|
||||
data-toggle="tooltip"
|
||||
data-placement="right"
|
||||
data-title={text}
|
||||
on:click={click}
|
||||
class:mt-auto={i === links.length - 2}>
|
||||
<span class="text-nowrap d-flex align-items-center" class:justify-content-between={image}>
|
||||
{#if image}
|
||||
<img src={image} alt="logo" class="text" />
|
||||
<span class="material-icons menu">{icon}</span>
|
||||
{:else}
|
||||
<span class="material-icons">{icon}</span>
|
||||
<span class="text">{text}</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* sidebar */
|
||||
:root {
|
||||
--sidebar-minimised: 7rem;
|
||||
--sidebar-width: 22rem;
|
||||
}
|
||||
|
||||
.sidebar [data-toggle='tooltip']::before,
|
||||
.page-wrapper:not(.with-sidebar[data-sidebar-hidden]) .sidebar [data-toggle='tooltip']::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
opacity: 1;
|
||||
transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
margin-left: 1rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar-link > span {
|
||||
transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
color: #fff;
|
||||
border-radius: 0.3rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-link:not(.brand):hover > span {
|
||||
background: #fff;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
height: 5.5rem;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 2.2rem;
|
||||
min-width: 4rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:not(.brand) :global(img) {
|
||||
font-size: 2.2rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0.5rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
right: 1.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
margin-right: var(--sidebar-brand-image-margin-right);
|
||||
}
|
||||
|
||||
.brand {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
|
||||
will-change: width;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.nav-hidden > .sidebar {
|
||||
left: calc(-1 * var(--sidebar-width)) !important;
|
||||
}
|
||||
|
||||
.nav-hidden > .content-wrapper {
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
[data-toggle='tooltip']:not([data-target-breakpoint])::after,
|
||||
[data-toggle='tooltip']:not([data-target-breakpoint])::after {
|
||||
transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
font-weight: bold;
|
||||
box-shadow: var(--dm-shadow) !important;
|
||||
}
|
||||
|
||||
[data-toggle='tooltip']:not([data-target-breakpoint]):hover::after,
|
||||
[data-toggle='tooltip']:not([data-target-breakpoint]):focus::after {
|
||||
opacity: 1;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import path from 'path'
|
||||
import process from 'process'
|
||||
import { defineConfig } from 'vite'
|
||||
import builtinModules from 'builtin-modules'
|
||||
// import builtinModules from 'builtin-modules'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import commonjsExternals from 'vite-plugin-commonjs-externals'
|
||||
|
||||
const commonjsPackages = [
|
||||
'electron',
|
||||
'electron/main',
|
||||
'electron/common',
|
||||
'electron/renderer',
|
||||
'original-fs',
|
||||
'webtorrent',
|
||||
...builtinModules
|
||||
// 'electron',
|
||||
// 'electron/main',
|
||||
// 'electron/common',
|
||||
// 'electron/renderer',
|
||||
// 'original-fs',
|
||||
'webtorrent'
|
||||
// ...builtinModules
|
||||
]
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
|
|
|
|||
Loading…
Reference in a new issue