marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-25 08:53:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix buttons layout in product details page

Browse Source
This commit is contained in:
redphx 2024-09-26 19:46:30 +07:00
parent 2f7a57e084
commit e7c10d43f5
4 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/css/button.styl
View File

@ -179,15 +179,3 @@ button.bx-inactive {
opacity: 0.2; opacity: 0.2;
background: transparent !important; background: transparent !important;
} }
.bx-button-shortcut {
max-width: max-content;
margin: 10px 0 0 0;
flex: 1 0 auto;
}
@media (min-width: 568px) and (max-height: 480px) {
.bx-button-shortcut {
margin: 8px 0 0 10px;
}
}

21
src/assets/css/misc.styl Normal file
View File

@ -0,0 +1,21 @@
.bx-product-details-buttons {
display: flex;
gap: 10px;
flex-direction: row;
button {
max-width: max-content;
margin: 10px 0 0 0;
display: flex;
}
}
@media (min-width: 568px) and (max-height: 480px) {
.bx-product-details-buttons {
flex-direction: column;
button {
margin: 8px 0 0 10px;
}
}
}

1
src/assets/css/styles.styl
View File

@ -16,3 +16,4 @@
@import 'game-bar.styl'; @import 'game-bar.styl';
@import 'stream-stats.styl'; @import 'stream-stats.styl';
@import 'mkb.styl'; @import 'mkb.styl';
@import 'misc.styl';

21
src/modules/ui/product-details.ts
View File

@ -1,12 +1,11 @@
import { BX_FLAGS } from "@/utils/bx-flags"; import { BX_FLAGS } from "@/utils/bx-flags";
import { BxIcon } from "@/utils/bx-icon"; import { BxIcon } from "@/utils/bx-icon";
import { AppInterface } from "@/utils/global"; import { AppInterface } from "@/utils/global";
import { ButtonStyle, createButton } from "@/utils/html"; import { ButtonStyle, CE, createButton } from "@/utils/html";
import { t } from "@/utils/translation"; import { t } from "@/utils/translation";
export class ProductDetailsPage { export class ProductDetailsPage {
private static $btnShortcut = AppInterface && createButton({ private static $btnShortcut = AppInterface && createButton({
classes: ['bx-button-shortcut'],
icon: BxIcon.CREATE_SHORTCUT, icon: BxIcon.CREATE_SHORTCUT,
label: t('create-shortcut'), label: t('create-shortcut'),
style: ButtonStyle.FOCUSABLE, style: ButtonStyle.FOCUSABLE,
@ -17,7 +16,6 @@ export class ProductDetailsPage {
}); });
private static $btnWallpaper = AppInterface && createButton({ private static $btnWallpaper = AppInterface && createButton({
classes: ['bx-button-shortcut'],
icon: BxIcon.DOWNLOAD, icon: BxIcon.DOWNLOAD,
label: t('wallpaper'), label: t('wallpaper'),
style: ButtonStyle.FOCUSABLE, style: ButtonStyle.FOCUSABLE,
@ -48,17 +46,12 @@ export class ProductDetailsPage {
// Find action buttons container // Find action buttons container
const $container = document.querySelector('div[class*=ActionButtons-module__container]'); const $container = document.querySelector('div[class*=ActionButtons-module__container]');
if ($container && $container.parentElement) { if ($container && $container.parentElement) {
const fragment = document.createDocumentFragment(); $container.parentElement.appendChild(CE('div', {
class: 'bx-product-details-buttons',
// Shortcut button },
if (BX_FLAGS.DeviceInfo.deviceType === 'android') { BX_FLAGS.DeviceInfo.deviceType === 'android' && ProductDetailsPage.$btnShortcut,
fragment.appendChild(ProductDetailsPage.$btnShortcut); ProductDetailsPage.$btnWallpaper,
} ));
// Wallpaper button
fragment.appendChild(ProductDetailsPage.$btnWallpaper);
$container.parentElement.appendChild(fragment);
} }
}, 500); }, 500);
} }