Fix display issues with, fix minor bugs, update AppIcon and add 'Made with' to Settings.vue

This commit is contained in:
Annie 2025-04-04 14:21:40 +03:00
parent 29fade983d
commit 9683b8eafa
14 changed files with 89 additions and 49 deletions

View file

@ -1 +0,0 @@
body{margin:0;padding:0;box-sizing:border-box;background-color:gray}#applist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always}#applist-wrapper{width:100%}.applist-page{scroll-snap-align:start;display:flex;flex-direction:row;flex-wrap:wrap;min-width:100vw;justify-content:flex-start;align-content:flex-start;padding-bottom:10%;padding-top:5%}.applist-page>*{min-width:25%;margin-bottom:5%}#dock{padding:5%;margin:5%;gap:15px;border-radius:24px;background-color:#00000040;border:1px solid white;display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0}.section{padding:5%;margin:0 5% 5%;border-radius:15px;background-color:#00000040;border:1px solid white;width:100%}.ui-button{border:none;border:1px solid white;border-radius:6px;padding:2%;background-color:#00000080;color:#fff;margin:1%}.app-icon[data-v-fa001907]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-fa001907]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-fa001907]{width:60px;height:60px;border-radius:12px}.app-label[data-v-fa001907]{font-size:12px;color:var(--label-color)}.app-package[data-v-fa001907]{font-size:3px;color:#0000}

File diff suppressed because one or more lines are too long

1
dist/assets/index-M6NLxF6S.css vendored Normal file
View file

@ -0,0 +1 @@
body{margin:0;padding:0;background-color:gray}*{box-sizing:border-box}#applist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always}#applist-wrapper{width:100%}.applist-page{scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,25%);grid-template-rows:repeat(5,20%);place-items:center;align-items:start;min-width:100vw;max-width:100vw;width:100vw;padding-bottom:25%;padding-top:5%}.applist-page>*:not(.section){width:auto;margin-bottom:5%;display:flex;flex-direction:column;align-items:center}.applist-page:has(.section){display:flex;flex-direction:column;align-items:center;padding:5%;gap:5%}#dock{padding:5%;margin:5%;gap:15px;border-radius:24px;background-color:#00000040;border:1px solid white;display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0}.section{padding:5%;border-radius:15px;background-color:#00000080;border:1px solid white;width:100%;color:#fff}.ui-button{border:none;border:1px solid white;border-radius:6px;padding:2%;background-color:#00000080;color:#fff;margin:1%}.app-icon[data-v-a45179cd]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-a45179cd]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-a45179cd]{width:14vw;height:auto;border-radius:12px}.app-label[data-v-a45179cd]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10pt;color:var(--label-color)}.app-package[data-v-a45179cd]{font-size:1px;color:#0000}img[data-v-27ae4006]{width:15%;height:auto}

17
dist/assets/index-zJphMIID.js vendored Normal file

File diff suppressed because one or more lines are too long

BIN
dist/bundle.zip vendored Normal file

Binary file not shown.

BIN
dist/com.tored.bridgelauncher.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

6
dist/index.html vendored
View file

@ -5,10 +5,10 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SpringBoard</title>
<script type="module" crossorigin src="/assets/index-C4iP7xdQ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Byzfhg1j.css">
<script type="module" crossorigin src="/assets/index-zJphMIID.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-M6NLxF6S.css">
</head>
<body>
<body style="background-color:transparent;">
<div id="app"></div>
</body>
</html>

View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SpringBoard</title>
</head>
<body>
<body style="background-color:transparent;">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

View file

