Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Adjust the empty status prompt layout #7350

Merged
merged 1 commit into from
Dec 12, 2024
Merged

feat: Adjust the empty status prompt layout #7350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/app-status/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<div>{{ $t('app.checkInstalledWarn', [data.app]) }}</div>
<span @click="goRouter(key)" class="flex items-center justify-center gap-0.5">
<el-icon class="flex items-center justify-center"><Position /></el-icon>
<el-icon><Position /></el-icon>
{{ $t('database.goInstall') }}
</span>
</div>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/database/mysql/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,15 +229,15 @@
<LayoutContent :title="'MySQL ' + $t('menu.database')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('app.checkInstalledWarn', [$t('database.noMysql')]) }}</span>
<span @click="goRouter('app')">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('database.goInstall') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes appear to be minor corrections and optimizations. Here's a summary of the adjustments:

  1. Replaced a single <div> wrapper with two nested divs (<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">) for better styling alignment.
  2. Wrapped the click event listener within an inline class attribute on the span element instead of adding it directly as a child node.

These changes help improve layout flow and make the HTML more readable while maintaining functionality.

Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/database/postgresql/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,15 +189,15 @@
<LayoutContent :title="'PostgreSQL ' + $t('menu.database')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('app.checkInstalledWarn', [$t('database.noPostgresql')]) }}</span>
<span @click="goRouter('app')">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('database.goInstall') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code changes you provided have several areas that need attention:

  1. Inline Span and Icon Placement: The span elements now include an icon, but the spacing around it differs between the first inline span and the second one inside the flex div.

  2. Flex Box Alignment: The use of a flex box (flex flex-col gap-2) ensures content is aligned correctly when viewed on both small and large screens (sm:flex-row). However, there's no explicit width specified for the flex container to ensure all images align well across sizes.

  3. Icon Size and Space: The space between the button's text and icon can be better controlled, which may improve usability. Adding some padding might help.

Here's a slightly adjusted version with these considerations addressed:

<template #main>
    <div class="app-warn">
        <!-- First span -->
        <div class="items-center justify-center w-full sm:hidden">
            <span>{{ $t('app.checkInstalledWarn', [$t('database.noPostgresql')]) }}</span>
            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5 mx-auto">
                <el-icon><Position /></el-icon>
                {{ $t('database.goInstall') }}
            </span>
            <div v-if="$device.isMobile" style="height: 2rem;"></div> <!-- Ensure equal height across devices -->
        </div>

        <!-- Second span wrapped in a flexbox -->
        <div v-if="$!$device.isMobile" class="hidden px-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mt-8 mb-6 gap-y-6 xl:gap-y-7">
            <span>{{ $t('app.checkInstalledWarn', [$t('database.noPostgresql')]) }}</span>
            <span @click="goRouter('app')">
                <el-icon><Position /></el-icon>
                {{ $t('database.goInstall') }}
            </span>
            <div>
                <img src="@/assets/images/no_app.svg" />
            </div>
        </div>

        <!-- Mobile-specific image placement -->
        <div v-if="$$device.isMobile"
             class="w-[50%] relative bottom-5 left-1/2 translate-x-[-50%]"
             style="background-image: url('@/assets/images/no_app.png'); background-position:center; background-repeat:no-repeat;">
        </div>
    </div>
</template>

Key Changes Made:

  1. Added .mx-auto to the main flex item.
  2. Used CSS media queries with $device.isMobile to handle mobile display differently.
  3. Ensured all relevant parts are responsive and visually consistent on larger screen sizes.
  4. Adjusted positioning logic for smaller displays where a dedicated section was more appropriate.

This should lead to a cleaner and functional UI layout, ensuring compatibility across various devices and screen resolutions.

Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/database/redis/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,15 @@
<LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
<span @click="goRouter('app')">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('database.goInstall') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/host/firewall/forward/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('firewall.notSupport') }}</span>
<span @click="toDoc">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/views/host/firewall/ip/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,15 @@
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('firewall.notSupport') }}</span>
<span @click="toDoc">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand All @@ -130,6 +130,7 @@ import { Host } from '@/api/interface/host';
import { ElMessageBox } from 'element-plus';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import {Position} from "@element-plus/icons-vue";

