UI fixes
This commit is contained in:
sairaj mote
parent
75a55b2252
commit
e8f79b864f
44
css/main.css
44
css/main.css
@ -137,12 +137,13 @@ button,
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
button:focus-visible,
|
||||
.button:focus-visible {
|
||||
@ -1144,6 +1145,18 @@ ul {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#all_interns_list,
|
||||
#admin_page__intern_list {
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
#all_interns_list .intern-card,
|
||||
#admin_page__intern_list .intern-card {
|
||||
margin: 0;
|
||||
gap: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.intern-card {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
@ -1154,7 +1167,6 @@ ul {
|
||||
user-select: none;
|
||||
padding: 0.8rem 1rem;
|
||||
gap: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.intern-card input {
|
||||
height: 1.3em;
|
||||
@ -1335,7 +1347,6 @@ ul {
|
||||
stroke-dasharray: 400;
|
||||
stroke-dashoffset: var(--progress, 400);
|
||||
transform: rotate(-90deg);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 1s;
|
||||
}
|
||||
.stat__count {
|
||||
@ -1687,6 +1698,23 @@ ul {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#admin_page__intern_list {
|
||||
display: grid;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#admin_page__intern_list .button {
|
||||
justify-content: flex-start;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
#admin_page__intern_list .button .icon {
|
||||
padding: 0.6rem;
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
background-color: rgba(var(--text-color), 0.04);
|
||||
border-radius: 3rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#update_of_project {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -2088,16 +2116,6 @@ input[type=date]:focus {
|
||||
overflow-y: auto;
|
||||
grid-area: updates;
|
||||
}
|
||||
#all_interns_list {
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
#all_interns_list .intern-card {
|
||||
margin: 0;
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#intern_list_popup {
|
||||
--height: 80vh;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -125,12 +125,13 @@ button,
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
@ -1136,6 +1137,17 @@ ul {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#all_interns_list,
|
||||
#admin_page__intern_list {
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
.intern-card {
|
||||
margin: 0;
|
||||
gap: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
.intern-card {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
@ -1144,7 +1156,6 @@ ul {
|
||||
user-select: none;
|
||||
padding: 0.8rem 1rem;
|
||||
gap: 0.8rem;
|
||||
cursor: pointer;
|
||||
input {
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
@ -1271,9 +1282,6 @@ ul {
|
||||
.container-header h4 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#intern_info_popup {
|
||||
}
|
||||
#intern_info__initials {
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
@ -1318,7 +1326,6 @@ ul {
|
||||
stroke-dasharray: 400;
|
||||
stroke-dashoffset: var(--progress, 400);
|
||||
transform: rotate(-90deg);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 1s;
|
||||
}
|
||||
&__count {
|
||||
@ -1656,6 +1663,22 @@ ul {
|
||||
padding-bottom: 2rem;
|
||||
flex: 1;
|
||||
}
|
||||
#admin_page__intern_list {
|
||||
display: grid;
|
||||
padding: 0 1rem;
|
||||
.button {
|
||||
justify-content: flex-start;
|
||||
border-radius: 0.5rem;
|
||||
.icon {
|
||||
padding: 0.6rem;
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
background-color: rgba(var(--text-color), 0.04);
|
||||
border-radius: 3rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#update_of_project {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -2069,16 +2092,6 @@ input[type="date"] {
|
||||
overflow-y: auto;
|
||||
grid-area: updates;
|
||||
}
|
||||
#all_interns_list {
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
.intern-card {
|
||||
margin: 0;
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
#intern_list_popup {
|
||||
--height: 80vh;
|
||||
}
|
||||
|
||||
25
index.html
25
index.html
@ -426,17 +426,7 @@
|
||||
</section>
|
||||
</section>
|
||||
<section id="interns_container" class="flex flex-direction-column hidden">
|
||||
<button class="button justify-content-start margin-block-0-5"
|
||||
onclick="openPopup('add_intern_popup')">
|
||||
<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="M14 14.252v2.09A6 6 0 0 0 6 22l-2-.001a8 8 0 0 1 10-7.748zM12 13c-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 4zm6 6v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z" />
|
||||
</svg>
|
||||
Add intern
|
||||
</button>
|
||||
<ul id="admin_page__intern_list" class="list-container observe-empty-state"></ul>
|
||||
<ul id="admin_page__intern_list" class="grid observe-empty-state"></ul>
|
||||
<h4 class="empty-state">No interns added</h4>
|
||||
</section>
|
||||
<section id="task_display_container" class="flex hidden">
|
||||
@ -1255,7 +1245,7 @@
|
||||
break;
|
||||
case 'interns':
|
||||
//show interns
|
||||
renderElem(getRef('admin_page__intern_list'), filterInterns(''))
|
||||
render.adminInterns()
|
||||
break;
|
||||
case 'requests':
|
||||
function removeRequest(requestCard) {
|
||||
@ -1866,11 +1856,18 @@
|
||||
<div class="intern-card__initials" style=${`--color: var(${getInternColor(internFloId)})`}>${initials}</div>
|
||||
<div class="intern-card__name capitalize">${internName}</div>
|
||||
<div class="intern-card__score-wrapper flex align-center">
|
||||
<h4 class="intern-card__score">${internPoints}</h4>
|
||||
<b class="intern-card__score">${internPoints}</b>
|
||||
<svg class="icon icon--star" 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 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" /> </svg>
|
||||
</div>
|
||||
</label>`;
|
||||
},
|
||||
adminInterns() {
|
||||
const addInternButton = html`<button class="button button--colored" onclick="openPopup('add_intern_popup')">
|
||||
<svg class="icon" 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
|
||||
Add intern
|
||||
</button>`
|
||||
renderElem(getRef('admin_page__intern_list'), html`${[addInternButton, filterInterns('')]}`)
|
||||
},
|
||||
internUpdateCard(update) {
|
||||
const { floID, time, note, update: { projectCode, branch, task, description, link } } = update
|
||||
let topic = `${RIBC.getProjectDetails(projectCode).projectName} / ${RIBC.getTaskDetails(projectCode, branch, task).title}`
|
||||
@ -2461,8 +2458,8 @@
|
||||
let internName = getRef('intern_name_field').value.trim(),
|
||||
internFloId = getRef('intern_flo_id_field').value.trim();
|
||||
if (RIBC.admin.addIntern(internFloId, internName)) {
|
||||
renderElem(getRef('admin_page__intern_list'), filterInterns(''))
|
||||
closePopup();
|
||||
render.adminInterns();
|
||||
notify(`${internName} added as an intern.`, 'success')
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user