Beercss improvements
This commit is contained in:
WardPearce
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "Materialious",
|
||||
"version": "1.10.13",
|
||||
"version": "1.10.14",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "Materialious",
|
||||
"version": "1.10.13",
|
||||
"version": "1.10.14",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@capacitor-community/electron": "^5.0.0",
|
||||
|
||||
@@ -104,8 +104,8 @@ export class ElectronCapacitorApp {
|
||||
join(app.getAppPath(), 'assets', process.platform === 'win32' ? 'appIcon.ico' : 'appIcon.png')
|
||||
);
|
||||
this.mainWindowState = windowStateKeeper({
|
||||
defaultWidth: 1000,
|
||||
defaultHeight: 800
|
||||
defaultWidth: 1920,
|
||||
defaultHeight: 1080
|
||||
});
|
||||
// Setup preload script path and construct our main window.
|
||||
const preloadPath = join(app.getAppPath(), 'build', 'src', 'preload.js');
|
||||
|
||||
Generated
+6
-6
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "materialious",
|
||||
"version": "1.10.12",
|
||||
"version": "1.10.14",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "materialious",
|
||||
"version": "1.10.12",
|
||||
"version": "1.10.14",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@capacitor-community/electron": "^5.0.1",
|
||||
@@ -17,7 +17,7 @@
|
||||
"@capacitor/clipboard": "^7.0.0",
|
||||
"@capacitor/core": "^7.4.3",
|
||||
"@capacitor/screen-orientation": "^7.0.0",
|
||||
"beercss": "^3.8.0",
|
||||
"beercss": "^3.12.11",
|
||||
"bgutils-js": "^3.2.0",
|
||||
"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
|
||||
"fuse.js": "^7.0.0",
|
||||
@@ -4307,9 +4307,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/beercss": {
|
||||
"version": "3.10.8",
|
||||
"resolved": "https://registry.npmjs.org/beercss/-/beercss-3.10.8.tgz",
|
||||
"integrity": "sha512-LWwkkhF5F3VAD2z3pkDuWD540l/OUKdway9n+ZW+6naX+bKYPl9PKh/nD47/djYqYeH4jGu9QZcpk7p3Xv7YfQ==",
|
||||
"version": "3.12.11",
|
||||
"resolved": "https://registry.npmjs.org/beercss/-/beercss-3.12.11.tgz",
|
||||
"integrity": "sha512-9NQWL3kxSOb5RPWAV5BPVs64CS72F5Z4HgxusqD07Ho4asaTJB33/SkJBMclQeUQs7hFH2CJOgGgDnIsRk2RyQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"material-dynamic-colors": "^1.1.2"
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
"@capacitor/clipboard": "^7.0.0",
|
||||
"@capacitor/core": "^7.4.3",
|
||||
"@capacitor/screen-orientation": "^7.0.0",
|
||||
"beercss": "^3.8.0",
|
||||
"beercss": "^3.12.11",
|
||||
"bgutils-js": "^3.2.0",
|
||||
"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
|
||||
"fuse.js": "^7.0.0",
|
||||
@@ -70,4 +70,4 @@
|
||||
"svelte-persisted-store": "^0.12.0",
|
||||
"youtubei.js": "^15.1.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,9 +12,10 @@
|
||||
interface Props {
|
||||
comment: Comment;
|
||||
videoId: string;
|
||||
isSubComp?: boolean;
|
||||
}
|
||||
|
||||
let { comment, videoId }: Props = $props();
|
||||
let { comment, videoId, isSubComp = false }: Props = $props();
|
||||
|
||||
let replies: Comments | undefined = $state(undefined);
|
||||
|
||||
@@ -53,7 +54,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="comment">
|
||||
<article class="comment" class:border={!isSubComp}>
|
||||
{#if !$interfaceLowBandwidthMode}
|
||||
<div class="comment-header">
|
||||
{#if userPfp}
|
||||
@@ -95,17 +96,16 @@
|
||||
{#if replies}
|
||||
<div style="margin-left: 5em;">
|
||||
{#each replies.comments as reply}
|
||||
<CommentSelf comment={reply} {videoId} />
|
||||
<CommentSelf comment={reply} {videoId} isSubComp={true} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.comment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1em;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
|
||||
@@ -223,7 +223,7 @@
|
||||
{#each items as item, index}
|
||||
<ContentColumn>
|
||||
<article
|
||||
class="no-padding android-tv-item"
|
||||
class="no-padding android-tv-item border"
|
||||
class:android-tv-focused={$isAndroidTvStore}
|
||||
style="height: 100%;"
|
||||
id={extractUniqueId(item)}
|
||||
|
||||
@@ -34,9 +34,9 @@
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
class={classes}
|
||||
height="100%"
|
||||
width="70px"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="50.17 104.37 109.67 88.27"
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<dialog id="dialog-settings" class={dialogType}>
|
||||
<dialog id="dialog-settings" class={dialogType + ' surface-container'}>
|
||||
<nav style="margin-bottom: 1em;">
|
||||
<h4 class="max">{$_('layout.settings')}</h4>
|
||||
<button class="circle transparent" data-ui="#dialog-settings"><i>close</i></button>
|
||||
|
||||
@@ -245,7 +245,7 @@
|
||||
}
|
||||
|
||||
.sideways-root {
|
||||
height: 110px;
|
||||
height: 112px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@@ -30,13 +30,15 @@
|
||||
<div style="white-space: pre-line; overflow-wrap: break-word;">
|
||||
{@html description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="scroll">
|
||||
{#if video.keywords}
|
||||
{#each video.keywords as keyword}
|
||||
<a href={`/search/${encodeURIComponent(keyword)}`} class="chip">{keyword}</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</nav>
|
||||
<article class="border">
|
||||
<nav class="scroll">
|
||||
{#if video.keywords}
|
||||
{#each video.keywords as keyword}
|
||||
<a href={`/search/${encodeURIComponent(keyword)}`} class="chip">{keyword}</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</nav>
|
||||
</article>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
article {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.thumbnail-corner {
|
||||
padding: 0.1em 0.4em;
|
||||
}
|
||||
@@ -20,42 +24,18 @@ nav.bottom {
|
||||
}
|
||||
|
||||
main.root {
|
||||
padding-top: 7em !important;
|
||||
padding-bottom: 5em !important;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
nav.left {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding-top: calc(var(--safe-area-inset-top) + 1rem) !important;
|
||||
}
|
||||
|
||||
.root-not-tv {
|
||||
padding-left: 7em !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 1em !important;
|
||||
}
|
||||
|
||||
button.row {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: var(--on-surface) !important;
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button.row:hover {
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
menu.mobile {
|
||||
z-index: 9999 !important;
|
||||
|
||||
@@ -269,166 +269,154 @@
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
{#if !$isAndroidTvStore}
|
||||
<nav class="left m l small">
|
||||
<header></header>
|
||||
<div>
|
||||
{#if !$isAndroidTvStore}
|
||||
<nav class="left m l surface-container">
|
||||
<header
|
||||
role="presentation"
|
||||
onclick={() => goto($interfaceDefaultPage)}
|
||||
style="cursor: pointer;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<Logo />
|
||||
</header>
|
||||
{#each getPages() as navPage}
|
||||
{#if !navPage.requiresAuth || isLoggedIn}
|
||||
<a href={navPage.href} class:active={$page.url.href.endsWith(navPage.href)}
|
||||
><i>{navPage.icon}</i>
|
||||
<div>{navPage.name}</div>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
<nav class="top" id="top-content">
|
||||
{#if !mobileSearchShow}
|
||||
<button
|
||||
onclick={() => (mobileSearchShow = !mobileSearchShow)}
|
||||
class="transparent s circle large"
|
||||
>
|
||||
<i>search</i>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if Capacitor.getPlatform() === 'electron'}
|
||||
<nav class="no-space">
|
||||
<button onclick={() => window.history.back()} class="border left-round">
|
||||
<i>arrow_back</i>
|
||||
</button>
|
||||
<button onclick={() => window.history.forward()} class="border right-round">
|
||||
<i>arrow_forward</i>
|
||||
</button>
|
||||
</nav>
|
||||
{/if}
|
||||
|
||||
<div class="max m l"></div>
|
||||
|
||||
<div class="m l">
|
||||
<Search />
|
||||
</div>
|
||||
|
||||
{#if !mobileSearchShow}
|
||||
<div class="max"></div>
|
||||
{/if}
|
||||
|
||||
{#if mobileSearchShow}
|
||||
<div style="width: 100%;">
|
||||
<Search on:searchCancelled={() => (mobileSearchShow = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
{#if !Capacitor.isNativePlatform()}
|
||||
<button data-ui="#sync-party" class="circle large transparent">
|
||||
<i class:primary-text={$syncPartyPeerStore}>group</i>
|
||||
<div class="tooltip bottom">{$_('layout.syncParty')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
{#if isLoggedIn}
|
||||
<button class="circle large transparent" onclick={() => ui('#dialog-notifications')}
|
||||
><i>notifications</i>
|
||||
<div class="tooltip bottom">{$_('layout.notifications')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
<button class="circle large transparent" onclick={() => ui('#dialog-settings')}>
|
||||
<i>settings</i>
|
||||
<div class="tooltip bottom">{$_('layout.settings')}</div>
|
||||
</button>
|
||||
|
||||
{#if !isLoggedIn}
|
||||
<button onclick={login} class="circle large transparent">
|
||||
<i>login</i>
|
||||
<div class="tooltip bottom">{$_('layout.login')}</div>
|
||||
</button>
|
||||
{:else}
|
||||
<button onclick={logout} class="circle large transparent">
|
||||
<i>logout</i>
|
||||
<div class="tooltip bottom">{$_('layout.logout')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<nav class="bottom s">
|
||||
{#each getPages() as navPage}
|
||||
{#if !navPage.requiresAuth || isLoggedIn}
|
||||
<a
|
||||
class="round"
|
||||
href={navPage.href}
|
||||
class:active={$page.url.href.endsWith(navPage.href)}
|
||||
data-sveltekit-preload-data="off"
|
||||
><i>{navPage.icon}</i>
|
||||
<div>{navPage.name}</div>
|
||||
<span style="font-size: .8em;">{navPage.name}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
|
||||
<nav class="top" id="top-content">
|
||||
{#if !mobileSearchShow}
|
||||
<button
|
||||
onclick={() => (mobileSearchShow = !mobileSearchShow)}
|
||||
class="transparent s circle large"
|
||||
>
|
||||
<i>search</i>
|
||||
</button>
|
||||
{/if}
|
||||
<Settings />
|
||||
|
||||
{#if Capacitor.getPlatform() === 'electron'}
|
||||
<nav class="no-space">
|
||||
<button onclick={() => window.history.back()} class="border left-round">
|
||||
<i>arrow_back</i>
|
||||
</button>
|
||||
<button onclick={() => window.history.forward()} class="border right-round">
|
||||
<i>arrow_forward</i>
|
||||
</button>
|
||||
<dialog class="right" id="dialog-notifications">
|
||||
<nav>
|
||||
<h5 class="max">{$_('layout.notifications')}</h5>
|
||||
<button class="circle transparent" data-ui="#dialog-notifications"><i>close</i></button>
|
||||
</nav>
|
||||
{/if}
|
||||
|
||||
<nav
|
||||
role="presentation"
|
||||
onclick={() => goto($interfaceDefaultPage)}
|
||||
style="cursor: pointer;"
|
||||
class="m l"
|
||||
tabindex="-1"
|
||||
>
|
||||
<Logo />
|
||||
<h6 class="l">Materialious</h6>
|
||||
</nav>
|
||||
|
||||
<div class="max m l"></div>
|
||||
|
||||
<div class="m l">
|
||||
<Search />
|
||||
</div>
|
||||
|
||||
{#if !mobileSearchShow}
|
||||
<div class="max"></div>
|
||||
{/if}
|
||||
|
||||
{#if mobileSearchShow}
|
||||
<div style="width: 100%;">
|
||||
<Search on:searchCancelled={() => (mobileSearchShow = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
{#if !Capacitor.isNativePlatform()}
|
||||
<button data-ui="#sync-party" class="circle large transparent">
|
||||
<i class:primary-text={$syncPartyPeerStore}>group</i>
|
||||
<div class="tooltip bottom">{$_('layout.syncParty')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
{#if isLoggedIn}
|
||||
<button class="circle large transparent" onclick={() => ui('#dialog-notifications')}
|
||||
><i>notifications</i>
|
||||
<div class="tooltip bottom">{$_('layout.notifications')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
<button class="circle large transparent" onclick={() => ui('#dialog-settings')}>
|
||||
<i>settings</i>
|
||||
<div class="tooltip bottom">{$_('layout.settings')}</div>
|
||||
</button>
|
||||
|
||||
{#if !isLoggedIn}
|
||||
<button onclick={login} class="circle large transparent">
|
||||
<i>login</i>
|
||||
<div class="tooltip bottom">{$_('layout.login')}</div>
|
||||
</button>
|
||||
{#if notifications.length === 0}
|
||||
<p>{$_('layout.noNewNotifications')}</p>
|
||||
{:else}
|
||||
<button onclick={logout} class="circle large transparent">
|
||||
<i>logout</i>
|
||||
<div class="tooltip bottom">{$_('layout.logout')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<nav class="bottom s">
|
||||
{#each getPages() as navPage}
|
||||
{#if !navPage.requiresAuth || isLoggedIn}
|
||||
<a
|
||||
class="round"
|
||||
href={navPage.href}
|
||||
class:active={$page.url.href.endsWith(navPage.href)}
|
||||
data-sveltekit-preload-data="off"
|
||||
><i>{navPage.icon}</i>
|
||||
<span style="font-size: .8em;">{navPage.name}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<Settings />
|
||||
|
||||
<dialog class="right" id="dialog-notifications">
|
||||
<nav>
|
||||
<h5 class="max">{$_('layout.notifications')}</h5>
|
||||
<button class="circle transparent" data-ui="#dialog-notifications"><i>close</i></button>
|
||||
</nav>
|
||||
{#if notifications.length === 0}
|
||||
<p>{$_('layout.noNewNotifications')}</p>
|
||||
{:else}
|
||||
{#each notifications as notification}
|
||||
<article class="no-padding">
|
||||
<Thumbnail video={notification}></Thumbnail>
|
||||
</article>
|
||||
{/each}
|
||||
{/if}
|
||||
</dialog>
|
||||
|
||||
<main
|
||||
id="main-content"
|
||||
class="responsive max root"
|
||||
tabindex="0"
|
||||
role="region"
|
||||
class:root-not-tv={!$isAndroidTvStore}
|
||||
>
|
||||
{#if $isAndroidTvStore}
|
||||
<div class="tabs">
|
||||
{#each getPages() as navPage}
|
||||
{#if !navPage.requiresAuth || isLoggedIn}
|
||||
<a
|
||||
href={navPage.href}
|
||||
class:active={$page.url.href.endsWith(navPage.href)}
|
||||
class="active"
|
||||
data-sveltekit-preload-data="off"
|
||||
>
|
||||
<i>{navPage.icon}</i>
|
||||
<span>{navPage.name}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#each notifications as notification}
|
||||
<article class="no-padding border">
|
||||
<Thumbnail video={notification}></Thumbnail>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $navigating}
|
||||
<PageLoading />
|
||||
{:else}
|
||||
{@render children?.()}
|
||||
{/if}
|
||||
{/if}
|
||||
</dialog>
|
||||
|
||||
<SyncParty />
|
||||
</main>
|
||||
<main id="main-content" class="responsive max root" tabindex="0" role="region">
|
||||
{#if $isAndroidTvStore}
|
||||
<div class="tabs">
|
||||
{#each getPages() as navPage}
|
||||
{#if !navPage.requiresAuth || isLoggedIn}
|
||||
<a
|
||||
href={navPage.href}
|
||||
class:active={$page.url.href.endsWith(navPage.href)}
|
||||
class="active"
|
||||
data-sveltekit-preload-data="off"
|
||||
>
|
||||
<i>{navPage.icon}</i>
|
||||
<span>{navPage.name}</span>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $navigating}
|
||||
<PageLoading />
|
||||
{:else}
|
||||
{@render children?.()}
|
||||
{/if}
|
||||
|
||||
<SyncParty />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<dialog class="modal" id="tv-login">
|
||||
<h5>{$_('loginRequired')}</h5>
|
||||
@@ -456,9 +444,3 @@
|
||||
</nav>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
nav.left a {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,14 +22,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space"></div>
|
||||
<nav class="right-align">
|
||||
<a class="button" href="/subscriptions/manage">
|
||||
<i>subscriptions</i>
|
||||
<span>{$_('subscriptions.manageSubscriptions')}</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<ItemsList items={videos ?? []} />
|
||||
|
||||
<InfiniteLoading on:infinite={loadMore} />
|
||||
|
||||
@@ -303,7 +303,7 @@
|
||||
clearTimeout(pauseTimeout);
|
||||
}
|
||||
pauseTimeout = setTimeout(() => {
|
||||
// player.pause();
|
||||
playerElement.pause();
|
||||
pauseTimerSeconds = 0;
|
||||
clearTimeout(pauseTimeout);
|
||||
}, pauseTimerSeconds * 1000);
|
||||
@@ -313,11 +313,9 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{data.video.title} | Materialious</title>
|
||||
<title>{data.video.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="space"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class={`s12 m12 l${theatreMode ? '12' : '9'}`}>
|
||||
<div style="display: flex;justify-content: center;">
|
||||
@@ -417,12 +415,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article>
|
||||
<article class="border">
|
||||
<Description video={data.video} description={data.content.description} />
|
||||
</article>
|
||||
|
||||
{#if data.content.timestamps.length > 0}
|
||||
<article>
|
||||
<article class="border">
|
||||
<details>
|
||||
<summary id="chapter-section" class="bold none">
|
||||
<nav>
|
||||
@@ -465,7 +463,7 @@
|
||||
{/if}
|
||||
|
||||
{#if comments && comments.comments.length > 0}
|
||||
<article>
|
||||
<article class="border">
|
||||
<details>
|
||||
<summary id="comment-section" class="none bold">
|
||||
<nav>
|
||||
@@ -569,7 +567,7 @@
|
||||
</article>
|
||||
{:else if data.video.recommendedVideos}
|
||||
{#each data.video.recommendedVideos as recommendedVideo}
|
||||
<article class="no-padding">
|
||||
<article class="no-padding border">
|
||||
{#key recommendedVideo.videoId}
|
||||
<Thumbnail video={recommendedVideo} sideways={true} />
|
||||
{/key}
|
||||
|
||||
@@ -125,7 +125,7 @@
|
||||
<Author bind:subscribed video={data.video} />
|
||||
<div class="space"></div>
|
||||
<LikesDislikes video={data.video} returnYTDislikes={data.streamed.returnYTDislikes} />
|
||||
<article class="border">
|
||||
<article>
|
||||
<Description video={data.video} description={data.content.description} />
|
||||
</article>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user