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-09-23 17:41:29 +05:30
parent 9b2a9cab5f
commit a4f3d2250e
5 changed files with 78 additions and 154 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

68
css/main.css
View File

@ -276,6 +276,10 @@ sm-spinner {
--stroke-width: 0.1rem; --stroke-width: 0.1rem;
} }
cube-loader {
--size: 1.2rem;
}
sm-form { sm-form {
--gap: 1rem; --gap: 1rem;
} }
@ -601,7 +605,7 @@ ul {
} }
.card { .card {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: max(1rem, 3vw); padding: max(1rem, 3vw);
} }
@ -1095,7 +1099,7 @@ ul {
gap: 0.5rem; gap: 0.5rem;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--foreground-color), 1);
} }
.update__topic { .update__topic {
@ -1369,36 +1373,14 @@ ul {
margin: 2rem 0; margin: 2rem 0;
} }
#loading_page { #loading {
display: grid; display: grid;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
text-align: center; text-align: center;
place-content: center; place-content: center;
justify-items: center; justify-items: center;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
.loading-message {
font-size: 1.3rem;
margin: 1.5rem 0 0.5rem 0;
}
#loading_page__footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
}
#loading_page__footer .icon {
height: 4rem;
width: 4rem;
}
#project_watching_section { #project_watching_section {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1415,9 +1397,8 @@ ul {
padding: 1rem; padding: 1rem;
} }
#watch_project_button { #pin_project_button {
margin-left: 1rem; margin-left: 1rem;
text-transform: capitalize;
} }
#admin_page { #admin_page {
@ -1564,25 +1545,6 @@ ul {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
} }
#admin_page__left sm-tab-header {
--gap: 0;
--justify-content: stretch;
background-color: rgba(var(--text-color), 0.06);
}
#admin_page__left sm-tab {
justify-content: center;
}
#admin_page__left sm-tab-panels,
#admin_page__left sm-tab-panels > * {
height: 100%;
flex-direction: column;
}
#admin_page__left sm-tab-panels {
overflow-y: hidden;
}
#admin_page__left sm-tab-panels > * {
display: flex;
}
#admin_page__left .list-container { #admin_page__left .list-container {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1634,7 +1596,7 @@ input[type=date]:focus {
gap: 1rem; gap: 1rem;
} }
#project_watchlist { #pinned_projects {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
@ -1645,7 +1607,7 @@ input[type=date]:focus {
display: grid; display: grid;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; padding: 1rem;
background-color: rgba(var(--text-color), 0.04); background-color: rgba(var(--foreground-color), 1);
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
.watchlist_project_card .project-icon { .watchlist_project_card .project-icon {
@ -1773,7 +1735,7 @@ input[type=date]:focus {
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
} }
#admin_page__left { #admin_page__left {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 0.5);
} }
#edit_data_fig { #edit_data_fig {
width: 16rem; width: 16rem;
@ -1834,9 +1796,10 @@ input[type=date]:focus {
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
} }
#all_interns_list .intern-card { #all_interns_list .intern-card {
margin: 0;
gap: 1rem; gap: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--foreground-color), 1);
} }
#intern_list_popup { #intern_list_popup {
--height: 80vh; --height: 80vh;
@ -1874,7 +1837,10 @@ input[type=date]:focus {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
.interact {
transition: background-color 0.2s;
}
.interact:hover { .interact:hover {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.04);
} }
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

71
css/main.scss
View File

