admin page layout changes
This commit is contained in:
sairaj mote
parent
708d6889a5
commit
6664ed910c
107
css/main.css
107
css/main.css
@ -398,16 +398,6 @@ ul {
|
||||
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 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@ -710,22 +700,6 @@ a {
|
||||
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 {
|
||||
padding: 0 1rem;
|
||||
border-bottom: 1px solid rgba(var(--text-color), 0.1);
|
||||
@ -752,7 +726,6 @@ a {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
#updates {
|
||||
@ -918,52 +891,47 @@ a {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#task_list {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
grid-template-areas: "status . title options" "status . interns interns" "status . description description";
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "status title options" "status interns interns" "status description description";
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.02);
|
||||
}
|
||||
|
||||
.task-list-item sm-checkbox {
|
||||
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;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.task-list-item .assigned-interns {
|
||||
grid-area: interns;
|
||||
}
|
||||
|
||||
.task-list-item .task-option {
|
||||
.task-option {
|
||||
grid-area: options;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.task-option .icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.task-description {
|
||||
grid-area: description;
|
||||
@ -991,25 +959,17 @@ a {
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.assigned-interns .assigned-intern button {
|
||||
cursor: pointer;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.assigned-interns .assigned-intern button svg {
|
||||
padding: 0.2rem;
|
||||
.assigned-interns .assigned-intern button .icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.commit {
|
||||
color: var(--accent-color);
|
||||
border: 1px solid var(--accent-color);
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
#task_context {
|
||||
transition: 0.3s opacity ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0 2rem;
|
||||
@ -1017,8 +977,8 @@ a {
|
||||
padding: 0.5rem 0;
|
||||
width: max-content;
|
||||
border-radius: 0.3rem;
|
||||
position: absolute;
|
||||
background: var(--foreground-color);
|
||||
transition: 0.3s opacity ease;
|
||||
background-color: var(--foreground-color);
|
||||
box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
#task_context li {
|
||||
@ -1064,7 +1024,6 @@ a {
|
||||
}
|
||||
|
||||
.header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--foreground-color);
|
||||
@ -1199,21 +1158,22 @@ a {
|
||||
}
|
||||
|
||||
#admin_page {
|
||||
padding: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1rem 1.5rem;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#admin_page__header {
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
padding: 0.5rem 0;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#project_editing_panel {
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
@ -1293,7 +1253,8 @@ a {
|
||||
}
|
||||
|
||||
#admin_page {
|
||||
grid-template-columns: 18rem 1fr;
|
||||
padding: 1rem;
|
||||
grid-template-columns: 18rem minmax(0, 1fr);
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: "admin-header admin-header" ". .";
|
||||
}
|
||||
@ -1307,11 +1268,23 @@ a {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#interns,
|
||||
#projects {
|
||||
display: flex;
|
||||
#admin_page__left {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#admin_page__left sm-tab-panels,
|
||||
#admin_page__left sm-tab-panels > * {
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
160
css/main.scss
160
css/main.scss
@ -419,16 +419,6 @@ ul {
|
||||
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 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@ -736,22 +726,6 @@ a {
|
||||
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 {
|
||||
padding: 0 1rem;
|
||||
@ -780,7 +754,6 @@ a {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
#updates {
|
||||
@ -948,53 +921,48 @@ a {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#task_list{
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.task-list-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
grid-template-areas: 'status . title options'
|
||||
'status . interns interns'
|
||||
'status . description description';
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: 'status title options'
|
||||
'status interns interns'
|
||||
'status description description';
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
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 {
|
||||
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 {
|
||||
.task-option {
|
||||
grid-area: options;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
padding: 0.5rem;
|
||||
.icon{
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.task-description{
|
||||
@ -1022,26 +990,18 @@ a {
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.assigned-interns .assigned-intern button {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 0.2rem;
|
||||
.icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#task_context {
|
||||
transition: 0.3s opacity ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0 2rem;
|
||||
@ -1049,8 +1009,8 @@ a {
|
||||
padding: 0.5rem 0;
|
||||
width: max-content;
|
||||
border-radius: 0.3rem;
|
||||
position: absolute;
|
||||
background: var(--foreground-color);
|
||||
transition: 0.3s opacity ease;
|
||||
background-color: var(--foreground-color);
|
||||
box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3);
|
||||
|
||||
li {
|
||||
@ -1100,7 +1060,6 @@ a {
|
||||
}
|
||||
|
||||
.header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--foreground-color);
|
||||
@ -1235,21 +1194,22 @@ a {
|
||||
}
|
||||
|
||||
#admin_page {
|
||||
padding: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1rem 1.5rem;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#admin_page__header {
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
padding: 0.5rem 0;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#project_editing_panel {
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
@ -1334,9 +1294,10 @@ a {
|
||||
}
|
||||
|
||||
#admin_page {
|
||||
grid-template-columns: 18rem 1fr;
|
||||
padding: 1rem;
|
||||
grid-template-columns: 18rem minmax(0, 1fr);
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: 'admin-header admin-header''. .';
|
||||
grid-template-areas: 'admin-header admin-header' '. .';
|
||||
}
|
||||
|
||||
#admin_page__header {
|
||||
@ -1348,13 +1309,26 @@ a {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#interns,
|
||||
#projects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - 16rem);
|
||||
overflow-y: auto;
|
||||
#admin_page__left{
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
sm-tab-panels,
|
||||
sm-tab-panels > *{
|
||||
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 {
|
||||
display: grid;
|
||||
|
||||
158
new.html
158
new.html
@ -91,11 +91,20 @@
|
||||
Dashboard
|
||||
</a>
|
||||
<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
|
||||
</a>
|
||||
<a id="admin_page_btn" href="#admin_page" class="admin-options nav-list__item interact" 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>
|
||||
<a id="admin_page_btn" href="#admin_page" class="admin-options nav-list__item interact"
|
||||
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
|
||||
</a>
|
||||
<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>
|
||||
<button id="prev_proj" onclick="changeProject(-1)" class="watch-list-button"
|
||||
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 id="next_proj" onclick="changeProject(1)" class="watch-list-button"
|
||||
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>
|
||||
</div>
|
||||
<div id="status_map"></div>
|
||||
@ -160,7 +177,8 @@
|
||||
<section class="grid gap-0-5">
|
||||
<h2 id="username" class="capitalise"></h2>
|
||||
<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">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
@ -183,14 +201,14 @@
|
||||
<sm-button id="update_project_info_btn" variant="primary" onclick="commitToChanges()"
|
||||
title="commit to changes">Commit</sm-button>
|
||||
</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>Projects</sm-tab>
|
||||
<sm-tab>Interns</sm-tab>
|
||||
<sm-tab>Requests</sm-tab>
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="admin_tabs">
|
||||
<div id="projects_container" class="list-container">
|
||||
<section id="projects_container">
|
||||
<div class="container-header">
|
||||
<h3>Add project</h3>
|
||||
<button onclick="showPopup('add_project_popup')">
|
||||
@ -201,9 +219,9 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="projects"></div>
|
||||
</div>
|
||||
<div id="interns_container" class="list-container">
|
||||
<div id="projects" class="list-container"></div>
|
||||
</section>
|
||||
<section id="interns_container">
|
||||
<div class="container-header">
|
||||
<h3>Add Intern</h3>
|
||||
<button onclick="showPopup('add_intern_popup')">
|
||||
@ -214,9 +232,9 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="interns"></div>
|
||||
</div>
|
||||
<div id="requests_container" class="feed-item"></div>
|
||||
<div id="interns" class="list-container"></div>
|
||||
</section>
|
||||
<div id="requests_container" class="list-container"></div>
|
||||
</sm-tab-panels>
|
||||
</section>
|
||||
<div id="project_editing_panel" class="inner-page container-card">
|
||||
@ -225,8 +243,9 @@
|
||||
<div id="branch_container">
|
||||
</div>
|
||||
<h4>Tasks</h4>
|
||||
<div id="task_list"></div>
|
||||
<sm-button id="add_task" class="svg-margin-right" title="show element to add new task" onclick="addPlaceholderTask()">
|
||||
<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()">
|
||||
<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="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
|
||||
@ -447,7 +466,8 @@
|
||||
<sm-form>
|
||||
<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>
|
||||
<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
|
||||
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">
|
||||
<li class="task-list-item">
|
||||
<sm-checkbox></sm-checkbox>
|
||||
<h4 class="task-no"></h4>
|
||||
<h4 class="title capitalise"></h4>
|
||||
<button class="task-option">
|
||||
<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'
|
||||
}
|
||||
else {
|
||||
if(targetPage.includes('?')){
|
||||
if (targetPage.includes('?')) {
|
||||
const splitAddress = targetPage.split('?')
|
||||
searchParams = splitAddress.pop()
|
||||
pageId = splitAddress.pop().split('#').pop()
|
||||
} else{
|
||||
} else {
|
||||
pageId = targetPage.split('#').pop()
|
||||
}
|
||||
}
|
||||
@ -10188,29 +10207,29 @@
|
||||
document.querySelector('.nav-list__item--active')?.classList.remove('nav-list__item--active')
|
||||
const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
|
||||
targetListItem?.classList.add('nav-list__item--active')
|
||||
|
||||
|
||||
let params
|
||||
if(searchParams){
|
||||
const urlSearchParams = new URLSearchParams('?'+ searchParams);
|
||||
if (searchParams) {
|
||||
const urlSearchParams = new URLSearchParams('?' + searchParams);
|
||||
params = Object.fromEntries(urlSearchParams.entries());
|
||||
}
|
||||
switch(pageId){
|
||||
switch (pageId) {
|
||||
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')
|
||||
}
|
||||
break;
|
||||
break;
|
||||
case 'updates_page':
|
||||
updateFeed(getRef('all_updates_list'))
|
||||
break;
|
||||
break;
|
||||
case 'project_explorer':
|
||||
showProjectInfo(params.projectId)
|
||||
break;
|
||||
case 'admin_page':
|
||||
if(params){
|
||||
break;
|
||||
case 'admin_page':
|
||||
if (params) {
|
||||
editProjectInfo(params.projectId)
|
||||
}
|
||||
break;
|
||||
break;
|
||||
}
|
||||
getRef(pageId).classList.remove('hide-completely')
|
||||
}
|
||||
@ -10224,7 +10243,7 @@
|
||||
const page = isAdmin ? 'admin_page' : 'project_explorer'
|
||||
return createElement('a', {
|
||||
className: 'project-card flex align-center interact',
|
||||
attributes: {
|
||||
attributes: {
|
||||
'title': "Project information",
|
||||
href: `#${page}?projectId=${projectCode}`
|
||||
},
|
||||
@ -10331,11 +10350,7 @@
|
||||
});
|
||||
if (options === 'yes') {
|
||||
let closeBtn = createElement('button', {
|
||||
innerHTML: `<svg class="close-svg" viewBox="0 0 50.71 50.71">
|
||||
<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>`
|
||||
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>`
|
||||
});
|
||||
thisIntern.append(closeBtn)
|
||||
}
|
||||
@ -10350,8 +10365,7 @@
|
||||
card.querySelector('sm-checkbox').setAttribute('checked', '')
|
||||
}
|
||||
card.firstElementChild.setAttribute('id', taskNo)
|
||||
card.querySelector('.task-no').textContent = taskNo + '.';
|
||||
card.querySelector('.title').textContent = taskTitle;
|
||||
card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`;
|
||||
card.querySelector('.task-description').textContent = taskDescription;
|
||||
if (assignedInterns) {
|
||||
getInternDetails(assignedInterns).forEach((intern) => {
|
||||
@ -10429,9 +10443,6 @@
|
||||
`
|
||||
return card
|
||||
},
|
||||
placeholderTaskCard() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10516,7 +10527,7 @@
|
||||
})
|
||||
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
|
||||
if (JSON.parse(localStorage.getItem('watchList')).includes(projectId)) {
|
||||
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.getAttribute('href').includes(projectId))?.classList.add('project-card--active')
|
||||
getRef('branch_container').innerHTML = '',
|
||||
getRef('task_list').innerHTML = '';
|
||||
getRef('task_list').innerHTML = '';
|
||||
currentProject = projectId;
|
||||
branchList.forEach((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__description').textContent = projectDescription;
|
||||
RIBC.getProjectBranches(currentProject).forEach((branch) => {
|
||||
@ -10594,13 +10605,42 @@
|
||||
}
|
||||
if (e.target.closest('.task-option')) {
|
||||
getRef('task_context').setAttribute('style', `top: ${e.target.closest('.task-option').offsetTop}px`)
|
||||
getRef('task_context').classList.toggle('hide-completely')
|
||||
getRef('task_context').firstElementChild.focus()
|
||||
let y = document.addEventListener("click", function (e) {
|
||||
if (e.target.closest('#context_menu') || e.target.closest('.task-option')) return;
|
||||
getRef('task_context').classList.add('hide-completely')
|
||||
document.removeEventListener('click', y);
|
||||
});
|
||||
getRef('task_context').classList.remove('hide-completely')
|
||||
getRef('task_context').animate([
|
||||
{
|
||||
transform: 'translateY(-1rem)',
|
||||
opacity: '0'
|
||||
},
|
||||
{
|
||||
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')) {
|
||||
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) {
|
||||
if (mode === 'show') {
|
||||
getRef('loading_page').classList.remove('hide-completely')
|
||||
@ -11226,9 +11255,6 @@
|
||||
document.getElementById('all_interns_btn').addEventListener('click', () => {
|
||||
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!`
|
||||
getRef('username').textContent = greetings;
|
||||
getRef('user_flo_id').value = myFloID;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user