mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-02 22:50:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: upc style responsive support

Browse Source
This commit is contained in:
Zack Spear
2023-07-03 15:59:20 -07:00
committed by Zack Spear
parent 38349e399d
commit 3391f93fab
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/UserProfile.ce.vue
View File

@@ -84,18 +84,18 @@ onBeforeMount(() => {
<template>
<div id="UserProfile" class="text-alpha relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px">
<div v-if="bannerGradient" class="absolute z-0 w-[125%] top-0 bottom-0 right-0" :style="bannerGradient" />
<div class="text-gamma text-12px text-right font-semibold leading-normal relative z-10 flex flex-row items-baseline justify-end gap-x-12px">
<div class="text-gamma text-10px xs:text-12px text-right font-semibold leading-normal relative z-10 flex flex-col items-end justify-end gap-x-4px xs:flex-row xs:items-baseline xs:gap-x-12px">
<UpcUptimeExpire />
<span>&bull;</span>
<span class="hidden xs:block">&bull;</span>
<UpcServerState />
</div>
<div class="relative z-10 flex flex-row items-center justify-end gap-x-16px h-full">
<h1 class="text-alpha relative text-18px border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
<h1 class="text-alpha text-14px sm:text-18px relative flex flex-col-reverse items-end md:flex-row border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
<template v-if="description && theme?.descriptionShow">
<span>{{ description }}</span>
<span class="text-grey-mid px-8px">&bull;</span>
<span class="text-right hidden 2xs:block">{{ description }}</span>
<span class="text-gamma hidden md:inline-block px-8px">&bull;</span>
</template>
<button @click="copyLanIp()" :title="`Click to Copy LAN IP ${lanIp}`">{{ name }}</button>
<span
@@ -107,7 +107,7 @@ onBeforeMount(() => {
</span>
</h1>
<div class="block w-2px h-24px bg-grey-mid"></div>
<div class="block w-2px h-24px bg-gamma"></div>
<OnClickOutside class="flex items-center justify-end h-full" @trigger="outsideDropdown" :options="{ ignore: [clickOutsideIgnoreTarget] }">
<UpcDropdownTrigger ref="clickOutsideIgnoreTarget" />

2
components/UserProfile/ServerState.vue
View File

@@ -31,7 +31,7 @@ const upgradeAction = computed((): ServerStateDataAction | undefined => {
<template v-if="purchaseAction">
<UpcServerStateBuy
@click="purchaseAction.click()"
class="text-orange-dark relative top-[1px]"
class="text-orange-dark relative top-[1px] hidden sm:block"
:title="'Purchase'"
>{{ 'Purchase' }}</UpcServerStateBuy>
</template>

4
tailwind.config.ts
View File

@@ -98,6 +98,10 @@ export default <Partial<Config>>{
'640px': '640px',
'800px': '800px',
},
screens: {
'2xs': '470px',
'xs': '530px',
},
}
}
}