@ -276,6 +276,9 @@ sm-spinner {
--size: 1.5rem; --size: 1.5rem;
--stroke-width: 0.1rem; --stroke-width: 0.1rem;
} }
cube-loader {
--size: 1.2rem;
}
sm-form { sm-form {
--gap: 1rem; --gap: 1rem;
@ -596,7 +599,7 @@ ul {
} }
.card { .card {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: max(1rem, 3vw); padding: max(1rem, 3vw);
} }
@ -1112,7 +1115,7 @@ ul {
gap: 0.5rem; gap: 0.5rem;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--foreground-color), 1);
} }
.update__topic { .update__topic {
@ -1380,37 +1383,14 @@ ul {
width: 60vw; width: 60vw;
margin: 2rem 0; margin: 2rem 0;
} }
#loading_page { #loading {
display: grid; display: grid;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
text-align: center; text-align: center;
place-content: center; place-content: center;
justify-items: center; justify-items: center;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
.loading-message {
font-size: 1.3rem;
margin: 1.5rem 0 0.5rem 0;
}
#loading_page__footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
.icon {
height: 4rem;
width: 4rem;
}
}
#project_watching_section { #project_watching_section {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1424,9 +1404,8 @@ ul {
align-content: flex-start; align-content: flex-start;
padding: 1rem; padding: 1rem;
} }
#watch_project_button { #pin_project_button {
margin-left: 1rem; margin-left: 1rem;
text-transform: capitalize;
} }
#admin_page { #admin_page {
@ -1572,25 +1551,6 @@ ul {
#admin_page__left { #admin_page__left {
height: 100%; height: 100%;
overflow-y: hidden; overflow-y: hidden;
sm-tab-header {
--gap: 0;
--justify-content: stretch;
background-color: rgba(var(--text-color), 0.06);
}
sm-tab {
justify-content: center;
}
sm-tab-panels,
sm-tab-panels > * {
height: 100%;
flex-direction: column;
}
sm-tab-panels {
overflow-y: hidden;
}
sm-tab-panels > * {
display: flex;
}
.list-container { .list-container {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -1637,7 +1597,7 @@ input[type="date"] {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
} }
#project_watchlist { #pinned_projects {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
@ -1647,7 +1607,7 @@ input[type="date"] {
display: grid; display: grid;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; padding: 1rem;
background-color: rgba(var(--text-color), 0.04); background-color: rgba(var(--foreground-color), 1);
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
.project-icon { .project-icon {
display: flex; display: flex;
@ -1788,7 +1748,7 @@ input[type="date"] {
grid-template-columns: 18rem minmax(0, 1fr); grid-template-columns: 18rem minmax(0, 1fr);
} }
#admin_page__left { #admin_page__left {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 0.5);
} }
#edit_data_fig { #edit_data_fig {
@ -1853,9 +1813,10 @@ input[type="date"] {
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
.intern-card { .intern-card {
margin: 0;
gap: 1rem; gap: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--foreground-color), 1);
} }
} }
#intern_list_popup { #intern_list_popup {
@ -1901,8 +1862,10 @@ input[type="date"] {
background: rgba(var(--text-color), 0.5); background: rgba(var(--text-color), 0.5);
} }
} }
.interact {
.interact:hover { transition: background-color 0.2s;
background-color: rgba(var(--text-color), 0.06); &:hover {
background-color: rgba(var(--text-color), 0.04);
}
} }
} }

88
index.html
View File