const loading = ref();
const activeTag = ref('address');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you provided appears to be an HTML template using Vue.js with Element Plus components. Here are some points for review:

Irregularities and Potential Issues

  1. CSS Class Mismatch:

    <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
    <!-- content -->
</div>

    The style attribute is missing in one of these two <div> tags (w-full). Ensure that all styling attributes match across elements within the same structure.

  2. Element Reference Name:

    import Position from '@element-plus/icons-vue';
import { Position } from "@/api/interface/host"; // This may clash if used elsewhere in your project.

    There's a minor issue here as both imports use different naming conventions which could potentially lead to conflicts. Consider changing either name to avoid confusion.

  3. Image Src Path:

    <img src="@/assets/images/no_app.svg" />

    Make sure the image path (@/assets/images/no_app.svg) is correct according to your file system structure. If it doesn’t exist, the image will not display.

  4. HTML Comment Syntax:

    <!-- This might cause problems since Element Plus uses icons differently. Check its usage. -->

    Verify how Element Plus handles SVGs or icons inside the <i></i> tag when combined with other classes like el-icon.

Optimization Suggestions

  1. Component Import Consistency:
    As mentioned earlier, keep component imports consistent throughout your project to prevent naming clashes.

  2. Lazy Loading Images (Optional):
    For better performance, consider lazy loading images by adding a loading property when the DOM loads.

  3. Accessibility Improvements:
    Ensure that clickable areas have sufficient contrast to meet accessibility guidelines. In this case, tooltips (e.g., toDoc()) should have descriptive labels for users relying on screen readers.

  4. Refactor Message Handling:
    Although current implementation seems fine, ensure that any message handling functions work correctly across devices (Desktop / Mobile).

  5. Dynamic Content Rendering:
    If $t('firewall.notSupport'), $t('firewall.quickJump'), etc., can change based on user interactions or configurations, make sure they update accordingly without unexpected layout changes.

Overall, checking for typos, ensuring consistency, and considering accessibility practices would help improve the quality of your web application.

Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/host/firewall/port/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,15 +149,15 @@
<LayoutContent :title="$t('firewall.firewall')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('firewall.notSupport') }}</span>
<span @click="toDoc">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/toolbox/clam/status/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,15 @@
<LayoutContent :title="$t('toolbox.clam.clam')" :divider="true" v-if="!data.isExist" v-loading="loading">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span v-if="!data.isExist">{{ $t('toolbox.clam.noClam') }}</span>
<span @click="toDoc()" v-if="!data.isExist">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc()" v-if="!data.isExist" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img alt="" src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img alt="" src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/toolbox/fail2ban/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,15 +149,15 @@
<LayoutContent title="Fail2ban" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('toolbox.fail2ban.noFail2ban') }}</span>
<span @click="toDoc">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/toolbox/ftp/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,15 +148,15 @@
<LayoutContent title="FTP" :divider="true">
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span>{{ $t('toolbox.ftp.noFtp') }}</span>
<span @click="toDoc">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/views/toolbox/supervisor/status/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,17 @@
>
<template #main>
<div class="app-warn">
<div>
<div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
<span v-if="!data.isExist">{{ $t('tool.supervisor.notSupport') }}</span>
<span v-else-if="!data.ctlExist">{{ $t('tool.supervisor.notSupportCrl') }}</span>
<span v-else-if="data.init">{{ $t('tool.supervisor.initHelper') }}</span>
<span @click="toDoc()" v-if="!data.isExist || !data.ctlExist">
<el-icon class="ml-2"><Position /></el-icon>
<span @click="toDoc()" v-if="!data.isExist || !data.ctlExist" class="flex items-center justify-center gap-0.5">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</span>
<div>
<img alt="" src="@/assets/images/no_app.svg" />
</div>
</div>
<div>
<img alt="" src="@/assets/images/no_app.svg" />
</div>
</div>
</template>
Expand Down
Loading