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

UI/UX improvements

Browse Source 
--Added check for if a task deadline has passed and show appropriate UI to intern
This commit is contained in:
sairaj mote 2023-01-06 01:12:36 +05:30
parent 488555f6c8
commit 77abee0692
4 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -1848,6 +1848,10 @@ ul {
margin: 0 -1rem 0.5rem -1rem;
border: solid thin rgba(var(--text-color), 0.1);
}
.task-card .task__completion-timeline.deadline-passed {
background-color: var(--danger-color);
color: rgba(var(--foreground-color), 1);
}
.task-card .task__completion-timeline:hover .task__completion-timeline__progress__disc::before {
content: "";
position: absolute;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
css/main.scss
View File

@ -1776,6 +1776,10 @@ ul {
padding: 0.5rem 1rem;
margin: 0 -1rem 0.5rem -1rem;
border: solid thin rgba(var(--text-color), 0.1);
&.deadline-passed {
background-color: var(--danger-color);
color: rgba(var(--foreground-color), 1);
}
&:hover {
.task__completion-timeline__progress__disc::before {
content: "";

50
index.html
View File

@ -2243,8 +2243,8 @@
</li>
`;
},
internTaskCard(uniqueId) {
const [projectCode, branch, task] = uniqueId.split('_');
internTaskCard(taskId) {
const [projectCode, branch, task] = taskId.split('_');
const { title, description, duration, durationType } = RIBC.getTaskDetails(projectCode, branch, task)
const projectName = RIBC.getProjectDetails(projectCode).projectName
const { assignedTasks } = RIBC.getInternRecord(floGlobals.myFloID)
@ -2254,31 +2254,35 @@
})
// add days to milliseconds
const durationMilliseconds = durationType === 'days' ? duration * 24 * 60 * 60 * 1000 : duration * 60 * 60 * 1000
const taskDeadline = assignedTasks[uniqueId].assignedOn + durationMilliseconds
const completionPercentage = Math.round((Date.now() - assignedTasks[uniqueId].assignedOn) / durationMilliseconds * 100)
const taskDeadline = assignedTasks[taskId].assignedOn + durationMilliseconds
const elapsedTime = Math.round((Date.now() - assignedTasks[taskId].assignedOn) / durationMilliseconds * 100)
const hasDeadlinePassed = Date.now() > taskDeadline
return html`
<li class="task-card" data-unique-id="${uniqueId}">
<li class="task-card" data-unique-id="${taskId}">
<span class="task__project-title">${projectName}</span>
<h4 class="task__title">${title}</h4>
<div class="task__completion-timeline flex align-center">
<div class="flex flex-direction-column gap-0-3">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z"/></svg>
<span style="font-size: 0.8rem; white-space: nowrap">Assigned</span>
<div class=${`task__completion-timeline flex align-center ${hasDeadlinePassed ? 'deadline-passed' : ''}`}>
${hasDeadlinePassed ? html`
<h3>Deadline passed</h3>
`: html`
<div class="flex flex-direction-column gap-0-3">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z"/></svg>
<span style="font-size: 0.8rem; white-space: nowrap">Assigned</span>
</div>
<time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">${getFormattedTime(assignedTasks[taskId].assignedOn, 'date-only')}</time>
</div>
<div class="task__completion-timeline__progress" role="progressbar">
<div class="task__completion-timeline__progress__bar" style=${`--progress: ${elapsedTime}%`}></div>
<div class="task__completion-timeline__progress__disc"></div>
</div>
<time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">${getFormattedTime(assignedTasks[uniqueId].assignedOn, 'date-only')}</time>
</div>
<div class="task__completion-timeline__progress" role="progressbar">
<div class="task__completion-timeline__progress__bar" style=${`--progress: ${completionPercentage}%`}></div>
<div class="task__completion-timeline__progress__disc"></div>
</div>
<div class="flex flex-direction-column gap-0-3">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M11,6H9V4h2V6z M15,4h-2v2h2V4z M9,14h2v-2H9V14z M19,10V8h-2v2H19z M19,14v-2h-2v2H19z M13,14h2v-2h-2V14z M19,4h-2v2h2 V4z M13,8V6h-2v2H13z M7,10V8h2V6H7V4H5v16h2v-8h2v-2H7z M15,12h2v-2h-2V12z M11,10v2h2v-2H11z M9,8v2h2V8H9z M13,10h2V8h-2V10z M15,6v2h2V6H15z"/></g></g></svg>
<span style="font-size: 0.8rem;">Deadline</span>
</div>
<time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">${getFormattedTime(taskDeadline, 'date-only')}</time>
</div>
<div class="flex flex-direction-column gap-0-3">
<div class="flex align-center gap-0-3">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M11,6H9V4h2V6z M15,4h-2v2h2V4z M9,14h2v-2H9V14z M19,10V8h-2v2H19z M19,14v-2h-2v2H19z M13,14h2v-2h-2V14z M19,4h-2v2h2 V4z M13,8V6h-2v2H13z M7,10V8h2V6H7V4H5v16h2v-8h2v-2H7z M15,12h2v-2h-2V12z M11,10v2h2v-2H11z M9,8v2h2V8H9z M13,10h2V8h-2V10z M15,6v2h2V6H15z"/></g></g></svg>
<span style="font-size: 0.8rem;">Deadline</span>
</div>
<time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">${getFormattedTime(taskDeadline, 'date-only')}</time>
</div>`}
</div>
${linkifyDescription}
<button class="send-update-button button--small button--colored margin-left-auto" onclick=${initTaskUpdate}>