@ -5,8 +5,9 @@
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"build": "vite build && rm -rf dist/mock",
"preview": "vite preview",
"zip": "zip -r dist/bundle.zip dist/"
},
"dependencies": {
"@bridgelauncher/api-mock": "^0.1.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View file

@ -1,7 +1,6 @@
<script setup>
import { defineProps, ref, onMounted } from 'vue'
import { defineProps, ref } from 'vue'
// Define component props
const props = defineProps({
packageName: {
type: String,
@ -24,12 +23,12 @@ if (Bridge.getSystemNightMode() == 'yes') {
} else {
darkLabel = false;
}
// Create a ref to hold the icon URL
const icon = ref('');
icon.value = await Bridge.getDefaultAppIconURL(props.packageName);
const label = ref('')
if (props.label.length >= 10) {
label.value = `${props.label.slice(0, 10 - 3).trim()}...`;
if (props.label.length >= 12) {
label.value = `${props.label.slice(0, 12 - 3).trim()}...`;
} else {
label.value = props.label;
}
@ -65,18 +64,21 @@ function handleClick() {
}
.app-image {
width: 60px;
height: 60px;
width: 14vw;
height: auto;
border-radius: 12px;
}
.app-label {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10pt;
color: var(--label-color);
}
.app-package {
font-size: 3px;
font-size: 1px;
color: #00000000;
}
</style>

View file

@ -1,4 +1,5 @@
<script setup>
import { ref } from 'vue';
function toggleBridgeButton() {
console.log('Changed Bridge Button visibility to...')
if (Bridge.getBridgeButtonVisibility() == 'shown') {
@ -11,13 +12,15 @@ function toggleBridgeButton() {
}
function toggleSystemWallpapers() {
console.log('Changed system wallpapers to...')
console.log('Changed draw system wallpapers to...')
if (Bridge.getDrawSystemWallpaperBehindWebViewEnabled()) {
Bridge.requestSetDrawSystemWallpaperBehindWebViewEnabled(false);
document.body.style.backgroundColor = '';
console.log('false');
} else {
Bridge.requestSetDrawSystemWallpaperBehindWebViewEnabled(true);
console.log('true');
document.body.style.backgroundColor = 'transparent';
}
}
@ -38,6 +41,7 @@ function openBridgeAppDrawer() {
function reloadWindow() {
window.location.reload();
}
</script>
<template>
@ -48,6 +52,21 @@ function reloadWindow() {
<button class="ui-button" @click="toggleOverscrolling()">Toggle overscrolling</button>
<button class="ui-button" @click="reloadWindow()">Reload</button>
<br>
<small style="font-size:xx-small;color:white">Everything else can be configured through Bridge's Settings</small>
<small style="font-size:xx-small;">Everything else can be configured through Bridge's Settings</small>
</div>
</template>
<div class="section" style="display:flex;flex-direction:column;align-items: center;">
<span style="width:max-content;">Made with</span>
<div style="display:flex;justify-content:space-around;width:100%;">
<img src="/vite.svg">
<img src="/vue.svg">
<img src="/com.tored.bridgelauncher.png" alt="Bridge">
</div>
</div>
</template>
<style scoped>
img {
width: 15%;
height: auto;
}
</style>

View file

@ -1,10 +1,13 @@
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #808080;
}
* {
box-sizing: border-box;
}
#applist {
display: flex;
overflow-x: auto;
@ -18,18 +21,30 @@ body {
.applist-page {
scroll-snap-align: start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(5, 20%);
place-items: center;
align-items: start;
min-width: 100vw;
justify-content: flex-start;
align-content: flex-start;
padding-bottom: 10%;
max-width: 100vw;
width: 100vw;
padding-bottom: 25%;
padding-top: 5%;
& > * {
min-width: 25%; // 4 columns
& > *:not(.section) {
width: auto;
margin-bottom: 5%;
display: flex;
flex-direction: column;
align-items: center;
}
&:has(.section) {
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
gap: 5%;
}
}
#dock {
@ -49,12 +64,11 @@ body {
.section {
padding: 5%;
margin: 5%;
margin-top: 0;
border-radius: 15px;
background-color: rgba(0,0,0,0.25);
background-color: rgba(0,0,0,0.5);
border: 1px solid white;
width: 100%
width: 100%;
color: white;
}
.ui-button {

View file

@ -12,4 +12,8 @@ export default defineConfig({
},
},
},
build: {
outDir: 'dist',
emptyOutDir: true,
},
})