fix: improve enterprise template and signature layouts
This commit is contained in:
hectorzhao
+175
-6
@@ -2817,25 +2817,194 @@ h3 {
|
||||
|
||||
.admin-enterprise-signature-list .signature-summary {
|
||||
gap: var(--space-2);
|
||||
grid-template-columns: 22px minmax(96px, 0.9fr) minmax(132px, 1fr) minmax(104px, 0.85fr) repeat(4, minmax(64px, 0.55fr)) minmax(206px, auto);
|
||||
min-width: 1040px;
|
||||
grid-template-columns: 22px minmax(104px, 0.85fr) minmax(132px, 1fr) minmax(104px, 0.8fr) repeat(5, minmax(76px, 0.55fr)) 184px;
|
||||
min-width: 0;
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-actions {
|
||||
display: flex;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
justify-self: end;
|
||||
min-width: 206px;
|
||||
white-space: nowrap;
|
||||
min-width: 184px;
|
||||
width: 184px;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-actions .ui-button {
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.carrier-report-summary {
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.carrier-report-summary small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-list {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row {
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(220px, 1.15fr) minmax(280px, 1.6fr) minmax(136px, 0.65fr) 188px;
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row:hover {
|
||||
border-color: var(--color-border-strong);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__identity,
|
||||
.admin-enterprise-template-row__content,
|
||||
.admin-enterprise-template-row__meta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__title > strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dl {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
margin: var(--space-3) 0 0;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dl div {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dt,
|
||||
.admin-enterprise-template-row__content > span,
|
||||
.admin-enterprise-template-row__meta > span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dd {
|
||||
color: var(--color-text-strong);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__content p {
|
||||
color: var(--color-text-strong);
|
||||
display: -webkit-box;
|
||||
line-height: 1.65;
|
||||
margin: var(--space-2) 0;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__content small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta strong {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__actions {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__actions .ui-button {
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.admin-enterprise-template-row {
|
||||
grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.35fr) 168px;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__actions {
|
||||
grid-column: 3;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-summary {
|
||||
grid-template-columns: 22px repeat(7, minmax(76px, 1fr)) 184px;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-summary > div:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.admin-enterprise-template-row {
|
||||
align-items: stretch;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta,
|
||||
.admin-enterprise-template-row__actions {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-summary {
|
||||
grid-template-columns: 22px repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-summary > div,
|
||||
.admin-enterprise-signature-list .signature-summary > div:nth-of-type(3) {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-actions {
|
||||
grid-column: 2 / -1;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-split-filter {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user