UI improvements
This commit is contained in:
sairaj mote
parent
055c40a281
commit
e7e58628d8
File diff suppressed because one or more lines are too long
32
css/main.css
32
css/main.css
@ -178,7 +178,7 @@ button:not(:disabled),
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.button--outlined {
|
||||
border: solid rgba(var(--text-color), 0.5) 0.1rem;
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.button--transparent {
|
||||
@ -792,12 +792,19 @@ ul {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.landing__card {
|
||||
position: relative;
|
||||
#landing sm-carousel {
|
||||
width: min(100%, 64rem);
|
||||
margin: 0 auto;
|
||||
align-self: flex-start;
|
||||
--nav-background-color: white;
|
||||
--nav-icon-fill: black;
|
||||
}
|
||||
|
||||
.landing__card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
padding: 3rem max(1rem, 6vw);
|
||||
border-radius: 1rem;
|
||||
align-items: center;
|
||||
@ -1107,9 +1114,8 @@ ul {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
.intern-card .icon {
|
||||
fill: #ff5722 !important;
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
@ -1257,8 +1263,8 @@ ul {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.gold-fill {
|
||||
fill: #ff5722;
|
||||
.icon--star {
|
||||
fill: var(--orange);
|
||||
}
|
||||
|
||||
#intern_info__score {
|
||||
@ -1309,6 +1315,14 @@ ul {
|
||||
.task-list-item .task-title {
|
||||
line-height: 1.6;
|
||||
}
|
||||
.task-list-item__task-number {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
border: solid 0.1em var(--accent-color);
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.task__branch_container:not(:empty) {
|
||||
display: grid;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -140,7 +140,6 @@ button,
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
|
||||
&--primary {
|
||||
color: rgba(var(--background-color), 1) !important;
|
||||
|
||||
@ -170,7 +169,7 @@ button,
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
border: solid rgba(var(--text-color), 0.5) 0.1rem;
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
&--transparent {
|
||||
@ -789,12 +788,19 @@ ul {
|
||||
padding: 0 1rem;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 3rem;
|
||||
sm-carousel {
|
||||
width: min(100%, 64rem);
|
||||
margin: 0 auto;
|
||||
align-self: flex-start;
|
||||
--nav-background-color: white;
|
||||
--nav-icon-fill: black;
|
||||
}
|
||||
}
|
||||
.landing__card {
|
||||
position: relative;
|
||||
width: min(100%, 64rem);
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
align-self: flex-start;
|
||||
padding: 3rem max(1rem, 6vw);
|
||||
border-radius: 1rem;
|
||||
align-items: center;
|
||||
@ -1113,9 +1119,8 @@ ul {
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
.icon {
|
||||
fill: #ff5722 !important;
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
}
|
||||
@ -1262,8 +1267,8 @@ ul {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.gold-fill {
|
||||
fill: #ff5722;
|
||||
.icon--star {
|
||||
fill: var(--orange);
|
||||
}
|
||||
#intern_info__score {
|
||||
font-size: 1.5rem;
|
||||
@ -1309,6 +1314,14 @@ ul {
|
||||
.task-title {
|
||||
line-height: 1.6;
|
||||
}
|
||||
&__task-number {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
border: solid 0.1em var(--accent-color);
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.task__branch_container {
|
||||
&:not(:empty) {
|
||||
|
||||
100
index.html
100
index.html
@ -73,29 +73,31 @@
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<div id="landing" class="grid inner-page hidden">
|
||||
<div class="flex flex-wrap space-between gap-1-5 landing__card">
|
||||
<div class="grid gap-1-5">
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Blockchain based <br> Internship Platform
|
||||
</h1>
|
||||
<div class="flex gap-0-3">
|
||||
<a href="#/sign_up" class="button"
|
||||
style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
|
||||
started</a>
|
||||
<a href="#/sign_in" class="button button--primary">Sign In</a>
|
||||
<sm-carousel indicator>
|
||||
<div class="flex flex-wrap space-between gap-1-5 landing__card">
|
||||
<div class="grid gap-1-5">
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Blockchain based <br> Internship Platform
|
||||
</h1>
|
||||
<div class="flex gap-0-3">
|
||||
<a href="#/sign_up" class="button"
|
||||
style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
|
||||
started</a>
|
||||
<a href="#/sign_in" class="button button--primary">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="assets/working-intern.svg" alt="">
|
||||
</div>
|
||||
<div class="flex flex-wrap space-between gap-1-5 landing__card">
|
||||
<img src="assets/paper-plane.svg" alt="">
|
||||
<div class="grid gap-0-5 text-align-right">
|
||||
<p>Work from place and time that suits <b class="uppercase">you</b></p>
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Flexible, <br> Remote Work
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<img src="assets/working-intern.svg" alt="">
|
||||
</div>
|
||||
<div class="flex flex-wrap space-between gap-1-5 landing__card">
|
||||
<img src="assets/paper-plane.svg" alt="">
|
||||
<div class="grid gap-0-5 text-align-right">
|
||||
<p>Work from place and time that suits <b class="uppercase">you</b></p>
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Flexible, <br> Remote Work
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</div>
|
||||
<article id="sign_in" class="inner-page hidden">
|
||||
<section>
|
||||
@ -718,8 +720,8 @@
|
||||
<h3 id="intern_info__name">Intern name</h3>
|
||||
<sm-copy id="intern_info__flo_id"></sm-copy>
|
||||
<div id="update_intern_score" class="flex align-center space-between">
|
||||
<div class="flex">
|
||||
<svg class="icon gold-fill margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
<div class="flex align-center">
|
||||
<svg class="icon icon--star 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
|
||||
@ -827,15 +829,16 @@
|
||||
<h3>Create a new branch</h3>
|
||||
</header>
|
||||
<sm-form>
|
||||
<sm-input id="branch_start_point" placeholder="Start point" type="number" required></sm-input>
|
||||
<sm-input id="branch_merge_point" placeholder="Merge point" type="number"></sm-input>
|
||||
<sm-button id="create_branch_btn" variant="primary">
|
||||
<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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" />
|
||||
<sm-input id="branch_start_point" placeholder="Start point ID" type="number" required></sm-input>
|
||||
<sm-input id="branch_merge_point" placeholder="Merge point ID" type="number"></sm-input>
|
||||
<button id="create_branch_btn" class="button button--primary" type="submit">
|
||||
<svg class="icon margin-right-0-5" 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>
|
||||
Create
|
||||
</sm-button>
|
||||
</button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<sm-popup id="post_update_popup">
|
||||
@ -1699,7 +1702,7 @@
|
||||
<div class="intern-card__name capitalize">${internName}</div>
|
||||
<div class="intern-card__score-wrapper flex align-center">
|
||||
<h4 class="intern-card__score">${internPoints}</h4>
|
||||
<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 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>
|
||||
<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>
|
||||
</li>`;
|
||||
},
|
||||
@ -1766,9 +1769,7 @@
|
||||
const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo)
|
||||
let assignedInternsCards
|
||||
if (assignedInterns) {
|
||||
assignedInternsCards = assignedInterns.filter(v => v).map((internFloId) => {
|
||||
return render.assignedInternCard(internFloId, true);
|
||||
})
|
||||
assignedInternsCards = assignedInterns.filter(v => v).map((internFloId) => render.assignedInternCard(internFloId, true))
|
||||
}
|
||||
const branches = getAllBranches(appState.params.id)
|
||||
for (const branch of branches) {
|
||||
@ -1786,9 +1787,12 @@
|
||||
return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)`
|
||||
<li class="task-list-item" .dataset=${{ taskId: taskNo }}>
|
||||
<div class="flex align-center gap-0-3">
|
||||
<sm-checkbox ?checked=${status === 'completed'}>
|
||||
<p class="margin-left-0-5">Mark as complete</p>
|
||||
</sm-checkbox>
|
||||
<div class="flex align-center gap-0-5">
|
||||
<sm-checkbox ?checked=${status === 'completed'}>
|
||||
<p class="margin-left-0-5">Mark as complete</p>
|
||||
</sm-checkbox>
|
||||
<div class="task-list-item__task-number">ID: ${taskNo}</div>
|
||||
</div>
|
||||
<button class="button--danger icon-only margin-left-auto"onclick="removeThisTask()">
|
||||
<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="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
|
||||
</button>
|
||||
@ -1876,6 +1880,7 @@
|
||||
`;
|
||||
},
|
||||
dashProject(projectId, ref) {
|
||||
projectId = projectId.replaceAll('_', '-')
|
||||
const { projectName } = RIBC.getProjectDetails(projectId)
|
||||
const projectMap = RIBC.getProjectMap(projectId)
|
||||
const projectTasks = []
|
||||
@ -2512,19 +2517,16 @@
|
||||
getRef('update_filters_wrapper').classList.toggle('hide-on-mobile')
|
||||
}
|
||||
// Event listeners
|
||||
delegate(getRef('top_interns'), 'click', '.intern-card', e => {
|
||||
showInternInfo(e.delegateTarget.dataset.internFloId)
|
||||
})
|
||||
delegate(getRef('all_interns_page'), 'click', '.intern-card', e => {
|
||||
showInternInfo(e.delegateTarget.dataset.internFloId)
|
||||
})
|
||||
delegate(getRef('admin_page__intern_list'), 'click', '.intern-card', e => {
|
||||
showInternInfo(e.delegateTarget.dataset.internFloId)
|
||||
})
|
||||
|
||||
document.getElementById('top_interns').addEventListener('click', (event) => {
|
||||
if (event.target.closest('.intern-card'))
|
||||
showInternInfo(event.target.closest('.intern-card').dataset.internFloId)
|
||||
})
|
||||
document.getElementById('all_interns_page').addEventListener('click', (event) => {
|
||||
if (event.target.closest('.intern-card'))
|
||||
showInternInfo(event.target.closest('.intern-card').dataset.internFloId)
|
||||
})
|
||||
document.getElementById('admin_page__intern_list').addEventListener('click', (event) => {
|
||||
if (event.target.closest('.intern-card'))
|
||||
showInternInfo(event.target.closest('.intern-card').dataset.internFloId)
|
||||
})
|
||||
document.addEventListener('popupopened', e => {
|
||||
switch (e.detail.popup.id) {
|
||||
case 'intern_list_popup':
|
||||
|
||||
Loading…
Reference in New Issue
Block a user