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

style: Optimize layout style #7359

Merged
merged 1 commit into from
Dec 13, 2024
Merged

style: Optimize layout style #7359

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
4 changes: 2 additions & 2 deletions frontend/src/components/system-upgrade/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';

const globalStore = GlobalStore();
const { isDarkTheme } = storeToRefs(globalStore);
const { isDarkTheme, docsUrl } = storeToRefs(globalStore);

const mobile = computed(() => {
return globalStore.isMobile();
Expand Down Expand Up @@ -129,7 +129,7 @@ const toLxware = () => {
};

const toDoc = () => {
window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
};

const toForum = () => {
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 provided do not appear to have any specific errors or significant issues. However, there are a few things that could be improved:

  1. Consistency: It would be more consistent to use value when accessing reactive properties in templates.

    <template>
    <!-- This line should look like this -->
    {{ docsUrl }}
</template>

  2. Error Handling: If you want to ensure that docsUrl has a valid value before using it, you can add some checks or error handling logic.

    const toDoc = () => {
    if (docsUrl.value) {
        window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
    } else {
        ElMessageBox.alert('Failed to open documentation URL.');
    }
};

These improvements make the code cleaner and more robust.

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/lang/modules/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1798,7 +1798,7 @@ const message = {
all: 'All',
version: 'Version',
detail: 'Details',
params: 'Edit parameters',
params: 'Edit',
install: 'Install',
author: 'Author',
source: 'Source',
Expand Down Expand Up @@ -1855,7 +1855,7 @@ const message = {
installPrompt: 'No apps installed yet',
updateHelper: 'Editing parameters may cause the application to fail to start. Please proceed with caution.',
updateWarn: 'Update parameters need to rebuild the application, Do you want to continue? ',
busPort: 'Service Port',
busPort: 'Port',
syncStart: 'Start syncing! Please refresh the app store later',
advanced: 'Advanced Settings',
cpuCore: 'core(s)',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/store/modules/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const GlobalStore = defineStore({
state.themeConfig.theme === 'dark' ||
(state.themeConfig.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches),
isDarkGoldTheme: (state) => state.themeConfig.primary === '#F0BE96' && state.isProductPro,
docsUrl: (state) => (state.isIntl ? 'https://docs.1panel.hk' : 'https://1panel.cn/docs'),
},
actions: {
setOpenMenuTabs(openMenuTabs: boolean) {
Expand Down
1 change: 0 additions & 1 deletion frontend/src/styles/moblie.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
min-width: auto !important;
}
.d-description {
display: block !important;
overflow: inherit !important;
}
}
Expand Down
26 changes: 15 additions & 11 deletions frontend/src/views/app-store/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,40 @@
.d-name {
height: 20%;
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
font-weight: 500;
font-size: 18px;
color: var(--panel-text-color);
}
.status {
margin-left: 10px;
margin-left: 5px;
}
.h-button {
float: right;
margin-right: 10px;
margin-right: 5px;
}
.msg {
margin-left: 10px;
margin-left: 5px;
}
.el-button + .el-button {
margin-left: 6px;
}
}

.d-description {
margin-top: 10px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
.el-tag {
margin-right: 5px;
}
.description {
margin-top: 10px;
font-size: 14px;
color: var(--el-text-color-regular);
}
}
.description {
margin-top: 10px;
font-size: 14px;
color: var(--el-text-color-regular);
}
.d-button {
margin-top: 10px;
Copy link
Member

Choose a reason for hiding this comment

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

The modified CSS contains several changes and improvements to enhance readability and layout consistency. The key points include:

  1. Text Overflow Handling: Added white-space: nowrap; to prevent text from wrapping within .name. Additionally, added margin-left: 5px and updated some margins accordingly for better spacing between elements.
  2. Ellipsis for Text: Implemented overflow: hidden;, text-overflow: ellipsis;, and max-width: 120px; on .name to handle longer text by truncating with an ellipsis if necessary.
  3. Spacing Consistency Update: Changed several margin-right values (10px) to more consistent ones (5px). Updated the position of the "Message" button relative to the status button.
  4. El-Button Spacing Adjustments: Added a specific rule for two consecutive .el-button elements to ensure they have equal spacing.
  5. Simplified the description block structure by removing unnecessary indentation.

These changes should improve UI consistency and readability without introducing significant technical inconsistencies or bugs. If further optimizations are needed based on specific requirements or performance considerations, additional review would be required.

Expand Down
56 changes: 41 additions & 15 deletions frontend/src/views/app-store/installed/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,11 @@
:md="24"
:lg="12"
:xl="12"
class="install-card-col-12"
:class="mode === 'upgrade' ? 'upgrade-card-col-12' : 'install-card-col-12'"
>
<div class="install-card">
<el-card class="e-card">
<el-row :gutter="20">
<el-row :gutter="10">
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
<div class="icon" @click.stop="openDetail(installed.appKey)">
<el-avatar
Expand All @@ -112,9 +112,10 @@
<div class="a-detail">
<div class="d-name">
<el-button link type="info">
<span class="name">{{ installed.name }}</span>
<el-tooltip effect="dark" :content="installed.name" placement="top">
<span class="name">{{ installed.name }}</span>
</el-tooltip>
</el-button>

<span class="status">
<Status :key="installed.status" :status="installed.status"></Status>
</span>
Expand Down Expand Up @@ -210,7 +211,7 @@
{{ $t('commons.button.upgrade') }}
</el-button>
</div>
<div class="d-description">
<div class="d-description flex flex-wrap items-center justify-start gap-1.5">
<el-button class="tagMargin" plain size="small">
{{ $t('app.version') }}{{ $t('commons.colon') }}{{ installed.version }}
</el-button>
Expand All @@ -237,17 +238,16 @@
{{ $t('app.busPort') }}{{ $t('commons.colon')
}}{{ installed.httpsPort }}
</el-button>

<div class="description">
<span>
{{ $t('app.alreadyRun') }}{{ $t('commons.colon') }}
{{ getAge(installed.createdAt) }}
</span>
</div>
</div>
<div class="description">
<span>
{{ $t('app.alreadyRun') }}{{ $t('commons.colon') }}
{{ getAge(installed.createdAt) }}
</span>
</div>
<div class="app-divider" />
<div
class="d-button flex flex-wrap items-center justify-start gap-3"
class="d-button flex flex-wrap items-center justify-start gap-1.5"
v-if="mode === 'installed' && installed.status != 'Installing'"
>
<el-button
Expand Down Expand Up @@ -386,7 +386,7 @@ const sync = () => {
try {
await SyncInstalledApp();
MsgSuccess(i18n.global.t('app.syncSuccess'));
search();
await search();
} finally {
syncLoading.value = false;
}
Expand Down Expand Up @@ -631,10 +631,31 @@ onUnmounted(() => {

<style scoped lang="scss">
@import '../index.scss';
@media only screen and (max-width: 1300px) {
@media only screen and (max-width: 1400px) {
.install-card-col-12 {
max-width: 100%;
flex: 0 0 100%;
.a-detail {
.d-name {
.name {
max-width: 300px;
}
}
}
}
}

@media only screen and (max-width: 1499px) {
.upgrade-card-col-12 {
max-width: 100%;
flex: 0 0 100%;
.a-detail {
.d-name {
.name {
max-width: 300px;
}
}
}
}
}

Expand All @@ -647,4 +668,9 @@ onUnmounted(() => {
margin-left: 0;
}
}
.d-description {
.el-button + .el-button {
margin-left: 0;
}
}
</style>
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 contains a few small improvements to enhance readability, maintainability, and performance:

  1. Conditional Class Names: The conditional class assignment (:class="mode === 'upgrade' ? 'upgrade-card-col-12' : 'install-card-col-12'") is correctly implemented but can be simplified for better readability.

  2. El Avatar Tooltip: The use of el-tooltip around the name text improves accessibility by providing additional context when hovering over the app name.

  3. Flexbox Spacing in .d-description: Adding spacing between buttons within .d-description using gap-1.5 enhances the layout appearance and provides visual separation from other elements.

  4. Sass Variable Scope: There was a typo in the media query variable names where it should be upgrade-card-col-12.

Here's the revised CSS part:

@import '../index.scss';

@media only screen and (max-width: 1400px) {
    .install-card-col-12,
    .upgrade-card-col-12 { /* Ensure both classes match */
        max-width: 100%;
        flex: 0 0 100%; /* Using min-width ensures content doesn't overflow */
        
        .a-detail {
            .d-name {
                .name {
                    max-width: 300px;
                }
            }
        }
    }
}

.d-description {
    .el-button + .el-button { /* Adjust spacing if needed*/
        margin-left: 0; /* Ensures button spacing */
    }
}

Additionally, ensure that there are no syntax errors in your JavaScript functions such as sync and event handlers associated with the card components, which might inadvertently affect functionality or UX/UI.

4 changes: 3 additions & 1 deletion frontend/src/views/setting/about/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ import { onMounted, ref } from 'vue';
import SystemUpgrade from '@/components/system-upgrade/index.vue';
import { GlobalStore } from '@/store';
import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
import { storeToRefs } from 'pinia';
const globalStore = GlobalStore();
const { docsUrl } = storeToRefs(globalStore);

const version = ref();
const loading = ref();
Expand All @@ -55,7 +57,7 @@ const search = async () => {
};

const toDoc = () => {
window.open('https://1panel.cn/docs/', '_blank', 'noopener,noreferrer');
window.open(docsUrl.value, '_blank', 'noopener,noreferrer');
};
const toGithub = () => {
window.open('https://github.com/1Panel-dev/1Panel', '_blank', 'noopener,noreferrer');
Expand Down
Loading