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

admin page layout changes

Browse Source
This commit is contained in:
sairaj mote 2021-07-24 15:51:48 +05:30
parent 708d6889a5
commit 6664ed910c
4 changed files with 200 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
css/main.css
View File

@ -398,16 +398,6 @@ ul {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.solid-background {
transition: background-color 2s;
background: var(--foreground-color);
}
a {
color: var(--accent-color);
text-decoration: none;
}
.medium-top-bottom-margin { .medium-top-bottom-margin {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
@ -710,22 +700,6 @@ a {
border-bottom: none; border-bottom: none;
} }
.dropdown {
position: relative;
}
.dropdown-content {
overflow: hidden;
position: absolute;
z-index: 2;
margin: 1rem;
right: 2rem;
min-width: 24rem;
background: var(--foreground-color);
box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
}
#intern_updates .container-header { #intern_updates .container-header {
padding: 0 1rem; padding: 0 1rem;
border-bottom: 1px solid rgba(var(--text-color), 0.1); border-bottom: 1px solid rgba(var(--text-color), 0.1);
@ -752,7 +726,6 @@ a {
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
flex-direction: column; flex-direction: column;
overscroll-behavior: contain;
} }
#updates { #updates {
@ -918,52 +891,47 @@ a {
opacity: 1 !important; opacity: 1 !important;
} }
#task_list {
padding: 1.5rem 0;
}
.task-list-item { .task-list-item {
display: grid; display: grid;
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: "status . title options" "status . interns interns" "status . description description"; grid-template-areas: "status title options" "status interns interns" "status description description";
padding: 1rem; padding: 1rem;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
border-radius: 0.5rem;
background: rgba(var(--text-color), 0.02); background: rgba(var(--text-color), 0.02);
} }
.task-list-item sm-checkbox { .task-list-item sm-checkbox {
grid-area: status; grid-area: status;
align-self: flex-start; align-self: flex-start;
padding: 0.5rem 0.5rem 0.5rem 0; padding: 0.5rem 0.5rem 0.5rem 0;
} }
.task-list-item:first-of-type {
margin-top: 1rem;
border-radius: 0.2rem 0.2rem 0 0;
}
.task-list-item:last-of-type {
border-radius: 0 0 0.2rem 0.2rem;
border-bottom: none;
margin-bottom: 1rem;
}
.task-list-item h4 { .task-list-item h4 {
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
} }
.task-list-item .title { .task-list-item .title {
grid-area: title; grid-area: title;
line-height: 1.6;
} }
.task-list-item .assigned-interns { .task-list-item .assigned-interns {
grid-area: interns; grid-area: interns;
} }
.task-list-item .task-option { .task-option {
grid-area: options; grid-area: options;
cursor: pointer; cursor: pointer;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
padding: 0.5rem; padding: 0.5rem;
} }
.task-option .icon {
height: 1rem;
width: 1rem;
}
.task-description { .task-description {
grid-area: description; grid-area: description;
@ -991,25 +959,17 @@ a {
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;
} }
.assigned-interns .assigned-intern button { .assigned-interns .assigned-intern button {
cursor: pointer;
padding: 0.2rem; padding: 0.2rem;
} }
.assigned-interns .assigned-intern button .icon {
.assigned-interns .assigned-intern button svg {
padding: 0.2rem;
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
} }
.commit {
color: var(--accent-color);
border: 1px solid var(--accent-color);
padding: 0.6rem;
}
#task_context { #task_context {
transition: 0.3s opacity ease; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 0 2rem; margin: 0 2rem;
@ -1017,8 +977,8 @@ a {
padding: 0.5rem 0; padding: 0.5rem 0;
width: max-content; width: max-content;
border-radius: 0.3rem; border-radius: 0.3rem;
position: absolute; transition: 0.3s opacity ease;
background: var(--foreground-color); background-color: var(--foreground-color);
box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3);
} }
#task_context li { #task_context li {
@ -1064,7 +1024,6 @@ a {
} }
.header { .header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
background: var(--foreground-color); background: var(--foreground-color);
@ -1199,21 +1158,22 @@ a {
} }
#admin_page { #admin_page {
padding: 1.5rem;
display: grid; display: grid;
gap: 1rem 1.5rem; gap: 1rem;
height: 100%;
} }
#admin_page__header { #admin_page__header {
display: grid; display: grid;
gap: 0 1rem; gap: 0 1rem;
padding: 0.5rem 0;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
align-items: center; align-items: center;
} }
#project_editing_panel { #project_editing_panel {
padding: 1rem; padding: 1rem;
height: 100%;
overflow-y: auto;
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
@ -1293,7 +1253,8 @@ a {
} }
#admin_page { #admin_page {
grid-template-columns: 18rem 1fr; padding: 1rem;
grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-areas: "admin-header admin-header" ". ."; grid-template-areas: "admin-header admin-header" ". .";
} }
@ -1307,11 +1268,23 @@ a {
justify-self: center; justify-self: center;
} }
#interns, #admin_page__left {
#projects { height: 100%;
display: flex; overflow-y: hidden;
}
#admin_page__left sm-tab-panels,
#admin_page__left sm-tab-panels > * {
height: 100%;
flex-direction: column; flex-direction: column;
max-height: calc(100vh - 16rem); }
#admin_page__left sm-tab-panels {
overflow-y: hidden;
}
#admin_page__left sm-tab-panels > * {
display: flex;
}
#admin_page__left .list-container {
height: 100%;
overflow-y: auto; overflow-y: auto;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

