github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(ui): consistent widget padding [r8s-136] (#82)

pull/12292/merge
Ali 2024-11-05 14:25:40 +13:00 committed by GitHub
parent 3c0d25f3bd
commit 458d722d47
16 changed files with 72 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/css/rdash.css
View File

@ -144,12 +144,7 @@ div.input-mask {
}
.widget .widget-footer {
border-top: 1px solid #e9e9e9;
padding: 10px;
}
.widget .widget-footer {
border-top: 1px solid #e9e9e9;
padding: 10px;
padding: 20px;
}
.widget .widget-title .pagination,
.widget .widget-footer .pagination {

28
app/assets/css/vendor-override.css
View File

@ -32,6 +32,34 @@
border-top: 1px solid var(--border-table-top-color);
}
/* the first cell in the table should have 20px padding instead of 5px to match all other widgets */
.widget .table:not(td .table) > thead > tr > th:first-child,
.widget .table:not(td .table) > tbody > tr > th:first-child,
.widget .table:not(td .table) > tfoot > tr > th:first-child,
.widget .table:not(td .table) > thead > tr > td:first-child,
.widget .table:not(td .table) > tbody > tr > td:first-child,
.widget .table:not(td .table) > tfoot > tr > td:first-child {
padding-left: 20px;
}
/* the last cell in the table should have 20px padding instead of 5px to match all other widgets */
.widget .table:not(td .table) > thead > tr > th:last-child,
.widget .table:not(td .table) > tbody > tr > th:last-child,
.widget .table:not(td .table) > tfoot > tr > th:last-child,
.widget .table:not(td .table) > thead > tr > td:last-child,
.widget .table:not(td .table) > tbody > tr > td:last-child,
.widget .table:not(td .table) > tfoot > tr > td:last-child {
padding-right: 20px;
}
/* tables inside widgets should extend the full width of the widget, with 20px table cell padding padding on the left and right */
.widget-body:not(.no-padding) > .table,
.widget-body:not(.no-padding) > .widget-content > .table {
margin: 0 -20px;
width: calc(100% + 40px);
max-width: calc(100% + 40px);
}
.input-group-addon {
color: var(--text-input-group-addon-color);
background-color: var(--bg-input-group-addon-color);

2
app/docker/views/containers/edit/container.html
View File

@ -146,7 +146,7 @@
</tr>
<tr authorization="DockerContainerLogs, DockerContainerInspect, DockerContainerStats, DockerExecStart">
<td colspan="2">
<div class="btn-group" role="group" aria-label="...">
<div class="btn-group -ml-3" role="group" aria-label="...">
<a authorization="DockerContainerLogs" class="btn" type="button" ui-sref="docker.containers.container.logs({ id: container.Id })"
><pr-icon icon="'file-text'" class-name="'space-right'"></pr-icon>Logs</a
>

4
app/docker/views/services/edit/includes/configs.html
View File

@ -2,7 +2,7 @@
<rd-widget>
<rd-widget-header icon="list" title-text="Configs"> </rd-widget-header>
<rd-widget-body classes="no-padding">
<div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
<div class="form-inline" style="padding: 10px 20px" authorization="DockerServiceUpdate">
Add a config:
<select
class="form-control !h-[30px] !text-[13px]"
@ -12,7 +12,7 @@
>
<option selected disabled hidden value="">Select a config</option>
</select>
<a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'"></pr-icon> add config </a>
<a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'"></pr-icon> Add config </a>
</div>
<table class="table" style="margin-top: 5px">
<thead>

4
app/docker/views/services/edit/includes/logging.html
View File

@ -2,7 +2,7 @@
<rd-widget>
<rd-widget-header icon="list" title-text="Logging driver"> </rd-widget-header>
<rd-widget-body classes="no-padding">
<div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
<div class="form-inline" style="padding: 10px 20px" authorization="DockerServiceUpdate">
Driver:
<select
class="form-control !h-[30px] !text-[13px]"
@ -16,7 +16,7 @@
<option value="none">none</option>
</select>
<a class="btn btn-default btn-sm" ng-click="!service.LogDriverName || service.LogDriverName === 'none' || addLogDriverOpt(service)">
<pr-icon icon="'plus'"></pr-icon> add logging driver option
<pr-icon icon="'plus'"></pr-icon> Add logging driver option
</a>
</div>
<table class="table">

4
app/docker/views/services/edit/includes/secrets.html
View File

@ -2,7 +2,7 @@
<rd-widget>
<rd-widget-header icon="list" title-text="Secrets"> </rd-widget-header>
<rd-widget-body classes="no-padding">
<div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
<div class="form-inline" style="padding: 10px 20px" authorization="DockerServiceUpdate">
Add a secret:
<select
class="form-control !h-[30px] !text-[13px]"
@ -20,7 +20,7 @@
<label class="btn btn-light" ng-model="state.addSecret.override" uib-btn-radio="false">Default location</label>
<label class="btn btn-light" ng-model="state.addSecret.override" uib-btn-radio="true">Override</label>
</div>
<a class="btn btn-default btn-sm" ng-click="addSecret(service, state.addSecret)"> <pr-icon icon="'plus'"></pr-icon> add secret </a>
<a class="btn btn-default btn-sm" ng-click="addSecret(service, state.addSecret)"> <pr-icon icon="'plus'"></pr-icon> Add secret </a>
</div>
<table class="table" style="margin-top: 5px">
<thead>

6
app/kubernetes/views/applications/helm/helm.html
View File

@ -24,19 +24,19 @@
<table class="table">
<tbody class="release-table">
<tr>
<td class="vertical-center !pl-0">Name</td>
<td class="vertical-center">Name</td>
<td class="vertical-center !p-2" data-cy="k8sAppDetail-appName">
{{ $ctrl.state.release.name }}
</td>
</tr>
<tr>
<td class="vertical-center !pl-0">Chart</td>
<td class="vertical-center">Chart</td>
<td class="vertical-center !p-2">
{{ $ctrl.state.release.chart }}
</td>
</tr>
<tr>
<td class="vertical-center !pl-0">App version</td>
<td class="vertical-center">App version</td>
<td class="vertical-center !p-2">
{{ $ctrl.state.release.app_version }}
</td>

6
app/kubernetes/views/cluster/node/node.html
View File

@ -11,7 +11,7 @@
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
<uib-tab-heading class="flex-center gap-1"> <pr-icon icon="'hard-drive'" size="'sm'"></pr-icon> Node </uib-tab-heading>
<form class="form-horizontal" name="kubernetesNodeUpdateForm" style="padding: 20px" autocomplete="off">
<form class="form-horizontal widget-body" name="kubernetesNodeUpdateForm" autocomplete="off">
<table class="table">
<tbody ng-if="ctrl.node">
<tr>
@ -73,7 +73,7 @@
</tbody>
</table>
<div style="padding: 8px">
<div class="mt-5">
<kubernetes-resource-reservation
ng-if="ctrl.resourceReservation"
cpu-reservation="ctrl.resourceReservation.CpuRequest"
@ -88,7 +88,7 @@
</kubernetes-resource-reservation>
</div>
<div style="padding: 8px">
<div>
<!-- #region labels -->
<div class="col-sm-12 form-section-title"> Labels </div>

6
app/kubernetes/views/configurations/configmap/edit/configMap.html
View File

@ -28,15 +28,15 @@
<pr-icon icon="'file-code'"></pr-icon>
ConfigMap
</uib-tab-heading>
<div style="padding: 20px">
<div class="widget-body">
<table class="table" data-cy="k8sConfigDetail-configTable">
<tbody>
<tr>
<td class="w-[40%] !border-none !pl-0">Name</td>
<td class="w-[40%] !border-none">Name</td>
<td class="!border-none"> {{ ctrl.configuration.Name }} </td>
</tr>
<tr>
<td class="!pl-0">Namespace</td>
<td>Namespace</td>
<td>
<a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a>
<span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.isSystemNamespace()">system</span>

8
app/kubernetes/views/configurations/secret/edit/secret.html
View File

@ -28,25 +28,25 @@
<pr-icon icon="'lock'"></pr-icon>
Secret
</uib-tab-heading>
<div style="padding: 20px">
<div class="widget-body">
<table class="table" data-cy="k8sConfigDetail-configTable">
<tbody>
<tr>
<td class="w-[40%] !border-none !pl-0">Name</td>
<td class="w-[40%] !border-none">Name</td>
<td class="!border-none">
{{ ctrl.configuration.Name }}
<span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.configuration.IsRegistrySecret">system</span>
</td>
</tr>
<tr>
<td class="!pl-0">Namespace</td>
<td>Namespace</td>
<td>
<a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a>
<span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.isSystemNamespace()">system</span>
</td>
</tr>
<tr ng-if="ctrl.secretTypeName">
<td class="!pl-0">Secret Type</td>
<td>Secret Type</td>
<td> {{ ctrl.secretTypeName }} </td>
</tr>
</tbody>

2
app/kubernetes/views/resource-pools/access/resourcePoolAccess.html
View File

@ -25,7 +25,7 @@
<table class="table">
<tbody>
<tr>
<td class="!pl-0">Name</td>
<td>Name</td>
<td>
{{ ctrl.pool.Namespace.Name }}
</td>

29
app/kubernetes/views/resource-pools/edit/resourcePool.html
View File

@ -15,23 +15,18 @@
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
<uib-tab-heading class="vertical-center"> <pr-icon icon="'layers'"></pr-icon> Namespace </uib-tab-heading>
<form class="form-horizontal" autocomplete="off" name="resourcePoolEditForm" style="padding: 20px; margin-top: 10px">
<!-- name-input -->
<div class="form-group">
<div class="col-sm-12">
<table class="table">
<tbody>
<tr>
<td>Name</td>
<td>
{{ ctrl.pool.Namespace.Name }}
<span class="label label-info image-tag label-margins" ng-if="ctrl.isSystem">system</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<form class="form-horizontal widget-body" autocomplete="off" name="resourcePoolEditForm" style="margin-top: 10px">
<table class="table">
<tbody>
<tr>
<td class="w-[40%]">Name</td>
<td>
{{ ctrl.pool.Namespace.Name }}
<span class="label label-info image-tag label-margins" ng-if="ctrl.isSystem">system</span>
</td>
</tr>
</tbody>
</table>
<div class="col-sm-12 !p-0">
<annotations-be-teaser></annotations-be-teaser>

2
app/kubernetes/views/volumes/edit/volume.html
View File

@ -28,7 +28,7 @@
<pr-icon icon="'database'"></pr-icon>
Volume
</uib-tab-heading>
<div style="padding: 20px">
<div class="widget-body">
<table class="table">
<tbody>
<tr>

4
app/portainer/components/registry-details/registry-details.html
View File

@ -6,13 +6,13 @@
<table class="table">
<tbody>
<tr>
<td style="padding-left: 20px">Name</td>
<td>Name</td>
<td>
{{ $ctrl.registry.Name }}
</td>
</tr>
<tr>
<td style="padding-left: 20px">URL</td>
<td>URL</td>
<td>
{{ $ctrl.registry.URL }}
</td>

6
app/react/kubernetes/dashboard/EnvironmentInfo.tsx
View File

@ -23,7 +23,7 @@ export function EnvironmentInfo() {
<table className="table">
<tbody>
<tr>
<td className="!border-none !pl-0">Environment</td>
<td className="!border-none">Environment</td>
<td
className="!border-none"
data-cy="dashboard-environmentName"
@ -32,13 +32,13 @@ export function EnvironmentInfo() {
</td>
</tr>
<tr>
<td className="!border-t !pl-0">URL</td>
<td className="!border-t">URL</td>
<td className="!border-t" data-cy="dashboard-environmenturl">
{stripProtocol(environmentData.URL) || '-'}
</td>
</tr>
<tr>
<td className="!pl-0">Tags</td>
<td>Tags</td>
<td data-cy="dashboard-environmentTags">{tagNames}</td>
</tr>
</tbody>

8
app/react/portainer/access-control/AccessManagement/AccessDatatable/AccessDatatable.tsx
View File

@ -80,9 +80,9 @@ export function AccessDatatable({
</>
)}
description={
<div className="small text-muted mx-4 mb-4">
<>
{inheritFrom && (
<>
<div className="small text-muted">
<div>
Access tagged as <code>inherited</code> are inherited from the
group access. They cannot be removed or modified at the
@ -91,7 +91,7 @@ export function AccessDatatable({
<div>
Access tagged as <code>override</code> are overriding the group
</div>
</>
</div>
)}
{isBE && showWarning && isUpdateEnabled && (
<TextTip>
@ -101,7 +101,7 @@ export function AccessDatatable({
</div>
</TextTip>
)}
</div>
</>
}
/>
);