Skip to content

Commit

Permalink
Little responsive table tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
@feedmypixel
feedmypixel committed Jan 24, 2025
1 parent 654d875 commit 23e58c7
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 60 deletions.
17 changes: 11 additions & 6 deletions src/server/common/components/entity-table/_entity-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,11 @@ $min-width: 200px;
}

.app-entity-table__row {
display: block;
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
gap: govuk-spacing(1);
grid-auto-rows: minmax(50px, auto);

margin-bottom: govuk-spacing(3);
background-color: govuk-colour("white");
border-bottom: 2px solid $app-mid-grey;
Expand All @@ -45,26 +49,27 @@ $min-width: 200px;

.app-entity-table__cell {
border-bottom: 1px solid $app-grey;
display: block;
display: inline-block;
text-align: left;
padding: govuk-spacing(2) govuk-spacing(1);
vertical-align: middle;
width: auto;

&:hover {
background-color: $app-grey;
}

.app-icon {
width: 20px;
min-width: 20px;
max-width: 20px;
height: 20px;
}

.app-entity {
margin: 0
}

&::before {
content: attr(data-label);
display: inline-block;
min-width: $min-width;
text-align: left;
font-weight: bold;
padding-bottom: govuk-spacing(1);
Expand Down
4 changes: 4 additions & 0 deletions src/server/common/components/entity-table/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@
data-label="{{ cell.headers | formatText }}">
{% if cell.entity %}
{{ appEntity(cell.entity | assign({}, {index: loop.index}, cell.entity)) }}
{% elseif cell.html %}
{{ cell.html | safe }}
{% elseif cell.text %}
{{ cell.text }}
{% endif %}
</td>
{% endfor %}
Expand Down
13 changes: 11 additions & 2 deletions src/server/common/components/running-service-entity/_running-service-entity.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,19 @@
@use "variables/colours" as *;
@use "variables/border-radius" as *;

$max-width: 300px;

@include govuk-media-query($until: desktop-wide) {
.app-running-service-entity {
max-width: 200px;
max-width: $max-width;
}

.app-running-service-entity--empty {
max-width: $max-width;
min-height: 45px;
padding: govuk-spacing(1) govuk-spacing(2);
background-color: $app-light-grey;
border-radius: $app-border-radius;
}
}

Expand Down Expand Up @@ -47,4 +57,3 @@
color: govuk-colour("dark-grey");
}
}

32 changes: 19 additions & 13 deletions src/server/common/components/service-header/_service-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,6 @@
margin-bottom: govuk-spacing(-2);
padding: govuk-spacing(3) govuk-spacing(6);
border-bottom: govuk-spacing(2) solid $govuk-brand-colour;
display: flex;
}

.app-service-header__content {
@include govuk-media-query($from: desktop-big) {
flex: 4;
display: flex;
align-items: center;

}
}

.app-service-header__service-name {
Expand All @@ -45,10 +35,8 @@

.app-service-header__actions {
@include govuk-font(19);

display: flex;
align-items: center;
justify-content: center;
margin-top: govuk-spacing(2);

& .app-user-icon {
margin-right: govuk-spacing(2);
Expand Down Expand Up @@ -86,3 +74,21 @@
@include govuk-focused-text;
}
}

@include govuk-media-query($from: desktop-big) {
.app-service-header__container {
display: flex;
}

.app-service-header__content {
flex: 4;
display: flex;
align-items: center;
}

.app-service-header__actions {
align-items: center;
justify-content: center;
margin-top: 0;
}
}
4 changes: 3 additions & 1 deletion src/server/running-services/helpers/transformers/running-service-to-entity-row.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ function runningServiceToEntityRow(allEnvironments, isAuthenticated) {
}

return {
headers: environmentName
headers: environmentName,
isSlim: true,
html: '<div class="app-running-service-entity--empty"></div>'
}
})

Expand Down
76 changes: 38 additions & 38 deletions src/server/running-services/helpers/transformers/running-service-to-entity-row.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,24 +69,24 @@ describe('#runningServiceToEntityRow', () => {
headers: 'infra-dev',
isSlim: true
},
{
expect.objectContaining({
headers: 'management'
},
{
}),
expect.objectContaining({
headers: 'dev'
},
{
}),
expect.objectContaining({
headers: 'test'
},
{
}),
expect.objectContaining({
headers: 'ext-test'
},
{
}),
expect.objectContaining({
headers: 'perf-test'
},
{
}),
expect.objectContaining({
headers: 'prod'
}
})
]
})
})
Expand Down Expand Up @@ -130,24 +130,24 @@ describe('#runningServiceToEntityRow', () => {
headers: 'infra-dev',
isSlim: true
},
{
expect.objectContaining({
headers: 'management'
},
{
}),
expect.objectContaining({
headers: 'dev'
},
{
}),
expect.objectContaining({
headers: 'test'
},
{
}),
expect.objectContaining({
headers: 'ext-test'
},
{
}),
expect.objectContaining({
headers: 'perf-test'
},
{
}),
expect.objectContaining({
headers: 'prod'
}
})
]
})
})
Expand Down Expand Up @@ -194,27 +194,27 @@ describe('#runningServiceToEntityRow', () => {
},
headers: 'team'
},
{
expect.objectContaining({
headers: 'infra-dev'
},
{
}),
expect.objectContaining({
headers: 'management'
},
{
}),
expect.objectContaining({
headers: 'dev'
},
{
}),
expect.objectContaining({
headers: 'test'
},
{
}),
expect.objectContaining({
headers: 'ext-test'
},
{
}),
expect.objectContaining({
headers: 'perf-test'
},
{
}),
expect.objectContaining({
headers: 'prod'
}
})
]
})
})
Expand Down

0 comments on commit 23e58c7

Please sign in to comment.