160
css/main.scss
View File

@ -419,16 +419,6 @@ ul {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.solid-background {
transition: background-color 2s;
background: var(--foreground-color);
}
a {
color: var(--accent-color);
text-decoration: none;
}
.medium-top-bottom-margin { .medium-top-bottom-margin {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
@ -736,22 +726,6 @@ a {
border-bottom: none; border-bottom: none;
} }
.dropdown {
position: relative;
}
.dropdown-content {
overflow: hidden;
position: absolute;
z-index: 2;
margin: 1rem;
right: 2rem;
min-width: 24rem;
background: var(--foreground-color);
box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
}
#intern_updates{ #intern_updates{
.container-header { .container-header {
padding: 0 1rem; padding: 0 1rem;
@ -780,7 +754,6 @@ a {
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
flex-direction: column; flex-direction: column;
overscroll-behavior: contain;
} }
#updates { #updates {
@ -948,53 +921,48 @@ a {
opacity: 1 !important; opacity: 1 !important;
} }
#task_list{
padding: 1.5rem 0;
}
.task-list-item { .task-list-item {
display: grid; display: grid;
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: 'status . title options' grid-template-areas: 'status title options'
'status . interns interns' 'status interns interns'
'status . description description'; 'status description description';
padding: 1rem; padding: 1rem;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
border-radius: 0.5rem;
background: rgba(var(--text-color), 0.02); background: rgba(var(--text-color), 0.02);
sm-checkbox {
grid-area: status;
align-self: flex-start;
padding: 0.5rem 0.5rem 0.5rem 0;
}
h4 {
font-weight: 500;
margin: 0;
}
.title {
grid-area: title;
line-height: 1.6;
}
.assigned-interns {
grid-area: interns;
}
} }
.task-list-item sm-checkbox { .task-option {
grid-area: status;
align-self: flex-start;
padding: 0.5rem 0.5rem 0.5rem 0;
}
.task-list-item:first-of-type {
margin-top: 1rem;
border-radius: 0.2rem 0.2rem 0 0;
}
.task-list-item:last-of-type {
border-radius: 0 0 0.2rem 0.2rem;
border-bottom: none;
margin-bottom: 1rem;
}
.task-list-item h4 {
font-weight: 500;
margin: 0;
}
.task-list-item .title {
grid-area: title;
}
.task-list-item .assigned-interns {
grid-area: interns;
}
.task-list-item .task-option {
grid-area: options; grid-area: options;
cursor: pointer; cursor: pointer;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
padding: 0.5rem; padding: 0.5rem;
.icon{
height: 1rem;
width: 1rem;
}
} }
.task-description{ .task-description{
@ -1022,26 +990,18 @@ a {
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;
} button {
cursor: pointer;
.assigned-interns .assigned-intern button { padding: 0.2rem;
padding: 0.2rem; .icon {
} height: 1rem;
width: 1rem;
.assigned-interns .assigned-intern button svg { }
padding: 0.2rem; }
height: 1rem;
width: 1rem;
}
.commit {
color: var(--accent-color);
border: 1px solid var(--accent-color);
padding: 0.6rem;
} }
#task_context { #task_context {
transition: 0.3s opacity ease; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 0 2rem; margin: 0 2rem;
@ -1049,8 +1009,8 @@ a {
padding: 0.5rem 0; padding: 0.5rem 0;
width: max-content; width: max-content;
border-radius: 0.3rem; border-radius: 0.3rem;
position: absolute; transition: 0.3s opacity ease;
background: var(--foreground-color); background-color: var(--foreground-color);
box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3);
li { li {
@ -1100,7 +1060,6 @@ a {
} }
.header { .header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
background: var(--foreground-color); background: var(--foreground-color);
@ -1235,21 +1194,22 @@ a {
} }
#admin_page { #admin_page {
padding: 1.5rem;
display: grid; display: grid;
gap: 1rem 1.5rem; gap: 1rem;
height: 100%;
} }
#admin_page__header { #admin_page__header {
display: grid; display: grid;
gap: 0 1rem; gap: 0 1rem;
padding: 0.5rem 0;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
align-items: center; align-items: center;
} }
#project_editing_panel { #project_editing_panel {
padding: 1rem; padding: 1rem;
height: 100%;
overflow-y: auto;
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
@ -1334,9 +1294,10 @@ a {
} }
#admin_page { #admin_page {
grid-template-columns: 18rem 1fr; padding: 1rem;
grid-template-columns: 18rem minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-areas: 'admin-header admin-header''. .'; grid-template-areas: 'admin-header admin-header' '. .';
} }
#admin_page__header { #admin_page__header {
@ -1348,13 +1309,26 @@ a {
justify-self: center; justify-self: center;
} }
#interns, #admin_page__left{
#projects { height: 100%;
display: flex; overflow-y: hidden;
flex-direction: column; sm-tab-panels,
max-height: calc(100vh - 16rem); sm-tab-panels > *{
overflow-y: auto; height: 100%;
flex-direction: column;
}
sm-tab-panels{
overflow-y: hidden;
}
sm-tab-panels > *{
display: flex;
}
.list-container{
height: 100%;
overflow-y: auto;
}
} }
#project_explorer { #project_explorer {
display: grid; display: grid;

