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

UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-10-24 21:14:49 +05:30
parent 12608fa3b5
commit dbd501297a
5 changed files with 200 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.js
View File

File diff suppressed because one or more lines are too long

61
css/main.css
View File

@ -309,16 +309,13 @@ sm-option {
} }
strip-select { strip-select {
--gap: 0; --gap: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 3rem;
padding: 0.3rem;
} }
strip-option { strip-option {
position: relative; position: relative;
font-size: 0.8rem; font-size: 0.8rem;
--border-radius: 3rem; --border-radius: 0.3rem;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
@ -804,7 +801,6 @@ ul {
.landing__card { .landing__card {
display: grid; display: grid;
position: relative; position: relative;
width: min(64rem, 100%);
flex-shrink: 0; flex-shrink: 0;
margin: 0 auto; margin: 0 auto;
padding: 2rem max(1rem, 4vw); padding: 2rem max(1rem, 4vw);
@ -827,15 +823,7 @@ ul {
#task_display_wrapper { #task_display_wrapper {
margin: 0 auto; margin: 0 auto;
width: min(100%, 64rem); width: min(100%, 48rem);
}
#task_display_wrapper > :first-child {
width: min(14rem, 100%);
align-content: start;
}
#task_display_wrapper > :last-child {
width: 32rem;
flex: 1;
} }
#sign_in, #sign_in,
@ -1017,9 +1005,9 @@ ul {
.display-task__detail { .display-task__detail {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
background-color: rgba(var(--text-color), 0.04); background-color: rgba(var(--text-color), 0.06);
border-radius: 0.3rem; border-radius: 1rem;
padding: 0.3rem 0.5rem; padding: 0.4rem 0.8rem;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
@ -1045,19 +1033,23 @@ ul {
display: flex; display: flex;
position: relative; position: relative;
justify-content: center; justify-content: center;
padding-top: 0.5rem; padding-top: 0.3rem;
} }
.task .left .circle { .task .left .circle {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
align-self: flex-start; align-self: flex-start;
height: 1rem; height: 1.4rem;
width: 1rem; padding: 0.15rem;
aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
background: rgba(var(--foreground-color), 1); background: rgba(var(--text-color), 0.1);
border: solid 2px rgba(var(--text-color), 0.4);
z-index: 1; z-index: 1;
} }
.task .left .circle .icon {
width: 100%;
height: 100%;
}
.task .left .line { .task .left .line {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -1096,8 +1088,10 @@ ul {
} }
.completed .left .circle { .completed .left .circle {
border: solid 2px #00c853 !important; background: rgba(0, 200, 83, 0.1254901961);
background: #00c853 !important; }
.completed .left .circle .icon {
fill: #00c853;
} }
.completed .left .line { .completed .left .line {
@ -1116,7 +1110,7 @@ ul {
padding-bottom: 5rem; padding-bottom: 5rem;
grid-template-columns: auto; grid-template-columns: auto;
overflow-y: auto; overflow-y: auto;
align-items: flex-start; align-content: flex-start;
} }
.logo { .logo {
@ -1232,10 +1226,6 @@ ul {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
#updates_page__project_selector strip-option {
font-size: 0.9rem;
}
.intern-update { .intern-update {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1594,11 +1584,10 @@ ul {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.task__title { .task__title {
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: 1rem;
} }
.task__description { .task__description {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -1780,10 +1769,6 @@ input[type=date]:focus {
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.hide-on-mobile,
.hide-page-on-mobile {
display: none;
}
.list-container { .list-container {
padding-bottom: 5rem; padding-bottom: 5rem;
} }
@ -1803,6 +1788,10 @@ input[type=date]:focus {
.landing__card:first-of-type img { .landing__card:first-of-type img {
grid-area: 1/1/2/2; grid-area: 1/1/2/2;
} }
.hide-on-mobile,
.hide-page-on-mobile {
display: none;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.hide-on-desktop { .hide-on-desktop {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

103
css/main.scss
View File

@ -304,16 +304,13 @@ sm-option {
} }
strip-select { strip-select {
--gap: 0; --gap: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 3rem;
padding: 0.3rem;
} }
strip-option { strip-option {
position: relative; position: relative;
font-size: 0.8rem; font-size: 0.8rem;
--border-radius: 3rem; --border-radius: 0.3rem;
user-select: none; user-select: none;
} }
@ -795,7 +792,6 @@ ul {
.landing__card { .landing__card {
display: grid; display: grid;
position: relative; position: relative;
width: min(64rem, 100%);
flex-shrink: 0; flex-shrink: 0;
margin: 0 auto; margin: 0 auto;
padding: 2rem max(1rem, 4vw); padding: 2rem max(1rem, 4vw);
@ -817,15 +813,9 @@ ul {
} }
#task_display_wrapper { #task_display_wrapper {
margin: 0 auto; margin: 0 auto;
width: min(100%, 64rem); width: min(100%, 48rem);
& > :first-child { }
width: min(14rem, 100%); #display_task_search_wrapper {
align-content: start;
}
& > :last-child {
width: 32rem;
flex: 1;
}
} }
#sign_in, #sign_in,
#sign_up { #sign_up {
@ -1009,9 +999,9 @@ ul {
&__detail { &__detail {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
background-color: rgba(var(--text-color), 0.04); background-color: rgba(var(--text-color), 0.06);
border-radius: 0.3rem; border-radius: 1rem;
padding: 0.3rem 0.5rem; padding: 0.4rem 0.8rem;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
&__value { &__value {
@ -1038,17 +1028,21 @@ ul {
display: flex; display: flex;
position: relative; position: relative;
justify-content: center; justify-content: center;
padding-top: 0.5rem; padding-top: 0.3rem;
.circle { .circle {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
align-self: flex-start; align-self: flex-start;
height: 1rem; height: 1.4rem;
width: 1rem; padding: 0.15rem;
aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
background: rgba(var(--foreground-color), 1); background: rgba(var(--text-color), 0.1);
border: solid 2px rgba(var(--text-color), 0.4);
z-index: 1; z-index: 1;
.icon {
width: 100%;
height: 100%;
}
} }
.line { .line {
position: absolute; position: absolute;
@ -1091,8 +1085,10 @@ ul {
} }
.completed .left .circle { .completed .left .circle {
border: solid 2px #00c853 !important; background: #00c85320;
background: #00c853 !important; .icon {
fill: #00c853;
}
} }
.completed .left .line { .completed .left .line {
@ -1111,7 +1107,7 @@ ul {
padding-bottom: 5rem; padding-bottom: 5rem;
grid-template-columns: auto; grid-template-columns: auto;
overflow-y: auto; overflow-y: auto;
align-items: flex-start; align-content: flex-start;
} }
.logo { .logo {
display: flex; display: flex;
@ -1221,11 +1217,6 @@ ul {
#updates { #updates {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
#updates_page__project_selector {
strip-option {
font-size: 0.9rem;
}
}
.intern-update { .intern-update {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1560,26 +1551,28 @@ ul {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
.task {
.task__project-title { &__project-title {
font-size: 0.8rem; font-size: 0.8rem;
margin: 0 -0.5em; margin: 0 -0.5em;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-radius: 1rem; border-radius: 1rem;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
justify-self: flex-start; justify-self: flex-start;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.task__title { &__title {
font-size: 1.1rem; font-size: 1.1rem;
} margin-bottom: 1rem;
.task__description { }
word-wrap: break-word; &__description {
overflow-wrap: break-word; word-wrap: break-word;
color: rgba(var(--text-color), 0.8); overflow-wrap: break-word;
font-size: 0.9rem; color: rgba(var(--text-color), 0.8);
margin-top: 0.2rem; font-size: 0.9rem;
margin-top: 0.2rem;
}
} }
.send-update-button, .send-update-button,
@ -1748,10 +1741,6 @@ input[type="date"] {
} }
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.hide-on-mobile,
.hide-page-on-mobile {
display: none;
}
.list-container { .list-container {
padding-bottom: 5rem; padding-bottom: 5rem;
} }
@ -1775,6 +1764,10 @@ input[type="date"] {
} }
} }
} }
.hide-on-mobile,
.hide-page-on-mobile {
display: none;
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.hide-on-desktop { .hide-on-desktop {

202
index.html
View File

@ -96,18 +96,28 @@
</div> </div>
<img src="assets/working-intern.svg" alt=""> <img src="assets/working-intern.svg" alt="">
</div> </div>
<div id="task_display_wrapper" class="flex flex-wrap gap-2 justify-center"> <div id="task_display_wrapper" class="flex flex-direction-column gap-1 justify-center">
<div id="display_task_filters" class="grid gap-1"> <div id="display_task_search_wrapper" class="flex flex-direction-column gap-1">
<h4>Filters</h4> <div class="flex align-center gap-1 flex-wrap space-between">
<div class="flex flex-direction-column gap-0-5"> <h3>
<h5>Category</h5> Available Tasks
<sm-select id="task_category_selector"></sm-select> </h3>
<div class="flex gap-0-3">
<sm-input placeholder="Search" type="search" class="flex-1">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</sm-input>
</div>
</div>
<div id="display_task_filters" class="flex gap-1">
<strip-select id="task_category_selector" class="w-100"></strip-select>
</div> </div>
</div> </div>
<div class="grid gap-1"> <div class="grid gap-1">
<h3>
Available Tasks
</h3>
<ul id="display_task_list" class="flex flex-direction-column gap-0-5 observe-empty-state"></ul> <ul id="display_task_list" class="flex flex-direction-column gap-0-5 observe-empty-state"></ul>
<div class="empty-state"> <div class="empty-state">
<h4>Nothing to see here</h4> <h4>Nothing to see here</h4>
@ -318,52 +328,7 @@
<theme-toggle class="hide-on-mobile"></theme-toggle> <theme-toggle class="hide-on-mobile"></theme-toggle>
</nav> </nav>
<article id="sub_page_container"> <article id="sub_page_container">
<section id="dashboard_page" class="inner-page hidden"> <section id="dashboard_page" class="inner-page hidden"></section>
<strip-select id="dashboard_view_selector" class="hide-on-desktop justify-self-center">
<strip-option value="intern_view" selected>My tasks</strip-option>
<strip-option value="best_interns_container">Leaderboard</strip-option>
<strip-option value="projects_wrapper">Projects</strip-option>
</strip-select>
<div id="projects_wrapper" class="grid gap-2 align-items-start">
<section id="pinned_project_section" class="w-100">
<h4>Pinned</h4>
<div id="pinned_projects" class="observe-empty-state"></div>
<div class="empty-state">
<h4>There are no pinned projects</h4>
<p class="margin-block-0-5">
You can pin projects for easier monitoring by clicking on the 'pin' icon on project
card.
</p>
</div>
</section>
<div id="project_list_container" class="hidden">
<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>
</div>
<div id="project_list" class="flex flex-direction-column gap-0-3"></div>
</div>
</div>
<section id="intern_view" class="hidden intern-option">
<h4>My tasks</h4>
<ul id="assigned_task_list"></ul>
</section>
<div id="best_interns_container" class="container-card">
<div class="container-header">
<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 7a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 3.5l-1.323 2.68-2.957.43 2.14 2.085-.505 2.946L12 17.25l2.645 1.39-.505-2.945 2.14-2.086-2.957-.43L12 10.5zm1-8.501L18 2v3l-1.363 1.138A9.935 9.935 0 0 0 13 5.049L13 2zm-2 0v3.05a9.935 9.935 0 0 0-3.636 1.088L6 5V2l5-.001z" />
</svg>
<h4>Leaderboard</h4>
<a id="all_interns_btn" href="#/all_interns_page" class="button">All</a>
</div>
<div id="top_interns" class="observe-empty-state"></div>
<div class="empty-state">
<h4>There are no interns</h4>
</div>
</div>
</section>
<section id="admin_page" class="inner-page hidden"> <section id="admin_page" class="inner-page hidden">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<strip-select id="admin_view_selector"> <strip-select id="admin_view_selector">
@ -401,13 +366,14 @@
<section id="project_editing_panel" class="hidden"> <section id="project_editing_panel" class="hidden">
<div id="project_details_wrapper" <div id="project_details_wrapper"
class="flex flex-direction-column gap-1 margin-bottom-2 align-items-start"> class="flex flex-direction-column gap-1 margin-bottom-2 align-items-start">
<a class="button icon-only hide-on-desktop" href="#/admin_page" title="Go back"> <a class="flex gap-0-3 align-center button--colored hide-on-desktop" href="#/admin_page"
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" title="Go back">
viewBox="0 0 24 24" width="24px" fill="#000000"> <svg class="icon" style="margin-left: -0.3rem;" xmlns="http://www.w3.org/2000/svg"
<path d="M0 0h24v24H0V0z" fill="none"></path> height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"> <path d="M0 0h24v24H0V0z" fill="none" />
</path> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
</svg> </svg>
Projects
</a> </a>
<div class="flex flex-wrap align-items-start"> <div class="flex flex-wrap align-items-start">
<h2 id="editing_panel__title" data-editable></h2> <h2 id="editing_panel__title" data-editable></h2>
@ -521,7 +487,7 @@
</div> </div>
</section> </section>
<section id="updates_page" class="inner-page hidden"> <section id="updates_page" class="inner-page hidden">
<button class="button hide-on-desktop justify-self-end" onclick="toggleFilter()">Filter</button> <button class="button hide-on-desktop justify-self-end" onclick="toggleUpdatesFilter()">Filter</button>
<section id="update_filters_wrapper" class="grid hide-on-mobile"> <section id="update_filters_wrapper" class="grid hide-on-mobile">
<h4>Filter</h4> <h4>Filter</h4>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
@ -1175,9 +1141,9 @@
if (!params) { if (!params) {
params = { category: 'all' } params = { category: 'all' }
} }
const categories = [html`<sm-option value='all' ?selected=${params.category === 'all'}>All</sm-option>`]; const categories = [html`<strip-option value='all' ?selected=${params.category === 'all'}>All</strip-option>`];
for (const categoryID in floGlobals.taskCategories) { for (const categoryID in floGlobals.taskCategories) {
categories.push(html`<sm-option value=${categoryID} ?selected=${params.category === categoryID}>${floGlobals.taskCategories[categoryID]}</sm-option>`) categories.push(html`<strip-option value=${categoryID} ?selected=${params.category === categoryID}>${floGlobals.taskCategories[categoryID]}</strip-option>`)
} }
renderElem(getRef('task_category_selector'), html`${categories}`) renderElem(getRef('task_category_selector'), html`${categories}`)
render.displayTasks(params.category) render.displayTasks(params.category)
@ -1237,6 +1203,48 @@
getRef('generated_private_key').value = privKey getRef('generated_private_key').value = privKey
break; break;
case 'dashboard_page': case 'dashboard_page':
renderElem(getRef('dashboard_page'), html`
<strip-select id="dashboard_view_selector" onchange=${handleDashboardViewChange}>
${typeOfUser === 'intern' ? html`<strip-option value="intern_view" selected>My tasks</strip-option>` : ''}
${typeOfUser !== 'admin' ? html`<strip-option value="display_task_list">All tasks</strip-option>` : ''}
<strip-option value="projects_wrapper" ?selected=${typeOfUser !== 'intern'}>Projects</strip-option>
<strip-option value="best_interns_container">Leaderboard</strip-option>
</strip-select>
<div id="projects_wrapper" class=${`grid gap-2 align-items-start dashboard-view__item ${typeOfUser === 'intern' ? 'hide-on-mobile' : ''}`}>
<section id="pinned_project_section" class="w-100">
<h4>Pinned</h4>
<div id="pinned_projects" class="observe-empty-state"></div>
<div class="empty-state">
<h4>There are no pinned projects</h4>
<p class="margin-block-0-5">
You can pin projects for easier monitoring by clicking on the 'pin' icon on project card.
</p>
</div>
</section>
<div id="project_list_container" class=${`hidden`}>
<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>
</div>
<div id="project_list" class="flex flex-direction-column gap-0-3"></div>
</div>
</div>
<section id="intern_view" class="hidden intern-option dashboard-view__item">
<h4>My tasks</h4>
<ul id="assigned_task_list"></ul>
</section>
<div id="best_interns_container" class="container-card dashboard-view__item hide-on-mobile">
<div class="container-header">
<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 7a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 3.5l-1.323 2.68-2.957.43 2.14 2.085-.505 2.946L12 17.25l2.645 1.39-.505-2.945 2.14-2.086-2.957-.43L12 10.5zm1-8.501L18 2v3l-1.363 1.138A9.935 9.935 0 0 0 13 5.049L13 2zm-2 0v3.05a9.935 9.935 0 0 0-3.636 1.088L6 5V2l5-.001z" /> </svg>
<h4>Leaderboard</h4>
<a id="all_interns_btn" href="#/all_interns_page" class="button">All</a>
</div>
<div id="top_interns" class="observe-empty-state"></div>
<div class="empty-state">
<h4>There are no interns</h4>
</div>
</div>
`)
render.dashProjects(getRef('pinned_projects'), pinnedProjects); render.dashProjects(getRef('pinned_projects'), pinnedProjects);
// displays recent projects // displays recent projects
const unpinnedProjects = RIBC.getProjectList().filter(project => !pinnedProjects.includes(project)).reverse() const unpinnedProjects = RIBC.getProjectList().filter(project => !pinnedProjects.includes(project)).reverse()
@ -1246,6 +1254,15 @@
getRef('project_list_container').classList.add('hidden') getRef('project_list_container').classList.add('hidden')
} }
render.dashProjects(getRef('project_list'), unpinnedProjects) render.dashProjects(getRef('project_list'), unpinnedProjects)
delegate(getRef('top_interns'), 'click', '.intern-card', e => {
showInternInfo(e.delegateTarget.dataset.internFloId)
})
//creates cards for highest performing interns
//sort interns earned points
const highPerformingInterns = Object.keys(RIBC.getInternList()).sort((a, b) => {
return RIBC.getInternRating(b) - RIBC.getInternRating(a)
});
renderElem(getRef('top_interns'), html`${highPerformingInterns.slice(0, 8).map(floId => render.internCard(floId))}`);
break; break;
case 'updates_page': { case 'updates_page': {
if (!getRef('updates_page__project_selector').children.length) { if (!getRef('updates_page__project_selector').children.length) {
@ -1324,6 +1341,7 @@
switch (appState.lastPage) { switch (appState.lastPage) {
case 'task_details': case 'task_details':
case 'project_explorer': case 'project_explorer':
case 'all_interns_page':
routingAnimation.in = slideInRight; routingAnimation.in = slideInRight;
routingAnimation.out = slideOutRight; routingAnimation.out = slideOutRight;
break; break;
@ -1331,6 +1349,7 @@
switch (pageId) { switch (pageId) {
case 'task_details': case 'task_details':
case 'project_explorer': case 'project_explorer':
case 'all_interns_page':
routingAnimation.in = slideInLeft; routingAnimation.in = slideInLeft;
routingAnimation.out = slideOutLeft; routingAnimation.out = slideOutLeft;
break; break;
@ -1748,7 +1767,9 @@
return html` return html`
<div class=${`task ${status}`}> <div class=${`task ${status}`}>
<div class="left"> <div class="left">
<div class="circle"></div> <div class="circle">
<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="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
</div>
<div class="line"></div> <div class="line"></div>
</div> </div>
<div class="right"> <div class="right">
@ -1757,7 +1778,29 @@
${applyButton} ${applyButton}
</div> </div>
${assignedInternsCards.length ? html`<div class="assigned-interns">${assignedInternsCards}</div>` : ''} ${assignedInternsCards.length ? html`<div class="assigned-interns">${assignedInternsCards}</div>` : ''}
${linkifyDescription} <details>
<summary class="task-details__summary">Task details</summary>
${linkifyDescription}
</details>
<div class="timeline-task__details flex flex-wrap gap-0-3">
${duration ? html`
<div class="display-task__detail">
<span class="display-task__detail__title">Duration: </span>
<span class="display-task__detail__value">${duration} ${durationType}</span>
</div>
`: ''}
${maxSlots ? html`
<div class="display-task__detail">
<span class="display-task__detail__title">Slots: </span>
<span class="display-task__detail__value">${maxSlots}</span>
</div>
`: ''}
${reward ? html`
<div class="display-task__detail">
<span class="display-task__detail__title">Reward: </span>
<span class="display-task__detail__value" style="color: var(--green)">₹${reward}</span>
</div>
`: ''}
${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''} ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
</div> </div>
</div> </div>
@ -1960,7 +2003,10 @@
<span class="task__project-title">${projectName}</span> <span class="task__project-title">${projectName}</span>
<div> <div>
<h4 class="task__title">${title}</h4> <h4 class="task__title">${title}</h4>
${linkifyDescription} <details>
<summary>View description</summary>
${linkifyDescription}
</details>
</div> </div>
<button class="send-update-button button--small margin-left-auto"> <button class="send-update-button button--small margin-left-auto">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg> <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
@ -2115,6 +2161,17 @@
let currentTaskId; let currentTaskId;
let typeOfUser = 'general'; let typeOfUser = 'general';
function handleDashboardViewChange(e) {
document.querySelectorAll('.dashboard-view__item').forEach(item => item.classList.add('hide-on-mobile'))
document.querySelector(`#${e.target.value}`).classList.remove('hide-on-mobile')
if (typeOfUser === 'intern') {
getRef(`intern_view`).classList.remove('hidden')
} else {
getRef(`intern_view`).classList.add('hidden')
}
}
// Adds interns to the database **Only SubAdmins can add interns // Adds interns to the database **Only SubAdmins can add interns
function addInternToList() { function addInternToList() {
let internName = getRef('intern_name_field').value.trim(), let internName = getRef('intern_name_field').value.trim(),
@ -2714,13 +2771,10 @@
} }
} }
function toggleFilter() { function toggleUpdatesFilter() {
getRef('update_filters_wrapper').classList.toggle('hide-on-mobile') getRef('update_filters_wrapper').classList.toggle('hide-on-mobile')
} }
// Event listeners // Event listeners
delegate(getRef('top_interns'), 'click', '.intern-card', e => {
showInternInfo(e.delegateTarget.dataset.internFloId)
})
delegate(getRef('all_interns_page'), 'click', '.intern-card', e => { delegate(getRef('all_interns_page'), 'click', '.intern-card', e => {
showInternInfo(e.delegateTarget.dataset.internFloId) showInternInfo(e.delegateTarget.dataset.internFloId)
}) })
@ -2904,12 +2958,6 @@
elem.classList.remove('hidden') elem.classList.remove('hidden')
}) })
} }
//creates cards for highest performing interns
//sort interns earned points
const highPerformingInterns = Object.keys(RIBC.getInternList()).sort((a, b) => {
return RIBC.getInternRating(b) - RIBC.getInternRating(a)
});
renderElem(getRef('top_interns'), html`${highPerformingInterns.slice(0, 4).map((floId) => render.internCard(floId))}`);
if (typeOfUser === 'intern') { if (typeOfUser === 'intern') {
render.projectList(getRef('my_projects'), [...floGlobals.assignedProjectsList]) render.projectList(getRef('my_projects'), [...floGlobals.assignedProjectsList])