fix(domains): compact service cards at medium widths
This commit is contained in:
parent
6028461f92
commit
3229141126
2 changed files with 48 additions and 33 deletions
|
|
@ -4751,42 +4751,14 @@ @container service-domains (max-width: 980px) {
|
|||
}
|
||||
|
||||
.data-table-row.service-domains-overview-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.data-table-row.service-domains-overview-grid > :first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.service-domain-detail {
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.service-domain-detail-label {
|
||||
display: inline;
|
||||
color: var(--coollabs-fg-dim);
|
||||
}
|
||||
}
|
||||
|
||||
@container service-domains (max-width: 600px) {
|
||||
.data-table-row.service-domains-overview-grid {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
grid-template-areas: "domain dns actions" "summary summary summary";
|
||||
gap: 0.625rem 0.75rem;
|
||||
padding: 0.875rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.data-table-row.service-domains-overview-grid > :first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.data-table-row.service-domains-overview-grid > :first-child a,
|
||||
.data-table-row.service-domains-overview-grid > :first-child span[title] {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.35;
|
||||
grid-area: domain;
|
||||
}
|
||||
|
||||
.service-domain-detail,
|
||||
|
|
@ -4796,7 +4768,7 @@ @container service-domains (max-width: 600px) {
|
|||
|
||||
.service-domain-mobile-summary {
|
||||
display: flex;
|
||||
grid-column: 1 / -1;
|
||||
grid-area: summary;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.375rem 0.75rem;
|
||||
|
|
@ -4812,10 +4784,43 @@ @container service-domains (max-width: 600px) {
|
|||
}
|
||||
|
||||
.service-domain-dns {
|
||||
grid-area: dns;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.service-domain-actions {
|
||||
grid-area: actions;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
@container service-domains (max-width: 600px) {
|
||||
.data-table-row.service-domains-overview-grid {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-areas: "domain domain" "summary summary" "dns actions";
|
||||
gap: 0.625rem 0.75rem;
|
||||
padding: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table-row.service-domains-overview-grid > :first-child {
|
||||
grid-area: domain;
|
||||
}
|
||||
|
||||
.data-table-row.service-domains-overview-grid > :first-child a,
|
||||
.data-table-row.service-domains-overview-grid > :first-child span[title] {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.service-domain-dns {
|
||||
grid-area: dns;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.service-domain-actions {
|
||||
grid-area: actions;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1894,6 +1894,16 @@
|
|||
->not->toContain('title="No domains for this service"');
|
||||
});
|
||||
|
||||
it('uses a compact two row domain card at medium widths', function () {
|
||||
$css = file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
expect($css)
|
||||
->toContain('@container service-domains (max-width: 980px)')
|
||||
->toContain('grid-template-columns: minmax(0, 1fr) auto auto;')
|
||||
->toContain('grid-template-areas: "domain dns actions" "summary summary summary";')
|
||||
->toContain('grid-area: summary;');
|
||||
});
|
||||
|
||||
it('uses concise search indexing headers in application and service domain tables', function () {
|
||||
$applicationView = file_get_contents(resource_path('views/livewire/project/application/domains.blade.php'));
|
||||
$serviceView = file_get_contents(resource_path('views/livewire/project/service/partials/domain-table.blade.php'));
|
||||
|
|
|
|||
Loading…
Reference in a new issue