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

UI improvements and bug fixes

Browse Source
This commit is contained in:
sairaj mote 2023-01-17 20:56:53 +05:30
parent bd868547f2
commit e801740e93
4 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/main.css
View File

@ -2037,25 +2037,37 @@ input[type=date]:focus {
.pinned-card {
color: inherit;
display: grid;
display: flex;
border-radius: 0.5rem;
gap: 1rem;
padding: 1rem;
background-color: rgba(var(--foreground-color), 1);
grid-template-columns: auto 1fr;
align-items: center;
}
.pinned-card .project-icon {
display: flex;
display: grid;
background-color: rgba(var(--text-color), 0.06);
justify-self: start;
align-self: flex-start;
padding: 0.8rem;
place-content: center;
place-items: center;
border-radius: 2rem;
margin-right: 0.8rem;
grid-row: span 3;
}
.pinned-card .project-icon > * {
grid-area: 1/1;
}
.pinned-card .project-icon .icon {
fill: var(--accent-color);
}
.pinned-card .progress-icon {
transform: rotate(-90deg);
stroke-dasharray: 76;
stroke-dashoffset: var(--progress, 0);
stroke-width: 2;
stroke: var(--accent-color);
height: 3rem;
width: 3rem;
overflow: visible;
padding: 0.1rem;
}
.pinned-card .project__title {
color: rgba(var(--text-color), 0.9);
}
@ -2065,20 +2077,6 @@ input[type=date]:focus {
.pinned-card .project__complete-percent {
font-size: 0.8rem;
opacity: 0.8;
margin-top: 0.5rem;
}
.progress-bar {
display: flex;
height: 0.2rem;
background-color: rgba(var(--text-color), 0.2);
border-radius: 1rem;
overflow: hidden;
align-self: flex-end;
}
.progress-bar .progress-value {
background-color: var(--accent-color);
transition: width 0.3s;
}
@media only screen and (max-width: 640px) {
@ -2117,6 +2115,9 @@ input[type=date]:focus {
margin: 0 -1rem;
border-radius: 0;
}
#task_display_container {
flex-direction: column;
}
.hide-on-mobile {
display: none !important;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

44
css/main.scss
View File

@ -1972,24 +1972,36 @@ input[type="date"] {
}
.pinned-card {
color: inherit;
display: grid;
display: flex;
border-radius: 0.5rem;
gap: 1rem;
padding: 1rem;
background-color: rgba(var(--foreground-color), 1);
grid-template-columns: auto 1fr;
align-items: center;
.project-icon {
display: flex;
display: grid;
background-color: rgba(var(--text-color), 0.06);
justify-self: start;
align-self: flex-start;
padding: 0.8rem;
place-content: center;
place-items: center;
border-radius: 2rem;
margin-right: 0.8rem;
grid-row: span 3;
& > * {
grid-area: 1/1;
}
.icon {
fill: var(--accent-color);
}
}
.progress-icon {
transform: rotate(-90deg);
stroke-dasharray: 76;
stroke-dashoffset: var(--progress, 0);
stroke-width: 2;
stroke: var(--accent-color);
height: 3rem;
width: 3rem;
overflow: visible;
padding: 0.1rem;
}
.project__title {
color: rgba(var(--text-color), 0.9);
&:hover {
@ -1999,19 +2011,6 @@ input[type="date"] {
.project__complete-percent {
font-size: 0.8rem;
opacity: 0.8;
margin-top: 0.5rem;
}
}
.progress-bar {
display: flex;
height: 0.2rem;
background-color: rgba(var(--text-color), 0.2);
border-radius: 1rem;
overflow: hidden;
align-self: flex-end;
.progress-value {
background-color: var(--accent-color);
transition: width 0.3s;
}
}
@media only screen and (max-width: 640px) {
@ -2054,6 +2053,9 @@ input[type="date"] {
margin: 0 -1rem;
border-radius: 0;
}
#task_display_container {
flex-direction: column;
}
.hide-on-mobile {
display: none !important;
}

22
index.html
View File

@ -77,8 +77,9 @@
getRef('user_profile_id').textContent = showingFloID ? floGlobals.myBtcID : floGlobals.myFloID
showingFloID = !showingFloID
}, 10000)
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(floGlobals.myFloID)
floGlobals.loaded = true
RIBC.init(floGlobals.subAdmins.includes(floGlobals.myFloID)).then(result => {
RIBC.init(floGlobals.isSubAdmin).then(result => {
console.log(result)
renderAllElements()
routeTo(window.location.hash, { firstLoad: true })
@ -1189,7 +1190,7 @@
<div class="container-header">
<svg class="icon margin-right-0-5" 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"><rect fill="none" height="24" width="24"/><g><path d="M7.5,21H2V9h5.5V21z M14.75,3h-5.5v18h5.5V3z M22,11h-5.5v10H22V11z"/></g></svg>
<h4>Leaderboard</h4>
<a id="all_interns_btn" href="#/all_interns_page" class="button">All</a>
<a id="all_interns_btn" href="#/all_interns_page" class="button button--small">All</a>
</div>
<div id="top_interns" class="observe-empty-state">${highPerformingInterns.slice(0, 8).map(floId => render.internCard(floId))}</div>
<div class="empty-state">
@ -2386,7 +2387,8 @@
})
})
const completedTasks = projectTasks.filter(task => task === 'completed').length
let completePercent = parseFloat(((completedTasks / (projectTasks.length || 1)) * 100).toFixed(2))
const completePercent = parseInt((completedTasks / (projectTasks.length || 1)) * 100)
const strokeOffset = 76 - (completePercent * 0.76)
const isPinned = pinnedProjects.includes(projectCode);
let pinIcon = ''
if (isPinned) {
@ -2398,18 +2400,16 @@
<div class="pinned-card" data-id=${projectCode}>
<div class="project-icon">
<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="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2zM4 7v12h16V7H4z" /> </svg>
<svg class="progress-icon" style=${`--progress: ${strokeOffset}`} viewBox="0 0 24 24" height="24" width="24"> <circle cx="12" cy="12" r="12" fill="none" /> </svg>
</div>
<div class="flex space-between align-items-start">
<div class="grid gap-0-5 flex-1">
<a class="flex align-center" href=${`#/project_explorer/project?id=${projectCode}&branch=mainLine`}>
<h4 class="project__title">${projectName}</h4>
<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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
</a>
<button class="icon-only pin-project" title=${`${isPinned ? 'Unpin' : 'Pin'} this project`} onclick="pinProject(this)" data-pinned=${isPinned}>${pinIcon}</button>
<span class="project__complete-percent">${completePercent}% complete</span>
</div>
<div class="progress-bar">
<div class="progress-value" style=${`width: ${completePercent}%`}></div>
</div>
<span class="project__complete-percent">${completePercent}% complete</span>
<button class="icon-only pin-project" title=${`${isPinned ? 'Unpin' : 'Pin'} this project`} onclick="pinProject(this)" data-pinned=${isPinned}>${pinIcon}</button>
</div>
`;
},
@ -2431,7 +2431,7 @@
<div id="project_list_container">
<div class="flex align-center space-between margin-bottom-0-5">
<h4>Projects</h4>
<a href="#/project_explorer" class="button open-first-project">All</a>
<a href="#/project_explorer" class="button button--small open-first-project">All</a>
</div>
<div id="project_list" class="flex flex-direction-column gap-0-3">${unpinnedProjects}</div>
</div>
@ -2623,7 +2623,7 @@
let hasApplied = false
try {
floDapps.user.id
hasApplied = [...RIBC.getTaskRequests(false), ...sessionTaskRequests].find(({ details }) => {
hasApplied = floGlobals.isSubAdmin || [...RIBC.getTaskRequests(false), ...sessionTaskRequests].find(({ details }) => {
return taskId === details.taskId
})
} catch (e) { }