Skip to content

G
gitlab-ce
Commit ad35de22 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Fixes stylelint warnings in environments 

Deletes unused CSS
Moves prometheus selectors into a prometheus file
parent 425377f3
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 349 deletions
app/assets/javascripts/environments/components/confirm_rollback_modal.vue
View file @ ad35de22
......@@ -50,7 +50,7 @@ export default {
},
modalText() {
const linkStart = `<a class="commit-sha" href="${_.escape(this.commitUrl)}">`;
const linkStart = `<a class="commit-sha mr-0" href="${_.escape(this.commitUrl)}">`;
const commitId = _.escape(this.commitShortSha);
const linkEnd = '</a>';
const name = _.escape(this.name);
......
app/assets/javascripts/environments/components/environment_item.vue
View file @ ad35de22
......@@ -504,22 +504,28 @@ export default {
class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
role="gridcell"
>
<span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
<span v-if="shouldRenderDeploymentID" class="text-break-word">
{{ deploymentInternalId }}
</span>
<span v-if="!model.isFolder && deploymentHasUser">
<span v-if="!model.isFolder && deploymentHasUser" class="text-break-word">
by
<user-avatar-link
:link-href="deploymentUser.web_url"
:img-src="deploymentUser.avatar_url"
:img-alt="userImageAltDescription"
:tooltip-text="deploymentUser.username"
class="js-deploy-user-container"
class="js-deploy-user-container float-none"
/>
</span>
</div>
<div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
<a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
<a
v-if="shouldRenderBuildName"
:href="buildPath"
class="build-link cgray flex-truncate-parent"
>
<span class="flex-truncate-child">{{ buildName }}</span>
</a>
</div>
......
app/assets/javascripts/environments/components/environment_rollback.vue
View file @ ad35de22
......@@ -72,10 +72,9 @@ export default {
<gl-button
v-gl-tooltip
v-gl-modal.confirm-rollback-modal
variant="secondary"
:disabled="isLoading"
:title="title"
class="d-none d-md-block"
class="d-none d-md-block text-secondary"
@click="onClick"
>
<icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
......
app/assets/javascripts/environments/components/environment_terminal_button.vue
View file @ ad35de22
......@@ -39,7 +39,7 @@ export default {
:aria-label="title"
:href="terminalPath"
:class="{ disabled: disabled }"
class="btn terminal-button d-none d-sm-none d-md-block"
class="btn terminal-button d-none d-sm-none d-md-block text-secondary"
>
<icon name="terminal" />
</a>
......
app/assets/javascripts/vue_shared/components/commit.vue
View file @ ad35de22
......@@ -162,7 +162,7 @@ export default {
</template>
<icon name="commit" class="commit-icon js-commit-icon" />
<gl-link :href="commitUrl" class="commit-sha"> {{ shortSha }} </gl-link>
<gl-link :href="commitUrl" class="commit-sha mr-0"> {{ shortSha }} </gl-link>
<div class="commit-title flex-truncate-parent">
<span v-if="title" class="flex-truncate-child">
......
app/assets/stylesheets/pages/environments.scss
View file @ ad35de22
......@@ -12,34 +12,6 @@
.environments-container {
.ci-table {
.deployment-column {
> span {
word-break: break-all;
}
.avatar {
float: none;
}
}
.btn-group {
> .btn:not(.btn-danger) {
color: $gl-text-color-secondary;
}
svg path {
fill: $gl-text-color-secondary;
}
.dropdown {
outline: none;
}
}
.btn .text-center {
display: inline;
}
.commit-title {
margin: 0;
}
......@@ -49,47 +21,16 @@
color: $gl-text-color-secondary;
}
.dropdown-menu {
.fa {
margin-right: 6px;
color: $gl-text-color-secondary;
}
}
.build-link,
.ref-name {
color: $gl-text-color;
}
.stop-env-link,
.external-url {
color: $gl-text-color-secondary;
.stop-env-icon {
font-size: 14px;
}
}
.deployment .build-column {
.build-link {
color: $gl-text-color;
}
.avatar {
float: none;
margin-right: 0;
}
}
.folder-icon {
margin-right: 3px;
color: $gl-text-color-secondary;
display: inline-block;
vertical-align: text-top;
.fa:nth-child(1) {
margin-right: 3px;
}
}
.folder-name {
......@@ -103,12 +44,6 @@
text-align: center;
}
.branch-commit {
.commit-sha {
margin-right: 0;
}
}
.no-btn {
border: 0;
background: none;
......@@ -168,11 +103,6 @@
opacity: 0.25;
}
.prometheus-graph-overlay {
fill: none;
opacity: 0;
pointer-events: all;
}
.rect-text-metric {
fill: $white-light;
......@@ -203,276 +133,10 @@
stroke: $gray-darkest;
}
.prometheus-graphs {
.dropdowns {
.dropdown-menu-toggle {
svg {
position: absolute;
right: 5%;
top: 25%;
}
}
.dropdown-menu-toggle,
.dropdown-menu {
width: 240px;
}
}
}
.environments-actions {
.external-url,
.monitoring-url,
.terminal-button,
.stop-env-link {
.terminal-button {
width: 38px;
}
}
.prometheus-panel {
margin-top: 20px;
}
.prometheus-graph-group {
display: flex;
flex-wrap: wrap;
padding: $gl-padding / 2;
}
.prometheus-graph {
padding: $gl-padding / 2;
}
.prometheus-graph-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $gl-padding-8;
h5 {
font-size: $gl-font-size-large;
margin: 0;
}
}
.prometheus-graph-cursor {
position: absolute;
background: $gray-600;
width: 1px;
}
.prometheus-graph-flag {
display: block;
min-width: 160px;
border: 0;
box-shadow: 0 1px 4px 0 $black-transparent;
h5 {
padding: 0;
margin: 0;
font-size: 14px;
line-height: 1.2;
}
.deploy-meta-content {
border-bottom: 1px solid $white-dark;
svg {
height: 15px;
vertical-align: bottom;
}
}
&.popover {
padding: 0;
&.left {
left: auto;
right: 0;
margin-right: 10px;
> .arrow {
right: -14px;
border-left-color: $border-color;
}
> .arrow::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 4px solid $gray-50;
}
.arrow-shadow {
right: -3px;
box-shadow: 1px 0 9px 0 $black-transparent;
}
}
&.right {
left: 0;
right: auto;
margin-left: 10px;
> .arrow {
left: -7px;
border-right-color: $border-color;
}
> .arrow::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 4px solid $gray-50;
}
.arrow-shadow {
left: -3px;
box-shadow: 1px 0 8px 0 $black-transparent;
}
}
> .arrow {
top: 10px;
margin: 0;
}
.arrow-shadow {
content: '';
position: absolute;
width: 7px;
height: 7px;
background-color: transparent;
transform: rotate(45deg);
top: 13px;
}
> .popover-title,
> .popover-content,
> .popover-header,
> .popover-body {
padding: 8px;
font-size: 12px;
white-space: nowrap;
position: relative;
}
> .popover-title {
background-color: $gray-50;
border-radius: $border-radius-default $border-radius-default 0 0;
}
}
strong {
font-weight: 600;
}
}
.prometheus-table {
border-collapse: collapse;
padding: 0;
margin: 0;
td {
vertical-align: middle;
+ td {
padding-left: 8px;
vertical-align: top;
}
}
.legend-metric-title {
font-size: 12px;
vertical-align: middle;
}
}
.prometheus-svg-container {
position: relative;
height: 0;
width: 100%;
padding: 0;
padding-bottom: 100%;
.text-metric-usage {
fill: $black;
font-weight: $gl-font-weight-normal;
font-size: 12px;
}
> svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
text {
fill: $gl-text-color;
stroke-width: 0;
}
.text-metric-bold {
font-weight: $gl-font-weight-bold;
}
.label-axis-text {
fill: $black;
font-weight: $gl-font-weight-normal;
font-size: 10px;
}
.legend-axis-text {
fill: $black;
}
.tick {
> line {
stroke: $gray-darker;
}
> text {
fill: $gray-600;
font-size: 10px;
}
}
.y-label-text,
.x-label-text {
fill: $gray-darkest;
}
.axis-tick {
stroke: $gray-darker;
}
.deploy-info-text {
dominant-baseline: text-before-edge;
font-size: 12px;
}
.deploy-info-text-link {
font-family: $monospace-font;
fill: $blue-600;
&:hover {
fill: $blue-800;
}
}
@include media-breakpoint-down(sm) {
.label-axis-text,
.text-metric-usage,
.legend-axis-text {
font-size: 8px;
}
.tick > text {
font-size: 8px;
}
}
}
}
.prometheus-table-row-highlight {
background-color: $gray-100;
}
app/assets/stylesheets/pages/prometheus.scss 0 → 100644
View file @ ad35de22
.prometheus-graphs {
.dropdowns {
.dropdown-menu-toggle {
svg {
position: absolute;
right: 5%;
top: 25%;
}
}
.dropdown-menu-toggle,
.dropdown-menu {
width: 240px;
}
}
}
.prometheus-panel {
margin-top: 20px;
}
.prometheus-graph-group {
display: flex;
flex-wrap: wrap;
padding: $gl-padding / 2;
}
.prometheus-graph {
padding: $gl-padding / 2;
}
.prometheus-graph-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $gl-padding-8;
h5 {
font-size: $gl-font-size-large;
margin: 0;
}
}
.prometheus-graph-cursor {
position: absolute;
background: $gray-600;
width: 1px;
}
.prometheus-graph-flag {
display: block;
min-width: 160px;
border: 0;
box-shadow: 0 1px 4px 0 $black-transparent;
h5 {
padding: 0;
margin: 0;
font-size: 14px;
line-height: 1.2;
}
.deploy-meta-content {
border-bottom: 1px solid $white-dark;
svg {
height: 15px;
vertical-align: bottom;
}
}
&.popover {
padding: 0;
&.left {
left: auto;
right: 0;
margin-right: 10px;
> .arrow {
right: -14px;
border-left-color: $border-color;
}
> .arrow::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 4px solid $gray-50;
}
.arrow-shadow {
right: -3px;
box-shadow: 1px 0 9px 0 $black-transparent;
}
}
&.right {
left: 0;
right: auto;
margin-left: 10px;
> .arrow {
left: -7px;
border-right-color: $border-color;
}
> .arrow::after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 4px solid $gray-50;
}
.arrow-shadow {
left: -3px;
box-shadow: 1px 0 8px 0 $black-transparent;
}
}
> .arrow {
top: 10px;
margin: 0;
}
.arrow-shadow {
content: '';
position: absolute;
width: 7px;
height: 7px;
background-color: transparent;
transform: rotate(45deg);
top: 13px;
}
> .popover-title,
> .popover-content,
> .popover-header,
> .popover-body {
padding: 8px;
font-size: 12px;
white-space: nowrap;
position: relative;
}
> .popover-title {
background-color: $gray-50;
border-radius: $border-radius-default $border-radius-default 0 0;
}
}
strong {
font-weight: 600;
}
}
.prometheus-table {
border-collapse: collapse;
padding: 0;
margin: 0;
td {
vertical-align: middle;
+ td {
padding-left: 8px;
vertical-align: top;
}
}
.legend-metric-title {
font-size: 12px;
vertical-align: middle;
}
}
.prometheus-svg-container {
position: relative;
height: 0;
width: 100%;
padding: 0;
padding-bottom: 100%;
.text-metric-usage {
fill: $black;
font-weight: $gl-font-weight-normal;
font-size: 12px;
}
> svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
text {
fill: $gl-text-color;
stroke-width: 0;
}
.text-metric-bold {
font-weight: $gl-font-weight-bold;
}
.label-axis-text {
fill: $black;
font-weight: $gl-font-weight-normal;
font-size: 10px;
}
.legend-axis-text {
fill: $black;
}
.tick {
> line {
stroke: $gray-darker;
}
> text {
fill: $gray-600;
font-size: 10px;
}
}
.y-label-text,
.x-label-text {
fill: $gray-darkest;
}
.axis-tick {
stroke: $gray-darker;
}
.deploy-info-text {
dominant-baseline: text-before-edge;
font-size: 12px;
}
.deploy-info-text-link {
font-family: $monospace-font;
fill: $blue-600;
&:hover {
fill: $blue-800;
}
}
@include media-breakpoint-down(sm) {
.label-axis-text,
.text-metric-usage,
.legend-axis-text {
font-size: 8px;
}
.tick > text {
font-size: 8px;
}
}
}
}
.prometheus-table-row-highlight {
background-color: $gray-100;
}
.prometheus-graph-overlay {
fill: none;
opacity: 0;
pointer-events: all;
}
app/views/projects/ci/builds/_build.html.haml
View file @ ad35de22
......@@ -30,7 +30,7 @@
= custom_icon("icon_commit")
- if commit_sha
= link_to job.short_sha, project_commit_path(job.project, job.sha), class: "commit-sha"
= link_to job.short_sha, project_commit_path(job.project, job.sha), class: "commit-sha mr-0"
- if job.stuck?
= icon('warning', class: 'text-warning has-tooltip', title: _('Job is stuck. Check runners.'))
......
app/views/projects/deployments/_commit.html.haml
View file @ ad35de22
......@@ -6,7 +6,7 @@
= link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
.icon-container.commit-icon
= custom_icon("icon_commit")
= link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha"
= link_to deployment.short_sha, project_commit_path(@project, deployment.sha), class: "commit-sha mr-0"
%p.commit-title.flex-truncate-parent
%span.flex-truncate-child
......
app/views/projects/deployments/_deployment.html.haml
View file @ ad35de22
......@@ -18,7 +18,7 @@
- if deployment.user
%div
by
= user_avatar(user: deployment.user, size: 20)
= user_avatar(user: deployment.user, size: 20, css_class: "mr-0 float-none")
.table-section.section-15{ role: 'gridcell' }
.table-mobile-header{ role: 'rowheader' }= _("Created")
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7