UI tweaks
This commit is contained in:
sairaj mote
parent
a38d94ea37
commit
94e90be035
@ -150,7 +150,7 @@ button:not(:disabled),
|
||||
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
border: solid 1px rgba(var(--text-color), 0.1);
|
||||
}
|
||||
.button--primary {
|
||||
color: rgba(var(--background-color), 1);
|
||||
@ -168,6 +168,7 @@ button:not(:disabled),
|
||||
.button--danger {
|
||||
background-color: rgba(255, 115, 115, 0.062745098);
|
||||
color: var(--danger-color);
|
||||
border: solid 1px rgba(255, 115, 115, 0.3137254902);
|
||||
}
|
||||
.button--danger .icon {
|
||||
fill: var(--danger-color);
|
||||
@ -298,6 +299,7 @@ sm-chip[selected] {
|
||||
}
|
||||
|
||||
collapsed-text {
|
||||
--line-clamp: 2;
|
||||
--button-background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
collapsed-text:not([open]) {
|
||||
@ -1508,7 +1510,7 @@ ul {
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid thin rgba(var(--text-color), 0.4);
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
}
|
||||
.admin-task .task-title {
|
||||
line-height: 1.6;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -139,7 +139,7 @@ button,
|
||||
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
border: solid 1px rgba(var(--text-color), 0.1);
|
||||
&--primary {
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
@ -157,6 +157,7 @@ button,
|
||||
&--danger {
|
||||
background-color: #ff737310;
|
||||
color: var(--danger-color);
|
||||
border: solid 1px #ff737350;
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
@ -280,6 +281,7 @@ sm-chip {
|
||||
}
|
||||
|
||||
collapsed-text {
|
||||
--line-clamp: 2;
|
||||
--button-background: rgba(var(--foreground-color), 1);
|
||||
&:not([open]) {
|
||||
cursor: pointer;
|
||||
@ -1457,7 +1459,7 @@ ul {
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border: solid thin rgba(var(--text-color), 0.4);
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
.task-title {
|
||||
line-height: 1.6;
|
||||
font-size: 1.1rem;
|
||||
|
||||
34
index.html
34
index.html
@ -380,9 +380,9 @@
|
||||
</svg>
|
||||
Projects
|
||||
</a>
|
||||
<div class="flex flex-wrap align-items-start">
|
||||
<div class="flex flex-wrap align-items-start gap-0-3">
|
||||
<h2 id="editing_panel__title" data-editable></h2>
|
||||
<button class="button button--small button--transparent admin-option"
|
||||
<button class="button button--colored icon-only admin-option"
|
||||
title="Edit this title" onclick="makeEditable(this.previousElementSibling)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
@ -392,10 +392,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-wrap align-items-start">
|
||||
<div class="flex flex-wrap align-items-start gap-0-3">
|
||||
<p id="editing_panel__description" class="ws-pre-line wrap-around" data-editable>
|
||||
</p>
|
||||
<button class="button button--small button--transparent admin-option"
|
||||
<button class="button button--colored icon-only admin-option"
|
||||
title="Edit this description"
|
||||
onclick="makeEditable(this.previousElementSibling)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
@ -2045,7 +2045,7 @@
|
||||
assignedInternCard(internFloId, taskId) {
|
||||
const { hasDeadlinePassed, elapsedPercentage, taskDeadline } = getTaskDeadline(taskId, internFloId)
|
||||
const taskCompleted = RIBC.getInternRecord(internFloId).completedTasks.hasOwnProperty(taskId)
|
||||
let taskStatus = 'In progress'
|
||||
let taskStatus = 'In Progress';
|
||||
let statusModifier = '--in-progress'
|
||||
if (taskCompleted) {
|
||||
taskStatus = 'Completed'
|
||||
@ -2138,7 +2138,19 @@
|
||||
})
|
||||
return html`
|
||||
<li class=${`admin-task ${status}`} .dataset=${{ taskId: task }}>
|
||||
<div class="admin-task__task-number margin-right-auto">ID: ${task}</div>
|
||||
<div class="flex align-center gap-0-5 flex-wrap">
|
||||
<div class="admin-task__task-number">ID: ${task}</div>
|
||||
<button class="button button--small button--colored margin-left-auto" onclick=${markTaskAsCompleted}>
|
||||
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
|
||||
Mark as done
|
||||
</button>
|
||||
<button class="button icon-only button--colored" title="Edit task" onclick=${openTaskEditingPopup}>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"></path> </svg>
|
||||
</button>
|
||||
<button class="button button--danger icon-only" title="Delete this task" onclick="removeThisTask()">
|
||||
<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="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
${taskTitle}
|
||||
<div class="grid gap-1 intern-section">
|
||||
<div class="flex align-center gap-0-5">
|
||||
@ -2177,20 +2189,10 @@
|
||||
</collapsed-text>
|
||||
${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
|
||||
<div class="flex align-center gap-0-5 flex-wrap margin-top-1">
|
||||
<button class="button button--small button--colored" onclick=${markTaskAsCompleted}>
|
||||
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
|
||||
Mark as done
|
||||
</button>
|
||||
<button class="button button--small button--colored" onclick=${openNewBranchPopup}>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M7.105 15.21A3.001 3.001 0 1 1 5 15.17V8.83a3.001 3.001 0 1 1 2 0V12c.836-.628 1.874-1 3-1h4a3.001 3.001 0 0 0 2.895-2.21 3.001 3.001 0 1 1 2.032.064A5.001 5.001 0 0 1 14 13h-4a3.001 3.001 0 0 0-2.895 2.21zM6 17a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" /> </svg>
|
||||
Create Branch
|
||||
</button>
|
||||
<button class="button icon-only button--colored margin-left-auto" title="Edit task" onclick=${openTaskEditingPopup}>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"></path> </svg>
|
||||
</button>
|
||||
<button class="button--danger icon-only" title="Delete this task" onclick="removeThisTask()">
|
||||
<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="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user