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-06 19:52:36 +05:30
parent 055c40a281
commit e7e58628d8
5 changed files with 99 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.js
View File

File diff suppressed because one or more lines are too long

32
css/main.css
View File

@ -178,7 +178,7 @@ button:not(:disabled),
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
.button--outlined { .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); background-color: rgba(var(--foreground-color), 1);
} }
.button--transparent { .button--transparent {
@ -792,12 +792,19 @@ ul {
overflow-y: auto; overflow-y: auto;
padding-bottom: 3rem; padding-bottom: 3rem;
} }
#landing sm-carousel {
.landing__card {
position: relative;
width: min(100%, 64rem); width: min(100%, 64rem);
margin: 0 auto; margin: 0 auto;
align-self: flex-start; 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); padding: 3rem max(1rem, 6vw);
border-radius: 1rem; border-radius: 1rem;
align-items: center; align-items: center;
@ -1107,9 +1114,8 @@ ul {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
.intern-card .icon { .intern-card .icon {
fill: #ff5722 !important; height: 1rem;
height: 1rem !important; width: 1rem;
width: 1rem !important;
margin-left: 0.2rem; margin-left: 0.2rem;
} }
@ -1257,8 +1263,8 @@ ul {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.gold-fill { .icon--star {
fill: #ff5722; fill: var(--orange);
} }
#intern_info__score { #intern_info__score {
@ -1309,6 +1315,14 @@ ul {
.task-list-item .task-title { .task-list-item .task-title {
line-height: 1.6; 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) { .task__branch_container:not(:empty) {
display: grid; display: grid;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
css/main.scss
View File

@ -140,7 +140,6 @@ button,
.button { .button {
background-color: rgba(var(--text-color), 0.02); background-color: rgba(var(--text-color), 0.02);
border: solid thin rgba(var(--text-color), 0.06); border: solid thin rgba(var(--text-color), 0.06);
&--primary { &--primary {
color: rgba(var(--background-color), 1) !important; color: rgba(var(--background-color), 1) !important;
@ -170,7 +169,7 @@ button,
} }
&--outlined { &--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); background-color: rgba(var(--foreground-color), 1);
} }
&--transparent { &--transparent {
@ -789,12 +788,19 @@ ul {
padding: 0 1rem; padding: 0 1rem;
overflow-y: auto; overflow-y: auto;
padding-bottom: 3rem; 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 { .landing__card {
position: relative; position: relative;
width: min(100%, 64rem); width: 100%;
flex-shrink: 0;
margin: 0 auto; margin: 0 auto;
align-self: flex-start;
padding: 3rem max(1rem, 6vw); padding: 3rem max(1rem, 6vw);
border-radius: 1rem; border-radius: 1rem;
align-items: center; align-items: center;
@ -1113,9 +1119,8 @@ ul {
gap: 0.8rem; gap: 0.8rem;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
.icon { .icon {
fill: #ff5722 !important; height: 1rem;
height: 1rem !important; width: 1rem;
width: 1rem !important;
margin-left: 0.2rem; margin-left: 0.2rem;
} }
} }
@ -1262,8 +1267,8 @@ ul {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.gold-fill { .icon--star {
fill: #ff5722; fill: var(--orange);
} }
#intern_info__score { #intern_info__score {
font-size: 1.5rem; font-size: 1.5rem;
@ -1309,6 +1314,14 @@ ul {
.task-title { .task-title {
line-height: 1.6; 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 { .task__branch_container {
&:not(:empty) { &:not(:empty) {

100
index.html
View File

@ -73,29 +73,31 @@
<theme-toggle></theme-toggle> <theme-toggle></theme-toggle>
</header> </header>
<div id="landing" class="grid inner-page hidden"> <div id="landing" class="grid inner-page hidden">
<div class="flex flex-wrap space-between gap-1-5 landing__card"> <sm-carousel indicator>
<div class="grid gap-1-5"> <div class="flex flex-wrap space-between gap-1-5 landing__card">
<h1 class="calistoga" style="max-width: 26rem;"> <div class="grid gap-1-5">
Blockchain based <br> Internship Platform <h1 class="calistoga" style="max-width: 26rem;">
</h1> Blockchain based <br> Internship Platform
<div class="flex gap-0-3"> </h1>
<a href="#/sign_up" class="button" <div class="flex gap-0-3">
style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get <a href="#/sign_up" class="button"
started</a> style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
<a href="#/sign_in" class="button button--primary">Sign In</a> 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>
</div> </div>
<img src="assets/working-intern.svg" alt=""> </sm-carousel>
</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>
</div> </div>
<article id="sign_in" class="inner-page hidden"> <article id="sign_in" class="inner-page hidden">
<section> <section>
@ -718,8 +720,8 @@
<h3 id="intern_info__name">Intern name</h3> <h3 id="intern_info__name">Intern name</h3>
<sm-copy id="intern_info__flo_id"></sm-copy> <sm-copy id="intern_info__flo_id"></sm-copy>
<div id="update_intern_score" class="flex align-center space-between"> <div id="update_intern_score" class="flex align-center space-between">
<div class="flex"> <div class="flex align-center">
<svg class="icon gold-fill margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" <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"> width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" /> <path fill="none" d="M0 0h24v24H0z" />
<path <path
@ -827,15 +829,16 @@
<h3>Create a new branch</h3> <h3>Create a new branch</h3>
</header> </header>
<sm-form> <sm-form>
<sm-input id="branch_start_point" placeholder="Start point" type="number" required></sm-input> <sm-input id="branch_start_point" placeholder="Start point ID" type="number" required></sm-input>
<sm-input id="branch_merge_point" placeholder="Merge point" type="number"></sm-input> <sm-input id="branch_merge_point" placeholder="Merge point ID" type="number"></sm-input>
<sm-button id="create_branch_btn" variant="primary"> <button id="create_branch_btn" class="button button--primary" type="submit">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
<path fill="none" d="M0 0h24v24H0z" /> width="24px" fill="#000000">
<path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" /> <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> </svg>
Create Create
</sm-button> </button>
</sm-form> </sm-form>
</sm-popup> </sm-popup>
<sm-popup id="post_update_popup"> <sm-popup id="post_update_popup">
@ -1699,7 +1702,7 @@
<div class="intern-card__name capitalize">${internName}</div> <div class="intern-card__name capitalize">${internName}</div>
<div class="intern-card__score-wrapper flex align-center"> <div class="intern-card__score-wrapper flex align-center">
<h4 class="intern-card__score">${internPoints}</h4> <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> </div>
</li>`; </li>`;
}, },
@ -1766,9 +1769,7 @@
const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo) const status = RIBC.getTaskStatus(appState.params.id, appState.params.branch, taskNo)
let assignedInternsCards let assignedInternsCards
if (assignedInterns) { if (assignedInterns) {
assignedInternsCards = assignedInterns.filter(v => v).map((internFloId) => { assignedInternsCards = assignedInterns.filter(v => v).map((internFloId) => render.assignedInternCard(internFloId, true))
return render.assignedInternCard(internFloId, true);
})
} }
const branches = getAllBranches(appState.params.id) const branches = getAllBranches(appState.params.id)
for (const branch of branches) { for (const branch of branches) {
@ -1786,9 +1787,12 @@
return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)` return html.for(ref, `${appState.params.id}_${appState.params.branch}_${taskNo}`)`
<li class="task-list-item" .dataset=${{ taskId: taskNo }}> <li class="task-list-item" .dataset=${{ taskId: taskNo }}>
<div class="flex align-center gap-0-3"> <div class="flex align-center gap-0-3">
<sm-checkbox ?checked=${status === 'completed'}> <div class="flex align-center gap-0-5">
<p class="margin-left-0-5">Mark as complete</p> <sm-checkbox ?checked=${status === 'completed'}>
</sm-checkbox> <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()"> <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> <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> </button>
@ -1876,6 +1880,7 @@
`; `;
}, },
dashProject(projectId, ref) { dashProject(projectId, ref) {
projectId = projectId.replaceAll('_', '-')
const { projectName } = RIBC.getProjectDetails(projectId) const { projectName } = RIBC.getProjectDetails(projectId)
const projectMap = RIBC.getProjectMap(projectId) const projectMap = RIBC.getProjectMap(projectId)
const projectTasks = [] const projectTasks = []
@ -2512,19 +2517,16 @@
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 => {
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 => { document.addEventListener('popupopened', e => {
switch (e.detail.popup.id) { switch (e.detail.popup.id) {
case 'intern_list_popup': case 'intern_list_popup':