1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-19 05:49:02 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Optimize app name display for large screens (#10782)

Browse source 
Refs https://github.com/1Panel-dev/1Panel/issues/10764
This commit is contained in:
CityFun 2025-10-27 18:02:18 +08:00 • committed by GitHub
parent 2478d26c59
commit b0fbb39cd3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 57 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/views/app-store/index.scss
View file

@ -2,6 +2,7 @@
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
.icon { .icon {
text-align: center; text-align: center;
} }
@ -12,17 +13,45 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 120px;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: var(--panel-text-color); color: var(--panel-text-color);
max-width: 100px;
@media (min-width: 576px) {
max-width: 120px;
}
@media (min-width: 768px) {
max-width: 150px;
}
@media (min-width: 992px) {
max-width: 180px;
}
@media (min-width: 1200px) {
max-width: 220px;
}
@media (min-width: 1600px) {
max-width: 280px;
}
@media (min-width: 1920px) {
max-width: 350px;
}
} }
.status { .status {
margin-left: 5px; margin-left: 5px;
} }
.h-button { .h-button {
float: right; float: right;
} }
.msg { .msg {
margin-left: 5px; margin-left: 5px;
} }
@ -31,15 +60,18 @@
.d-description { .d-description {
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
.el-tag { .el-tag {
margin-right: 5px; margin-right: 5px;
} }
} }
.description { .description {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
} }
.d-button { .d-button {
margin-top: 10px; margin-top: 10px;
min-width: 330px; min-width: 330px;
@ -48,6 +80,7 @@
.e-card { .e-card {
border: var(--panel-border) !important; border: var(--panel-border) !important;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
border: 1px solid var(--el-color-primary) !important; border: 1px solid var(--el-color-primary) !important;
@ -92,3 +125,26 @@
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 10px; margin-top: 10px;
} }
@media (max-width: 575px) {
.install-card {
.a-detail {
.d-name {
.h-button {
float: none;
display: inline-block;
margin-left: 5px;
}
}
.d-button {
min-width: auto;
.app-button {
font-size: 12px;
padding: 5px 10px;
}
}
}
}
}