Commit 4ed152e4 authored by Phil Hughes's avatar Phil Hughes

Merge branch '44294-skeleton-lines' into 'master'

Resolve "skeleton placeholder on diff has white background"

Closes #44294

See merge request gitlab-org/gitlab-ce!17792
parents d182f6d1 0e1c5ed3
......@@ -9,7 +9,7 @@
lines: {
type: Number,
required: false,
default: 6,
default: 3,
},
},
computed: {
......
......@@ -187,12 +187,9 @@ a {
animation: fadeInFull $fade-in-duration 1;
}
.animation-container {
background: $repo-editor-grey;
height: 40px;
overflow: hidden;
position: relative;
&.animation-container-small {
height: 12px;
......@@ -205,60 +202,43 @@ a {
}
}
&::before {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: blockTextShine;
animation-timing-function: linear;
background-image: $repo-editor-linear-gradient;
background-repeat: no-repeat;
background-size: 800px 45px;
content: ' ';
display: block;
height: 100%;
[class^="skeleton-line-"] {
position: relative;
}
div {
background: $white-light;
height: 6px;
left: 0;
position: absolute;
right: 0;
}
.skeleton-line-1 {
left: 0;
top: 8px;
}
.skeleton-line-2 {
left: 150px;
top: 0;
background-color: $theme-gray-100;
height: 10px;
}
overflow: hidden;
.skeleton-line-3 {
left: 0;
top: 23px;
}
&:not(:last-of-type) {
margin-bottom: 4px;
}
.skeleton-line-4 {
left: 0;
top: 38px;
&::after {
content: ' ';
display: block;
animation: blockTextShine 1s linear infinite forwards;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(
to right,
$theme-gray-100 0%,
$theme-gray-50 20%,
$theme-gray-100 40%,
$theme-gray-100 100%
);
height: 10px;
}
}
}
.skeleton-line-5 {
left: 200px;
top: 28px;
height: 10px;
}
$skeleton-line-widths: (
156px,
235px,
200px,
);
.skeleton-line-6 {
top: 14px;
left: 230px;
height: 10px;
@for $count from 1 through length($skeleton-line-widths) {
.skeleton-line-#{$count} {
width: nth($skeleton-line-widths, $count);
}
}
......
......@@ -713,20 +713,6 @@ $color-high-score: $green-400;
$color-average-score: $orange-400;
$color-low-score: $red-400;
/*
Repo editor
*/
$repo-editor-grey: #f6f7f9;
$repo-editor-grey-darker: #e9ebee;
$repo-editor-linear-gradient: linear-gradient(
to right,
$repo-editor-grey 0%,
$repo-editor-grey-darker,
20%,
$repo-editor-grey 40%,
$repo-editor-grey 100%
);
/*
Performance Bar
*/
......
......@@ -27,7 +27,7 @@ describe('RepoLoadingFile', () => {
const lines = [...container.querySelectorAll(':scope > div')];
expect(container).toBeTruthy();
expect(lines.length).toEqual(6);
expect(lines.length).toEqual(3);
assertLines(lines);
});
}
......
......@@ -14,8 +14,8 @@ describe('Skeleton loading container', () => {
vm.$destroy();
});
it('renders 6 skeleton lines by default', () => {
expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull();
it('renders 3 skeleton lines by default', () => {
expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull();
});
it('renders in full mode by default', () => {
......
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