158
new.html
View File

@ -91,11 +91,20 @@
Dashboard Dashboard
</a> </a>
<a id="update_panel_btn" href="#updates_page" class="nav-list__item interact" title="show updates"> <a id="update_panel_btn" href="#updates_page" class="nav-list__item interact" title="show updates">
<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="M18 10a6 6 0 1 0-12 0v8h12v-8zm2 8.667l.4.533a.5.5 0 0 1-.4.8H4a.5.5 0 0 1-.4-.8l.4-.533V10a8 8 0 1 1 16 0v8.667zM9.5 21h5a2.5 2.5 0 1 1-5 0z"/></svg> <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="M18 10a6 6 0 1 0-12 0v8h12v-8zm2 8.667l.4.533a.5.5 0 0 1-.4.8H4a.5.5 0 0 1-.4-.8l.4-.533V10a8 8 0 1 1 16 0v8.667zM9.5 21h5a2.5 2.5 0 1 1-5 0z" />
</svg>
Updates Updates
</a> </a>
<a id="admin_page_btn" href="#admin_page" class="admin-options nav-list__item interact" title="open admin panel"> <a id="admin_page_btn" href="#admin_page" class="admin-options nav-list__item interact"
<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 14v2a6 6 0 0 0-6 6H4a8 8 0 0 1 8-8zm0-1c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm2.595 7.812a3.51 3.51 0 0 1 0-1.623l-.992-.573 1-1.732.992.573A3.496 3.496 0 0 1 17 14.645V13.5h2v1.145c.532.158 1.012.44 1.405.812l.992-.573 1 1.732-.992.573a3.51 3.51 0 0 1 0 1.622l.992.573-1 1.732-.992-.573a3.496 3.496 0 0 1-1.405.812V22.5h-2v-1.145a3.496 3.496 0 0 1-1.405-.812l-.992.573-1-1.732.992-.572zM18 19.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg> title="open admin panel">
<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 14v2a6 6 0 0 0-6 6H4a8 8 0 0 1 8-8zm0-1c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm2.595 7.812a3.51 3.51 0 0 1 0-1.623l-.992-.573 1-1.732.992.573A3.496 3.496 0 0 1 17 14.645V13.5h2v1.145c.532.158 1.012.44 1.405.812l.992-.573 1 1.732-.992.573a3.51 3.51 0 0 1 0 1.622l.992.573-1 1.732-.992-.573a3.496 3.496 0 0 1-1.405.812V22.5h-2v-1.145a3.496 3.496 0 0 1-1.405-.812l-.992.573-1-1.732.992-.572zM18 19.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
</svg>
Manage Manage
</a> </a>
<a id="settings_btn" href="#settings_page" class="nav-list__item interact" title="open settings page"> <a id="settings_btn" href="#settings_page" class="nav-list__item interact" title="open settings page">
@ -114,11 +123,19 @@
<h4>Projects you are watching</h4> <h4>Projects you are watching</h4>
<button id="prev_proj" onclick="changeProject(-1)" class="watch-list-button" <button id="prev_proj" onclick="changeProject(-1)" class="watch-list-button"
title="show next project" disabled> title="show next project" disabled>
<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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg> <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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" />
</svg>
</button> </button>
<button id="next_proj" onclick="changeProject(1)" class="watch-list-button" <button id="next_proj" onclick="changeProject(1)" class="watch-list-button"
title="show previous project"> title="show previous project">
<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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg> <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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
</svg>
</button> </button>
</div> </div>
<div id="status_map"></div> <div id="status_map"></div>
@ -160,7 +177,8 @@
<section class="grid gap-0-5"> <section class="grid gap-0-5">
<h2 id="username" class="capitalise"></h2> <h2 id="username" class="capitalise"></h2>
<sm-copy id="user_flo_id"></sm-copy> <sm-copy id="user_flo_id"></sm-copy>
<sm-button id="logout" variant="primary" class="svg-margin-right justify-self-start" onclick="logout()"> <sm-button id="logout" variant="primary" class="svg-margin-right justify-self-start"
onclick="logout()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <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 fill="none" d="M0 0h24v24H0z" />
<path <path
@ -183,14 +201,14 @@
<sm-button id="update_project_info_btn" variant="primary" onclick="commitToChanges()" <sm-button id="update_project_info_btn" variant="primary" onclick="commitToChanges()"
title="commit to changes">Commit</sm-button> title="commit to changes">Commit</sm-button>
</header> </header>
<section class="flex direction-column container-card"> <section id="admin_page__left" class="flex direction-column container-card">
<sm-tab-header target="admin_tabs"> <sm-tab-header target="admin_tabs">
<sm-tab>Projects</sm-tab> <sm-tab>Projects</sm-tab>
<sm-tab>Interns</sm-tab> <sm-tab>Interns</sm-tab>
<sm-tab>Requests</sm-tab> <sm-tab>Requests</sm-tab>
</sm-tab-header> </sm-tab-header>
<sm-tab-panels id="admin_tabs"> <sm-tab-panels id="admin_tabs">
<div id="projects_container" class="list-container"> <section id="projects_container">
<div class="container-header"> <div class="container-header">
<h3>Add project</h3> <h3>Add project</h3>
<button onclick="showPopup('add_project_popup')"> <button onclick="showPopup('add_project_popup')">
@ -201,9 +219,9 @@
</svg> </svg>
</button> </button>
</div> </div>
<div id="projects"></div> <div id="projects" class="list-container"></div>
</div> </section>
<div id="interns_container" class="list-container"> <section id="interns_container">
<div class="container-header"> <div class="container-header">
<h3>Add Intern</h3> <h3>Add Intern</h3>
<button onclick="showPopup('add_intern_popup')"> <button onclick="showPopup('add_intern_popup')">
@ -214,9 +232,9 @@
</svg> </svg>
</button> </button>
</div> </div>
<div id="interns"></div> <div id="interns" class="list-container"></div>
</div> </section>
<div id="requests_container" class="feed-item"></div> <div id="requests_container" class="list-container"></div>
</sm-tab-panels> </sm-tab-panels>
</section> </section>
<div id="project_editing_panel" class="inner-page container-card"> <div id="project_editing_panel" class="inner-page container-card">
@ -225,8 +243,9 @@
<div id="branch_container"> <div id="branch_container">
</div> </div>
<h4>Tasks</h4> <h4>Tasks</h4>
<div id="task_list"></div> <ul id="task_list" class="grid gap-1"></ul>
<sm-button id="add_task" class="svg-margin-right" title="show element to add new task" onclick="addPlaceholderTask()"> <sm-button id="add_task" class="svg-margin-right" title="show element to add new task"
onclick="addPlaceholderTask()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <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 fill="none" d="M0 0h24v24H0z" />
<path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" /> <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
@ -447,7 +466,8 @@
<sm-form> <sm-form>
<sm-textarea id="update_description" placeholder="Type the update" required></sm-textarea> <sm-textarea id="update_description" placeholder="Type the update" required></sm-textarea>
<sm-button id="post_update_btn" title="post this update" variant="primary" disabled> <sm-button id="post_update_btn" title="post this update" variant="primary" disabled>
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path <path
d="M1.923 9.37c-.51-.205-.504-.51.034-.689l19.086-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.475.553-.717.07L11 13 1.923 9.37zm4.89-.2l5.636 2.255 3.04 6.082 3.546-12.41L6.812 9.17z" /> d="M1.923 9.37c-.51-.205-.504-.51.034-.689l19.086-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.475.553-.717.07L11 13 1.923 9.37zm4.89-.2l5.636 2.255 3.04 6.082 3.546-12.41L6.812 9.17z" />
@ -562,7 +582,6 @@
<template id="task_list_item_template"> <template id="task_list_item_template">
<li class="task-list-item"> <li class="task-list-item">
<sm-checkbox></sm-checkbox> <sm-checkbox></sm-checkbox>
<h4 class="task-no"></h4>
<h4 class="title capitalise"></h4> <h4 class="title capitalise"></h4>
<button class="task-option"> <button class="task-option">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
@ -10175,11 +10194,11 @@
pageId = 'dashboard_page' pageId = 'dashboard_page'
} }
else { else {
if(targetPage.includes('?')){ if (targetPage.includes('?')) {
const splitAddress = targetPage.split('?') const splitAddress = targetPage.split('?')
searchParams = splitAddress.pop() searchParams = splitAddress.pop()
pageId = splitAddress.pop().split('#').pop() pageId = splitAddress.pop().split('#').pop()
} else{ } else {
pageId = targetPage.split('#').pop() pageId = targetPage.split('#').pop()
} }
} }
@ -10188,29 +10207,29 @@
document.querySelector('.nav-list__item--active')?.classList.remove('nav-list__item--active') document.querySelector('.nav-list__item--active')?.classList.remove('nav-list__item--active')
const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`) const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
targetListItem?.classList.add('nav-list__item--active') targetListItem?.classList.add('nav-list__item--active')
let params let params
if(searchParams){ if (searchParams) {
const urlSearchParams = new URLSearchParams('?'+ searchParams); const urlSearchParams = new URLSearchParams('?' + searchParams);
params = Object.fromEntries(urlSearchParams.entries()); params = Object.fromEntries(urlSearchParams.entries());
} }
switch(pageId){ switch (pageId) {
case 'dashboard_page': case 'dashboard_page':
if (JSON.parse(localStorage.getItem('watchList')).length){ if (JSON.parse(localStorage.getItem('watchList')).length) {
showProjectMap(JSON.parse(localStorage.getItem('watchList'))[0], 'status_map') showProjectMap(JSON.parse(localStorage.getItem('watchList'))[0], 'status_map')
} }
break; break;
case 'updates_page': case 'updates_page':
updateFeed(getRef('all_updates_list')) updateFeed(getRef('all_updates_list'))
break; break;
case 'project_explorer': case 'project_explorer':
showProjectInfo(params.projectId) showProjectInfo(params.projectId)
break; break;
case 'admin_page': case 'admin_page':
if(params){ if (params) {
editProjectInfo(params.projectId) editProjectInfo(params.projectId)
} }
break; break;
} }
getRef(pageId).classList.remove('hide-completely') getRef(pageId).classList.remove('hide-completely')
} }
@ -10224,7 +10243,7 @@
const page = isAdmin ? 'admin_page' : 'project_explorer' const page = isAdmin ? 'admin_page' : 'project_explorer'
return createElement('a', { return createElement('a', {
className: 'project-card flex align-center interact', className: 'project-card flex align-center interact',
attributes: { attributes: {
'title': "Project information", 'title': "Project information",
href: `#${page}?projectId=${projectCode}` href: `#${page}?projectId=${projectCode}`
}, },
@ -10331,11 +10350,7 @@
}); });
if (options === 'yes') { if (options === 'yes') {
let closeBtn = createElement('button', { let closeBtn = createElement('button', {
innerHTML: `<svg class="close-svg" viewBox="0 0 50.71 50.71"> innerHTML: `<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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>`
<title>Unassign this intern</title>
<line x1="50.35" y1="0.35" x2="0.36" y2="50.35"/>
<line x1="0.35" y1="0.35" x2="50.35" y2="50.35"/>
</svg>`
}); });
thisIntern.append(closeBtn) thisIntern.append(closeBtn)
} }
@ -10350,8 +10365,7 @@
card.querySelector('sm-checkbox').setAttribute('checked', '') card.querySelector('sm-checkbox').setAttribute('checked', '')
} }
card.firstElementChild.setAttribute('id', taskNo) card.firstElementChild.setAttribute('id', taskNo)
card.querySelector('.task-no').textContent = taskNo + '.'; card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`;
card.querySelector('.title').textContent = taskTitle;
card.querySelector('.task-description').textContent = taskDescription; card.querySelector('.task-description').textContent = taskDescription;
if (assignedInterns) { if (assignedInterns) {
getInternDetails(assignedInterns).forEach((intern) => { getInternDetails(assignedInterns).forEach((intern) => {
@ -10429,9 +10443,6 @@
` `
return card return card
}, },
placeholderTaskCard() {
}
} }
@ -10516,7 +10527,7 @@
}) })
getRef('right').classList.remove('hide-page-on-mobile') getRef('right').classList.remove('hide-page-on-mobile')
} }
const {projectName, projectDescription} = RIBC.getProjectDetails(projectId); const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
getRef('right').firstElementChild.children[0].textContent = projectName; // project name getRef('right').firstElementChild.children[0].textContent = projectName; // project name
if (JSON.parse(localStorage.getItem('watchList')).includes(projectId)) { if (JSON.parse(localStorage.getItem('watchList')).includes(projectId)) {
getRef('right').firstElementChild.children[1].textContent = 'watching'; getRef('right').firstElementChild.children[1].textContent = 'watching';
@ -10544,12 +10555,12 @@
Array.from(allProjects).find(project => project.classList.contains('project-card--active'))?.classList.remove('project-card--active') Array.from(allProjects).find(project => project.classList.contains('project-card--active'))?.classList.remove('project-card--active')
Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId))?.classList.add('project-card--active') Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId))?.classList.add('project-card--active')
getRef('branch_container').innerHTML = '', getRef('branch_container').innerHTML = '',
getRef('task_list').innerHTML = ''; getRef('task_list').innerHTML = '';
currentProject = projectId; currentProject = projectId;
branchList.forEach((branch) => { branchList.forEach((branch) => {
branch.classList.remove('active-branch') branch.classList.remove('active-branch')
}) })
const {projectName, projectDescription} = RIBC.getProjectDetails(projectId); const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
getRef('editing_panel__title').textContent = projectName; getRef('editing_panel__title').textContent = projectName;
getRef('editing_panel__description').textContent = projectDescription; getRef('editing_panel__description').textContent = projectDescription;
RIBC.getProjectBranches(currentProject).forEach((branch) => { RIBC.getProjectBranches(currentProject).forEach((branch) => {
@ -10594,13 +10605,42 @@
} }
if (e.target.closest('.task-option')) { if (e.target.closest('.task-option')) {
getRef('task_context').setAttribute('style', `top: ${e.target.closest('.task-option').offsetTop}px`) getRef('task_context').setAttribute('style', `top: ${e.target.closest('.task-option').offsetTop}px`)
getRef('task_context').classList.toggle('hide-completely') getRef('task_context').classList.remove('hide-completely')
getRef('task_context').firstElementChild.focus() getRef('task_context').animate([
let y = document.addEventListener("click", function (e) { {
if (e.target.closest('#context_menu') || e.target.closest('.task-option')) return; transform: 'translateY(-1rem)',
getRef('task_context').classList.add('hide-completely') opacity: '0'
document.removeEventListener('click', y); },
}); {
transform: 'none',
opacity: '1'
},
], {
duration: 200,
easing: 'ease'
})
.onfinish = () => {
getRef('task_context').firstElementChild.focus()
const y = document.addEventListener("click", function (e) {
if (e.target.closest('#context_menu') || e.target.closest('.task-option')) return;
getRef('task_context').animate([
{
transform: 'none',
opacity: '1'
},
{
transform: 'translateY(-1rem)',
opacity: '0'
},
], {
duration: 200,
easing: 'ease'
}).onfinish = () => {
getRef('task_context').classList.add('hide-completely')
document.removeEventListener('click', y);
}
});
}
} }
else if (e.target.closest('sm-checkbox')) { else if (e.target.closest('sm-checkbox')) {
const taskStatus = e.target.closest('sm-checkbox').checked ? 'completed' : 'incomplete' const taskStatus = e.target.closest('sm-checkbox').checked ? 'completed' : 'incomplete'
@ -10895,17 +10935,6 @@
}) })
} }
function showThisFeed(container, type, btn) {
document.querySelectorAll('.feed-item').forEach((item) => {
item.classList.add('hide-completely')
})
document.querySelectorAll('.feed-btn').forEach((item) => {
item.classList.remove('active')
})
document.getElementById(container).classList.remove('hide-completely')
btn.classList.add('active')
}
function loader(mode) { function loader(mode) {
if (mode === 'show') { if (mode === 'show') {
getRef('loading_page').classList.remove('hide-completely') getRef('loading_page').classList.remove('hide-completely')
@ -11226,9 +11255,6 @@
document.getElementById('all_interns_btn').addEventListener('click', () => { document.getElementById('all_interns_btn').addEventListener('click', () => {
showPage('', 'show_all', 'interns', 'innerPage') showPage('', 'show_all', 'interns', 'innerPage')
}) })
document.getElementById('all_projects_btn').addEventListener('click', () => {
showPage('', 'project_explorer', 'explorer', 'innerPage')
})
let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!` let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!`
getRef('username').textContent = greetings; getRef('username').textContent = greetings;
getRef('user_flo_id').value = myFloID; getRef('user_flo_id').value = myFloID;