RanchiMall/ribc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

task timeline UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-11-29 04:04:14 +05:30
parent 957284bb43
commit 7c2051efe9
3 changed files with 68 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/main.css
View File

@ -1839,12 +1839,40 @@ ul {
margin: 0 -1rem 0.5rem -1rem; margin: 0 -1rem 0.5rem -1rem;
border: solid thin rgba(var(--text-color), 0.1); border: solid thin rgba(var(--text-color), 0.1);
} }
.task-card .task__completion-timeline:hover .task__completion-timeline__progress__disc::before {
content: "";
position: absolute;
display: flex;
width: 0;
height: 0;
top: 1rem;
border-style: solid;
border-width: 0 0.4rem 0.4rem 0.4rem;
border-color: transparent transparent var(--accent-color) transparent;
}
.task-card .task__completion-timeline:hover .task__completion-timeline__progress__disc::after {
content: "Completing task early will give you more points.";
position: absolute;
display: flex;
top: calc(100% + 0.5rem);
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
text-align: center;
width: 10rem;
padding: 0.5rem;
color: rgba(var(--text-color), 0.8);
background-color: var(--accent-color);
border-radius: 0.5rem;
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.16);
color: rgba(var(--background-color), 1);
}
.task-card .task__completion-timeline__progress { .task-card .task__completion-timeline__progress {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 0.2rem; height: 0.2rem;
background-color: rgba(var(--text-color), 0.2); background: linear-gradient(90deg, rgb(89, 90, 255) 0%, rgb(162, 0, 167) 60%, rgb(215, 43, 43) 80%);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.task-card .task__completion-timeline__progress__bar { .task-card .task__completion-timeline__progress__bar {
@ -1854,6 +1882,7 @@ ul {
width: var(--progress); width: var(--progress);
} }
.task-card .task__completion-timeline__progress__disc { .task-card .task__completion-timeline__progress__disc {
position: relative;
display: flex; display: flex;
height: 0.8rem; height: 0.8rem;
aspect-ratio: 1/1; aspect-ratio: 1/1;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

38
css/main.scss
View File

@ -1777,12 +1777,47 @@ ul {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 -1rem 0.5rem -1rem; margin: 0 -1rem 0.5rem -1rem;
border: solid thin rgba(var(--text-color), 0.1); border: solid thin rgba(var(--text-color), 0.1);
&:hover {
.task__completion-timeline__progress__disc::before {
content: "";
position: absolute;
display: flex;
width: 0;
height: 0;
top: 1rem;
border-style: solid;
border-width: 0 0.4rem 0.4rem 0.4rem;
border-color: transparent transparent var(--accent-color) transparent;
}
.task__completion-timeline__progress__disc::after {
content: "Completing task early will give you more points.";
position: absolute;
display: flex;
top: calc(100% + 0.5rem);
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
text-align: center;
width: 10rem;
padding: 0.5rem;
color: rgba(var(--text-color), 0.8);
background-color: var(--accent-color);
border-radius: 0.5rem;
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.16);
color: rgba(var(--background-color), 1);
}
}
&__progress { &__progress {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 0.2rem; height: 0.2rem;
background-color: rgba(var(--text-color), 0.2); background: linear-gradient(
90deg,
rgba(89, 90, 255, 1) 0%,
rgba(162, 0, 167, 1) 60%,
rgba(215, 43, 43, 1) 80%
);
border-radius: 0.5rem; border-radius: 0.5rem;
&__bar { &__bar {
height: 0.2rem; height: 0.2rem;
@ -1791,6 +1826,7 @@ ul {
width: var(--progress); width: var(--progress);
} }
&__disc { &__disc {
position: relative;
display: flex; display: flex;
height: 0.8rem; height: 0.8rem;
aspect-ratio: 1/1; aspect-ratio: 1/1;