Merge pull request #643 from Materialious/update/1.6.8

Update/1.6.8

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 58
-        versionName "1.6.7"
+        versionCode 59
+        versionName "1.6.8"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

materialious/src/lib/Settings.svelte

@@ -5,6 +5,7 @@
 	import { Capacitor } from '@capacitor/core';
 	import ui from 'beercss';
 	import { iso31661 } from 'iso-3166';
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { ensureNoTrailingSlash, titleCase, titleCases } from './misc';
@@ -104,9 +105,21 @@
 		| 'api extended'
 		| 'sponsorblock'
 		| 'dearrow' = 'interface';
+
+	let dialogType = '';
+
+	onMount(() => {
+		addEventListener('resize', () => {
+			if (innerWidth <= 1320) {
+				dialogType = 'right';
+			} else {
+				dialogType = '';
+			}
+		});
+	});
 </script>
 
-<dialog id="dialog-settings">
+<dialog id="dialog-settings" class={dialogType}>
 	<nav style="margin-bottom: 1em;">
 		<h4 class="max">{$_('layout.settings')}</h4>
 		<button class="circle transparent" data-ui="#dialog-settings"><i>close</i></button>
@@ -723,21 +736,36 @@
 		margin: 1em 0;
 	}
 
-	.tabbed {
-		overflow-y: hidden;
+	dialog {
+		width: 1320px;
 	}
 
-	@media screen and (max-width: 650px) {
-		dialog {
-			padding: 0;
-			inset: 0 auto auto 0;
-			inline-size: 100%;
-			block-size: 100%;
-			max-inline-size: 100%;
-			max-block-size: 100%;
-			transform: translateY(0);
-			background-color: var(--surface);
-			border-radius: 0;
+	.tabbed > a {
+		flex: none;
+	}
+
+	@media screen and (max-width: 1320px) {
+		.tabbed {
+			display: flex !important;
+			flex-direction: column !important;
+			gap: 0 !important;
+			flex: 0 !important;
+			margin-bottom: 1em !important;
+			align-items: start !important;
+			padding: 1em 0 !important;
+			background-color: transparent;
+			border-bottom: solid 1px var(--outline-variant);
+		}
+
+		.tabbed > a {
+			font-size: 1.5rem !important;
+			padding: 0.5em 0.3em !important;
+			border-radius: 3em !important;
+		}
+
+		.tabbed.small {
+			block-size: 100% !important;
+			border-radius: 0 !important;
 		}
 	}
 </style>

materialious/src/lib/VideoList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { removePlaylistVideo } from './Api';
@@ -7,18 +8,28 @@
 	import { authStore } from './store';
 
 	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
-	export let oneItemPerRow: boolean = false;
 	export let playlistId: string = '';
 	export let playlistAuthor: string = '';
 
 	let hiddenVideos: string[] = [];
 	let auth = get(authStore);
+	let largeCol = '2';
 
 	async function removePlaylistItem(indexId: string, videoId: string) {
 		if (!playlistId) return;
 		await removePlaylistVideo(playlistId, indexId);
 		hiddenVideos = [...hiddenVideos, videoId];
 	}
+
+	onMount(() => {
+		addEventListener('resize', () => {
+			if (innerWidth <= 1750) {
+				largeCol = '4';
+			} else {
+				largeCol = '2';
+			}
+		});
+	});
 </script>
 
 <div class="page right active">
@@ -26,7 +37,7 @@
 	<div class="grid">
 		{#each videos as video}
 			{#if !hiddenVideos.includes(video.videoId)}
-				<div class={`s12 m${oneItemPerRow ? '12' : '6'} l${oneItemPerRow ? '12' : '2'}`}>
+				<div class="s12 m6 l{largeCol}">
 					<article class="no-padding" style="height: 100%;">
 						<Thumbnail
 							on:videoHidden={() => (hiddenVideos = [...hiddenVideos, video.videoId])}

materialious/static/style.css

@@ -78,26 +78,3 @@ main.root {
 		display: none !important;
 	}
 }
-
-@media screen and (max-width: 1030px) {
-	nav.tabbed {
-		display: flex !important;
-		flex-direction: column !important;
-		gap: 0 !important;
-		flex: 0 !important;
-		margin-bottom: 1em !important;
-		align-items: start !important;
-		padding: 1em 0 !important;
-	}
-
-	nav.tabbed>a {
-		font-size: 1.5rem !important;
-		padding: .5em .3em !important;
-		border-radius: 3em !important;
-	}
-
-	nav.tabbed.small {
-		block-size: 100% !important;
-		border-radius: 0 !important;
-	}
-}

update_versions.py

@@ -5,7 +5,7 @@ import json
 import os
 import re
 
-LATEST_VERSION = "1.6.7"
+LATEST_VERSION = "1.6.8"
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")
 
 ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")