@ -31,7 +31,7 @@
<script src="scripts/ribc.js"></script> <script src="scripts/ribc.js"></script>
<script id="onLoadStartUp"> <script id="onLoadStartUp">
function onLoadStartUp() { function onLoadStartUp() {
showPage('loading') routeTo('loading')
document.body.classList.remove('hidden') document.body.classList.remove('hidden')
floDapps.setCustomPrivKeyInput(getSignedIn); floDapps.setCustomPrivKeyInput(getSignedIn);
floDapps.launchStartUp().then(result => { floDapps.launchStartUp().then(result => {
@ -40,7 +40,7 @@
RIBC.init(floGlobals.subAdmins.includes(myFloID)).then(result => { RIBC.init(floGlobals.subAdmins.includes(myFloID)).then(result => {
console.log(result) console.log(result)
renderAllElements() renderAllElements()
showPage(window.location.hash, { firstLoad: true }) routeTo(window.location.hash, { firstLoad: true })
}).catch(error => console.error(error)) }).catch(error => console.error(error))
}).catch(error => console.error(error)) }).catch(error => console.error(error))
} }
@ -136,7 +136,7 @@
</section> </section>
</article> </article>
<div id="loading" class="inner-page hidden"> <div id="loading" class="inner-page hidden">
<sm-spinner></sm-spinner> <cube-loader></cube-loader>
<h4 class="page__tag-line margin-block-1">Getting everything ready, Hang on.</h4> <h4 class="page__tag-line margin-block-1">Getting everything ready, Hang on.</h4>
<button class="button" onclick="floDapps.clearCredentials()">Reset</button> <button class="button" onclick="floDapps.clearCredentials()">Reset</button>
</div> </div>
@ -357,12 +357,13 @@
</svg> </svg>
</div> </div>
<section id="project_watching_section" class="w-100"> <section id="project_watching_section" class="w-100">
<h4>Projects watchlist</h4> <h4>Pinned projects</h4>
<div id="project_watchlist" class="observe-empty-state"></div> <div id="pinned_projects" class="observe-empty-state"></div>
<div class="empty-state"> <div class="empty-state">
<h4>No project added to watchlist. </h4> <h4>There are no pinned projects</h4>
<p class="margin-block-0-5"> <p class="margin-block-0-5">
You can add projects to watchlist by clicking on the 'Watch' button in opened project. You can pin projects for easier monitoring by clicking on the 'pin' icon in opened
project.
</p> </p>
<a href="#/project_explorer" class="button open-first-project">See all projects</a> <a href="#/project_explorer" class="button open-first-project">See all projects</a>
</div> </div>
@ -627,10 +628,15 @@
</a> </a>
<div class="flex space-between align-center"> <div class="flex space-between align-center">
<h2 id="project_explorer__project_title"></h2> <h2 id="project_explorer__project_title"></h2>
<sm-button id="watch_project_button" title="Add project to your watchlist" <button class="button icon-only" id="pin_project_button"
onclick="watchThisProject(this)"> title="Pin this project to dashboard" onclick="pinProject(this)">
Watch <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
</sm-button> xmlns="http://www.w3.org/2000/svg">
<path
d="M16 12V4H17V2H7V4H8V12L6 14V16H11.2V22H12.8V16H18V14L16 12ZM8.8 14L10 12.8V4H14V12.8L15.2 14H8.8Z"
fill="black" />
</svg>
</button>
</div> </div>
</header> </header>
<p id="project_explorer__project_description"></p> <p id="project_explorer__project_description"></p>
@ -1046,7 +1052,7 @@
if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]); if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
return M.join(' '); return M.join(' ');
} }
window.addEventListener('hashchange', e => showPage(window.location.hash)) window.addEventListener('hashchange', e => routeTo(window.location.hash))
window.addEventListener("load", () => { window.addEventListener("load", () => {
const [browserName, browserVersion] = detectBrowser().split(' '); const [browserName, browserVersion] = detectBrowser().split(' ');
const supportedVersions = { const supportedVersions = {
@ -1152,7 +1158,7 @@
params: {}, params: {},
openedPages: new Set(), openedPages: new Set(),
} }
function showPage(targetPage, options = {}) { function routeTo(targetPage, options = {}) {
const { firstLoad, hashChange } = options const { firstLoad, hashChange } = options
let pageId let pageId
let subPageId1 let subPageId1
@ -1205,7 +1211,7 @@
getRef('generated_private_key').value = privKey getRef('generated_private_key').value = privKey
break; break;
case 'dashboard_page': case 'dashboard_page':
renderElem(getRef('project_watchlist'), html`${watchList.map(project => render.watchlistProject(project))} `) renderElem(getRef('pinned_projects'), html`${pinnedProjects.map(project => render.watchlistProject(project))} `)
break; break;
case 'updates_page': case 'updates_page':
if (!getRef('updates_page__project_selector').children.length) { if (!getRef('updates_page__project_selector').children.length) {
@ -1933,7 +1939,7 @@
//helper functions //helper functions
let allInternsList = []; let allInternsList = [];
let highPerformingInterns = []; let highPerformingInterns = [];
let watchList = []; let pinnedProjects = [];
let currentIntern; let currentIntern;
let currentTaskId; let currentTaskId;
let typeOfUser = 'general'; let typeOfUser = 'general';
@ -2011,10 +2017,11 @@
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
const { projectName, projectDescription } = RIBC.getProjectDetails(projectId); const { projectName, projectDescription } = RIBC.getProjectDetails(projectId);
getRef('project_explorer__project_title').textContent = projectName; // project name getRef('project_explorer__project_title').textContent = projectName; // project name
if (watchList.includes(projectId)) { getRef('pin_project_button').dataset.pinned = pinnedProjects.includes(projectId);
getRef('watch_project_button').textContent = 'watching'; if (pinnedProjects.includes(projectId)) {
getRef('pin_project_button').innerHTML = `<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 6.2V4H7V2H17V4H16V12L18 14V16H17.8L14 12.2V4H10V8.2L8 6.2ZM20 20.7L18.7 22L12.8 16.1V22H11.2V16H6V14L8 12V11.3L2 5.3L3.3 4L20 20.7ZM8.8 14H10.6L9.7 13.1L8.8 14Z" fill="black"/> </svg>`;
} else { } else {
getRef('watch_project_button').textContent = 'Watch'; getRef('pin_project_button').innerHTML = `<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 12V4H17V2H7V4H8V12L6 14V16H11.2V22H12.8V16H18V14L16 12ZM8.8 14L10 12.8V4H14V12.8L15.2 14H8.8Z" fill="black"/> </svg>`;
} }
getRef('project_explorer__project_description').textContent = projectDescription; getRef('project_explorer__project_description').textContent = projectDescription;
getRef('project_explorer__project_updates').href = `#/updates_page?projectId=${projectId}&internId=all`; getRef('project_explorer__project_updates').href = `#/updates_page?projectId=${projectId}&internId=all`;
@ -2427,31 +2434,18 @@
getRef('updates_page__project_selector').addEventListener('change', e => setUpdateFilters()) getRef('updates_page__project_selector').addEventListener('change', e => setUpdateFilters())
getRef('updates_page__intern_selector').addEventListener('change', e => setUpdateFilters()) getRef('updates_page__intern_selector').addEventListener('change', e => setUpdateFilters())
getRef('updates_page__date_selector').addEventListener('change', e => setUpdateFilters()) getRef('updates_page__date_selector').addEventListener('change', e => setUpdateFilters())
function pinProject(thisBtn) {
getRef('watch_project_button').addEventListener('mouseenter', e => { pinnedProjects = localStorage.getItem(`${myFloID}_pinned_projects`) ? localStorage.getItem(`${myFloID}_pinned_projects`).split(',') : []
if (e.target.textContent === 'watching') { if (pinnedProjects.includes(currentProject)) {
e.target.textContent = 'unwatch' pinnedProjects = pinnedProjects.filter(project => project !== currentProject)
e.target.title = 'Remove project from your watchlist' thisBtn.innerHTML = `<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 12V4H17V2H7V4H8V12L6 14V16H11.2V22H12.8V16H18V14L16 12ZM8.8 14L10 12.8V4H14V12.8L15.2 14H8.8Z" fill="black"/> </svg>`;
} notify(`${RIBC.getProjectDetails(currentProject).projectName} removed from your watch list.`, 'success')
})
getRef('watch_project_button').addEventListener('mouseleave', e => {
if (e.target.textContent === 'unwatch') {
e.target.textContent = 'watching'
e.target.title = 'Add project to your watchlist'
}
})
function watchThisProject(thisBtn) {
watchList = localStorage.getItem(`${myFloID}_watchlist`) ? localStorage.getItem(`${myFloID}_watchlist`).split(',') : []
if (watchList.includes(currentProject)) {
watchList = watchList.filter(project => project !== currentProject)
thisBtn.textContent = 'Watch'
notify(`${RIBC.getProjectDetails(currentProject).projectName} removed from your watch list.`)
} else { } else {
watchList.push(currentProject) pinnedProjects.push(currentProject)
thisBtn.textContent = 'watching' thisBtn.innerHTML = `<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 6.2V4H7V2H17V4H16V12L18 14V16H17.8L14 12.2V4H10V8.2L8 6.2ZM20 20.7L18.7 22L12.8 16.1V22H11.2V16H6V14L8 12V11.3L2 5.3L3.3 4L20 20.7ZM8.8 14H10.6L9.7 13.1L8.8 14Z" fill="black"/> </svg>`;
notify(`${RIBC.getProjectDetails(currentProject).projectName} added to your watch list.`, 'success') notify(`${RIBC.getProjectDetails(currentProject).projectName} added to your watch list.`, 'success')
} }
localStorage.setItem(`${myFloID}_watchlist`, watchList.join()) localStorage.setItem(`${myFloID}_pinned_projects`, pinnedProjects.join())
} }
let sessionTaskRequests = new Set(); let sessionTaskRequests = new Set();
@ -2513,7 +2507,7 @@
link.href = `${link.href}/project?id=${sortedProjectList[0]}&branch=mainLine` link.href = `${link.href}/project?id=${sortedProjectList[0]}&branch=mainLine`
}) })
watchList = localStorage.getItem(`${myFloID}_watchlist`) ? localStorage.getItem(`${myFloID}_watchlist`).split(',') : [] pinnedProjects = localStorage.getItem(`${myFloID}_pinned_projects`) ? localStorage.getItem(`${myFloID}_pinned_projects`).split(',') : []
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
let allProjectsList = RIBC.getProjectList(); let allProjectsList = RIBC.getProjectList();
//creates cards for highest performing interns //creates cards for highest performing interns
@ -2530,7 +2524,7 @@
} }
highPerformingInterns.sort((a, b) => b.rating - a.rating); highPerformingInterns.sort((a, b) => b.rating - a.rating);
getRef('watch_project_button').classList.remove('hidden') getRef('pin_project_button').classList.remove('hidden')
// Intern's view // Intern's view
@ -2542,7 +2536,7 @@
option.classList.remove('hidden') option.classList.remove('hidden')
}) })
document.getElementById('project_watching_section').classList.add('hidden') document.getElementById('project_watching_section').classList.add('hidden')
getRef('watch_project_button').classList.add('hidden') getRef('pin_project_button').classList.add('hidden')
// store all the projects assigned to interns in array // store all the projects assigned to interns in array
@ -2855,7 +2849,7 @@
function getSignedIn(passwordType) { function getSignedIn(passwordType) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
showPage('landing') routeTo('landing')
try { try {
getPromptInput('Enter password', '', { getPromptInput('Enter password', '', {
isPassword: true, isPassword: true,
@ -2879,19 +2873,19 @@
getRef('secure_pwd_button').closest('.card').classList.remove('hidden'); getRef('secure_pwd_button').closest('.card').classList.remove('hidden');
} }
if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) { if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
showPage(window.location.hash); routeTo(window.location.hash);
} else { } else {
location.hash = floGlobals.isPrivKeySecured ? '#/sign_in' : `#/landing`; location.hash = floGlobals.isPrivKeySecured ? '#/sign_in' : `#/landing`;
} }
getRef('sign_in_button').onclick = () => { getRef('sign_in_button').onclick = () => {
resolve(getRef('private_key_field').value.trim()); resolve(getRef('private_key_field').value.trim());
getRef('private_key_field').value = ''; getRef('private_key_field').value = '';
showPage('loading'); routeTo('loading');
}; };
getRef('sign_up_button').onclick = () => { getRef('sign_up_button').onclick = () => {
resolve(getRef('generated_private_key').value.trim()); resolve(getRef('generated_private_key').value.trim());
getRef('generated_private_key').value = ''; getRef('generated_private_key').value = '';
showPage('loading'); routeTo('loading');
}; };
} }
}); });