From bae0af76cde338f78d2b77e3768a00235fa676d9 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 26 Feb 2020 21:21:06 +0530 Subject: [PATCH 01/41] Updating to new UI V 8.2.5 --- RIBC.html | 22470 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 13447 insertions(+), 9023 deletions(-) diff --git a/RIBC.html b/RIBC.html index e267660..15b6450 100644 --- a/RIBC.html +++ b/RIBC.html @@ -1,5052 +1,8059 @@ - - - - RIBC - - - - - - -
- RIBC - (use console) -
- - + + +
+ Message + +
+
+ +
+ +
+ +
+ +
+
+
+ + + + +

Projects you are watching

+ + +
+
+ + +
+
+

My task

+
+

+

+
+ + + +
+
+
+
+ + + +

Leaderboard

+ All +
+
+ +
+
+
+
+ + + + + +

Projects

+ All +
+
+
+
+ +
+
+

Settings

+
+

Account

+

+ +
+
+

Dark mode

+
+ + Automatic
+ Dark mode active : 6pm - 6am + + +
+
+ Manual
+ Dark mode + + +
+
+
+

About

+
Version 8.2.5
+ +
Powered by
+ + + + + + + + + + + + + + +
+
+
+
+ + Go back to previous page + + +

+
+
+
+
+
+ + Go back to previous page + + +

Projects

+
+
+

My projects

+
+

Other projects

+
+
+
+
+

+ +
+

+
+
+

+
+
+
+
+
+
+
+

Projects

+ + show project adding panel + + +
+
- })(); -} +
+
+
+
+

Interns

+ + show new intern adding panel + + +
+
+ +
+
+
+
+
+ + admin panel illustration + + + +

Click on a project to manage it.

+
+
+
+
+

Project Name

+
+

+

+
+
+

Tasks

+
+
+ +
    +
  • + + Open intern assignment popup + + + + + + + Assign an intern +
    • +
  • + + show new branch creation popup + + + + + + + Create new Branch +
    • +
  • + + remove this task + + + + Delete +
    • +
+
+
+
+ Copied +
+
+ +
- //Adding SHA1 to fix basic PKBDF2 - /* - * Crypto-JS v2.5.4 - * http://code.google.com/p/crypto-js/ - * (c) 2009-2012 by Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ - (function () { +
+ +
- // Public API - var SHA1 = C.SHA1 = function (message, options) { - var digestbytes = util.wordsToBytes(SHA1._sha1(message)); - return options && options.asBytes ? digestbytes : - options && options.asString ? Binary.bytesToString(digestbytes) : - util.bytesToHex(digestbytes); - }; +
+ +
- // The core - SHA1._sha1 = function (message) { - - // Convert to byte array - if (message.constructor == String) message = UTF8.stringToBytes(message); - /* else, assume byte array already */ - - var m = util.bytesToWords(message), - l = message.length * 8, - w = [], - H0 = 1732584193, - H1 = -271733879, - H2 = -1732584194, - H3 = 271733878, - H4 = -1009589776; - - // Padding - m[l >> 5] |= 0x80 << (24 - l % 32); - m[((l + 64 >>> 9) << 4) + 15] = l; - - for (var i = 0; i < m.length; i += 16) { - - var a = H0, - b = H1, - c = H2, - d = H3, - e = H4; - - for (var j = 0; j < 80; j++) { - - if (j < 16) w[j] = m[i + j]; - else { - var n = w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16]; - w[j] = (n << 1) | (n >>> 31); - } - - var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + ( - j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 : - j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 : - j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 : - (H1 ^ H2 ^ H3) - 899497514); - - H4 = H3; - H3 = H2; - H2 = (H1 << 30) | (H1 >>> 2); - H1 = H0; - H0 = t; - - } - - H0 += a; - H1 += b; - H2 += c; - H3 += d; - H4 += e; - - } - - return [H0, H1, H2, H3, H4]; - - }; - - // Package private blocksize - SHA1._blocksize = 16; - - SHA1._digestsize = 20; - - })(); - - //Added to make PKBDF2 work - /* - * Crypto-JS v2.5.4 - * http://code.google.com/p/crypto-js/ - * (c) 2009-2012 by Jeff Mott. All rights reserved. - * http://code.google.com/p/crypto-js/wiki/License - */ - (function () { - - // Shortcuts - var C = Crypto, - util = C.util, - charenc = C.charenc, - UTF8 = charenc.UTF8, - Binary = charenc.Binary; - - C.HMAC = function (hasher, message, key, options) { - - // Convert to byte arrays - if (message.constructor == String) message = UTF8.stringToBytes(message); - if (key.constructor == String) key = UTF8.stringToBytes(key); - /* else, assume byte arrays already */ - - // Allow arbitrary length keys - if (key.length > hasher._blocksize * 4) - key = hasher(key, { - asBytes: true - }); - - // XOR keys with pad constants - var okey = key.slice(0), - ikey = key.slice(0); - for (var i = 0; i < hasher._blocksize * 4; i++) { - okey[i] ^= 0x5C; - ikey[i] ^= 0x36; - } - - var hmacbytes = hasher(okey.concat(hasher(ikey.concat(message), { - asBytes: true - })), { - asBytes: true +
+ +
+
+ +
+
+ +
+
+
+
+ + close this popup + + +

Post an update

+
+
Task
+ +
Update
+ +
+
+ + - - - + + - - - - + + + + + + + - - + function logout(){ + askConfirmation("Do you want to sign out?").then((result) => { + if(result){ + floDapps.clearCredentials() + showMessage('','You have signed out successfully.') + onLoadStartUp() + if(window.innerWidth > 768) + showPage('dashboard_btn', 'dashboard'); + else + showPage('bottom_dashboard_btn', 'dashboard'); + } + }) + } + let allInterns = []; + + document.getElementById('interns_list_container').addEventListener('click', (event) => { + if(event.target.closest('.intern-card')){ + let floid = event.target.closest('.intern-card').dataset.internId; + if(RIBC.manage.assignInternToTask(floid, currentProject, currentBranch, currentTask.id)){ + showMessage('',`${event.target.closest('.intern-card').children[1].textContent} assigned to ${RIBC.getProjectDetails(currentProject).projectName}`) + currentTask.querySelector('.assigned-interns').appendChild(render.assignedInternCard(getInternDetails(floid)[0], 'yes')) + setTimeout(() => { + allInterns.forEach((intern) => { + intern.style.display = ""; + }) + },1000) + } + else + showMessage('error', 'intern already assigned') + hidePopup('interns_list') + } + }) + + function unassignIntern(){ + RIBC.manage.unassignInternFromTask(currentProject, currentBranch, currentTask) + } + + function populateIntens(){ + iList = RIBC.getInternList(); + let internsPopup = document.getElementById('interns_list_container'); + for(intern in iList){ + frag.appendChild(render.internCard(iList[intern],intern, RIBC.getInternRating(intern))) + } + internsPopup.innerHTML = '' + internsPopup.appendChild(frag) + } + + function changeScore(scoreUpdate, parent){ + let score = parseInt(parent.children[1].textContent) + if(score === 1 && scoreUpdate === -1){ + parent.children[3].disabled = true; + return; + } + score += scoreUpdate; + parent.children[1].textContent = score + if(score > 0){ + parent.children[3].disabled = false; + RIBC.manage.updateInternRating(currentIntern, scoreUpdate) + } + } + + function addNewBranch(){ + showPopup('create_branch') + let popup = document.getElementById('create_branch'), + startPoint = document.getElementById('branch_start_point'), + mergePoint = document.getElementById('branch_merge_point'), + branchName = ''; + startPoint.value = parseInt(currentTask.id); + document.getElementById('create_branch_btn').onclick = () =>{ + branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, parseInt(mergePoint.value)); + showMessage('',`Branch added ${branchName}`) + document.getElementById('branch_container').appendChild(render.branchBtn(currentProject, branchName)) + hidePopup('create_branch') + } + } + + function showUpdatePanel(){ + let container = document.getElementById('updates'), + updateContainer = document.getElementById('update_container'); + updateFeed(updateContainer, 8) + this.classList.add('update-mi') + this.addEventListener('animationend', () => { + this.classList.remove('update-mi') + }) + this.addEventListener('webkitAnimationEnd', () => { + this.classList.remove('update-mi') + }) + container.classList.toggle('hide') + let y = document.addEventListener("mousedown", function(event) { + if (event.target.closest('#intern_updates')) return; + container.classList.add('hide') + document.removeEventListener('click', y); + }); + } + + function updateFeed(container, limit){ + let updateContainer = container; + if(typeof container === "string") + updateContainer = document.getElementById(container); + updateContainer.innerHTML = ``; + let updates = RIBC.getInternUpdates(limit); + updates.forEach((entry) => { + frag.appendChild(render.updateCard(getInternDetails(entry.floID)[0].split(':')[1], entry.update.topic, entry.update.description)) + }) + updateContainer.appendChild(frag) + } + + function watchThisProject(thisBtn){ + watchList = JSON.parse(localStorage.getItem('watchList')) + if(!watchList.includes(currentProject)){ + watchList.push(currentProject) + thisBtn.textContent = 'watching' + localStorage.setItem('watchList', JSON.stringify(watchList)) + showMessage('', `${RIBC.getProjectDetails(currentProject).projectName} added to your watch list.`) + } + else{ + watchList.splice(watchList.indexOf(currentProject), 1) + thisBtn.textContent = 'Watch' + if(watchList.length === 0){ + document.getElementById('status_map').innerHTML = '

No project added to watch list.

' + } + localStorage.setItem('watchList', JSON.stringify(watchList)) + showMessage('', `${RIBC.getProjectDetails(currentProject).projectName} removed from your watch list.`) + } + changeProject(0) + } + + function showProjectMap(projectCode, container){ + if(projectCode === undefined) return; + let tempCard = render.projectMapCard(projectCode), + containerCard = document.getElementById(container); + containerCard.innerHTML =``; + currentProject = projectCode; + containerCard.appendChild(tempCard[0]) + document.getElementById(tempCard[2]).addEventListener('click', (event) => { + if(event.target.closest('.branch-btn')){ + showTasksOfBranch(event.target.closest('.branch-btn'), tempCard[1], tempCard[3], '') + } + }) + document.getElementById(tempCard[2]).firstElementChild.click() + } + let index = 0; + function changeProject(change){ + let list = JSON.parse(localStorage.getItem('watchList')), + listButtons = document.querySelectorAll('.watch-list-button'); + index += change; + index = Math.min(Math.max(index,0), list.length-1); + if(list.length === 0){ + disableBtn('prev_proj') + disableBtn('next_proj') + listButtons.forEach((btn) => { + btn.classList.add('hide') + }) + } + else{ + listButtons.forEach((btn) => { + btn.classList.remove('hide') + }) + if(index === 0){ + disableBtn('prev_proj') + } + else{ + enableBtn('prev_proj') + } + if(index+1 === list.length){ + disableBtn('next_proj') + } + else + enableBtn('next_proj') + } + dashboardProject = list[index] + showProjectMap(dashboardProject, 'status_map') + } + + function sendUpdatePopup(){ + showPopup('post_update') + document.getElementById('post_update_btn').classList.remove('no-transformations') + if(Object.keys(iList).includes(myFloID) && !floGlobals.subAdmins.includes(myFloID)) + document.getElementById('update_topic').value = `${currentTaskObj.projectName} / ${RIBC.getTaskDetails(currentTaskObj.project, currentTaskObj.pBranch, currentTaskObj.task).taskTitle}`; + } + + let allRequests = []; + function requestForTask(btn){ + askConfirmation('Do you want to apply for this task?').then((result) => { + if(result){ + if(localStorage.getItem('requests') === null) + localStorage.setItem('requests', JSON.stringify(allRequests)) + btn.textContent = 'Applied' + disableBtn(btn) + RIBC.applyForTask(btn.dataset.projectCode, btn.dataset.branch, btn.dataset.taskNo) + .then((result) => { + showMessage('', 'Applied sucessfully.') + allRequests = JSON.parse(localStorage.getItem('requests')) + allRequests.push({projectCode: btn.dataset.projectCode, branch: btn.dataset.branch, taskNo: btn.dataset.taskNo}) + localStorage.setItem('requests', JSON.stringify(allRequests)) + }) + } + }) + .catch((error) => { + showMessage('error' ,error) + }) + } + + 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') + } + + window.addEventListener('load', () => { + document.querySelectorAll('textarea').forEach((textArea) => { + textArea.setAttribute('style', 'height:' + (textArea.scrollHeight) + 'px;overflow-y:hidden;'); + textArea.addEventListener("input", OnInput, false); + }) + }) + function OnInput(e) { + this.style.height = 'auto'; + this.style.height = (this.scrollHeight) + 'px'; + if(this.value.trim() !== '' && this.parentNode.classList.contains('chatInput')) + this.parentNode.children[1].classList.add('no-transformations') + else + this.parentNode.children[1].classList.remove('no-transformations') + } + + function loader(mode){ + let loader = document.getElementById('loader'); + if(mode === 'show'){ + loader.classList.remove('hide') + loader.firstElementChild.children[0].classList.add('loading-animation') + } + else{ + loader.classList.add('hide') + loader.firstElementChild.children[0].classList.remove('loading-animation') + } + } + let myInput = function(){ + return new Promise((resolve, reject) => { + loader('hide') + showPopup('sign_in' ,'no'); + let container = document.getElementById('priv_key_sign_in'), + signIn = document.getElementById('sign_in'), + privField = document.getElementById('priv_key_field'), + btn = document.getElementById('back_to_main_page'); + document.getElementById('guest_btn').onclick = function(){ + hidePopup('sign_in') + reject(null); + } + document.getElementById('priv_key_btn').onclick = function(){ + container.classList.remove('hide-completely') + signIn.children[2].classList.add('hide-completely') + btn.classList.remove('hide-completely') + privField.focus() + } + btn.onclick = function(){ + container.classList.add('hide-completely') + signIn.children[2].classList.remove('hide-completely') + btn.classList.add('hide-completely') + } + privField.addEventListener('keyup', (event) => { + if(privField.value.trim() !== '') + enableBtn('sign_in_btn') + else + disableBtn('sign_in_btn') + if(event.keyCode === 13 || event.key === 13){ + if(privField.value.trim().length > 40){ + resolve(privField.value.trim()) + hidePopup('sign_in') + loader('show') + } + else{ + showMessage('error', 'Please enter correct private key.') + } + } + }) + document.getElementById('sign_in_btn').onclick = function(){ + if(privField.value.trim().length > 40){ + resolve(privField.value.trim()) + hidePopup('sign_in') + loader('show') + } + else{ + showMessage('error', 'Please enter correct private key.') + } + } + }) + } + // Event listeners + + document.getElementById('best_interns').addEventListener('click', (event) => { + if(event.target.closest('.intern-card')) + showInternInfo(event.target.closest('.intern-card')) + }) + document.getElementById('status_map').addEventListener('click', (e) => { + if(e.target.closest('.apply-btn')){ + requestForTask(e.target.closest('.apply-btn')) + } + }) + let projectList = document.getElementById('project_list'); + projectList.addEventListener('click', (event) => { + if(event.target.closest('.project-card')){ + appState.btn = ''; + appState.page = 'project_explorer'; + appState.offsprings = 'explorer'; + appState.type = 'innerPage'; + showPage('', 'project_explorer', 'explorer', 'innerPage') + if(lastState !== appState.page) + history.pushState(appState, null, null) + lastState = appState.page; + showProjectInfo(event.target.closest('.project-card'), 'right', 'no', [...projectList.children].indexOf(event.target.closest('.project-card'))) + } + }) + document.getElementById('show_all').addEventListener('click', (event) => { + if(event.target.closest('.intern-card')) + showInternInfo(event.target.closest('.intern-card')) + }) + document.getElementById('interns').addEventListener('click', (event) => { + if(event.target.closest('.intern-card')) + showInternInfo(event.target.closest('.intern-card')) + }) + document.getElementById('projects').addEventListener('click', (event) => { + if(event.target.closest('.project-card')) + editProjectInfo(event.target.closest('.project-card')) + }) + + function renderAllElements(){ + + let frag = document.createDocumentFragment(), + pList = RIBC.getProjectList(); + //creates cards for highest performing interns + //sort interns earned points + + + iList = RIBC.getInternList(); + newIList = []; + for(let intern in iList){ + newIList.push([intern, iList[intern], RIBC.getInternRating(intern)]) + } + newIList.sort(function(a, b) { + return a[2] - b[2]; + }); + + // Intern's view + + let newPList = [],x; + if(Object.keys(iList).includes(myFloID) && !floGlobals.subAdmins.includes(myFloID)){ + typeOfUser = 'intern'; + document.querySelectorAll('.intern-option').forEach((option) => { + option.classList.remove('hide-completely') + }) + document.getElementById('status_map_container').classList.add('hide-completely') + for(let i =0;i < pList.length; i++){ + nextProject: + for(branch in RIBC.getProjectMap(pList[i])){ + x = RIBC.getProjectMap(pList[i])[branch].slice(4); + for(let j = 0;j < x.length; j++) + if(Array.isArray(RIBC.getAssignedInterns(pList[i],branch,x[j])) && RIBC.getAssignedInterns(pList[i],branch,x[j]).includes(myFloID)){ + newPList.push(pList[i]) + break nextProject; + } + } + } + + for(let i =0;i < newPList.length; i++){ + for(branch in RIBC.getProjectMap(newPList[i])){ + x = RIBC.getProjectMap(newPList[i])[branch].slice(4); + for(let j = 0;j < x.length; j++) + if(RIBC.getTaskStatus(newPList[i], branch, x[j]) === 'incomplete' && Array.isArray(RIBC.getAssignedInterns(newPList[i],branch,x[j])) && RIBC.getAssignedInterns(newPList[i],branch,x[j]).includes(myFloID)){ + currentTaskObj.project = pList[i]; + currentTaskObj.projectName = RIBC.getProjectDetails(pList[i]).projectName; + currentTaskObj.pBranch = branch; + currentTaskObj.task = x[j] + break; + } + } + } + document.getElementById('project_list_container').firstElementChild.children[1].textContent = 'My projects' + let parent = document.getElementById('assigned_task'); + if(!Object.keys(currentTaskObj).length){ + parent.children[0].textContent = 'No task assigned yet.'; + parent.children[1].textContent = ''; + } + else{ + let taskDetails = RIBC.getTaskDetails(currentTaskObj.project, currentTaskObj.pBranch, currentTaskObj.task) + parent.children[0].textContent = taskDetails.taskTitle; + parent.children[1].textContent = taskDetails.taskDescription; + } + + } + else{ + document.querySelectorAll('.intern-option').forEach((option) => { + option.classList.add('hide-completely') + }) + document.getElementById('status_map_container').classList.remove('hide-completely') + document.getElementById('project_list_container').firstElementChild.children[1].textContent = 'Projects' + } + + // admin view + if(floGlobals.subAdmins.includes(myFloID)){ + typeOfUser = 'admin' + let requestsContainer = document.getElementById('requests_container'); + RIBC.getTaskApplications().forEach((app) => { + try{ + if(!Array.isArray(RIBC.getAssignedInterns(app.projectCode, app.branch, app.task)) && typeof RIBC.getTaskDetails(app.projectCode, app.branch, app.task) !== 'undefined') + frag.appendChild(render.requestCard(app.floID, app.projectCode, app.branch, app.task)) + } + catch(error){ + console.error(error) + } + }) + requestsContainer.appendChild(frag) + if(requestsContainer.children.length === 0) + requestsContainer.innerHTML = '

Nothing to see here.

' + requestsContainer.addEventListener('click' ,(e) => { + if(e.target.closest('.accept-app')){ + let btn = e.target.closest('.accept-app'), + parent = e.target.closest('.request-card'); + if(RIBC.manage.assignInternToTask(btn.dataset.floId, btn.dataset.projectCode, btn.dataset.branch, btn.dataset.taskNo)){ + showMessage('', 'Intern assinged.') + parent.classList.add('slide-left') + setTimeout(() => { + parent.remove() + }, 600) + if(requestsContainer.children.length === 0) + requestsContainer.innerHTML = '

Nothing to see here.

' + } + else{ + showMessage('error', 'Intern already assinged.') + } + } + if(e.target.closest('.reject-app')){ + let parent = e.target.closest('.request-card'); + parent.classList.add('slide-left') + setTimeout(() => { + parent.remove() + }, 400) + if(requestsContainer.children.length === 0) + requestsContainer.innerHTML = '

Nothing to see here.

' + } + }) + + document.querySelectorAll('.admin-options').forEach((option) => { + option.classList.remove('hide-completely') + }) + + //show interns + document.getElementById('interns').innerHTML = ``; + for(intern in iList){ + frag.appendChild(render.internCard(iList[intern],intern, RIBC.getInternRating(intern),'interns')) + } + document.getElementById('interns').appendChild(frag) + + //show project + document.getElementById('projects').innerHTML = ``; + for(i = 0; i < pList.length; i++){ + frag.appendChild(render.projectCard(RIBC.getProjectDetails(pList[i]).projectName, pList[i])) + } + document.getElementById('projects').appendChild(frag) + } + else{ + document.querySelectorAll('.admin-options').forEach((option) => { + option.classList.add('hide-completely') + }) + } + + document.getElementById('best_interns').innerHTML = ``; + let limit = 4; + newIList.reverse() + for(let p=0; p < newIList.length; p++){ + frag.appendChild(render.internCard(newIList[p][1],newIList[p][0], newIList[p][2],'best_interns')) + limit--; + if(!limit) + break; + } + document.getElementById('best_interns').appendChild(frag) + + // displays recent projects + + document.getElementById('project_list').innerHTML=''; + if(Object.keys(iList).includes(myFloID) && !floGlobals.subAdmins.includes(myFloID)){ + newPList.forEach((project) => { + frag.appendChild(render.projectCard(RIBC.getProjectDetails(project).projectName, project)) + }) + if(newPList.length === 0){ + let elem = document.createElement('h4'); + elem.textContent = 'No project assigned yet.' + elem.classList.add('padding') + frag.appendChild(elem) + } + } + else{ + pList.forEach((project) => { + frag.appendChild(render.projectCard(RIBC.getProjectDetails(project).projectName, project)) + }) + } + document.getElementById('project_list').appendChild(frag) + + if(localStorage.getItem('watchList') === null) + localStorage.setItem('watchList', JSON.stringify(watchList)) + + populateIntens() + + allInterns = document.getElementById('interns_list_container').querySelectorAll('.intern-card'); + + document.getElementById('branch_container').addEventListener('click', (event) => { + if(event.target.closest('.branch-btn')){ + showTasksOfBranch(event.target.closest('.branch-btn'), 'edit_data','task_list') + } + }) + + document.getElementById('intern_search_field').addEventListener('input', (event) => { + let container = document.getElementById('interns_list_container'), + inputField = document.getElementById('intern_search_field'); + if(event.keyCode === 13) + { + for(let i = 0;i < container.children.length; i++){ + if(container.children[i].style.display != 'none'){ + container.children[i].click() + break; + } + } + } + else + allInterns.forEach((intern) => { + if (intern.children[1].textContent.toLowerCase().indexOf(inputField.value.toLowerCase().trim()) > -1) { + intern.style.display = ""; + } else { + intern.style.display = "none"; + } + }) + }) + + document.getElementById('post_update_btn').addEventListener('click',() => { + let topic = document.getElementById('update_topic').value.trim(), + description = document.getElementById('update_description').value.trim(), + parent = document.getElementById('update_container'); + if(Object.keys(iList).includes(myFloID)) + topic.value = RIBC.getTaskDetails(currentTaskObj.project, currentTaskObj.pBranch, currentTaskObj.task).taskTitle; + if(topic !== '' && description !== ''){ + RIBC.postInternUpdate({topic: topic,description: description}) + .then((result) => { + updateFeed(parent, 8) + showMessage('', 'Update posted') + hidePopup('post_update') + }) + .catch((error) => { + showMessage('error', error) + }) + } + else{ + showMessage('error', 'Please enter topic and description') + } + }) + + document.getElementById('update_panel_btn').addEventListener('click', showUpdatePanel) + + let projectExplorer = document.getElementById('project_explorer'); + projectExplorer.children[1].children[1].innerHTML = ``; + projectExplorer.children[1].children[3].innerHTML = ``; + if(Object.keys(iList).includes(myFloID) && !floGlobals.subAdmins.includes(myFloID)){ + for(i = 0; i < newPList.length; i++){ + frag.appendChild(render.projectCard(RIBC.getProjectDetails(newPList[i]).projectName, newPList[i])) + } + projectExplorer.children[1].children[1].appendChild(frag) + pList = pList.filter(val => !newPList.includes(val)); + } + for(i = 0; i < pList.length; i++){ + frag.appendChild(render.projectCard(RIBC.getProjectDetails(pList[i]).projectName, pList[i])) + } + projectExplorer.children[1].children[3].appendChild(frag) + + let allProjects = projectExplorer.children[1].querySelectorAll('.project-card'); + projectExplorer.children[1].addEventListener('click', (event) => { + if(event.target.closest('.project-card')){ + showProjectInfo(event.target.closest('.project-card'), 'right') + } + }) + projectExplorer.children[2].addEventListener('click', (event) => { + if(event.target.closest('.branch-btn')) + showTasksOfBranch(event.target.closest('.branch-btn'), 'project_explorer', 'explorer_task_list') + if(event.target.closest('.apply-btn')){ + requestForTask(event.target.closest('.apply-btn')) + } + }) + if(JSON.parse(localStorage.getItem('watchList')).length){ + showProjectMap(JSON.parse(localStorage.getItem('watchList'))[0], 'status_map') + } + else{ + document.getElementById('status_map').innerHTML = '

No project added to watch list.

' + } + if(JSON.parse(localStorage.getItem('watchList')).length < 2) + disableBtn('next_proj') + + history.pushState(appState, null, null) + + document.getElementById('all_interns_btn').addEventListener('click', () => { + appState.btn = ''; + appState.page = 'show_all'; + appState.offsprings = 'interns'; + appState.type = 'innerPage'; + showPage('', 'show_all', 'interns', 'innerPage') + if(lastState !== appState.page) + history.pushState(appState, null, null) + lastState = appState.page; + }) + document.getElementById('all_projects_btn').addEventListener('click', () => { + appState.btn = ''; + appState.page = 'project_explorer'; + appState.offsprings = 'explorer'; + appState.type = 'innerPage'; + showPage('', 'project_explorer', 'explorer', 'innerPage') + if(window.innerWidth < 640) + showListCont('left') + if(lastState !== appState.page) + history.pushState(appState, null, null) + lastState = appState.page; + }) + document.getElementById('top_nav').addEventListener('click', (event) => { + let trgt = event.target.closest('.nav-btn'); + if(trgt){ + appState.btn = trgt.id; + appState.offsprings = ''; + appState.type = ''; + if(trgt.id === 'dashboard_btn'){ + showPage(trgt.id, 'dashboard') + appState.page = 'dashboard'; + currentProject = dashboardProject; + if(JSON.parse(localStorage.getItem('watchList')).length) + showProjectMap(JSON.parse(localStorage.getItem('watchList'))[0], 'status_map') + } + else if(trgt.id === 'admin_panel_btn'){ + showPage(trgt.id, 'admin_panel') + appState.page = 'admin_panel'; + + } + else if(trgt.id === 'settings_btn'){ + showPage(trgt.id, 'settings_page') + appState.page = 'settings_page'; + } + else if(trgt.id === 'top_update_btn'){ + appState.btn = ''; + showPage('', 'show_all', 'updates', 'innerPage') + appState.page = 'show_all'; + appState.offsprings = 'updates'; + appState.type = 'innerPage'; + } + if(lastState !== appState.page) + history.pushState(appState, null, null) + lastState = appState.page; + } + }) + document.getElementById('bottom_nav').addEventListener('click', (event) => { + let trgt = event.target.closest('.nav-btn'); + if(trgt){ + appState.btn = trgt.id; + appState.offsprings = ''; + appState.type = ''; + if(trgt.id === 'bottom_dashboard_btn'){ + showPage(trgt.id, 'dashboard') + appState.page = 'dashboard'; + currentProject = dashboardProject; + if(JSON.parse(localStorage.getItem('watchList')).length) + showProjectMap(JSON.parse(localStorage.getItem('watchList'))[0], 'status_map') + } + else if(trgt.id === 'bottom_admin_btn'){ + showPage(trgt.id, 'admin_panel') + appState.page = 'admin_panel'; + } + else if(trgt.id === 'bottom_update_btn'){ + showPage(trgt.id, 'show_all', 'updates', 'innerPage') + appState.page = 'show_all'; + appState.offsprings = 'updates'; + appState.type = 'innerPage'; + trgt.classList.add('update-mi') + trgt.addEventListener('animationend', () => { + trgt.classList.remove('update-mi') + }) + trgt.addEventListener('webkitAnimationEnd', () => { + trgt.classList.remove('update-mi') + }) + } + else if(trgt.id === 'bottom_setting_btn'){ + showPage(trgt.id, 'settings_page') + appState.page = 'settings_page'; + } + if(lastState !== appState.page) + history.pushState(appState, null, null) + lastState = appState.page; + } + }) + let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}.

${myFloID}

` : `Hi, there!

${myFloID}

` + document.getElementById('username').innerHTML = greetings; + + console.log(typeOfUser) + } + // functions that run when page loads + + From 90a66410b7ba10e0a7c4dba37bbc49f28e425f4e Mon Sep 17 00:00:00 2001 From: Vivek Teega Date: Fri, 17 Apr 2020 15:01:35 +0530 Subject: [PATCH 02/41] renaming to index.html --- RIBC.html => index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename RIBC.html => index.html (100%) diff --git a/RIBC.html b/index.html similarity index 100% rename from RIBC.html rename to index.html From 605a631b16ff5d3f18f0a44dc7c413c92f91fce9 Mon Sep 17 00:00:00 2001 From: Sai Raj <39055732+sairajzero@users.noreply.github.com> Date: Mon, 8 Jun 2020 11:08:31 +0530 Subject: [PATCH 03/41] bug fix: SignIn button not enabled on copy paste --- index.html | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 15b6450..bd7e405 100644 --- a/index.html +++ b/index.html @@ -13217,21 +13217,27 @@ btn.classList.add('hide-completely') } privField.addEventListener('keyup', (event) => { - if(privField.value.trim() !== '') + checkInput(event) + }) + privField.addEventListener('input', (event) => { + checkInput(event) + }) + function checkInput(event){ + if (privField.value.trim() !== '') enableBtn('sign_in_btn') else disableBtn('sign_in_btn') - if(event.keyCode === 13 || event.key === 13){ - if(privField.value.trim().length > 40){ + if (event.keyCode === 13 || event.key === "Enter") { + if (privField.value.trim().length > 40) { resolve(privField.value.trim()) hidePopup('sign_in') loader('show') } - else{ + else { showMessage('error', 'Please enter correct private key.') } } - }) + } document.getElementById('sign_in_btn').onclick = function(){ if(privField.value.trim().length > 40){ resolve(privField.value.trim()) From f6481b58680c588a46f7d3ae245a46985fc4d954 Mon Sep 17 00:00:00 2001 From: Sai Raj <39055732+sairajzero@users.noreply.github.com> Date: Thu, 11 Jun 2020 02:37:58 +0530 Subject: [PATCH 04/41] Improvement for applications (backend script) - Improved generalData fetch (ie, non subAdmin users will not request generalData that are required only by subAdmins). - Moved getTaskApplication to manage (as it is a subAdmin-only feature). - Added applyForIntern feature to allow non-intern users to apply as intern. - Added application status feature to allow subAdmins to coordinate among the applications. (setApplicationStatus and getApplicationStatus). - Added getInternApplications to view the intern applications - Improved getInternApplications and getTaskApplications to filter out processed (i.e, applications that have status set) - Renamed putTaskDetails to editTaskDetails --- index.html | 98 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 75 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index bd7e405..53b52c5 100644 --- a/index.html +++ b/index.html @@ -11683,7 +11683,7 @@ loader('show') console.log(result) console.log(`Welcome FLO_ID: ${myFloID}`) - RIBC.initRIBC().then(result => { + RIBC.initRIBC(floGlobals.subAdmins.includes(myFloID)).then(result => { console.log(result) renderAllElements() loader('hide') @@ -11695,9 +11695,9 @@ const RIBC = { - initRIBC: function(){ + initRIBC: function(isSubAdmin = false){ return new Promise((resolve, reject) => { - Promise.all([this.refreshObjectData(), this.refreshGeneralData()]) + Promise.all([this.refreshObjectData(), this.refreshGeneralData(isSubAdmin)]) .then(results => resolve(results)) .catch(error => reject(error)) }) @@ -11712,15 +11712,30 @@ }) }, - refreshGeneralData: function(){ + refreshGeneralData: function(isSubAdmin){ return new Promise((resolve, reject) => { - var generalDataList = ["InternUpdates", "TaskApplications"] + var generalDataList = ["InternUpdates"] + var subAdminOnlyList = [] + + if(isSubAdmin){ + generalDataList.push("TaskApplications", "InternAppications") + subAdminOnlyList.push("ApplicationStatus") + } var promises = [] - Promise.all(generalDataList.map(data => floCloudAPI.requestGeneralData(data))) + for(let data of generalDataList) + promises.push(floCloudAPI.requestGeneralData(data)) + for(let data of subAdminOnlyList) + promises.push(floCloudAPI.requestGeneralData(data), {senderIDs: floGlobals.subAdmins}) + + Promise.all(promises) .then(results => resolve('General Data Refreshed Successfully')) .catch(error => reject(error)) }) }, + + applyForIntern: function(name, comments = ''){ + return floCloudAPI.sendGeneralData([name, comments], "InternAppications") + }, postInternUpdate: function(updates){ return new Promise((resolve, reject) => { @@ -11741,18 +11756,7 @@ }, applyForTask: function(projectCode, branch, task, comments = ''){ - return new Promise((resolve, reject) => { - floCloudAPI.sendGeneralData([projectCode, branch, task, comments], "TaskApplications") - .then(results => resolve(results)) - .catch(error => reject(error)) - }) - }, - - getTaskApplications: function(){ - var filterStr = floDapps.util.getFilterString("TaskApplications") - var taskApplications = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, projectCode: data.message[0], branch: data.message[1], task: data.message[2], comments: data.message[3]}}) - taskApplications = taskApplications.filter(data => data.floID in floGlobals.appObjects.RIBC.internList) - return taskApplications + return floCloudAPI.sendGeneralData([projectCode, branch, task, comments], "TaskApplications") }, getProjectList: () => { @@ -11828,6 +11832,40 @@ this.projectDetails[projectCode] = details return "added project details for "+projectCode }, + + setApplicationStatus: function(vectorClock, status){ + return floCloudAPI.sendGeneralData({vectorClock, status}, "ApplicationStatus") + }, + + getApplicationStatus: function(vectorClock = null){ + var filterStr = floDapps.util.getFilterString("ApplicationStatus") + if(vectorClock){ + for(let data of floGlobals.generalData[filterStr]){ + if(data.message.vectorClock === vectorClock) + return data.message.status + } + return false + } else { + let applicationStatus = {}; + for(let data of floGlobals.generalData[filterStr]) + applicationStatus[data.message.vectorClock] = data.message.status + return applicationStatus + } + }, + + getInternApplications: function(ignoreProcessed = true){ + var filterStr = floDapps.util.getFilterString("InternAppications") + var internApplications = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, vectorClock: data.vectorClock, name: data.message[0], comments: data.message[1]}}) + //filter existing interns + internApplications = internApplications.filter(data => !(data.floID in floGlobals.appObjects.RIBC.internList)) + //filter processed applications + var applicationStatus = this.getApplicationStatus() + if (ignoreProcessed) + internApplications = internApplications.filter(data => !(data.vectorClock in applicationStatus)) + else + internApplications.forEach(data => data.status = applicationStatus[data.vectorClock]) + return internApplications + }, addIntern: function(floID, internName){ if(floID in this.internList) @@ -11836,14 +11874,28 @@ this.internRating[floID] = 1 return true; }, - + updateInternRating: function(floID, change = 0){ if(!(floID in this.internList)) return "Intern not found!" this.internRating[floID] += change return "Intern rating Updated"; }, - + + getTaskApplications: function(ignoreProcessed = true){ + var filterStr = floDapps.util.getFilterString("TaskApplications") + var taskApplications = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, vectorClock: data.vectorClock, projectCode: data.message[0], branch: data.message[1], task: data.message[2], comments: data.message[3]}}) + //filter only intern applications + taskApplications = taskApplications.filter(data => data.floID in floGlobals.appObjects.RIBC.internList) + //filter processed applications + var applicationStatus = this.getApplicationStatus() + if (ignoreProcessed) + taskApplications = taskApplications.filter(data => !(data.vectorClock in applicationStatus)) + else + taskApplications.forEach(data => data.status = applicationStatus[data.vectorClock]) + return taskApplications + }, + assignInternToTask: function(floID, projectCode, branch, taskNumber){ var index = projectCode + "_" + branch + "_" + taskNumber if(!Array.isArray(this.internsAssigned[index])) @@ -12144,7 +12196,7 @@ return this.projectTaskDetails[projectCode + "_" + branch + "_" + taskNumber]; }, - putTaskDetails: function (taskDetails, projectCode, branch, taskNumber) { + editTaskDetails: function (taskDetails, projectCode, branch, taskNumber) { //add taskDetails this.projectTaskDetails[projectCode + "_" + branch + "_" + taskNumber] = taskDetails; }, @@ -12815,7 +12867,7 @@ return } taskno = RIBC.manage.addTaskInMap(currentProject, currentBranch) - RIBC.manage.putTaskDetails({taskTitle: titleContent, taskDescription: descriptionContent}, currentProject, currentBranch, taskno) + RIBC.manage.editTaskDetails({taskTitle: titleContent, taskDescription: descriptionContent}, currentProject, currentBranch, taskno) RIBC.manage.putTaskStatus('incomplete', currentProject, currentBranch, taskno) showMessage('', 'Task added to current branch') card.remove(); @@ -13364,7 +13416,7 @@ if(floGlobals.subAdmins.includes(myFloID)){ typeOfUser = 'admin' let requestsContainer = document.getElementById('requests_container'); - RIBC.getTaskApplications().forEach((app) => { + RIBC.manage.getTaskApplications().forEach((app) => { try{ if(!Array.isArray(RIBC.getAssignedInterns(app.projectCode, app.branch, app.task)) && typeof RIBC.getTaskDetails(app.projectCode, app.branch, app.task) !== 'undefined') frag.appendChild(render.requestCard(app.floID, app.projectCode, app.branch, app.task)) From b26fb830574fad6be1eef215b01373af29e374e7 Mon Sep 17 00:00:00 2001 From: Sai Raj <39055732+sairajzero@users.noreply.github.com> Date: Thu, 11 Jun 2020 02:46:26 +0530 Subject: [PATCH 05/41] Renamed applications to request --- index.html | 56 +++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 53b52c5..c805518 100644 --- a/index.html +++ b/index.html @@ -11718,8 +11718,8 @@ var subAdminOnlyList = [] if(isSubAdmin){ - generalDataList.push("TaskApplications", "InternAppications") - subAdminOnlyList.push("ApplicationStatus") + generalDataList.push("TaskRequests", "InternRequests") + subAdminOnlyList.push("RequestStatus") } var promises = [] for(let data of generalDataList) @@ -11734,7 +11734,7 @@ }, applyForIntern: function(name, comments = ''){ - return floCloudAPI.sendGeneralData([name, comments], "InternAppications") + return floCloudAPI.sendGeneralData([name, comments], "InternRequests") }, postInternUpdate: function(updates){ @@ -11756,7 +11756,7 @@ }, applyForTask: function(projectCode, branch, task, comments = ''){ - return floCloudAPI.sendGeneralData([projectCode, branch, task, comments], "TaskApplications") + return floCloudAPI.sendGeneralData([projectCode, branch, task, comments], "TaskRequests") }, getProjectList: () => { @@ -11833,12 +11833,12 @@ return "added project details for "+projectCode }, - setApplicationStatus: function(vectorClock, status){ - return floCloudAPI.sendGeneralData({vectorClock, status}, "ApplicationStatus") + setRequestStatus: function(vectorClock, status){ + return floCloudAPI.sendGeneralData({vectorClock, status}, "RequestStatus") }, - getApplicationStatus: function(vectorClock = null){ - var filterStr = floDapps.util.getFilterString("ApplicationStatus") + getRequestStatus: function(vectorClock = null){ + var filterStr = floDapps.util.getFilterString("RequestStatus") if(vectorClock){ for(let data of floGlobals.generalData[filterStr]){ if(data.message.vectorClock === vectorClock) @@ -11853,18 +11853,18 @@ } }, - getInternApplications: function(ignoreProcessed = true){ - var filterStr = floDapps.util.getFilterString("InternAppications") - var internApplications = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, vectorClock: data.vectorClock, name: data.message[0], comments: data.message[1]}}) + getInternRequests: function(ignoreProcessed = true){ + var filterStr = floDapps.util.getFilterString("InternRequests") + var internRequests = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, vectorClock: data.vectorClock, name: data.message[0], comments: data.message[1]}}) //filter existing interns - internApplications = internApplications.filter(data => !(data.floID in floGlobals.appObjects.RIBC.internList)) - //filter processed applications - var applicationStatus = this.getApplicationStatus() + internRequests = internRequests.filter(data => !(data.floID in floGlobals.appObjects.RIBC.internList)) + //filter processed requests + var applicationStatus = this.getRequestStatus() if (ignoreProcessed) - internApplications = internApplications.filter(data => !(data.vectorClock in applicationStatus)) + internRequests = internRequests.filter(data => !(data.vectorClock in applicationStatus)) else - internApplications.forEach(data => data.status = applicationStatus[data.vectorClock]) - return internApplications + internRequests.forEach(data => data.status = applicationStatus[data.vectorClock]) + return internRequests }, addIntern: function(floID, internName){ @@ -11882,18 +11882,18 @@ return "Intern rating Updated"; }, - getTaskApplications: function(ignoreProcessed = true){ - var filterStr = floDapps.util.getFilterString("TaskApplications") - var taskApplications = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, vectorClock: data.vectorClock, projectCode: data.message[0], branch: data.message[1], task: data.message[2], comments: data.message[3]}}) - //filter only intern applications - taskApplications = taskApplications.filter(data => data.floID in floGlobals.appObjects.RIBC.internList) - //filter processed applications - var applicationStatus = this.getApplicationStatus() + getTaskRequests: function(ignoreProcessed = true){ + var filterStr = floDapps.util.getFilterString("TaskRequests") + var taskRequests = floGlobals.generalData[filterStr].map(data => {return {floID: data.sender, vectorClock: data.vectorClock, projectCode: data.message[0], branch: data.message[1], task: data.message[2], comments: data.message[3]}}) + //filter only intern requests + taskRequests = taskRequests.filter(data => data.floID in floGlobals.appObjects.RIBC.internList) + //filter processed requests + var applicationStatus = this.getRequestStatus() if (ignoreProcessed) - taskApplications = taskApplications.filter(data => !(data.vectorClock in applicationStatus)) + taskRequests = taskRequests.filter(data => !(data.vectorClock in applicationStatus)) else - taskApplications.forEach(data => data.status = applicationStatus[data.vectorClock]) - return taskApplications + taskRequests.forEach(data => data.status = applicationStatus[data.vectorClock]) + return taskRequests }, assignInternToTask: function(floID, projectCode, branch, taskNumber){ @@ -13416,7 +13416,7 @@ if(floGlobals.subAdmins.includes(myFloID)){ typeOfUser = 'admin' let requestsContainer = document.getElementById('requests_container'); - RIBC.manage.getTaskApplications().forEach((app) => { + RIBC.manage.getTaskRequests().forEach((app) => { try{ if(!Array.isArray(RIBC.getAssignedInterns(app.projectCode, app.branch, app.task)) && typeof RIBC.getTaskDetails(app.projectCode, app.branch, app.task) !== 'undefined') frag.appendChild(render.requestCard(app.floID, app.projectCode, app.branch, app.task)) From 3b5bca79f9bbce4685ed45a1a39763b07c6b99cd Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 18 Jun 2020 12:34:47 +0530 Subject: [PATCH 06/41] fixed bug with intern assignment --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c805518..3d4a63f 100644 --- a/index.html +++ b/index.html @@ -13383,8 +13383,8 @@ x = RIBC.getProjectMap(newPList[i])[branch].slice(4); for(let j = 0;j < x.length; j++) if(RIBC.getTaskStatus(newPList[i], branch, x[j]) === 'incomplete' && Array.isArray(RIBC.getAssignedInterns(newPList[i],branch,x[j])) && RIBC.getAssignedInterns(newPList[i],branch,x[j]).includes(myFloID)){ - currentTaskObj.project = pList[i]; - currentTaskObj.projectName = RIBC.getProjectDetails(pList[i]).projectName; + currentTaskObj.project = newPList[i]; + currentTaskObj.projectName = RIBC.getProjectDetails(newPList[i]).projectName; currentTaskObj.pBranch = branch; currentTaskObj.task = x[j] break; From a83b8336b5e5d2bd1a58f1b85e1eeb718f32ab7e Mon Sep 17 00:00:00 2001 From: Vivek Teega Date: Wed, 2 Dec 2020 12:06:27 +0530 Subject: [PATCH 07/41] Updating flosight list --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 3d4a63f..7aec9b7 100644 --- a/index.html +++ b/index.html @@ -2203,7 +2203,7 @@ //Required for blockchain API operators apiURL: { - FLO: ['https://explorer.mediciland.com/', 'https://livenet.flocha.in/', 'https://flosight.duckdns.org/', 'http://livenet-explorer.floexperiments.com/'], + FLO: ['https://explorer.mediciland.com/', 'https://flosight1.duckdns.org/', 'https://livenet.flocha.in/'], FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/'] }, adminID: "FMeiptdJNtYQEtzyYAVNP8fjsDJ1i4EPfE", From 577743e0e47ca0a1b4acc09a4c0ab20dd3275758 Mon Sep 17 00:00:00 2001 From: Sai Raj <39055732+sairajzero@users.noreply.github.com> Date: Sat, 5 Jun 2021 13:18:11 +0530 Subject: [PATCH 08/41] bugfix: flosight --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 7aec9b7..d482dc6 100644 --- a/index.html +++ b/index.html @@ -10215,7 +10215,7 @@ util: { serverList: floGlobals.apiURL[floGlobals.blockchain].slice(0), - curPos: floCrypto.randInt(0, floGlobals.apiURL[floGlobals.blockchain].length), + curPos: floCrypto.randInt(0, floGlobals.apiURL[floGlobals.blockchain].length - 1), fetch_retry: function(apicall){ return new Promise((resolve,reject) => { this.serverList.splice(this.curPos, 1); From ed4243f70c5ce93459b123a76d326f47b2d6f707 Mon Sep 17 00:00:00 2001 From: Sai Raj <39055732+sairajzero@users.noreply.github.com> Date: Sat, 5 Jun 2021 13:26:14 +0530 Subject: [PATCH 09/41] bugfix: flosight --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index d482dc6..abb808c 100644 --- a/index.html +++ b/index.html @@ -10219,7 +10219,7 @@ fetch_retry: function(apicall){ return new Promise((resolve,reject) => { this.serverList.splice(this.curPos, 1); - this.curPos = floCrypto.randInt(0, this.serverList.length) + this.curPos = floCrypto.randInt(0, this.serverList.length - 1) this.fetch_api(apicall) .then(result => resolve(result)) .catch(error => reject(error)); From 45eb340844828dfdb7b56c0f8d1066e5aff15c76 Mon Sep 17 00:00:00 2001 From: Sai Raj <39055732+sairajzero@users.noreply.github.com> Date: Sat, 5 Jun 2021 13:32:20 +0530 Subject: [PATCH 10/41] updating apiurl --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index abb808c..5704eb9 100644 --- a/index.html +++ b/index.html @@ -2203,7 +2203,7 @@ //Required for blockchain API operators apiURL: { - FLO: ['https://explorer.mediciland.com/', 'https://flosight1.duckdns.org/', 'https://livenet.flocha.in/'], + FLO: ['https://livenet.flocha.in/'], FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/'] }, adminID: "FMeiptdJNtYQEtzyYAVNP8fjsDJ1i4EPfE", From 06e1cc7c13030ba92cfb750dda833959ed96b752 Mon Sep 17 00:00:00 2001 From: SaketAnand Date: Sun, 6 Jun 2021 15:41:25 +0530 Subject: [PATCH 11/41] Update index.html updated apiurl for flosight --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5704eb9..c0750af 100644 --- a/index.html +++ b/index.html @@ -2203,7 +2203,7 @@ //Required for blockchain API operators apiURL: { - FLO: ['https://livenet.flocha.in/'], + FLO: ['https://livenet.flocha.in/','https://flosight.duckdns.org'], FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/'] }, adminID: "FMeiptdJNtYQEtzyYAVNP8fjsDJ1i4EPfE", From 8b3836a82792f2bf2b17e228979f932df0a96795 Mon Sep 17 00:00:00 2001 From: Ritika-Agrawal0811 Date: Tue, 8 Jun 2021 10:44:10 +0530 Subject: [PATCH 12/41] bug fix --- index.html | 61 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index c0750af..313addb 100644 --- a/index.html +++ b/index.html @@ -10216,37 +10216,40 @@ util: { serverList: floGlobals.apiURL[floGlobals.blockchain].slice(0), curPos: floCrypto.randInt(0, floGlobals.apiURL[floGlobals.blockchain].length - 1), - fetch_retry: function(apicall){ - return new Promise((resolve,reject) => { - this.serverList.splice(this.curPos, 1); - this.curPos = floCrypto.randInt(0, this.serverList.length - 1) - this.fetch_api(apicall) - .then(result => resolve(result)) - .catch(error => reject(error)); - }) - }, - fetch_api: function(apicall){ - return new Promise((resolve, reject) => { - if(this.serverList.length === 0) - reject("No floSight server working") - else{ - fetch(this.serverList[this.curPos] + apicall).then(response => { - if(response.ok) - response.json().then(data => resolve(data)); - else{ - this.fetch_retry(apicall) - .then(result => resolve(result)) - .catch(error => reject(error)); - } - }).catch(error => { - this.fetch_retry(apicall) + fetch_retry: function (apicall, rm_flosight) { + return new Promise((resolve, reject) => { + let i = this.serverList.indexOf(rm_flosight) + if(i != -1) + this.serverList.splice(i, 1); + this.curPos = floCrypto.randInt(0, this.serverList.length) + this.fetch_api(apicall) + .then(result => resolve(result)) + .catch(error => reject(error)); + }) + }, + fetch_api: function (apicall) { + return new Promise((resolve, reject) => { + if (this.serverList.length === 0) + reject("No floSight server working") + else { + let flosight = this.serverList[this.curPos]; + fetch(flosight + apicall).then(response => { + if (response.ok) + response.json().then(data => resolve(data)); + else { + this.fetch_retry(apicall, flosight) .then(result => resolve(result)) .catch(error => reject(error)); - }) - } - }) - } - }, + } + }).catch(error => { + this.fetch_retry(apicall, flosight) + .then(result => resolve(result)) + .catch(error => reject(error)); + }) + } + }) + } + }, //Promised function to get data from API promisedAPI: function (apicall) { From d95cf20b8be28275529a6ad454f8e202848e57fc Mon Sep 17 00:00:00 2001 From: SaketAnand Date: Sat, 12 Jun 2021 13:53:28 +0530 Subject: [PATCH 13/41] Update index.html added backslash to flosight api --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c0750af..fd0d7eb 100644 --- a/index.html +++ b/index.html @@ -2203,7 +2203,7 @@ //Required for blockchain API operators apiURL: { - FLO: ['https://livenet.flocha.in/','https://flosight.duckdns.org'], + FLO: ['https://livenet.flocha.in/','https://flosight.duckdns.org/'], FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/'] }, adminID: "FMeiptdJNtYQEtzyYAVNP8fjsDJ1i4EPfE", From 4fdc8ca1cfbb21228882438ecb095ad3ba018915 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 1 Jul 2021 19:28:42 +0530 Subject: [PATCH 14/41] Adding New UI --- components.js | 3640 ++++++++++++++ css/main.css | 2067 ++++++++ css/main.min.css | 1 + css/main.scss | 2026 ++++++++ new.html | 11618 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 19352 insertions(+) create mode 100644 components.js create mode 100644 css/main.css create mode 100644 css/main.min.css create mode 100644 css/main.scss create mode 100644 new.html diff --git a/components.js b/components.js new file mode 100644 index 0000000..62b535b --- /dev/null +++ b/components.js @@ -0,0 +1,3640 @@ +/*jshint esversion: 6 */ +//Button +const smButton = document.createElement('template') +smButton.innerHTML = ` + +`; +customElements.define('sm-button', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) + } + + get disabled() { + return this.isDisabled + } + + set disabled(value) { + if (value && !this.isDisabled) { + this.isDisabled = true + this.setAttribute('disabled', '') + this.button.removeAttribute('tabindex') + } else if (!value && this.isDisabled) { + this.isDisabled = false + this.removeAttribute('disabled') + } + } + + dispatch() { + if (this.isDisabled) { + this.dispatchEvent(new CustomEvent('disabled', { + bubbles: true, + composed: true + })) + } else { + this.dispatchEvent(new CustomEvent('clicked', { + bubbles: true, + composed: true + })) + } + } + + connectedCallback() { + this.isDisabled = false + this.button = this.shadowRoot.querySelector('.button') + if (this.hasAttribute('disabled') && !this.isDisabled) + this.isDisabled = true + this.addEventListener('click', (e) => { + this.dispatch() + }) + } + }) + +//Input +const smInput = document.createElement('template') +smInput.innerHTML = ` + +
+ + +
+`; +customElements.define('sm-input', + class extends HTMLElement { + + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) + } + + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('input').value + } + + set value(val) { + this.shadowRoot.querySelector('input').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + get type() { + return this.getAttribute('type') + } + + get isValid() { + return this.shadowRoot.querySelector('input').checkValidity() + } + + get validity() { + return this.shadowRoot.querySelector('input').validity + } + + set disabled(value) { + if (value) + this.shadowRoot.querySelector('.input').classList.add('disabled') + else + this.shadowRoot.querySelector('.input').classList.remove('disabled') + } + set readOnly(value) { + if (value) { + this.shadowRoot.querySelector('input').setAttribute('readonly', '') + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { + this.shadowRoot.querySelector('input').removeAttribute('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') + } + } + + setValidity = (message) => { + this.feedbackText.textContent = message + } + + showValidity = () => { + this.feedbackText.classList.remove('hide-completely') + } + + hideValidity = () => { + this.feedbackText.classList.add('hide-completely') + } + + focusIn = () => { + this.input.focus() + } + + focusOut = () => { + this.input.blur() + } + + fireEvent = () => { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput = (e) => { + if (!this.readonly) { + if (this.input.value !== '') { + this.clearBtn.classList.remove('hide') + } else { + this.clearBtn.classList.add('hide') + } + } + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + } else { + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + } + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.feedbackText = this.shadowRoot.querySelector('.feedback-text') + this.valueChanged = false; + this.readonly = false + this.isNumeric = false + this.min + this.max + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('input') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('min')) { + let minValue = this.getAttribute('min') + this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) + } + if (this.hasAttribute('minlength')) { + const minValue = this.getAttribute('minlength') + this.input.setAttribute('minlength', minValue) + } + if (this.hasAttribute('maxlength')) { + const maxValue = this.getAttribute('maxlength') + this.input.setAttribute('maxlength', maxValue) + } + if (this.hasAttribute('step')) { + const steps = this.getAttribute('step') + this.input.setAttribute('step', steps) + } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + this.readonly = true + } + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + if (this.hasAttribute('error-text')) { + this.feedbackText.textContent = this.getAttribute('error-text') + } + if (this.hasAttribute('type')) { + if (this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + this.input.setAttribute('type', 'number') + this.isNumeric = true + } else + this.input.setAttribute('type', this.getAttribute('type')) + } else + this.input.setAttribute('type', 'text') + this.input.addEventListener('input', e => { + this.checkInput(e) + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') { + this.shadowRoot.querySelector('.label').textContent = newValue; + this.setAttribute('aria-label', newValue); + } + } + } + }) + +//textarea +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + this.textarea = this.shadowRoot.querySelector('textarea') + } + get value() { + return this.textarea.value + } + set value(val) { + this.textarea.value = val; + this.textareaBox.dataset.value = val + this.checkInput() + this.fireEvent() + } + focusIn = () => { + this.textarea.focus() + } + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + checkInput = () => { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.textarea.value !== '') { + this.placeholder.classList.add('hide') + } else { + this.placeholder.classList.remove('hide') + } + } + connectedCallback() { + this.textareaBox = this.shadowRoot.querySelector('.textarea') + this.placeholder = this.shadowRoot.querySelector('.placeholder') + + if(this.hasAttribute('placeholder')) + this.placeholder.textContent = this.getAttribute('placeholder') + + if (this.hasAttribute('value')) { + this.textarea.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.textarea.setAttribute('required', '') + } + if (this.hasAttribute('readonly')) { + this.textarea.setAttribute('readonly', '') + } + if (this.hasAttribute('rows')) { + this.textarea.setAttribute('rows', this.getAttribute('rows')) + } + this.textarea.addEventListener('input', e => { + this.textareaBox.dataset.value = this.textarea.value + this.checkInput() + }) + } + }) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
+ +
+`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } +}) + +//chcekbox + +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + this.input = this.shadowRoot.querySelector('input') + + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + set value(val) { + this.val = val + this.setAttribute('value', value) + } + + get value() { + return getAttribute('value') + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + handleKeyup = e => { + if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { + if (this.hasAttribute('checked')) { + this.input.checked = false + this.removeAttribute('checked') + } + else { + this.input.checked = true + this.setAttribute('checked', '') + } + } + } + handleChange = e => { + if (this.input.checked) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + connectedCallback() { + this.val = '' + this.addEventListener('keyup', this.handleKeyup) + this.input.addEventListener('change', this.handleChange) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (newValue === 'true') { + this.isDisabled = true + } else { + this.isDisabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.input.checked = false + this.isChecked = false + } + this.dispatch() + } + } + } + disconnectedCallback() { + this.removeEventListener('keyup', this.handleKeyup) + this.removeEventListener('change', this.handleChange) + } +}) + +//switch + +const smSwitch = document.createElement('template') +smSwitch.innerHTML = ` + +` + +customElements.define('sm-switch', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) + this.switch = this.shadowRoot.querySelector('.switch'); + this.input = this.shadowRoot.querySelector('input') + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } else { + this.removeAttribute('checked') + } + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: this.isChecked + } + })) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { + this.input.click() + } + }) + this.input.addEventListener('click', e => { + if (this.input.checked) + this.checked = true + else + this.checked = false + this.dispatch() + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.disabled = true + } + else { + this.disabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.isChecked = false + this.input.checked = false + } + } + } + } + +}) + +// select +const smSelect = document.createElement('template') +smSelect.innerHTML = ` + +
+
+
+ + + +
+
+ +
+
`; +customElements.define('sm-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + + collapse() { + this.chevron.classList.remove('rotate') + this.optionList.animate(this.slideUp, this.animationOptions) + .onfinish = () => { + this.optionList.classList.add('hide') + this.open = false + } + } + connectedCallback() { + this.availableOptions + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + let slot = this.shadowRoot.querySelector('.options slot'), + selection = this.shadowRoot.querySelector('.selection'), + previousOption + this.open = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)`, + opacity: 0 + }, + { + transform: `translateY(0)`, + opacity: 1 + } + ] + this.slideUp = [{ + transform: `translateY(0)`, + opacity: 1 + }, + { + transform: `translateY(-0.5rem)`, + opacity: 0 + } + ] + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + selection.addEventListener('click', e => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + selection.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.addEventListener('optionSelected', e => { + if (previousOption !== e.target) { + this.setAttribute('value', e.detail.value) + this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: e.detail.value + } + })) + if (previousOption) { + previousOption.classList.remove('check-selected') + } + previousOption = e.target; + } + if (!e.detail.switching) + this.collapse() + + e.target.classList.add('check-selected') + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + if (this.availableOptions[0]) { + let firstElement = this.availableOptions[0]; + previousOption = firstElement; + firstElement.classList.add('check-selected') + this.setAttribute('value', firstElement.getAttribute('value')) + this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent + this.availableOptions.forEach((element, index) => { + element.setAttribute('data-rank', index + 1); + element.setAttribute('tabindex', "0"); + }) + } + }); + document.addEventListener('mousedown', e => { + if (!this.contains(e.target) && this.open) { + this.collapse() + } + }) + } +}) + +// option +const smOption = document.createElement('template') +smOption.innerHTML = ` + +
+ + + + +
`; +customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) + } + + sendDetails(switching) { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value'), + switching: switching + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + let validKey = [ + 'ArrowUp', + 'ArrowDown', + 'ArrowLeft', + 'ArrowRight' + ] + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + if (validKey.includes(e.code)) { + e.preventDefault() + this.sendDetails(true) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +// strip select +const stripSelect = document.createElement('template') +stripSelect.innerHTML = ` + +
+
+ +
+ +
+ +
+
+ +` +customElements.define('strip-select', class extends HTMLElement{ + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(stripSelect.content.cloneNode(true)) + this.stripSelect = this.shadowRoot.querySelector('.strip-select') + this.slottedOptions + this._value + this.scrollDistance + } + get value() { + return this._value + } + scrollLeft = () => { + this.stripSelect.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.stripSelect.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }) + } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("change", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot') + const coverLeft = this.shadowRoot.querySelector('.cover--left') + const coverRight = this.shadowRoot.querySelector('.cover--right') + const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left') + const navButtonRight = this.shadowRoot.querySelector('.nav-button--right') + slot.addEventListener('slotchange', e => { + const assignedElements = slot.assignedElements() + assignedElements.forEach(elem => { + if (elem.hasAttribute('selected')) { + elem.setAttribute('active', '') + this._value = elem.value + } + }) + if (assignedElements.length > 0) { + firstOptionObserver.observe(slot.assignedElements()[0]) + lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]) + } + else { + navButtonLeft.classList.add('hide') + navButtonRight.classList.add('hide') + coverLeft.classList.add('hide') + coverRight.classList.add('hide') + firstOptionObserver.disconnect() + lastOptionObserver.disconnect() + } + }) + const resObs = new ResizeObserver(entries => { + entries.forEach(entry => { + if(entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + + this.scrollDistance = contentBoxSize.inlineSize * 0.6 + } else { + this.scrollDistance = entry.contentRect.width * 0.6 + } + }) + }) + resObs.observe(this) + this.stripSelect.addEventListener('option-clicked', e => { + if (this._value !== e.target.value) { + this._value = e.target.value + slot.assignedElements().forEach(elem => elem.removeAttribute('active')) + e.target.setAttribute('active', '') + e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }) + this.fireEvent() + } + }) + const firstOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonLeft.classList.add('hide') + coverLeft.classList.add('hide') + } + else { + navButtonLeft.classList.remove('hide') + coverLeft.classList.remove('hide') + } + }) + }, + { + threshold: 0.9, + root: this + }) + const lastOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonRight.classList.add('hide') + coverRight.classList.add('hide') + } + else { + navButtonRight.classList.remove('hide') + coverRight.classList.remove('hide') + } + }) + }, + { + threshold: 0.9, + root: this + }) + navButtonLeft.addEventListener('click', this.scrollLeft) + navButtonRight.addEventListener('click', this.scrollRight) + } +}) + +const stripOption = document.createElement('template') +stripOption.innerHTML = ` + + +` + +//Strip option +customElements.define('strip-option', class extends HTMLElement{ + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(stripOption.content.cloneNode(true)) + this._value + this.radioButton = this.shadowRoot.querySelector('input') + } + get value() { + return this._value + } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("option-clicked", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } + handleKeyDown = (e) => { + if (e.key === 'Enter' || e.key === 'Space') { + this.fireEvent() + } + } + connectedCallback() { + this._value = this.getAttribute('value') + this.addEventListener('click', this.fireEvent) + this.addEventListener('keydown', this.handleKeyDown) + } + disconnectedCallback() { + this.removeEventListener('click', this.fireEvent) + this.removeEventListener('keydown', this.handleKeyDown) + } +}) + + +//popup +const smPopup = document.createElement('template') +smPopup.innerHTML = ` + + +`; +customElements.define('sm-popup', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)) + + this.allowClosing = false + this.isOpen = false + } + + get open() { + return this.isOpen + } + + resumeScrolling = () => { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.style.overflow = 'auto'; + document.body.style.top= 'initial' + }, 300); + } + + show = (pinned, popupStack) => { + if (popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1) { + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.setAttribute('open', '') + this.pinned = pinned + this.isOpen = true + } + this.popupContainer.classList.remove('hide') + this.popup.style.transform = 'none'; + document.body.style.overflow = 'hidden'; + document.body.style.top= `-${window.scrollY}px` + return this.popupStack + } + hide = () => { + if (window.innerWidth < 640) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'translateY(3rem)'; + this.popupContainer.classList.add('hide') + this.removeAttribute('open') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length) { + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } else { + this.resumeScrolling() + } + } else { + this.resumeScrolling() + } + + if (this.inputFields.length) { + setTimeout(() => { + this.inputFields.forEach(field => { + if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') + field.checked = false + if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA') + field.value = '' + }) + }, 300); + } + setTimeout(() => { + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.isOpen = false + }, 300); + } + + handleTouchStart = (e) => { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.1s' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) + } + /*else { + this.offset = this.touchStartY - e.changedTouches[0].clientY; + this.popup.style.transform = `translateY(-${this.offset}px)` + }*/ + } + + handleTouchEnd = (e) => { + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.3s' + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } else { + this.show() + } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.show() + return + } + else + this.hide() + } + } + + movePopup = () => { + this.popup.style.transform = `translateY(${this.offset}px)` + } + + connectedCallback() { + this.pinned = false + this.popupStack + this.popupContainer = this.shadowRoot.querySelector('.popup-container') + this.popup = this.shadowRoot.querySelector('.popup') + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') + this.offset + this.popupHeader = this.shadowRoot.querySelector('.popup-top') + this.touchStartY = 0 + this.touchEndY = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.touchEndAnimataion; + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + + if (this.hasAttribute('open')) + this.show() + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } + }) + + this.popupBodySlot.addEventListener('slotchange', () => { + setTimeout(() => { + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + }, 200); + this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio') + }) + + this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true}) + this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true}) + this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true}) + } + disconnectedCallback() { + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true}) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true}) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true}) + } +}) + +//carousel + +const smCarousel = document.createElement('template') +smCarousel.innerHTML = ` + +
+ +
+ +
+ +
+
+`; + +customElements.define('sm-carousel', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCarousel.content.cloneNode(true)) + + this.isAutoPlaying = false + this.autoPlayInterval = 5000 + this.autoPlayTimeout + this.initialTimeout + this.activeSlideNum = 0 + this.carouselItems + this.indicators + this.showIndicator = false + this.carousel = this.shadowRoot.querySelector('.carousel') + this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') + this.carouselSlot = this.shadowRoot.querySelector('slot') + this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right') + this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left') + this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') + } + + static get observedAttributes() { + return ['indicator', 'autoplay', 'interval'] + } + + scrollLeft = () => { + this.carousel.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.carousel.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }) + } + + handleIndicatorClick = (e) => { + if (e.target.closest('.dot')) { + const slideNum = parseInt(e.target.closest('.dot').dataset.rank) + if (this.activeSlideNum !== slideNum) { + this.showSlide(slideNum) + } + } + } + + showSlide = (slideNum) => { + this.carousel.scrollTo({ + left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft), + behavior: 'smooth' + }) + } + + nextSlide = () => { + if (!this.carouselItems) return + let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0 + this.showSlide(showSlideNo) + } + + autoPlay = () => { + this.nextSlide() + if (this.isAutoPlaying) { + this.autoPlayTimeout = setTimeout(() => { + this.autoPlay() + }, this.autoPlayInterval); + } + } + + startAutoPlay = () => { + this.setAttribute('autoplay', '') + } + + stopAutoPlay = () => { + this.removeAttribute('autoplay') + } + + connectedCallback() { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + let frag = document.createDocumentFragment(); + if (this.hasAttribute('indicator')) + this.showIndicator = true + + + let firstVisible = false, + lastVisible = false + const allElementsObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (this.showIndicator) { + const activeRank = parseInt(entry.target.dataset.rank) + if (entry.isIntersecting) { + this.indicators[activeRank].classList.add('active') + this.activeSlideNum = activeRank + } + else + this.indicators[activeRank].classList.remove('active') + } + if (!entry.target.previousElementSibling) + if (entry.isIntersecting) { + this.previousArrow.classList.remove('expand') + firstVisible = true + } + else { + this.previousArrow.classList.add('expand') + firstVisible = false + } + if (!entry.target.nextElementSibling) + if (entry.isIntersecting) { + this.nextArrow.classList.remove('expand') + lastVisible = true + } + else { + this.nextArrow.classList.add('expand') + lastVisible = false + } + if (firstVisible && lastVisible) + this.indicatorsContainer.classList.add('hide') + else + this.indicatorsContainer.classList.remove('hide') + }) + }, { + root: this.carouselContainer, + threshold: 0.9 + }) + + const carouselObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + } + }) + + carouselObserver.observe(this.carouselContainer) + + this.carouselSlot.addEventListener('slotchange', e => { + this.carouselItems = this.carouselSlot.assignedElements() + this.carouselItems.forEach(item => allElementsObserver.observe(item)) + if (this.showIndicator) { + this.indicatorsContainer.innerHTML = `` + this.carouselItems.forEach((item, index) => { + let dot = document.createElement('div') + dot.classList.add('dot') + dot.dataset.rank = index + frag.append(dot) + item.dataset.rank = index + }) + this.indicatorsContainer.append(frag) + this.indicators = this.indicatorsContainer.children + } + }) + + this.addEventListener('keyup', e => { + if (e.code === 'ArrowLeft') + this.scrollRight() + else if (e.code === 'ArrowRight') + this.scrollRight() + }) + + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) + this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick) + } + + async attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'indicator') { + if (this.hasAttribute('indicator')) + this.showIndicator = true + else + this.showIndicator = false + } + if (name === 'autoplay') { + if (this.hasAttribute('autoplay')) { + this.initialTimeout = setTimeout(() => { + this.isAutoPlaying = true + this.autoPlay() + }, this.autoPlayInterval); + } + else { + this.isAutoPlaying = false + clearTimeout(this.autoPlayTimeout) + clearTimeout(this.initialTimeout) + } + + } + if (name === 'interval') { + if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') { + this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim())) + } + else { + this.autoPlayInterval = 5000 + } + } + } + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) + this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick) + } +}) + +//notifications + +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
+` + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + } + + handleTouchStart = (e) => { + this.notification = e.target.closest('.notification') + this.touchStartX = e.changedTouches[0].clientX + this.notification.style.transition = 'initial' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartX < e.changedTouches[0].clientX) { + this.offset = e.changedTouches[0].clientX - this.touchStartX; + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } else { + this.offset = -(this.touchStartX - e.changedTouches[0].clientX); + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } + } + + handleTouchEnd = (e) => { + this.notification.style.transition = 'transform 0.3s, opacity 0.3s' + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndX = e.changedTouches[0].clientX + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndX - this.touchStartX > this.threshold) { + this.removeNotification(this.notification) + } else if (this.touchStartX - this.touchEndX > this.threshold) { + this.removeNotification(this.notification, true) + } else { + this.resetPosition() + } + } else { + if (this.touchEndX > this.touchStartX) { + this.removeNotification(this.notification) + } else { + this.removeNotification(this.notification, true) + } + } + } + + movePopup = () => { + this.notification.style.transform = `translateX(${this.offset}px)` + } + + resetPosition = () => { + this.notification.style.transform = `translateX(0)` + } + + push = (messageBody, type, pinned) => { + let notification = document.createElement('div'), + composition = `` + notification.classList.add('notification') + if (pinned) + notification.classList.add('pinned') + if (type === 'error') { + composition += ` + + + + + ` + } else if (type === 'success') { + composition += ` + + + ` + } + composition += ` +

${messageBody}

+ + Close + + + ` + notification.innerHTML = composition + this.notificationPanel.prepend(notification) + if (window.innerWidth > 640) { + notification.animate([{ + transform: `translateX(1rem)`, + opacity: '0' + }, + { + transform: 'translateX(0)', + opacity: '1' + } + ], this.animationOptions).onfinish = () => { + notification.setAttribute('style', `transform: none;`); + } + } else { + notification.setAttribute('style', `transform: translateY(0); opacity: 1`) + } + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) + } + + removeNotification = (notification, toLeft) => { + if (!this.offset) + this.offset = 0; + + if (toLeft) + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(-100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + else { + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + } + + clearAll = () => { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "ease" + } + this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) + this.notification + this.offset + this.touchStartX = 0 + this.touchEndX = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 + this.touchEndAnimataion; + + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close'))( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + if (!mutation.addedNodes[0].classList.contains('pinned')) + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + if (window.innerWidth > 640) + this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; + else + this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + this.notificationPanel.style.padding = 0; + } + } + }) + }) + observer.observe(this.notificationPanel, { + attributes: true, + childList: true, + subtree: true + }) + } +}) + + + +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +
+
+ + options + + + + +
+
+ +
+
`; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand = () => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.classList.add('no-transformations') + this.open = true + this.icon.classList.add('focused') + this.availableOptions.forEach(option => { + option.setAttribute('tabindex', '0') + }) + } + } + collapse() { + if (this.open) { + this.open = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + this.optionList.classList.remove('no-transformations') + this.availableOptions.forEach(option => { + option.removeAttribute('tabindex') + }) + } + } + connectedCallback() { + this.availableOptions + this.containerDimensions + this.optionList = this.shadowRoot.querySelector('.options') + let slot = this.shadowRoot.querySelector('.options slot'), + menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + this.open = false; + menu.addEventListener('click', e => { + if (!this.open) { + this.expand() + } else { + this.collapse() + } + }) + menu.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + if (!this.open) { + this.expand() + } else { + this.collapse() + } + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.optionList.addEventListener('click', e => { + this.collapse() + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + }); + window.addEventListener('mousedown', e => { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + }) + } +}) + +// option +const smMenuOption = document.createElement('template') +smMenuOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + } +}) + +// tab-header + +const smTabHeader = document.createElement('template') +smTabHeader.innerHTML = ` + +
+
+ +
+
+
+`; + +customElements.define('sm-tab-header', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) + + this.indicator = this.shadowRoot.querySelector('.indicator'); + this.tabSlot = this.shadowRoot.querySelector('slot'); + this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + } + + sendDetails(element) { + this.dispatchEvent( + new CustomEvent("switchtab", { + bubbles: true, + detail: { + target: this.target, + rank: parseInt(element.getAttribute('rank')) + } + }) + ) + } + + moveIndiactor(tabDimensions) { + //if(this.isTab) + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + //else + //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) + } + + connectedCallback() { + if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; + this.prevTab + this.allTabs + this.activeTab + this.isTab = false + this.target = this.getAttribute('target') + + if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { + this.isTab = true + } + + this.tabSlot.addEventListener('slotchange', () => { + this.tabSlot.assignedElements().forEach((tab, index) => { + tab.setAttribute('rank', index) + }) + }) + this.allTabs = this.tabSlot.assignedElements(); + + this.tabSlot.addEventListener('click', e => { + if (e.target === this.prevTab || !e.target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + e.target.classList.add('active') + + e.target.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center' + }) + this.moveIndiactor(e.target.getBoundingClientRect()) + this.sendDetails(e.target) + this.prevTab = e.target; + this.activeTab = e.target; + }) + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } + }) + }) + resizeObserver.observe(this) + let observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.indicator.style.transition = 'none' + if (this.activeTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } else { + this.allTabs[0].classList.add('active') + let tabDimensions = this.allTabs[0].getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + this.sendDetails(this.allTabs[0]) + this.prevTab = this.tabSlot.assignedElements()[0]; + this.activeTab = this.prevTab; + } + } + }) + }, { + threshold: 1.0 + }) + observer.observe(this) + } +}) + +// tab-panels + +const smTabPanels = document.createElement('template') +smTabPanels.innerHTML = ` + +
+ Nothing to see here. +
+`; + +customElements.define('sm-tab-panels', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) + this.panelSlot = this.shadowRoot.querySelector('slot'); + } + connectedCallback() { + + //animations + let flyInLeft = [{ + opacity: 0, + transform: 'translateX(-1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyInRight = [{ + opacity: 0, + transform: 'translateX(1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyOutLeft = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(-1rem)' + } + ], + flyOutRight = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(1rem)' + } + ], + animationOptions = { + duration: 300, + fill: 'forwards', + easing: 'ease' + } + this.prevPanel + this.allPanels + this.previousRank + + this.panelSlot.addEventListener('slotchange', () => { + this.panelSlot.assignedElements().forEach((panel) => { + panel.classList.add('hide-completely') + }) + }) + this.allPanels = this.panelSlot.assignedElements() + this._targetBodyFlyRight = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInRight, animationOptions) + } + this._targetBodyFlyLeft = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInLeft, animationOptions) + } + document.addEventListener('switchtab', e => { + if (e.detail.target !== this.id) + return + + if (this.prevPanel) { + let targetBody = this.allPanels[e.detail.rank], + currentBody = this.prevPanel; + if (this.previousRank < e.detail.rank) { + if (currentBody && !targetBody) + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyRight(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyRight(targetBody) + } + } + } else { + if (currentBody && !targetBody) + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyLeft(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyLeft(targetBody) + } + } + } + } else { + this.allPanels[e.detail.rank].classList.remove('hide-completely') + } + this.previousRank = e.detail.rank + this.prevPanel = this.allPanels[e.detail.rank]; + }) + } +}) diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..8829112 --- /dev/null +++ b/css/main.css @@ -0,0 +1,2067 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} + +:root { + font-size: clamp(1rem, 1.2vmax, 3rem); +} + +html, body { + height: 100%; + scroll-behavior: smooth; +} + +body { + --accent-color: #1976D2; + --light-shade: rgba(var(--text-color), 0.06); + --text-color: 17, 17, 17; + --text-color-light: 100, 100, 100; + --foreground-color: 255, 255, 255; + --background-color: #F6f6f6; + --error-color: red; + color: rgba(var(--text-color), 1); + background: var(--background-color); + display: flex; + flex-direction: column; +} + +body[data-theme=dark] { + --accent-color: #42A5F5; + --text-color: 240, 240, 240; + --text-color-light: 170, 170, 170; + --foreground-color: 20, 20, 20; + --background-color: #0a0a0a; + --error-color: rgb(255, 106, 106); +} + +/* h1,h2,h3,h4,h5,h6{ + font-family: 'Montserrat', sans-serif; +} */ +.full-bleed { + grid-column: 1/4; +} + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +p { + font-size: 0.8; + max-width: 60ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.8); +} +p:not(:last-of-type) { + margin-bottom: 1rem; +} + +img { + object-fit: cover; +} + +a { + color: inherit; + text-decoration: none; +} +a:focus-visible { + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; +} + +button { + position: relative; + display: inline-flex; + overflow: hidden; + align-items: center; + background: none; + cursor: pointer; + outline: none; + color: inherit; + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.2rem; + padding: 0.5rem 0.6rem; + -webkit-tap-highlight-color: transparent; + border: none; +} + +button:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +a.button:any-link { + position: relative; + display: inline-flex; + align-items: center; + background: none; + cursor: pointer; + outline: none; + font-weight: 500; + font-size: 0.8rem; + border-radius: 0.3rem; + padding: 0.5rem 0.6rem; + align-self: flex-start; + text-decoration: none; + color: rgba(var(--text-color), 0.7); + -webkit-tap-highlight-color: transparent; + background-color: rgba(var(--text-color), 0.06); +} +a.button:any-link .icon { + margin-right: 0.3rem; + height: 1.2rem; +} + +a:any-link:focus-visible { + outline: rgba(var(--text-color), 1) 0.1rem solid; +} + +.button { + background-color: rgba(var(--text-color), 0.06); +} + +sm-button { + --border-radius: 0.3rem; +} + +ul { + list-style: none; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.no-transformations { + transform: none !important; +} + +.overflow-ellipsis { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.breakable { + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.flow-column { + grid-auto-flow: column; +} + +.gap-0-5 { + gap: 0.5rem; +} + +.gap-1 { + gap: 1rem; +} + +.gap-1-5 { + gap: 1.5rem; +} + +.gap-2 { + gap: 2rem; +} + +.gap-3 { + gap: 3rem; +} + +.text-align-right { + text-align: right; +} + +.align-start { + align-items: flex-start; +} + +.align-center { + align-items: center; +} + +.text-center { + text-align: center; +} + +.justify-start { + justify-content: start; +} + +.justify-center { + justify-content: center; +} + +.justify-right { + margin-left: auto; +} + +.align-self-center { + align-self: center; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-start { + justify-self: start; +} + +.direction-column { + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +.w-100 { + width: 100%; +} + +.ripple { + position: absolute; + border-radius: 50%; + transform: scale(0); + background: rgba(var(--text-color), 0.16); + pointer-events: none; +} + +.interact { + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.observe-empty-state:empty { + display: none; +} + +.observe-empty-state:not(:empty) ~ .empty-state { + display: none; +} + +.icon { + width: 1.5rem; + height: 1.5rem; + fill: rgba(var(--text-color), 0.9); +} + +.button__icon { + height: 1.2rem; + width: 1.2rem; +} +.button__icon--left { + margin-right: 0.5rem; +} +.button__icon--right { + margin-left: 0.5rem; +} + +.popup__header { + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr; +} + +.popup__header__close { + padding: 0.5rem; + cursor: pointer; +} + +#confirmation_popup, +#prompt_popup { + flex-direction: column; +} +#confirmation_popup h4, +#prompt_popup h4 { + font-weight: 500; + margin-bottom: 0.5rem; +} +#confirmation_popup sm-button, +#prompt_popup sm-button { + margin: 0; +} +#confirmation_popup .flex, +#prompt_popup .flex { + padding: 0; + margin-top: 1rem; +} +#confirmation_popup .flex sm-button:first-of-type, +#prompt_popup .flex sm-button:first-of-type { + margin-right: 0.6rem; + margin-left: auto; +} + +input[type=checkbox] { + display: none; +} + +.checkbox svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 1.6rem; + width: 1.6rem; +} + +.checkbox svg .check { + stroke-dashoffset: 70; + stroke-dasharray: 70; + -webkit-transition: stroke-dashoffset 0.3s ease; + transition: stroke-dashoffset 0.3s ease; +} + +.checkbox input:checked + svg { + stroke: #00C853; +} + +.checkbox input:checked + svg .check { + stroke-dashoffset: 0; +} + +#settings_page { + padding: 1rem; +} + +#settings_page section { + width: 100%; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + display: -ms-grid; + display: grid; + padding-bottom: 1rem; +} + +#settings_page section:last-of-type { + border: none; +} + +#settings_page h3, +#settings_page h4 { + display: flexbox; + width: 100%; + -ms-flex-item-align: center; + align-self: center; +} + +#settings_page h5 { + margin: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + font-weight: normal; + opacity: 0.9; +} + +#settings_page button { + background: transparent; + border: 1px solid var(--accent-color); + color: var(--accent-color); + margin: 1rem 0; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + white-space: nowrap; +} +#settings_page button .icon { + fill: var(--accent-color); +} + +#settings_page > div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 1rem 0; + -ms-flex-line-pack: center; + align-content: center; +} + +#settings_page .row { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#settings_page .row span { + font-size: 0.8rem; +} + +#settings_page .border-card { + color: inherit; + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.5rem 0; + width: auto; +} + +#settings_page .border-card svg { + fill: var(--accent-color); + display: flexbox; + height: 2rem; + -ms-flex-item-align: center; + align-self: center; + margin: 0.5rem; +} + +.container-card { + position: relative; + background: rgba(var(--foreground-color), 1); + border-radius: 0.4rem; +} + +.solid-background { + transition: background-color 2s; + background: rgba(var(--foreground-color), 1); +} + +a { + color: var(--accent-color); + text-decoration: none; +} + +.medium-top-bottom-margin { + margin: 0.5rem 0; +} + +#sign_in_page { + display: grid; + position: fixed; + z-index: 5; + top: 0; + bottom: 0; + left: 0; + right: 0; + place-content: center; + background-color: rgba(var(--foreground-color), 1); +} + +.task { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1fr; + grid-template-columns: auto 1fr; + margin: 0 1rem; +} + +.task:last-of-type .left .line { + -webkit-transform: scaleY(0); + transform: scaleY(0); +} + +.task .left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding-top: 0.5rem; +} + +.task .left .circle { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + -ms-flex-item-align: start; + align-self: flex-start; + height: 1rem; + width: 1rem; + border-radius: 50%; + background: rgba(var(--foreground-color), 1); + border: solid 2px rgba(var(--text-color), 0.4); + z-index: 1; +} + +.task .left .line { + position: absolute; + left: 50%; + height: 100%; + width: 2px; + -webkit-transform: translateX(-50%) scaleY(1); + transform: translateX(-50%) scaleY(1); + background-color: rgba(var(--text-color), 0.4); +} + +.task .right { + margin-left: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} + +.task .right .apply-cont { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.task .right .apply-cont h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.task h4 { + margin-top: 0.4rem; + margin-bottom: 1rem; +} + +.task p { + white-space: pre-line; + padding-bottom: 2rem; +} + +.task .assigned-interns .assigned-intern { + padding: 0.4rem; +} + +.completed-task .left .circle { + border: solid 2px #00C853 !important; + background: #00C853 !important; +} + +.completed-task .left .line { + background-color: #00C853 !important; +} + +.page { + gap: 1rem; + display: grid; + position: relative; + margin: 1rem; + animation: fadein 0.4s ease; +} + +.fade-in { + -webkit-animation: fadein 0.4s ease; + animation: fadein 0.4s ease; +} + +@-webkit-keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.title { + font-weight: 500; +} + +.padding { + padding: 1rem; +} + +#dashboard { + padding-bottom: 5rem; + -ms-grid-columns: auto; + grid-template-columns: auto; +} + +.input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + margin: 1rem 0; + background: rgba(var(--text-color), 0.06); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0.2rem; + overflow: hidden; +} + +.input input, +.input textarea { + color: var(--light-text); + padding: 1rem 0.5rem; + width: 100%; + font-size: 1rem; + background: transparent; + margin-left: 0; +} + +.input input:focus, +.input textarea:focus { + outline: none; +} + +.input svg { + height: 1.2rem; + width: 1.2rem; + margin: 0 0.5rem 0 1rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.input:focus-within { + background: rgba(0, 0, 0, 0.1); +} + +input, +button, +textarea { + position: relative; + border: none; + font-size: 1rem; + border-radius: 0.2rem; +} + +button[disabled] { + opacity: 0.5 !important; + cursor: default; +} + +.show { + display: block; +} + +.hide-on-mobile, +.hide-page-on-mobile { + display: none; +} + +.hide-on-desktop { + display: initial; +} + +.no-transformations { + -webkit-transform: none !important; + transform: none !important; +} + +.no-bottom-margin { + margin-bottom: 0; +} + +.top-margin { + margin-top: 0.3rem; +} + +.chatInput { + overflow: hidden; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; +} + +.chatInput textarea { + resize: none; + line-height: 1.6; +} + +.chatInput button { + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + -webkit-transform: scale(0); + transform: scale(0); + -ms-flex-item-align: end; + align-self: flex-end; + padding: 1rem; +} + +.chatInput button svg { + margin: 0; + fill: rgba(var(--text-color), 1); +} + +#top_nav { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.5rem; + z-index: 4; +} + +#top_nav .spacer { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#top_nav .logo { + margin-right: 0.5rem; +} + +.logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 1.2rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.logo .cls-2, +.logo .cls-3 { + fill: rgba(var(--text-color), 1); + font-size: 146.9px; + font-family: ArialMT, Arial; +} + +.logo svg { + height: 2.5rem; +} + +.logo h4 { + margin: 0; +} + +.active { + opacity: 1 !important; + color: var(--accent-color); +} + +.active svg { + fill: var(--accent-color); +} + +.svg-margin-right svg { + margin-right: 0.5rem; +} + +.project-card { + text-transform: capitalize; +} + +.intern-card { + user-select: none; +} + +.intern-card span:first-of-type { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + padding: 0.8rem; + border-radius: 50%; + background: #673AB7; + margin-right: 1rem; + color: white; + font-weight: 500; + font-size: 1.2rem; + line-height: 0; +} + +.intern-card span:first-of-type::after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.intern-card span:nth-of-type(2) { + flex: 1; + text-transform: capitalize; + flex-shrink: 0; +} + +.intern-card span:nth-of-type(3) { + display: inline-flex; + align-items: center; + align-content: center; + font-weight: 500; + font-size: 1.2rem; + color: var(--light-text); +} + +.intern-card span:nth-of-type(3) svg { + fill: #FF5722 !important; + height: 1rem !important; + width: 1rem !important; + margin-right: 0.2rem; +} + +.card { + display: flex; + flex-direction: row; + position: relative; + align-items: center; + margin-bottom: 0.5rem; + padding: 1rem; +} + +.request-card { + display: flex; + position: relative; + margin-bottom: 0.5rem; + -webkit-box-align: left; + -ms-flex-align: left; + align-items: left; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 1rem; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +.request-card p { + margin-top: 0; + width: 100%; + font-size: 1rem; +} + +.request-card b { + font-weight: 500; +} + +.request-card button { + padding: 0.2rem 0.6rem 0.2rem 0; +} + +.request-card button:first-of-type { + margin-left: auto; +} + +.request-card:last-of-type { + border-bottom: none; +} + +.dropdown { + position: relative; +} + +.dropdown-content { + overflow: hidden; + position: absolute; + z-index: 2; + margin: 1rem; + right: 2rem; + min-width: 24rem; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.24); + border-radius: 0.5rem; +} + +#intern_updates .container-header { + padding-right: 0; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_updates .container-header button { + padding: 1rem 0; + border-bottom: 0.2rem solid transparent; + border-radius: 0; + opacity: 0.7; +} + +#intern_updates .container-header button:first-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header button:last-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header .active { + color: rgba(var(--text-color), 1); + border-bottom: 0.2rem solid var(--accent-color); +} + +#update_container, +#requests_container { + display: flex; + max-height: 80vh; + overflow-y: auto; + flex-direction: column; +} + +#updates { + transition: opacity 0.3s ease; +} + +.update { + display: flex; + flex-direction: column; + padding: 1rem; +} + +.update__project-name { + font-size: 1.2rem; + max-width: 60ch; + margin: 0.3rem 0 0.5rem 0; + font-weight: bold; + text-transform: capitalize; +} + +.update__sender { + color: var(--accent-color); + font-size: 0.9rem; + font-weight: 500; +} + +.update__message { + white-space: pre-line; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 0 1rem; +} + +.container-header h3 { + flex: 1; + font-weight: 500; +} + +.container-header span { + color: var(--accent-color); + border-radius: 0.2rem; + margin-right: 0.2rem; + padding: 0.5rem 1rem; + font-weight: 500; +} + +.back-arrow { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + width: 2rem; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.close-svg, +.tick-mark { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; +} + +.close-svg { + padding: 0.6rem; +} + +#textCopied { + padding: 1rem; + border-radius: 2rem; + background: var(--sec-color); + position: fixed; + bottom: 0; + pointer-events: none; + margin: 2rem 0; + left: 50%; + transform: translateX(-50%); + transition: 0.3s opacity ease; + z-index: 10; +} + +#intern_info { + flex-direction: column; +} + +#intern_info div { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + margin-bottom: 1rem; +} + +#intern_info div span { + flex: 1; + word-break: break-all; + font-size: 0.9rem; +} + +#intern_info div svg { + fill: rgba(var(--text-color), 1); + height: 2.5rem; + padding: 0.6rem; + overflow: visible; +} + +#intern_info .gold-fill { + fill: #FF5722; +} + +#intern_info #update_intern_score h4 { + margin: 0; + font-size: 2rem; +} + +#intern_info #update_intern_score button { + border: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_info #update_intern_score button svg { + stroke-width: 10; + fill: none; + stroke: var(--accent-color); +} + +#intern_info #update_intern_score rect { + stroke: transparent; +} + +#intern_info h3 { + text-transform: capitalize; +} + +#intern_info h4, +#intern_info h5 { + margin-top: 0.5rem; +} + +#project_info { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.branch-btn { + border-radius: 0; + padding: 0.5rem; + border-radius: 0.2rem; + margin: 0.5rem 0.5rem 0.5rem 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.active-branch { + opacity: 1; + color: var(--accent-color); + background: rgba(var(--text-color), 0.04); +} + +.active-project { + background: rgba(var(--text-color), 0.06); +} + +.opac { + opacity: 1 !important; +} + +.task-list-item { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto auto 1fr auto; + grid-template-columns: auto auto 1fr auto; + grid-template-areas: "status . title options" "status . interns interns" "status . description description"; + padding: 1rem; + gap: 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(var(--text-color), 0.02); +} + +.task-list-item .checkbox { + -ms-grid-row-span: 3; + grid-area: status; + padding: 0.5rem 0.5rem 0.5rem 0; + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} + +.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 { + -ms-grid-column-span: 2; + grid-area: interns; +} + +.task-list-item .task-option { + grid-area: options; + cursor: pointer; + opacity: 1; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} + +.task-list-item .task-option svg { + width: 2rem; + height: 2rem; + padding: 0.5rem; + overflow: visible; + fill: rgba(var(--text-color), 0.8); +} + +.task-list-item p { + -ms-grid-column-span: 2; + grid-area: description; + margin: 0; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; +} + +.assigned-interns { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.assigned-interns .assigned-intern { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 0.8rem; + margin: 0.2rem 0.5rem 0.2rem 0; + padding: 0.2rem 0 0.2rem 0.4rem; + border-radius: 0.2rem; + border: 1px solid rgba(var(--text-color), 0.24); + -webkit-box-align: center; + -ms-flex-align: center; + 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; +} + +#task_context { + -webkit-transition: 0.3s opacity ease; + transition: 0.3s opacity ease; + top: 0; + right: 0; + margin: 0 2rem; + list-style: none; + padding: 0.5rem 0; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + position: absolute; + background: rgba(var(--foreground-color), 1); + -webkit-box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); +} + +#task_context li { + padding: 0.8rem 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#task_context li svg { + margin-right: 1rem; + width: 1.2rem; + height: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.temp-task { + padding: 1rem; + background: rgba(var(--text-color), 0.02); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.temp-task .input { + margin: 0.4rem 0; +} + +#branch_container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin: 1rem 0; +} + +#notification { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#bottom_nav { + position: fixed; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100vw; + background: rgba(var(--foreground-color), 1); + z-index: 4; + border-top: 1px solid rgba(var(--text-color), 0.1); +} + +#bottom_nav button { + padding: 0.2rem; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 0.7rem; + font-weight: normal; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +#bottom_nav button svg { + margin: 0.4rem; +} + +#show_message { + -webkit-transform: translate(0, 0.4rem); + transform: translate(0, 0.4rem); + -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; + -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: white; + position: fixed; + bottom: 0; + right: 0; + width: 100%; + z-index: 11; +} + +#show_message span { + font-weight: 500; + padding: 1rem; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#show_message button { + padding: 0.5rem 1rem; + margin: 0; +} + +#show_message button svg { + stroke: white; +} + +#interns_list { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 20rem; +} + +#interns_list #interns_list_container { + min-height: 50vh; + max-height: 50vh; + overflow-y: auto; +} + +#best_interns_container, +#project_list_container { + margin-bottom: 1rem; +} + +#best_interns_container .container-header, +#project_list_container .container-header { + padding-right: 0; +} + +#best_interns_container .container-header .icon, +#project_list_container .container-header .icon { + margin-right: 0.5rem; +} + +#edit_data_fig { + fill: rgba(var(--text-color), 0.6); + width: 60vw; + margin: 2rem 0; +} + +.header { + position: -webkit-sticky; + position: sticky; + top: 0; + background: rgba(var(--foreground-color), 1); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 2; +} + +.header svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; + cursor: pointer; + padding: 0.4rem; + margin-left: 1rem; +} + +.header h3 { + padding: 0 0.5rem; + display: inline-flexbox; +} + +.appear-on-scroll-up { + position: fixed !important; + top: 0; + width: 100%; + height: 4rem !important; +} + +#loading_page { + display: grid; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 5; + text-align: center; + place-content: center; + justify-items: center; + 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; +} + +.loader { + height: 2rem; + width: 2rem; + stroke-width: 8; + overflow: visible; + stroke: var(--accent-color); + fill: none; + stroke-dashoffset: 180; + stroke-dasharray: 180; + animation: load 3.6s linear infinite, spin 1s linear infinite; +} + +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -180; + } +} +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} +#status_map_container { + position: relative; + overflow: hidden; + background: #B9F6CA; +} + +#status_map_container .branch-btn { + color: rgba(0, 0, 0, 0.8); +} + +#status_map_container p { + color: rgba(0, 0, 0, 0.9); +} + +#status_map_container .active-branch { + color: white; + background: rgba(0, 200, 83, 0.6); +} + +#status_map_container #status_map { + position: relative; + z-index: 1; + padding: 1rem; + color: #000; +} + +#status_map_container #status_map h2 { + margin: 0.4rem 0; + text-transform: capitalize; +} + +#status_map_container #status_map .circle { + background: #B9F6CA; + border: 2px solid rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .line { + background: rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .assigned-intern { + border: rgba(0, 0, 0, 0.4) 1px solid; +} + +#status_map_container #status_map .apply-btn { + color: #1B5E20; + background: rgba(0, 200, 83, 0.2); +} + +.apply-btn { + padding: 0.3rem 0.6rem; +} + +.watching { + position: relative; + padding-left: 1rem; + padding-top: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + z-index: 1; +} + +.watching h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: 500; +} + +.watching button { + padding: 1rem; +} + +.watching button svg { + fill: none !important; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke: #000; +} + +#right { + padding: 0 1rem; +} + +#right div:first-of-type h2 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0.4rem 0; +} + +#right div:first-of-type button { + border: 1px solid rgba(var(--text-color), 0.06); +} + +.center { + position: relative; + display: -ms-grid; + display: grid; + place-content: center; + height: 100%; + text-align: center; +} + +.slide-left { + -webkit-animation: slide-left 0.4s ease; + animation: slide-left 0.4s ease; +} + +@-webkit-keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} +@keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} +.update-mi svg { + -webkit-animation: shake 0.6s ease; + animation: shake 0.6s ease; + -webkit-transform-origin: top; + transform-origin: top; +} + +@-webkit-keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} +@keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} +.settings-mi svg { + -webkit-animation: rot 0.6s ease; + animation: rot 0.6s ease; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} +@keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} +.capitalise { + text-transform: capitalize; +} + +#show_all, +#project_explorer { + margin: 0; +} + +#admin_panel { + padding: 0 1.5rem; + display: grid; + gap: 1.5rem; +} + +#admin_panel__header { + display: grid; + gap: 0 1rem; + padding: 0.5rem 0; + grid-template-columns: 1fr auto; + align-items: center; +} + +#project_editing_panel { + padding: 1rem; +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + .hide-on-mobile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .hide-page-on-mobile { + display: -ms-grid; + display: grid; + } + + sm-popup { + --width: 24rem; + } + + .popup__header { + padding: 1.5rem 1.5rem 0 0.5rem; + } + + .page, +#show_all, +#project_explorer { + margin: 1rem 4vw; + } + + #top_nav { + padding: 1rem 2vw; + } + + #settings_page { + padding: 1rem 2rem; + } + + .logo { + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + width: auto; + } + + #show_message { + -webkit-transform: translate(0.4rem, 0); + transform: translate(0.4rem, 0); + margin: 1rem; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + } + + #sign_in { + width: 24rem; + height: auto; + border-radius: 0.4rem; + } + + #floating_btn { + margin: 1rem; + } + + #dashboard { + -ms-grid-columns: 3fr 1fr; + grid-template-columns: 3fr 1fr; + } + + #dashboard #status_map_container { + -ms-flex-item-align: start; + align-self: flex-start; + } + + #dashboard #status_map_container .watching { + padding-left: 2rem; + } + + #dashboard #status_map_container #status_map { + padding: 1rem 2rem; + } + + .task .apply-btn { + opacity: 0; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + } + + .task:hover .apply-btn { + opacity: 1; + } + + #intern_info { + width: 24rem; + } + + .hover { + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; + cursor: pointer; + } + + .hover:hover { + background: rgba(var(--text-color), 0.06); + } + + #admin_panel { + grid-template-columns: 16rem 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: "admin-header admin-header" ". ."; + } + + #admin_panel__header { + grid-area: admin-header; + } + + #edit_data_fig { + width: 16rem; + -ms-grid-column-align: center; + justify-self: center; + } + + #interns, +#projects { + display: flex; + flex-direction: column; + max-height: calc(100vh - 16rem); + overflow-y: auto; + } + + .task-list-item .task-option { + opacity: 0; + } + + .task-list-item:hover .task-option { + opacity: 1; + } + + #project_explorer { + display: -ms-grid; + display: grid; + align-items: flex-start; + -ms-grid-columns: 1fr 3fr; + grid-template-columns: 1fr 3fr; + grid-template-areas: "header header" "left right"; + } + + #project_explorer .header { + border-radius: 0.4rem 0.4rem 0 0; + -ms-grid-column-span: 2; + grid-area: header; + } + + #project_explorer #left { + position: -webkit-sticky; + position: sticky; + top: 4.8rem; + grid-area: left; + -ms-flex-item-align: start; + align-self: flex-start; + border-right: 1px solid rgba(var(--text-color), 0.06); + } + + #project_explorer #left h4 { + margin-top: 0; + margin-bottom: 0.5rem; + color: #29B6F6; + font-size: 0.9rem; + } + + #project_explorer #right { + grid-area: right; + } +} +#update_of_project { + color: rgba(var(--text-color), 0.8); +} + +#update_of_task { + font-size: 1.3rem; + margin: 0.4rem 0 1.8rem 0; +} + +ul { + padding: 0; + list-style: none; +} + +#assigned_task_list { + display: grid; + align-content: flex-start; + gap: 1.5rem; +} + +.task-card { + display: grid; + padding: 1rem; +} + +.task__header { + display: grid; + gap: 0 0.5rem; + align-items: flex-start; + grid-template-columns: 1fr auto; + grid-template-areas: ". send-button" ". send-button"; +} + +.task__project-title { + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.3rem; + padding: 0.3rem 0.5rem; + justify-self: flex-start; + margin-bottom: 0.5rem !important; + color: rgba(var(--text-color), 0.8); + background-color: rgba(var(--text-color), 0.06); +} + +.task__title { + font-size: 1.5rem; + margin-bottom: 1rem !important; +} + +.task__description { + white-space: pre-line; + color: rgba(var(--text-color), 0.8); +} + +.send-update-button { + grid-area: send-button; + border: solid 1px; + color: var(--accent-color); +} +.send-update-button .icon { + height: 1.2rem; + width: 1.2rem; + fill: var(--accent-color); +} + +@media only screen and (min-width: 1280px) { + .page, +#show_all, +#project_explorer { + margin: 1rem 8vw; + } +} +@media (any-hover: hover) { + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb { + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + } + ::-webkit-scrollbar-thumb:hover { + background: rgba(var(--text-color), 0.5); + } + + .send-update-button { + opacity: 0; + transition: opacity 0.3s; + } + + .task-card:hover .send-update-button { + opacity: 1; + } +} +@media (any-hover: none) { + .task-option, +.apply-btn { + opacity: 1; + } +} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..48329cb --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +a,button{color:inherit}.input,.interact,.overflow-ellipsis,button{overflow:hidden}#textCopied,.hide,.ripple{pointer-events:none}.card,.request-card{margin-bottom:.5rem;padding:1rem}.popup__header,.task{grid-template-columns:auto 1fr}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#1976D2;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;color:rgba(var(--text-color),1);background:var(--background-color);display:flex;flex-direction:column}a.button:any-link,button{display:inline-flex;padding:.5rem .6rem;-webkit-tap-highlight-color:transparent;background:0 0;font-weight:500;cursor:pointer}body[data-theme=dark]{--accent-color:#42A5F5;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#status_map_container #status_map h2,.assigned-interns .assigned-intern,.capitalise,.capitalize,.project-card,.update__project-name{text-transform:capitalize}p{font-size:.8;max-width:60ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{align-items:center;outline:0}button:focus-visible{outline:solid rgba(var(--text-color),1)}a.button:any-link{position:relative;align-items:center;outline:0;font-size:.8rem;border-radius:.3rem;align-self:flex-start;text-decoration:none;color:rgba(var(--text-color),.7);background-color:rgba(var(--text-color),.06)}.button,.task__project-title{background-color:rgba(var(--text-color),.06)}a.button:any-link .icon{margin-right:.3rem;height:1.2rem}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.overflow-ellipsis{width:100%;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.flex{display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1,.page{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}#loading_page,.center,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#loading_page,#sign_in_page{right:0;background-color:rgba(var(--foreground-color),1);place-content:center}.interact{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center}.popup__header__close{padding:.5rem;cursor:pointer}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}input[type=checkbox]{display:none}.checkbox svg{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;height:1.6rem;width:1.6rem}.checkbox svg .check{stroke-dashoffset:70;stroke-dasharray:70;-webkit-transition:stroke-dashoffset .3s ease;transition:stroke-dashoffset .3s ease}.checkbox input:checked+svg{stroke:#00C853}.checkbox input:checked+svg .check{stroke-dashoffset:0}#settings_page{padding:1rem}#settings_page section{width:100%;border-bottom:1px solid rgba(var(--text-color),.1);display:-ms-grid;display:grid;padding-bottom:1rem}#settings_page section:last-of-type{border:none}#settings_page h3,#settings_page h4{display:flexbox;width:100%;-ms-flex-item-align:center;align-self:center}#settings_page h5{margin:0;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;font-weight:400;opacity:.9}#settings_page button{background:0 0;border:1px solid var(--accent-color);color:var(--accent-color);margin:1rem 0;width:-webkit-min-content;width:-moz-min-content;width:min-content;white-space:nowrap}#settings_page button .icon{fill:var(--accent-color)}#settings_page>div{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;padding:1rem 0;-ms-flex-line-pack:center;align-content:center}#settings_page .row{-webkit-box-flex:1;-ms-flex:1;flex:1}#settings_page .row span{font-size:.8rem}#settings_page .border-card{color:inherit;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;padding:.5rem 0;width:auto}#settings_page .border-card svg{fill:var(--accent-color);display:flexbox;height:2rem;-ms-flex-item-align:center;align-self:center;margin:.5rem}.container-card{position:relative;background:rgba(var(--foreground-color),1);border-radius:.4rem}.solid-background{transition:background-color 2s;background:rgba(var(--foreground-color),1)}a{color:var(--accent-color);text-decoration:none}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5;top:0;bottom:0;left:0}.task{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{-webkit-transform:scaleY(0);transform:scaleY(0)}.task .left{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:.5rem}.task .left .circle{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-item-align:start;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:rgba(var(--foreground-color),1);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}#top_nav,.card,.dropdown,.page,.request-card,button,input,textarea{position:relative}.task .right{margin-left:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}#bottom_nav,#branch_container,#show_message,#top_nav,.task .right .apply-cont{-webkit-box-orient:horizontal}.task .right .apply-cont{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{display:grid;margin:1rem;animation:fadein .4s ease}#top_nav,.input{display:-ms-flexbox}.fade-in{-webkit-animation:fadein .4s ease;animation:fadein .4s ease}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}.padding{padding:1rem}#dashboard{padding-bottom:5rem;-ms-grid-columns:auto;grid-template-columns:auto}.input{display:-webkit-box;display:flex;width:100%;margin:1rem 0;background:rgba(var(--text-color),.06);-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:.2rem}.input input,.input textarea{color:var(--light-text);padding:1rem .5rem;width:100%;font-size:1rem;background:0 0;margin-left:0}.input input:focus,.input textarea:focus{outline:0}.input svg{height:1.2rem;width:1.2rem;margin:0 .5rem 0 1rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible}.input:focus-within{background:rgba(0,0,0,.1)}button,input,textarea{border:none;font-size:1rem;border-radius:.2rem}button[disabled]{opacity:.5!important;cursor:default}.show{display:block}.hide-on-mobile,.hide-page-on-mobile{display:none}.hide-on-desktop{display:initial}.no-transformations{-webkit-transform:none!important;transform:none!important}.no-bottom-margin{margin-bottom:0}.top-margin{margin-top:.3rem}.chatInput{overflow:hidden;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}.chatInput textarea{resize:none;line-height:1.6}.chatInput button{-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;-webkit-transform:scale(0);transform:scale(0);-ms-flex-item-align:end;align-self:flex-end;padding:1rem}.chatInput button svg{margin:0;fill:rgba(var(--text-color),1)}#top_nav{display:-webkit-box;display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem;z-index:4}#top_nav .spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}#top_nav .logo{margin-right:.5rem}.logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.active{opacity:1!important;color:var(--accent-color)}.active svg{fill:var(--accent-color)}.svg-margin-right svg{margin-right:.5rem}.intern-card{user-select:none}.intern-card span:first-of-type{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:.8rem;border-radius:50%;background:#673AB7;margin-right:1rem;color:#fff;font-weight:500;font-size:1.2rem;line-height:0}.intern-card span:first-of-type::after{content:"";display:block;padding-bottom:100%}.intern-card span:nth-of-type(2){flex:1;text-transform:capitalize;flex-shrink:0}.intern-card span:nth-of-type(3){display:inline-flex;align-items:center;align-content:center;font-weight:500;font-size:1.2rem;color:var(--light-text)}.intern-card span:nth-of-type(3) svg{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-right:.2rem}.card{display:flex;flex-direction:row;align-items:center}.request-card{display:flex;-webkit-box-align:left;-ms-flex-align:left;align-items:left;-ms-flex-wrap:wrap;flex-wrap:wrap;border-bottom:1px solid rgba(var(--text-color),.1)}.request-card p{margin-top:0;width:100%;font-size:1rem}.request-card b{font-weight:500}.request-card button{padding:.2rem .6rem .2rem 0}.request-card button:first-of-type{margin-left:auto}.request-card:last-of-type{border-bottom:none}.dropdown-content{overflow:hidden;position:absolute;z-index:2;margin:1rem;right:2rem;min-width:24rem;background:rgba(var(--foreground-color),1);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.24);border-radius:.5rem}#bottom_nav,#show_message,#textCopied{position:fixed;bottom:0}#intern_updates .container-header{padding-right:0;border-bottom:1px solid rgba(var(--text-color),.1)}#intern_updates .container-header button{padding:1rem 0;border-bottom:.2rem solid transparent;border-radius:0;opacity:.7}#intern_updates .container-header button:first-of-type{margin-right:1rem}#intern_updates .container-header button:last-of-type{margin-right:1rem}#intern_updates .container-header .active{color:rgba(var(--text-color),1);border-bottom:.2rem solid var(--accent-color)}.active-branch,.commit,.container-header span,.update__sender{color:var(--accent-color)}#requests_container,#update_container{display:flex;max-height:80vh;overflow-y:auto;flex-direction:column}#updates{transition:opacity .3s ease}.update{display:flex;flex-direction:column;padding:1rem}.update__project-name{font-size:1.2rem;max-width:60ch;margin:.3rem 0 .5rem;font-weight:700}.update__sender{font-size:.9rem;font-weight:500}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:0 1rem}.container-header h3{flex:1;font-weight:500}.container-header span{border-radius:.2rem;margin-right:.2rem;padding:.5rem 1rem;font-weight:500}.back-arrow{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;width:2rem;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}#task_context li svg,.close-svg,.tick-mark{stroke:rgba(var(--text-color),.8);overflow:visible}.close-svg,.tick-mark{fill:none;stroke-width:6;height:2rem;width:2rem}.close-svg{padding:.6rem}#textCopied{padding:1rem;border-radius:2rem;background:var(--sec-color);margin:2rem 0;left:50%;transform:translateX(-50%);transition:.3s opacity ease;z-index:10}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info div svg{fill:rgba(var(--text-color),1);height:2.5rem;padding:.6rem;overflow:visible}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info #update_intern_score button{border:1px solid}#intern_info #update_intern_score button svg{stroke-width:10;fill:none;stroke:var(--accent-color)}#intern_info #update_intern_score rect{stroke:transparent}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.active-branch{opacity:1;background:rgba(var(--text-color),.04)}.active-project{background:rgba(var(--text-color),.06)}.opac{opacity:1!important}.task-list-item{display:-ms-grid;display:grid;-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:"status . title options" "status . interns interns" "status . description description";padding:1rem;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(var(--text-color),.02)}.task-list-item .checkbox{-ms-grid-row-span:3;grid-area:status;padding:.5rem .5rem .5rem 0;-ms-flex-item-align:start!important;align-self:flex-start!important}.task-list-item:first-of-type{margin-top:1rem;border-radius:.2rem .2rem 0 0}.task-list-item:last-of-type{border-radius:0 0 .2rem .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{-ms-grid-column-span:2;grid-area:interns}.task-list-item .task-option{grid-area:options;cursor:pointer;opacity:1;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task-list-item .task-option svg{width:2rem;height:2rem;padding:.5rem;overflow:visible;fill:rgba(var(--text-color),.8)}.task-list-item p{-ms-grid-column-span:2;grid-area:description;margin:0;text-overflow:ellipsis;overflow:hidden;max-width:100%}.assigned-interns{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#task_context li,.temp-task{display:-webkit-box;display:-ms-flexbox}.assigned-interns .assigned-intern{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button svg{padding:.2rem;height:1rem;width:1rem}#bottom_nav button,#show_message{-webkit-box-direction:normal;width:100%}.commit{border:1px solid var(--accent-color);padding:.6rem}#task_context{-webkit-transition:.3s opacity ease;transition:.3s opacity ease;top:0;right:0;margin:0 2rem;list-style:none;padding:.5rem 0;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:.2rem;position:absolute;background:rgba(var(--foreground-color),1);-webkit-box-shadow:.2rem .4rem 1rem rgba(0,0,0,.24),-.1rem -.2rem .4rem rgba(0,0,0,.16);box-shadow:.2rem .4rem 1rem rgba(0,0,0,.24),-.1rem -.2rem .4rem rgba(0,0,0,.16)}#task_context li{padding:.8rem 1rem;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#task_context li svg{margin-right:1rem;width:1.2rem;height:1.2rem;fill:none;stroke-width:6}.temp-task{padding:1rem;background:rgba(var(--text-color),.02);display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#bottom_nav,.header{background:rgba(var(--foreground-color),1)}#bottom_nav,#branch_container,#notification,#show_message{display:-webkit-box;display:-ms-flexbox}.temp-task .input{margin:.4rem 0}#branch_container{display:flex;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:1rem 0}#notification{display:flex}#bottom_nav{display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100vw;z-index:4;border-top:1px solid rgba(var(--text-color),.1)}#bottom_nav button{padding:.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:.7rem;font-weight:400;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}#bottom_nav button svg{margin:.4rem}#show_message{-webkit-transform:translate(0,.4rem);transform:translate(0,.4rem);-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-box-shadow:.2rem .4rem .8rem rgba(0,0,0,.16);box-shadow:.2rem .4rem .8rem rgba(0,0,0,.16);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;display:flex;color:#fff;right:0;z-index:11}#show_message span,.watching h4{-webkit-box-flex:1;font-weight:500}#show_message span{padding:1rem;-ms-flex:1;flex:1}#show_message button{padding:.5rem 1rem;margin:0}#show_message button svg{stroke:#fff}#interns_list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:20rem}.header,.watching{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal}#interns_list #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header,#project_list_container .container-header{padding-right:0}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{fill:rgba(var(--text-color),.6);width:60vw;margin:2rem 0}.header svg,.loader{overflow:visible;fill:none}.header{position:-webkit-sticky;position:sticky;top:0;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;border-bottom:1px solid rgba(var(--text-color),.1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:2}.header svg{stroke:rgba(var(--text-color),.8);stroke-width:6;height:2rem;width:2rem;cursor:pointer;padding:.4rem;margin-left:1rem}.header h3{padding:0 .5rem;display:inline-flexbox}.appear-on-scroll-up{position:fixed!important;top:0;width:100%;height:4rem!important}#loading_page{display:grid;position:fixed;top:0;bottom:0;left:0;z-index:5;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}.loader{height:2rem;width:2rem;stroke-width:8;stroke:var(--accent-color);stroke-dashoffset:180;stroke-dasharray:180;animation:load 3.6s linear infinite,spin 1s linear infinite}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-180}}@keyframes spin{100%{transform:rotate(360deg)}}#status_map_container{position:relative;overflow:hidden;background:#B9F6CA}#status_map_container .branch-btn{color:rgba(0,0,0,.8)}#status_map_container p{color:rgba(0,0,0,.9)}#status_map_container .active-branch{color:#fff;background:rgba(0,200,83,.6)}#status_map_container #status_map{position:relative;z-index:1;padding:1rem;color:#000}#status_map_container #status_map h2{margin:.4rem 0}#status_map_container #status_map .circle{background:#B9F6CA;border:2px solid rgba(0,0,0,.4)}#status_map_container #status_map .line{background:rgba(0,0,0,.4)}#status_map_container #status_map .assigned-intern{border:1px solid rgba(0,0,0,.4)}#status_map_container #status_map .apply-btn{color:#1B5E20;background:rgba(0,200,83,.2)}.apply-btn{padding:.3rem .6rem}#project_editing_panel,.watching button{padding:1rem}.watching{position:relative;padding-left:1rem;padding-top:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#000;z-index:1}.watching h4{-ms-flex:1;flex:1}.watching button svg{fill:none!important;fill:none;stroke-width:6;overflow:visible;stroke:#000}#right{padding:0 1rem}#right div:first-of-type h2{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}.center{position:relative;display:-ms-grid;display:grid;place-content:center;height:100%}.slide-left{-webkit-animation:slide-left .4s ease;animation:slide-left .4s ease}@-webkit-keyframes slide-left{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}@keyframes slide-left{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.update-mi svg{-webkit-animation:shake .6s ease;animation:shake .6s ease;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes shake{0%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}20%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}60%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes shake{0%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}20%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}60%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.settings-mi svg{-webkit-animation:rot .6s ease;animation:rot .6s ease;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rot{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}}@keyframes rot{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}}#project_explorer,#show_all{margin:0}#admin_panel{padding:0 1.5rem;display:grid;gap:1.5rem}#admin_panel__header{display:grid;gap:0 1rem;padding:.5rem 0;grid-template-columns:1fr auto;align-items:center}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.hide-on-mobile{display:-webkit-box;display:-ms-flexbox;display:flex}.hide-page-on-mobile{display:-ms-grid;display:grid}sm-popup{--width:24rem}.popup__header{padding:1.5rem 1.5rem 0 .5rem}#project_explorer,#show_all,.page{margin:1rem 4vw}#top_nav{padding:1rem 2vw}#settings_page{padding:1rem 2rem}.logo{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;width:auto}#intern_info,#sign_in{width:24rem}#show_message{-webkit-transform:translate(.4rem,0);transform:translate(.4rem,0);margin:1rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:.2rem}#sign_in{height:auto;border-radius:.4rem}#floating_btn{margin:1rem}#dashboard{-ms-grid-columns:3fr 1fr;grid-template-columns:3fr 1fr}#dashboard #status_map_container{-ms-flex-item-align:start;align-self:flex-start}#dashboard #status_map_container .watching{padding-left:2rem}#dashboard #status_map_container #status_map{padding:1rem 2rem}.task .apply-btn{opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task:hover .apply-btn{opacity:1}.hover{-webkit-transition:background .3s ease;transition:background .3s ease;cursor:pointer}.hover:hover{background:rgba(var(--text-color),.06)}#admin_panel{grid-template-columns:16rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"admin-header admin-header" ". ."}#admin_panel__header{grid-area:admin-header}#edit_data_fig{width:16rem;-ms-grid-column-align:center;justify-self:center}#interns,#projects{display:flex;flex-direction:column;max-height:calc(100vh - 16rem);overflow-y:auto}.task-list-item .task-option{opacity:0}.task-list-item:hover .task-option{opacity:1}#project_explorer{display:-ms-grid;display:grid;align-items:flex-start;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;grid-template-areas:"header header" "left right"}#project_explorer .header{border-radius:.4rem .4rem 0 0;-ms-grid-column-span:2;grid-area:header}#project_explorer #left{position:-webkit-sticky;position:sticky;top:4.8rem;grid-area:left;-ms-flex-item-align:start;align-self:flex-start;border-right:1px solid rgba(var(--text-color),.06)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:#29B6F6;font-size:.9rem}#project_explorer #right{grid-area:right}}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;align-content:flex-start;gap:1.5rem}.task-card{display:grid;padding:1rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.5rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;border:1px solid;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}@media only screen and (min-width:1280px){#project_explorer,#show_all,.page{margin:1rem 8vw}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.send-update-button{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button{opacity:1}}@media (any-hover:none){.apply-btn,.task-option{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..aab1cf3 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,2026 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +:root{ + font-size: clamp(1rem, 1.2vmax, 3rem); +} +html, body{ + height: 100%; + scroll-behavior: smooth; +} +body { + --accent-color: #1976D2; + --light-shade: rgba(var(--text-color), 0.06); + --text-color: 17, 17, 17; + --text-color-light: 100, 100, 100; + --foreground-color: 255, 255, 255; + --background-color: #F6f6f6; + --error-color: red; + color: rgba(var(--text-color), 1); + background: var(--background-color); + display: flex; + flex-direction: column; +} +body[data-theme='dark']{ + --accent-color: #42A5F5; + --text-color: 240, 240, 240; + --text-color-light: 170, 170, 170; + --foreground-color: 20, 20, 20; + --background-color: #0a0a0a; + --error-color: rgb(255, 106, 106); +} +/* h1,h2,h3,h4,h5,h6{ + font-family: 'Montserrat', sans-serif; +} */ +.full-bleed{ + grid-column: 1/4; +} +.h1{ + font-size: 2.5rem; +} +.h2{ + font-size: 2rem; +} +.h3{ + font-size: 1.4rem; +} +.h4{ + font-size: 1rem; +} +.h5{ + font-size: 0.8rem; +} + +.uppercase{ + text-transform: uppercase; +} +.capitalize{ + text-transform: capitalize; +} + +p { + font-size: 0.8; + max-width: 60ch; + line-height: 1.7; + color: rgba(var(--text-color), 0.8); + &:not(:last-of-type){ + margin-bottom: 1rem; + } +} +img{ + object-fit: cover; +} + +a{ + color: inherit; + text-decoration: none; + &:focus-visible{ + box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; + } +} +button{ + position: relative; + display: inline-flex; + overflow: hidden; + align-items: center; + background: none; + cursor: pointer; + outline: none; + color: inherit; + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.2rem; + padding: 0.5rem 0.6rem; + -webkit-tap-highlight-color: transparent; + border: none; +} +button:focus-visible{ + outline: rgba(var(--text-color), 1) 0.1rem solid; +} +a.button:any-link{ + position: relative; + display: inline-flex; + align-items: center; + background: none; + cursor: pointer; + outline: none; + font-weight: 500; + font-size: 0.8rem; + border-radius: 0.3rem; + padding: 0.5rem 0.6rem; + align-self: flex-start; + text-decoration: none; + color: rgba(var(--text-color), 0.7); + -webkit-tap-highlight-color: transparent; + background-color: rgba(var(--text-color), 0.06); + .icon{ + margin-right: 0.3rem; + height: 1.2rem; + } +} +a:any-link:focus-visible{ + outline: rgba(var(--text-color), 1) 0.1rem solid; +} +.button{ + background-color: rgba(var(--text-color), 0.06); +} +sm-button{ + --border-radius: 0.3rem; +} +ul{ + list-style: none; +} +.flex{ + display: flex; +} +.grid{ + display: grid; +} +.hide{ + opacity: 0; + pointer-events: none; +} +.hide-completely{ + display: none !important; +} +.no-transformations{ + transform: none !important; +} +.overflow-ellipsis{ + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.breakable{ + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} +.flex{ + display: flex; +} +.grid{ + display: grid; +} +.flow-column{ + grid-auto-flow: column; +} +.gap-0-5{ + gap: 0.5rem; +} +.gap-1{ + gap: 1rem; +} +.gap-1-5{ + gap: 1.5rem; +} +.gap-2{ + gap: 2rem; +} +.gap-3{ + gap: 3rem; +} +.text-align-right{ + text-align: right; +} +.align-start{ + align-items: flex-start; +} +.align-center{ + align-items: center; +} +.text-center{ + text-align: center; +} +.justify-start{ + justify-content: start; +} +.justify-center{ + justify-content: center; +} +.justify-right{ + margin-left: auto; +} +.align-self-center{ + align-self: center; +} +.justify-self-center{ + justify-self: center; +} +.justify-self-start{ + justify-self: start; +} +.direction-column{ + flex-direction: column; +} +.space-between{ + justify-content: space-between; +} +.w-100{ + width: 100%; +} +.ripple{ + position: absolute; + border-radius: 50%; + transform: scale(0); + background: rgba(var(--text-color), 0.16); + pointer-events: none; +} +.interact{ + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} +.observe-empty-state:empty{ + display: none; +} +.observe-empty-state:not(:empty) ~ .empty-state{ + display: none; +} + + +.icon{ + width: 1.5rem; + height: 1.5rem; + fill: rgba(var(--text-color), 0.9); +} +.button__icon{ + height: 1.2rem; + width: 1.2rem; + &--left{ + margin-right: 0.5rem; + } + &--right{ + margin-left: 0.5rem; + } +} +.popup__header{ + display: grid; + gap: 0.5rem; + width: 100%; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr; +} +.popup__header__close{ + padding: 0.5rem; + cursor: pointer; +} +#confirmation_popup, +#prompt_popup { + flex-direction: column; + h4 { + font-weight: 500; + margin-bottom: 0.5rem; + } + sm-button{ + margin: 0; + } + .flex { + padding: 0; + margin-top: 1rem; + sm-button:first-of-type { + margin-right: 0.6rem; + margin-left: auto; + } + } +} + +input[type="checkbox"] { + display: none; +} + +.checkbox svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 1.6rem; + width: 1.6rem; +} + +.checkbox svg .check { + stroke-dashoffset: 70; + stroke-dasharray: 70; + -webkit-transition: stroke-dashoffset 0.3s ease; + transition: stroke-dashoffset 0.3s ease; +} + +.checkbox input:checked+svg { + stroke: #00C853; +} + +.checkbox input:checked+svg .check { + stroke-dashoffset: 0; +} +#settings_page { + padding: 1rem; +} + +#settings_page section { + width: 100%; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + display: -ms-grid; + display: grid; + padding-bottom: 1rem; +} + +#settings_page section:last-of-type { + border: none; +} + +#settings_page h3, +#settings_page h4 { + display: flexbox; + width: 100%; + -ms-flex-item-align: center; + align-self: center; +} + +#settings_page h5 { + margin: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + font-weight: normal; + opacity: 0.9; +} + +#settings_page button { + background: transparent; + border: 1px solid var(--accent-color); + color: var(--accent-color); + margin: 1rem 0; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + white-space: nowrap; + .icon{ + fill: var(--accent-color); + } +} +#settings_page > div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 1rem 0; + -ms-flex-line-pack: center; + align-content: center; +} + +#settings_page .row { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#settings_page .row span { + font-size: 0.8rem; +} + +#settings_page .border-card { + color: inherit; + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.5rem 0; + width: auto; +} + +#settings_page .border-card svg { + fill: var(--accent-color); + display: flexbox; + height: 2rem; + -ms-flex-item-align: center; + align-self: center; + margin: 0.5rem; +} + +.container-card { + position: relative; + background: rgba(var(--foreground-color), 1); + border-radius: 0.4rem; +} + +.solid-background { + transition: background-color 2s; + background: rgba(var(--foreground-color), 1); +} + +a { + color: var(--accent-color); + text-decoration: none; +} + +.medium-top-bottom-margin { + margin: 0.5rem 0; +} + +#sign_in_page{ + display: grid; + position: fixed; + z-index: 5; + top: 0; + bottom: 0; + left: 0; + right: 0; + place-content: center; + background-color: rgba(var(--foreground-color), 1); +} + + +.task { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto 1fr; + grid-template-columns: auto 1fr; + margin: 0 1rem; +} + +.task:last-of-type .left .line { + -webkit-transform: scaleY(0); + transform: scaleY(0); +} + +.task .left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding-top: 0.5rem; +} + +.task .left .circle { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + -ms-flex-item-align: start; + align-self: flex-start; + height: 1rem; + width: 1rem; + border-radius: 50%; + background: rgba(var(--foreground-color), 1); + border: solid 2px rgba(var(--text-color), 0.4); + z-index: 1; +} + +.task .left .line { + position: absolute; + left: 50%; + height: 100%; + width: 2px; + -webkit-transform: translateX(-50%) scaleY(1); + transform: translateX(-50%) scaleY(1); + background-color: rgba(var(--text-color), 0.4); +} + +.task .right { + margin-left: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} + +.task .right .apply-cont { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.task .right .apply-cont h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.task h4 { + margin-top: 0.4rem; + margin-bottom: 1rem; +} + +.task p { + white-space: pre-line; + padding-bottom: 2rem; +} + +.task .assigned-interns .assigned-intern { + padding: 0.4rem; +} + +.completed-task .left .circle { + border: solid 2px #00C853 !important; + background: #00C853 !important; +} + +.completed-task .left .line { + background-color: #00C853 !important; +} + +.page { + gap: 1rem; + display: grid; + position: relative; + margin: 1rem; + animation: fadein 0.4s ease; +} + +.fade-in { + -webkit-animation: fadein 0.4s ease; + animation: fadein 0.4s ease; +} + +@-webkit-keyframes fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.title { + font-weight: 500; +} + +.padding { + padding: 1rem; +} + +#dashboard { + padding-bottom: 5rem; + -ms-grid-columns: auto; + grid-template-columns: auto; +} + +.input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + margin: 1rem 0; + background: rgba(var(--text-color), 0.06); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0.2rem; + overflow: hidden; +} + +.input input, +.input textarea { + color: var(--light-text); + padding: 1rem 0.5rem; + width: 100%; + font-size: 1rem; + background: transparent; + margin-left: 0; +} + +.input input:focus, +.input textarea:focus { + outline: none; +} + +.input svg { + height: 1.2rem; + width: 1.2rem; + margin: 0 0.5rem 0 1rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.input:focus-within { + background: rgba(0, 0, 0, 0.1); +} + +input, +button, +textarea { + position: relative; + border: none; + font-size: 1rem; + border-radius: 0.2rem; +} + +button[disabled] { + opacity: 0.5 !important; + cursor: default; +} + +.show { + display: block; +} + +.hide-on-mobile, +.hide-page-on-mobile { + display: none; +} + +.hide-on-desktop { + display: initial; +} + +.no-transformations { + -webkit-transform: none !important; + transform: none !important; +} + +.no-bottom-margin { + margin-bottom: 0; +} + +.top-margin { + margin-top: 0.3rem; +} + +.chatInput { + overflow: hidden; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; +} + +.chatInput textarea { + resize: none; + line-height: 1.6; +} + +.chatInput button { + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + -webkit-transform: scale(0); + transform: scale(0); + -ms-flex-item-align: end; + align-self: flex-end; + padding: 1rem; +} + +.chatInput button svg { + margin: 0; + fill: rgba(var(--text-color), 1); +} + +#top_nav { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.5rem; + z-index: 4; +} + +#top_nav .spacer { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#top_nav .logo { + margin-right: 0.5rem; +} + +.logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 1.2rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.logo .cls-2, +.logo .cls-3 { + fill: rgba(var(--text-color), 1); + font-size: 146.9px; + font-family: ArialMT, Arial; +} + +.logo svg { + height: 2.5rem; +} + +.logo h4 { + margin: 0; +} + +.active { + opacity: 1 !important; + color: var(--accent-color); +} + +.active svg { + fill: var(--accent-color); +} + +.svg-margin-right svg { + margin-right: 0.5rem; +} + +.project-card { + text-transform: capitalize; +} + +.intern-card { + user-select: none; +} + +.intern-card span:first-of-type { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + padding: 0.8rem; + border-radius: 50%; + background: #673AB7; + margin-right: 1rem; + color: white; + font-weight: 500; + font-size: 1.2rem; + line-height: 0; +} + +.intern-card span:first-of-type::after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.intern-card span:nth-of-type(2) { + flex: 1; + text-transform: capitalize; + flex-shrink: 0; +} + +.intern-card span:nth-of-type(3) { + display: inline-flex; + align-items: center; + align-content: center; + font-weight: 500; + font-size: 1.2rem; + color: var(--light-text); +} + +.intern-card span:nth-of-type(3) svg { + fill: #FF5722 !important; + height: 1rem !important; + width: 1rem !important; + margin-right: 0.2rem; +} + +.card { + display: flex; + flex-direction: row; + position: relative; + align-items: center; + margin-bottom: 0.5rem; + padding: 1rem; +} + +.request-card { + display: flex; + position: relative; + margin-bottom: 0.5rem; + -webkit-box-align: left; + -ms-flex-align: left; + align-items: left; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 1rem; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +.request-card p { + margin-top: 0; + width: 100%; + font-size: 1rem; +} + +.request-card b { + font-weight: 500; +} + +.request-card button { + padding: 0.2rem 0.6rem 0.2rem 0; +} + +.request-card button:first-of-type { + margin-left: auto; +} + +.request-card:last-of-type { + border-bottom: none; +} + +.dropdown { + position: relative; +} + +.dropdown-content { + overflow: hidden; + position: absolute; + z-index: 2; + margin: 1rem; + right: 2rem; + min-width: 24rem; + background: rgba(var(--foreground-color), 1); + box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.24); + border-radius: 0.5rem; +} + +#intern_updates .container-header { + padding-right: 0; + border-bottom: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_updates .container-header button { + padding: 1rem 0; + border-bottom: 0.2rem solid transparent; + border-radius: 0; + opacity: 0.7; +} + +#intern_updates .container-header button:first-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header button:last-of-type { + margin-right: 1rem; +} + +#intern_updates .container-header .active { + color: rgba(var(--text-color), 1); + border-bottom: 0.2rem solid var(--accent-color); +} + +#update_container, +#requests_container { + display: flex; + max-height: 80vh; + overflow-y: auto; + flex-direction: column; +} + +#updates { + transition: opacity 0.3s ease; +} + +.update { + display: flex; + flex-direction: column; + padding: 1rem; +} +.update__project-name{ + font-size: 1.2rem; + max-width: 60ch; + margin: 0.3rem 0 0.5rem 0; + font-weight: bold; + text-transform: capitalize; +} + +.update__sender{ + color: var(--accent-color); + font-size: 0.9rem; + font-weight: 500; +} +.update__message{ + white-space: pre-line; +} + +.container-header { + display: flex; + align-items: center; + flex-direction: row; + width: 100%; + padding: 0 1rem; +} + +.container-header h3 { + flex: 1; + font-weight: 500; +} + +.container-header span { + color: var(--accent-color); + border-radius: 0.2rem; + margin-right: 0.2rem; + padding: 0.5rem 1rem; + font-weight: 500; +} + +.back-arrow { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + width: 2rem; + height: 2rem; + padding: 0.5rem 0.5rem 0.5rem 0; + cursor: pointer; +} + +.close-svg, +.tick-mark { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; +} + +.close-svg { + padding: 0.6rem; +} + +#textCopied { + padding: 1rem; + border-radius: 2rem; + background: var(--sec-color); + position: fixed; + bottom: 0; + pointer-events: none; + margin: 2rem 0; + left: 50%; + transform: translateX(-50%); + transition: 0.3s opacity ease; + z-index: 10; +} + +#intern_info { + flex-direction: column; +} + +#intern_info div { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + margin-bottom: 1rem; +} + +#intern_info div span { + flex: 1; + word-break: break-all; + font-size: 0.9rem; +} + +#intern_info div svg { + fill: rgba(var(--text-color), 1); + height: 2.5rem; + padding: 0.6rem; + overflow: visible; +} + +#intern_info .gold-fill { + fill: #FF5722; +} + +#intern_info #update_intern_score h4 { + margin: 0; + font-size: 2rem; +} + +#intern_info #update_intern_score button { + border: 1px solid rgba(var(--text-color), 0.1); +} + +#intern_info #update_intern_score button svg { + stroke-width: 10; + fill: none; + stroke: var(--accent-color); +} + +#intern_info #update_intern_score rect { + stroke: transparent; +} + +#intern_info h3 { + text-transform: capitalize; +} + +#intern_info h4, +#intern_info h5 { + margin-top: 0.5rem; +} + +#project_info { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.branch-btn { + border-radius: 0; + padding: 0.5rem; + border-radius: 0.2rem; + margin: 0.5rem 0.5rem 0.5rem 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.active-branch { + opacity: 1; + color: var(--accent-color); + background: rgba(var(--text-color), 0.04); +} + +.active-project { + background: rgba(var(--text-color), 0.06); +} + +.opac { + opacity: 1 !important; +} + +.task-list-item { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto auto 1fr auto; + grid-template-columns: auto auto 1fr auto; + grid-template-areas: 'status . title options' + 'status . interns interns' + 'status . description description'; + padding: 1rem; + gap: 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(var(--text-color), 0.02); +} + +.task-list-item .checkbox { + -ms-grid-row-span: 3; + grid-area: status; + padding: 0.5rem 0.5rem 0.5rem 0; + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} + +.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 { + -ms-grid-column-span: 2; + grid-area: interns; +} + +.task-list-item .task-option { + grid-area: options; + cursor: pointer; + opacity: 1; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} + +.task-list-item .task-option svg { + width: 2rem; + height: 2rem; + padding: 0.5rem; + overflow: visible; + fill: rgba(var(--text-color), 0.8); +} + +.task-list-item p { + -ms-grid-column-span: 2; + grid-area: description; + margin: 0; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; +} + +.assigned-interns { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.assigned-interns .assigned-intern { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 0.8rem; + margin: 0.2rem 0.5rem 0.2rem 0; + padding: 0.2rem 0 0.2rem 0.4rem; + border-radius: 0.2rem; + border: 1px solid rgba(var(--text-color), 0.24); + -webkit-box-align: center; + -ms-flex-align: center; + 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; +} + +#task_context { + -webkit-transition: 0.3s opacity ease; + transition: 0.3s opacity ease; + top: 0; + right: 0; + margin: 0 2rem; + list-style: none; + padding: 0.5rem 0; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + position: absolute; + background: rgba(var(--foreground-color), 1); + -webkit-box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); +} + +#task_context li { + padding: 0.8rem 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#task_context li svg { + margin-right: 1rem; + width: 1.2rem; + height: 1.2rem; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; +} + +.temp-task { + padding: 1rem; + background: rgba(var(--text-color), 0.02); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.temp-task .input { + margin: 0.4rem 0; +} + +#branch_container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin: 1rem 0; +} + +#notification { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#bottom_nav { + position: fixed; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100vw; + background: rgba(var(--foreground-color), 1); + z-index: 4; + border-top: 1px solid rgba(var(--text-color), 0.1); +} + +#bottom_nav button { + padding: 0.2rem; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 0.7rem; + font-weight: normal; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +#bottom_nav button svg { + margin: 0.4rem; +} + +#show_message { + -webkit-transform: translate(0, 0.4rem); + transform: translate(0, 0.4rem); + -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; + -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: white; + position: fixed; + bottom: 0; + right: 0; + width: 100%; + z-index: 11; +} + +#show_message span { + font-weight: 500; + padding: 1rem; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +#show_message button { + padding: 0.5rem 1rem; + margin: 0; +} + +#show_message button svg { + stroke: white; +} + +#interns_list { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 20rem; +} + +#interns_list #interns_list_container { + min-height: 50vh; + max-height: 50vh; + overflow-y: auto; +} + +#best_interns_container, +#project_list_container { + margin-bottom: 1rem; +} + +#best_interns_container .container-header, +#project_list_container .container-header { + padding-right: 0; +} +#best_interns_container .container-header .icon, +#project_list_container .container-header .icon{ + margin-right: 0.5rem; +} + +#edit_data_fig { + fill: rgba(var(--text-color), 0.6); + width: 60vw; + margin: 2rem 0; +} + +.header { + position: -webkit-sticky; + position: sticky; + top: 0; + background: rgba(var(--foreground-color), 1); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + border-bottom: 1px solid rgba(var(--text-color), 0.1); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 2; +} + +.header svg { + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + height: 2rem; + width: 2rem; + cursor: pointer; + padding: 0.4rem; + margin-left: 1rem; +} + +.header h3 { + padding: 0 0.5rem; + display: inline-flexbox; +} + +.appear-on-scroll-up { + position: fixed !important; + top: 0; + width: 100%; + height: 4rem !important; +} + +#loading_page{ + display: grid; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 5; + text-align: center; + place-content: center; + justify-items: center; + 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; + } +} + +.loader { + height: 2rem; + width: 2rem; + stroke-width: 8; + overflow: visible; + stroke: var(--accent-color); + fill: none; + stroke-dashoffset: 180; + stroke-dasharray: 180; + animation: load 3.6s linear infinite, spin 1s linear infinite; +} +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100%{ + stroke-dashoffset: -180; + } +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} + +#status_map_container { + position: relative; + overflow: hidden; + background: #B9F6CA; +} + +#status_map_container .branch-btn { + color: rgba(0, 0, 0, 0.8); +} + +#status_map_container p { + color: rgba(0, 0, 0, 0.9); +} + +#status_map_container .active-branch { + color: white; + background: rgba(0, 200, 83, 0.6); +} + +#status_map_container #status_map { + position: relative; + z-index: 1; + padding: 1rem; + color: #000; +} + +#status_map_container #status_map h2 { + margin: 0.4rem 0; + text-transform: capitalize; +} + +#status_map_container #status_map .circle { + background: #B9F6CA; + border: 2px solid rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .line { + background: rgba(0, 0, 0, 0.4); +} + +#status_map_container #status_map .assigned-intern { + border: rgba(0, 0, 0, 0.4) 1px solid; +} + +#status_map_container #status_map .apply-btn { + color: #1B5E20; + background: rgba(0, 200, 83, 0.2); +} + +.apply-btn { + padding: 0.3rem 0.6rem; +} +.watching { + position: relative; + padding-left: 1rem; + padding-top: 1rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + z-index: 1; +} + +.watching h4 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + font-weight: 500; +} + +.watching button { + padding: 1rem; +} + +.watching button svg { + fill: none !important; + fill: none; + stroke: rgba(var(--text-color), 0.8); + stroke-width: 6; + overflow: visible; + stroke: #000; +} + +#right { + padding: 0 1rem; +} + +#right div:first-of-type h2 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0.4rem 0; +} + +#right div:first-of-type button { + border: 1px solid rgba(var(--text-color), 0.06); +} + +.center { + position: relative; + display: -ms-grid; + display: grid; + place-content: center; + height: 100%; + text-align: center; +} + +.slide-left { + -webkit-animation: slide-left 0.4s ease; + animation: slide-left 0.4s ease; +} + +@-webkit-keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes slide-left { + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + opacity: 0; + } +} + +.update-mi svg { + -webkit-animation: shake 0.6s ease; + animation: shake 0.6s ease; + -webkit-transform-origin: top; + transform-origin: top; +} + +@-webkit-keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +@keyframes shake { + 0% { + -webkit-transform: rotate(30deg); + transform: rotate(30deg); + } + + 20% { + -webkit-transform: rotate(-30deg); + transform: rotate(-30deg); + } + + 40% { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + + 60% { + -webkit-transform: rotate(-20deg); + transform: rotate(-20deg); + } + + 80% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +.settings-mi svg { + -webkit-animation: rot 0.6s ease; + animation: rot 0.6s ease; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} + +@keyframes rot { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + } +} + +.capitalise { + text-transform: capitalize; +} + +#show_all, +#project_explorer { + margin: 0; +} + +#admin_panel { + padding: 0 1.5rem; + display: grid; + gap: 1.5rem; +} +#admin_panel__header{ + display: grid; + gap: 0 1rem; + padding: 0.5rem 0; + grid-template-columns: 1fr auto; + align-items: center; +} +#project_editing_panel{ + padding: 1rem; +} + +@media only screen and (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } + + .hide-on-mobile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .hide-page-on-mobile { + display: -ms-grid; + display: grid; + } + sm-popup{ + --width: 24rem; + } + .popup__header{ + padding: 1.5rem 1.5rem 0 0.5rem; + } + + .page, + #show_all, + #project_explorer { + margin: 1rem 4vw; + } + + #top_nav { + padding: 1rem 2vw; + } + + #settings_page { + padding: 1rem 2rem; + } + + .logo { + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + width: auto; + } + + #show_message { + -webkit-transform: translate(0.4rem, 0); + transform: translate(0.4rem, 0); + margin: 1rem; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 0.2rem; + } + + #sign_in { + width: 24rem; + height: auto; + border-radius: 0.4rem; + } + + #floating_btn { + margin: 1rem; + } + + #dashboard { + -ms-grid-columns: 3fr 1fr; + grid-template-columns: 3fr 1fr; + } + + #dashboard #status_map_container { + -ms-flex-item-align: start; + align-self: flex-start; + } + + #dashboard #status_map_container .watching { + padding-left: 2rem; + } + + #dashboard #status_map_container #status_map { + padding: 1rem 2rem; + } + + .task .apply-btn { + opacity: 0; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + } + + .task:hover .apply-btn { + opacity: 1; + } + + #intern_info { + width: 24rem; + } + + .hover { + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; + cursor: pointer; + } + + .hover:hover { + background: rgba(var(--text-color), 0.06); + } + + #admin_panel { + grid-template-columns: 16rem 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: 'admin-header admin-header' '. .'; + } + #admin_panel__header{ + grid-area: admin-header; + } + + #edit_data_fig { + width: 16rem; + -ms-grid-column-align: center; + justify-self: center; + } + + #interns, + #projects { + display: flex; + flex-direction: column; + max-height: calc(100vh - 16rem); + overflow-y: auto; + } + + .task-list-item .task-option { + opacity: 0; + } + + .task-list-item:hover .task-option { + opacity: 1; + } + + #project_explorer { + display: -ms-grid; + display: grid; + align-items: flex-start; + -ms-grid-columns: 1fr 3fr; + grid-template-columns: 1fr 3fr; + grid-template-areas: 'header header' + 'left right'; + } + + #project_explorer .header { + border-radius: 0.4rem 0.4rem 0 0; + -ms-grid-column-span: 2; + grid-area: header; + } + + #project_explorer #left { + position: -webkit-sticky; + position: sticky; + top: 4.8rem; + grid-area: left; + -ms-flex-item-align: start; + align-self: flex-start; + border-right: 1px solid rgba(var(--text-color), 0.06); + } + + #project_explorer #left h4 { + margin-top: 0; + margin-bottom: 0.5rem; + color: #29B6F6; + font-size: 0.9rem; + } + + #project_explorer #right { + grid-area: right; + } +} + + +// Newer styles + +#update_of_project{ + color: rgba(var(--text-color), 0.8); +} +#update_of_task{ + font-size: 1.3rem; + margin: 0.4rem 0 1.8rem 0; +} + +ul{ + padding: 0; + list-style: none; +} +#assigned_task_list{ + display: grid; + align-content: flex-start; + gap: 1.5rem; +} +.task-card{ + display: grid; + padding: 1rem; +} +.task__header{ + display: grid; + gap: 0 0.5rem; + align-items: flex-start; + grid-template-columns: 1fr auto; + grid-template-areas: '. send-button' '. send-button'; +} +.task__project-title{ + font-size: 0.9rem; + font-weight: 500; + border-radius: 0.3rem; + padding: 0.3rem 0.5rem; + justify-self: flex-start; + margin-bottom: 0.5rem !important; + color: rgba(var(--text-color), 0.8); + background-color: rgba(var(--text-color), 0.06); +} +.task__title{ + font-size: 1.5rem; + margin-bottom: 1rem !important; +} +.task__description{ + white-space: pre-line; + color: rgba(var(--text-color), 0.8); +} +.send-update-button{ + grid-area: send-button; + border: solid 1px; + color: var(--accent-color); + .icon{ + height: 1.2rem; + width: 1.2rem; + fill: var(--accent-color); + } +} + + +// + + + + +@media only screen and (min-width: 1280px) { + + .page, + #show_all, + #project_explorer { + margin: 1rem 8vw; + } +} +@media (any-hover: hover){ + ::-webkit-scrollbar{ + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb{ + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + &:hover{ + background: rgba(var(--text-color), 0.5); + } + } + .send-update-button{ + opacity: 0; + transition: opacity 0.3s; + } + .task-card:hover{ + .send-update-button{ + opacity: 1; + } + } +} +@media (any-hover: none){ + .task-option, + .apply-btn { + opacity: 1; + } +} \ No newline at end of file diff --git a/new.html b/new.html new file mode 100644 index 0000000..f743068 --- /dev/null +++ b/new.html @@ -0,0 +1,11618 @@ + + + + + + RIBC + + + + + + + + + + + + + + + +

+

+
+ Cancel + OK +
+ +
+

Sign In

+

Welcome to RIBC.

+
+ + Sign in +
+

+ Don't have a private key? get it here +
or you can sign as guest. +

+ + as guest + +
+ + +
+
+
+

Projects you are watching

+ + +
+
+
+
+

My tasks

+
    +
    +
    +
    +
    + + + + +

    Leaderboard

    + +
    +
    +
    +
    +
    + + + + +

    Projects

    + +
    +
    +
    +
    +
    +
    +

    Settings

    +
    +

    Account

    +

    + +
    +
    + +
    +

    Dark mode

    +

    Turn dark mode on/off

    +
    +     +
    +
    +

    About

    +
    Version 8.2.5
    + +
    Powered by
    + + + + + + + + + + + + + +     +
    +
    +
    +
    + + Go back to previous page + + +

    +
    +
    +
    +
    +
    + + Go back to previous page + + +

    Projects

    +
    +
    +

    My projects

    +
    +

    Other projects

    +
    +
    +
    +
    +

    + +
    +

    +
    +
    +

    +
    +
    +
    +
    +
    +
    +

    Manage projects and intern assignments

    +

    Don't forget to commit changes

    +
    + Commit +
    +
    + + Projects + Interns + + +
    +
    +

    Add project

    + +
    +
    +
    +
    +
    +

    Add Intern

    + +
    +
    +
    +     +
    +
    +
    +

    Project Name

    +
    +

    + +

    +
    +
    +

    Tasks

    +
    + +
    + +
      +
    • + + Open intern assignment popup + + + + + + + Assign an intern +
      • +
    • + + show new branch creation popup + + + + + + + Create new Branch +
      • +
    • + + remove this task + + + + Delete +
      • +
    +
    +
    +
    + Copied +
    + +

    Intern name

    +
    + FlO ID + + Copy FLO address + + +
    +

    Update Rating

    +
    + + + +

    Points

    + + +
    +     + + +
    + + Close this popup + + +

    Choose an intern

    +
    + + + +
    +     + + +
    +
    +

    Information

    +
    + Project name + Points + Description +
    +
    +
    +

    Tasks

    +
    +
    +
    +
    +     + + +
    + + close this popup + + +

    Add new project

    + +
    + + +     + + + + close this popup + + +

    Add new intern

    + + + + +     + +
    + + close this popup + + +

    Create a new branch

    + +
    + + +     + +
    + +

    Post an update

    +
    +
    +

    +
    Update
    + +     +
    + +

    Loading RIBC

    +

    + A FLO Blockchain App by RanchiMall +

    +
    + + RanchiMall logo + + + + + + + + + + + +
    +
    + + + + + + + + + + + + + + + \ No newline at end of file From 3b7c020ad713653ef4acdf315456d01430039394 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 22 Jul 2021 18:48:43 +0530 Subject: [PATCH 15/41] Code refactoring --- components-old.js | 3640 +++++++++++++++++++++++++++++++++ components.js | 4877 ++++++++++++++++++++------------------------- css/main.css | 961 ++------- css/main.min.css | 2 +- css/main.scss | 1253 ++++-------- new.html | 2055 +++++++++---------- 6 files changed, 7301 insertions(+), 5487 deletions(-) create mode 100644 components-old.js diff --git a/components-old.js b/components-old.js new file mode 100644 index 0000000..62b535b --- /dev/null +++ b/components-old.js @@ -0,0 +1,3640 @@ +/*jshint esversion: 6 */ +//Button +const smButton = document.createElement('template') +smButton.innerHTML = ` + +`; +customElements.define('sm-button', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) + } + + get disabled() { + return this.isDisabled + } + + set disabled(value) { + if (value && !this.isDisabled) { + this.isDisabled = true + this.setAttribute('disabled', '') + this.button.removeAttribute('tabindex') + } else if (!value && this.isDisabled) { + this.isDisabled = false + this.removeAttribute('disabled') + } + } + + dispatch() { + if (this.isDisabled) { + this.dispatchEvent(new CustomEvent('disabled', { + bubbles: true, + composed: true + })) + } else { + this.dispatchEvent(new CustomEvent('clicked', { + bubbles: true, + composed: true + })) + } + } + + connectedCallback() { + this.isDisabled = false + this.button = this.shadowRoot.querySelector('.button') + if (this.hasAttribute('disabled') && !this.isDisabled) + this.isDisabled = true + this.addEventListener('click', (e) => { + this.dispatch() + }) + } + }) + +//Input +const smInput = document.createElement('template') +smInput.innerHTML = ` + +
    + + +
    +`; +customElements.define('sm-input', + class extends HTMLElement { + + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) + } + + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('input').value + } + + set value(val) { + this.shadowRoot.querySelector('input').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + get type() { + return this.getAttribute('type') + } + + get isValid() { + return this.shadowRoot.querySelector('input').checkValidity() + } + + get validity() { + return this.shadowRoot.querySelector('input').validity + } + + set disabled(value) { + if (value) + this.shadowRoot.querySelector('.input').classList.add('disabled') + else + this.shadowRoot.querySelector('.input').classList.remove('disabled') + } + set readOnly(value) { + if (value) { + this.shadowRoot.querySelector('input').setAttribute('readonly', '') + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { + this.shadowRoot.querySelector('input').removeAttribute('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') + } + } + + setValidity = (message) => { + this.feedbackText.textContent = message + } + + showValidity = () => { + this.feedbackText.classList.remove('hide-completely') + } + + hideValidity = () => { + this.feedbackText.classList.add('hide-completely') + } + + focusIn = () => { + this.input.focus() + } + + focusOut = () => { + this.input.blur() + } + + fireEvent = () => { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput = (e) => { + if (!this.readonly) { + if (this.input.value !== '') { + this.clearBtn.classList.remove('hide') + } else { + this.clearBtn.classList.add('hide') + } + } + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + } else { + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + } + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.feedbackText = this.shadowRoot.querySelector('.feedback-text') + this.valueChanged = false; + this.readonly = false + this.isNumeric = false + this.min + this.max + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('input') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('min')) { + let minValue = this.getAttribute('min') + this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) + } + if (this.hasAttribute('minlength')) { + const minValue = this.getAttribute('minlength') + this.input.setAttribute('minlength', minValue) + } + if (this.hasAttribute('maxlength')) { + const maxValue = this.getAttribute('maxlength') + this.input.setAttribute('maxlength', maxValue) + } + if (this.hasAttribute('step')) { + const steps = this.getAttribute('step') + this.input.setAttribute('step', steps) + } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + this.readonly = true + } + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + if (this.hasAttribute('error-text')) { + this.feedbackText.textContent = this.getAttribute('error-text') + } + if (this.hasAttribute('type')) { + if (this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + this.input.setAttribute('type', 'number') + this.isNumeric = true + } else + this.input.setAttribute('type', this.getAttribute('type')) + } else + this.input.setAttribute('type', 'text') + this.input.addEventListener('input', e => { + this.checkInput(e) + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') { + this.shadowRoot.querySelector('.label').textContent = newValue; + this.setAttribute('aria-label', newValue); + } + } + } + }) + +//textarea +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + this.textarea = this.shadowRoot.querySelector('textarea') + } + get value() { + return this.textarea.value + } + set value(val) { + this.textarea.value = val; + this.textareaBox.dataset.value = val + this.checkInput() + this.fireEvent() + } + focusIn = () => { + this.textarea.focus() + } + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + checkInput = () => { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.textarea.value !== '') { + this.placeholder.classList.add('hide') + } else { + this.placeholder.classList.remove('hide') + } + } + connectedCallback() { + this.textareaBox = this.shadowRoot.querySelector('.textarea') + this.placeholder = this.shadowRoot.querySelector('.placeholder') + + if(this.hasAttribute('placeholder')) + this.placeholder.textContent = this.getAttribute('placeholder') + + if (this.hasAttribute('value')) { + this.textarea.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.textarea.setAttribute('required', '') + } + if (this.hasAttribute('readonly')) { + this.textarea.setAttribute('readonly', '') + } + if (this.hasAttribute('rows')) { + this.textarea.setAttribute('rows', this.getAttribute('rows')) + } + this.textarea.addEventListener('input', e => { + this.textareaBox.dataset.value = this.textarea.value + this.checkInput() + }) + } + }) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
    + +
    +`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } +}) + +//chcekbox + +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + this.input = this.shadowRoot.querySelector('input') + + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + set value(val) { + this.val = val + this.setAttribute('value', value) + } + + get value() { + return getAttribute('value') + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + handleKeyup = e => { + if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { + if (this.hasAttribute('checked')) { + this.input.checked = false + this.removeAttribute('checked') + } + else { + this.input.checked = true + this.setAttribute('checked', '') + } + } + } + handleChange = e => { + if (this.input.checked) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + connectedCallback() { + this.val = '' + this.addEventListener('keyup', this.handleKeyup) + this.input.addEventListener('change', this.handleChange) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (newValue === 'true') { + this.isDisabled = true + } else { + this.isDisabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.input.checked = false + this.isChecked = false + } + this.dispatch() + } + } + } + disconnectedCallback() { + this.removeEventListener('keyup', this.handleKeyup) + this.removeEventListener('change', this.handleChange) + } +}) + +//switch + +const smSwitch = document.createElement('template') +smSwitch.innerHTML = ` + +` + +customElements.define('sm-switch', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) + this.switch = this.shadowRoot.querySelector('.switch'); + this.input = this.shadowRoot.querySelector('input') + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.isDisabled + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } else { + this.removeAttribute('checked') + } + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: this.isChecked + } + })) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { + this.input.click() + } + }) + this.input.addEventListener('click', e => { + if (this.input.checked) + this.checked = true + else + this.checked = false + this.dispatch() + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.disabled = true + } + else { + this.disabled = false + } + } + else if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.isChecked = true + this.input.checked = true + } + else { + this.isChecked = false + this.input.checked = false + } + } + } + } + +}) + +// select +const smSelect = document.createElement('template') +smSelect.innerHTML = ` + +
    +
    +
    + + + +
    +
    + +
    +
    `; +customElements.define('sm-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + + collapse() { + this.chevron.classList.remove('rotate') + this.optionList.animate(this.slideUp, this.animationOptions) + .onfinish = () => { + this.optionList.classList.add('hide') + this.open = false + } + } + connectedCallback() { + this.availableOptions + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + let slot = this.shadowRoot.querySelector('.options slot'), + selection = this.shadowRoot.querySelector('.selection'), + previousOption + this.open = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)`, + opacity: 0 + }, + { + transform: `translateY(0)`, + opacity: 1 + } + ] + this.slideUp = [{ + transform: `translateY(0)`, + opacity: 1 + }, + { + transform: `translateY(-0.5rem)`, + opacity: 0 + } + ] + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + selection.addEventListener('click', e => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + selection.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.addEventListener('optionSelected', e => { + if (previousOption !== e.target) { + this.setAttribute('value', e.detail.value) + this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true, + detail: { + value: e.detail.value + } + })) + if (previousOption) { + previousOption.classList.remove('check-selected') + } + previousOption = e.target; + } + if (!e.detail.switching) + this.collapse() + + e.target.classList.add('check-selected') + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + if (this.availableOptions[0]) { + let firstElement = this.availableOptions[0]; + previousOption = firstElement; + firstElement.classList.add('check-selected') + this.setAttribute('value', firstElement.getAttribute('value')) + this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent + this.availableOptions.forEach((element, index) => { + element.setAttribute('data-rank', index + 1); + element.setAttribute('tabindex', "0"); + }) + } + }); + document.addEventListener('mousedown', e => { + if (!this.contains(e.target) && this.open) { + this.collapse() + } + }) + } +}) + +// option +const smOption = document.createElement('template') +smOption.innerHTML = ` + +
    + + + + +
    `; +customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) + } + + sendDetails(switching) { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value'), + switching: switching + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + let validKey = [ + 'ArrowUp', + 'ArrowDown', + 'ArrowLeft', + 'ArrowRight' + ] + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + if (validKey.includes(e.code)) { + e.preventDefault() + this.sendDetails(true) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +// strip select +const stripSelect = document.createElement('template') +stripSelect.innerHTML = ` + +
    +
    + +
    + +
    + +
    +
    + +` +customElements.define('strip-select', class extends HTMLElement{ + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(stripSelect.content.cloneNode(true)) + this.stripSelect = this.shadowRoot.querySelector('.strip-select') + this.slottedOptions + this._value + this.scrollDistance + } + get value() { + return this._value + } + scrollLeft = () => { + this.stripSelect.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.stripSelect.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }) + } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("change", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot') + const coverLeft = this.shadowRoot.querySelector('.cover--left') + const coverRight = this.shadowRoot.querySelector('.cover--right') + const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left') + const navButtonRight = this.shadowRoot.querySelector('.nav-button--right') + slot.addEventListener('slotchange', e => { + const assignedElements = slot.assignedElements() + assignedElements.forEach(elem => { + if (elem.hasAttribute('selected')) { + elem.setAttribute('active', '') + this._value = elem.value + } + }) + if (assignedElements.length > 0) { + firstOptionObserver.observe(slot.assignedElements()[0]) + lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]) + } + else { + navButtonLeft.classList.add('hide') + navButtonRight.classList.add('hide') + coverLeft.classList.add('hide') + coverRight.classList.add('hide') + firstOptionObserver.disconnect() + lastOptionObserver.disconnect() + } + }) + const resObs = new ResizeObserver(entries => { + entries.forEach(entry => { + if(entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + + this.scrollDistance = contentBoxSize.inlineSize * 0.6 + } else { + this.scrollDistance = entry.contentRect.width * 0.6 + } + }) + }) + resObs.observe(this) + this.stripSelect.addEventListener('option-clicked', e => { + if (this._value !== e.target.value) { + this._value = e.target.value + slot.assignedElements().forEach(elem => elem.removeAttribute('active')) + e.target.setAttribute('active', '') + e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }) + this.fireEvent() + } + }) + const firstOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonLeft.classList.add('hide') + coverLeft.classList.add('hide') + } + else { + navButtonLeft.classList.remove('hide') + coverLeft.classList.remove('hide') + } + }) + }, + { + threshold: 0.9, + root: this + }) + const lastOptionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navButtonRight.classList.add('hide') + coverRight.classList.add('hide') + } + else { + navButtonRight.classList.remove('hide') + coverRight.classList.remove('hide') + } + }) + }, + { + threshold: 0.9, + root: this + }) + navButtonLeft.addEventListener('click', this.scrollLeft) + navButtonRight.addEventListener('click', this.scrollRight) + } +}) + +const stripOption = document.createElement('template') +stripOption.innerHTML = ` + + +` + +//Strip option +customElements.define('strip-option', class extends HTMLElement{ + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(stripOption.content.cloneNode(true)) + this._value + this.radioButton = this.shadowRoot.querySelector('input') + } + get value() { + return this._value + } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("option-clicked", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } + handleKeyDown = (e) => { + if (e.key === 'Enter' || e.key === 'Space') { + this.fireEvent() + } + } + connectedCallback() { + this._value = this.getAttribute('value') + this.addEventListener('click', this.fireEvent) + this.addEventListener('keydown', this.handleKeyDown) + } + disconnectedCallback() { + this.removeEventListener('click', this.fireEvent) + this.removeEventListener('keydown', this.handleKeyDown) + } +}) + + +//popup +const smPopup = document.createElement('template') +smPopup.innerHTML = ` + + +`; +customElements.define('sm-popup', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)) + + this.allowClosing = false + this.isOpen = false + } + + get open() { + return this.isOpen + } + + resumeScrolling = () => { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.style.overflow = 'auto'; + document.body.style.top= 'initial' + }, 300); + } + + show = (pinned, popupStack) => { + if (popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1) { + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.setAttribute('open', '') + this.pinned = pinned + this.isOpen = true + } + this.popupContainer.classList.remove('hide') + this.popup.style.transform = 'none'; + document.body.style.overflow = 'hidden'; + document.body.style.top= `-${window.scrollY}px` + return this.popupStack + } + hide = () => { + if (window.innerWidth < 640) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'translateY(3rem)'; + this.popupContainer.classList.add('hide') + this.removeAttribute('open') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length) { + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } else { + this.resumeScrolling() + } + } else { + this.resumeScrolling() + } + + if (this.inputFields.length) { + setTimeout(() => { + this.inputFields.forEach(field => { + if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') + field.checked = false + if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA') + field.value = '' + }) + }, 300); + } + setTimeout(() => { + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.isOpen = false + }, 300); + } + + handleTouchStart = (e) => { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.1s' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) + } + /*else { + this.offset = this.touchStartY - e.changedTouches[0].clientY; + this.popup.style.transform = `translateY(-${this.offset}px)` + }*/ + } + + handleTouchEnd = (e) => { + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.3s' + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } else { + this.show() + } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.show() + return + } + else + this.hide() + } + } + + movePopup = () => { + this.popup.style.transform = `translateY(${this.offset}px)` + } + + connectedCallback() { + this.pinned = false + this.popupStack + this.popupContainer = this.shadowRoot.querySelector('.popup-container') + this.popup = this.shadowRoot.querySelector('.popup') + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') + this.offset + this.popupHeader = this.shadowRoot.querySelector('.popup-top') + this.touchStartY = 0 + this.touchEndY = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.touchEndAnimataion; + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + + if (this.hasAttribute('open')) + this.show() + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } + }) + + this.popupBodySlot.addEventListener('slotchange', () => { + setTimeout(() => { + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + }, 200); + this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio') + }) + + this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true}) + this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true}) + this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true}) + } + disconnectedCallback() { + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true}) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true}) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true}) + } +}) + +//carousel + +const smCarousel = document.createElement('template') +smCarousel.innerHTML = ` + +
    + +
    + +
    + +
    +
    +`; + +customElements.define('sm-carousel', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCarousel.content.cloneNode(true)) + + this.isAutoPlaying = false + this.autoPlayInterval = 5000 + this.autoPlayTimeout + this.initialTimeout + this.activeSlideNum = 0 + this.carouselItems + this.indicators + this.showIndicator = false + this.carousel = this.shadowRoot.querySelector('.carousel') + this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') + this.carouselSlot = this.shadowRoot.querySelector('slot') + this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right') + this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left') + this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') + } + + static get observedAttributes() { + return ['indicator', 'autoplay', 'interval'] + } + + scrollLeft = () => { + this.carousel.scrollBy({ + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.carousel.scrollBy({ + left: this.scrollDistance, + behavior: 'smooth' + }) + } + + handleIndicatorClick = (e) => { + if (e.target.closest('.dot')) { + const slideNum = parseInt(e.target.closest('.dot').dataset.rank) + if (this.activeSlideNum !== slideNum) { + this.showSlide(slideNum) + } + } + } + + showSlide = (slideNum) => { + this.carousel.scrollTo({ + left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft), + behavior: 'smooth' + }) + } + + nextSlide = () => { + if (!this.carouselItems) return + let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0 + this.showSlide(showSlideNo) + } + + autoPlay = () => { + this.nextSlide() + if (this.isAutoPlaying) { + this.autoPlayTimeout = setTimeout(() => { + this.autoPlay() + }, this.autoPlayInterval); + } + } + + startAutoPlay = () => { + this.setAttribute('autoplay', '') + } + + stopAutoPlay = () => { + this.removeAttribute('autoplay') + } + + connectedCallback() { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + let frag = document.createDocumentFragment(); + if (this.hasAttribute('indicator')) + this.showIndicator = true + + + let firstVisible = false, + lastVisible = false + const allElementsObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (this.showIndicator) { + const activeRank = parseInt(entry.target.dataset.rank) + if (entry.isIntersecting) { + this.indicators[activeRank].classList.add('active') + this.activeSlideNum = activeRank + } + else + this.indicators[activeRank].classList.remove('active') + } + if (!entry.target.previousElementSibling) + if (entry.isIntersecting) { + this.previousArrow.classList.remove('expand') + firstVisible = true + } + else { + this.previousArrow.classList.add('expand') + firstVisible = false + } + if (!entry.target.nextElementSibling) + if (entry.isIntersecting) { + this.nextArrow.classList.remove('expand') + lastVisible = true + } + else { + this.nextArrow.classList.add('expand') + lastVisible = false + } + if (firstVisible && lastVisible) + this.indicatorsContainer.classList.add('hide') + else + this.indicatorsContainer.classList.remove('hide') + }) + }, { + root: this.carouselContainer, + threshold: 0.9 + }) + + const carouselObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + } + }) + + carouselObserver.observe(this.carouselContainer) + + this.carouselSlot.addEventListener('slotchange', e => { + this.carouselItems = this.carouselSlot.assignedElements() + this.carouselItems.forEach(item => allElementsObserver.observe(item)) + if (this.showIndicator) { + this.indicatorsContainer.innerHTML = `` + this.carouselItems.forEach((item, index) => { + let dot = document.createElement('div') + dot.classList.add('dot') + dot.dataset.rank = index + frag.append(dot) + item.dataset.rank = index + }) + this.indicatorsContainer.append(frag) + this.indicators = this.indicatorsContainer.children + } + }) + + this.addEventListener('keyup', e => { + if (e.code === 'ArrowLeft') + this.scrollRight() + else if (e.code === 'ArrowRight') + this.scrollRight() + }) + + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) + this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick) + } + + async attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'indicator') { + if (this.hasAttribute('indicator')) + this.showIndicator = true + else + this.showIndicator = false + } + if (name === 'autoplay') { + if (this.hasAttribute('autoplay')) { + this.initialTimeout = setTimeout(() => { + this.isAutoPlaying = true + this.autoPlay() + }, this.autoPlayInterval); + } + else { + this.isAutoPlaying = false + clearTimeout(this.autoPlayTimeout) + clearTimeout(this.initialTimeout) + } + + } + if (name === 'interval') { + if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') { + this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim())) + } + else { + this.autoPlayInterval = 5000 + } + } + } + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) + this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick) + } +}) + +//notifications + +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
    +` + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + } + + handleTouchStart = (e) => { + this.notification = e.target.closest('.notification') + this.touchStartX = e.changedTouches[0].clientX + this.notification.style.transition = 'initial' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartX < e.changedTouches[0].clientX) { + this.offset = e.changedTouches[0].clientX - this.touchStartX; + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } else { + this.offset = -(this.touchStartX - e.changedTouches[0].clientX); + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } + } + + handleTouchEnd = (e) => { + this.notification.style.transition = 'transform 0.3s, opacity 0.3s' + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndX = e.changedTouches[0].clientX + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndX - this.touchStartX > this.threshold) { + this.removeNotification(this.notification) + } else if (this.touchStartX - this.touchEndX > this.threshold) { + this.removeNotification(this.notification, true) + } else { + this.resetPosition() + } + } else { + if (this.touchEndX > this.touchStartX) { + this.removeNotification(this.notification) + } else { + this.removeNotification(this.notification, true) + } + } + } + + movePopup = () => { + this.notification.style.transform = `translateX(${this.offset}px)` + } + + resetPosition = () => { + this.notification.style.transform = `translateX(0)` + } + + push = (messageBody, type, pinned) => { + let notification = document.createElement('div'), + composition = `` + notification.classList.add('notification') + if (pinned) + notification.classList.add('pinned') + if (type === 'error') { + composition += ` + + + + + ` + } else if (type === 'success') { + composition += ` + + + ` + } + composition += ` +

    ${messageBody}

    + + Close + + + ` + notification.innerHTML = composition + this.notificationPanel.prepend(notification) + if (window.innerWidth > 640) { + notification.animate([{ + transform: `translateX(1rem)`, + opacity: '0' + }, + { + transform: 'translateX(0)', + opacity: '1' + } + ], this.animationOptions).onfinish = () => { + notification.setAttribute('style', `transform: none;`); + } + } else { + notification.setAttribute('style', `transform: translateY(0); opacity: 1`) + } + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) + } + + removeNotification = (notification, toLeft) => { + if (!this.offset) + this.offset = 0; + + if (toLeft) + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(-100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + else { + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + } + + clearAll = () => { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "ease" + } + this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) + this.notification + this.offset + this.touchStartX = 0 + this.touchEndX = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 + this.touchEndAnimataion; + + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close'))( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + if (!mutation.addedNodes[0].classList.contains('pinned')) + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + if (window.innerWidth > 640) + this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; + else + this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + this.notificationPanel.style.padding = 0; + } + } + }) + }) + observer.observe(this.notificationPanel, { + attributes: true, + childList: true, + subtree: true + }) + } +}) + + + +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +
    +
    + + options + + + + +
    +
    + +
    +
    `; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand = () => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.classList.add('no-transformations') + this.open = true + this.icon.classList.add('focused') + this.availableOptions.forEach(option => { + option.setAttribute('tabindex', '0') + }) + } + } + collapse() { + if (this.open) { + this.open = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + this.optionList.classList.remove('no-transformations') + this.availableOptions.forEach(option => { + option.removeAttribute('tabindex') + }) + } + } + connectedCallback() { + this.availableOptions + this.containerDimensions + this.optionList = this.shadowRoot.querySelector('.options') + let slot = this.shadowRoot.querySelector('.options slot'), + menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + this.open = false; + menu.addEventListener('click', e => { + if (!this.open) { + this.expand() + } else { + this.collapse() + } + }) + menu.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + if (!this.open) { + this.expand() + } else { + this.collapse() + } + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.optionList.addEventListener('click', e => { + this.collapse() + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + }); + window.addEventListener('mousedown', e => { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + }) + } +}) + +// option +const smMenuOption = document.createElement('template') +smMenuOption.innerHTML = ` + +
    + +
    `; +customElements.define('sm-menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + } +}) + +// tab-header + +const smTabHeader = document.createElement('template') +smTabHeader.innerHTML = ` + +
    +
    + +
    +
    +
    +`; + +customElements.define('sm-tab-header', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) + + this.indicator = this.shadowRoot.querySelector('.indicator'); + this.tabSlot = this.shadowRoot.querySelector('slot'); + this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + } + + sendDetails(element) { + this.dispatchEvent( + new CustomEvent("switchtab", { + bubbles: true, + detail: { + target: this.target, + rank: parseInt(element.getAttribute('rank')) + } + }) + ) + } + + moveIndiactor(tabDimensions) { + //if(this.isTab) + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + //else + //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) + } + + connectedCallback() { + if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; + this.prevTab + this.allTabs + this.activeTab + this.isTab = false + this.target = this.getAttribute('target') + + if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { + this.isTab = true + } + + this.tabSlot.addEventListener('slotchange', () => { + this.tabSlot.assignedElements().forEach((tab, index) => { + tab.setAttribute('rank', index) + }) + }) + this.allTabs = this.tabSlot.assignedElements(); + + this.tabSlot.addEventListener('click', e => { + if (e.target === this.prevTab || !e.target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + e.target.classList.add('active') + + e.target.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center' + }) + this.moveIndiactor(e.target.getBoundingClientRect()) + this.sendDetails(e.target) + this.prevTab = e.target; + this.activeTab = e.target; + }) + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } + }) + }) + resizeObserver.observe(this) + let observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.indicator.style.transition = 'none' + if (this.activeTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } else { + this.allTabs[0].classList.add('active') + let tabDimensions = this.allTabs[0].getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + this.sendDetails(this.allTabs[0]) + this.prevTab = this.tabSlot.assignedElements()[0]; + this.activeTab = this.prevTab; + } + } + }) + }, { + threshold: 1.0 + }) + observer.observe(this) + } +}) + +// tab-panels + +const smTabPanels = document.createElement('template') +smTabPanels.innerHTML = ` + +
    + Nothing to see here. +
    +`; + +customElements.define('sm-tab-panels', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) + this.panelSlot = this.shadowRoot.querySelector('slot'); + } + connectedCallback() { + + //animations + let flyInLeft = [{ + opacity: 0, + transform: 'translateX(-1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyInRight = [{ + opacity: 0, + transform: 'translateX(1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyOutLeft = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(-1rem)' + } + ], + flyOutRight = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(1rem)' + } + ], + animationOptions = { + duration: 300, + fill: 'forwards', + easing: 'ease' + } + this.prevPanel + this.allPanels + this.previousRank + + this.panelSlot.addEventListener('slotchange', () => { + this.panelSlot.assignedElements().forEach((panel) => { + panel.classList.add('hide-completely') + }) + }) + this.allPanels = this.panelSlot.assignedElements() + this._targetBodyFlyRight = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInRight, animationOptions) + } + this._targetBodyFlyLeft = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInLeft, animationOptions) + } + document.addEventListener('switchtab', e => { + if (e.detail.target !== this.id) + return + + if (this.prevPanel) { + let targetBody = this.allPanels[e.detail.rank], + currentBody = this.prevPanel; + if (this.previousRank < e.detail.rank) { + if (currentBody && !targetBody) + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyRight(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyRight(targetBody) + } + } + } else { + if (currentBody && !targetBody) + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyLeft(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyLeft(targetBody) + } + } + } + } else { + this.allPanels[e.detail.rank].classList.remove('hide-completely') + } + this.previousRank = e.detail.rank + this.prevPanel = this.allPanels[e.detail.rank]; + }) + } +}) diff --git a/components.js b/components.js index 62b535b..c1e2b37 100644 --- a/components.js +++ b/components.js @@ -1,5 +1,3 @@ -/*jshint esversion: 6 */ -//Button const smButton = document.createElement('template') smButton.innerHTML = ` -`; +`; customElements.define('sm-button', class extends HTMLElement { constructor() { @@ -117,48 +104,452 @@ customElements.define('sm-button', mode: 'open' }).append(smButton.content.cloneNode(true)) } + static get observedAttributes() { + return ['disabled']; + } get disabled() { - return this.isDisabled + return this.hasAttribute('disabled') } set disabled(value) { - if (value && !this.isDisabled) { - this.isDisabled = true + if (value) { this.setAttribute('disabled', '') - this.button.removeAttribute('tabindex') - } else if (!value && this.isDisabled) { - this.isDisabled = false + }else { this.removeAttribute('disabled') } } - dispatch() { - if (this.isDisabled) { - this.dispatchEvent(new CustomEvent('disabled', { - bubbles: true, - composed: true - })) - } else { - this.dispatchEvent(new CustomEvent('clicked', { - bubbles: true, - composed: true - })) + handleKeyDown(e) { + if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.code === 'Space')) { + e.preventDefault() + this.click() } } connectedCallback() { - this.isDisabled = false - this.button = this.shadowRoot.querySelector('.button') - if (this.hasAttribute('disabled') && !this.isDisabled) - this.isDisabled = true - this.addEventListener('click', (e) => { - this.dispatch() - }) + if (!this.hasAttribute('disabled')) { + this.setAttribute('tabindex', '0') + } + this.setAttribute('role', 'button') + this.addEventListener('keydown', this.handleKeyDown) + } + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'disabled') { + this.removeAttribute('tabindex') + this.setAttribute('aria-disabled', 'true') + } + else { + this.setAttribute('tabindex', '0') + this.setAttribute('aria-disabled', 'false') + } } }) +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + + this.reset = this.reset.bind(this) + this.dispatch = this.dispatch.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleClick = this.handleClick.bind(this) + } + + static get observedAttributes() { + return ['value', 'disabled', 'checked'] + } + + get disabled() { + return this.hasAttribute('disabled') + } + + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + + get checked() { + return this.hasAttribute('checked') + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + + set value(val) { + this.setAttribute('value', val) + } + + get value() { + return this.getAttribute('value') + } + + reset() { + this.removeAttribute('checked') + } + + dispatch(){ + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + handleKeyDown(e){ + if (e.code === "Space") { + e.preventDefault() + this.click() + } + } + handleClick(e){ + this.toggleAttribute('checked') + } + + connectedCallback() { + if (!this.hasAttribute('disabled')) { + this.setAttribute('tabindex', '0') + } + this.setAttribute('role', 'checkbox') + if (!this.hasAttribute('checked')) { + this.setAttribute('aria-checked', 'false') + } + this.addEventListener('keydown', this.handleKeyDown) + this.addEventListener('click', this.handleClick) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'checked') { + this.setAttribute('aria-checked', this.hasAttribute('checked')) + this.dispatch() + } + else if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.removeAttribute('tabindex') + } + else { + this.setAttribute('tabindex', '0') + } + } + } + } + disconnectedCallback() { + this.removeEventListener('keydown', this.handleKeyDown) + this.removeEventListener('change', this.handleClick) + } +}) +const smCopy = document.createElement('template') +smCopy.innerHTML = ` + + +
    +

    + +
    +`; +customElements.define('sm-copy', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCopy.content.cloneNode(true)) + + this.copyContent = this.shadowRoot.querySelector('.copy-content') + this.copyButton = this.shadowRoot.querySelector('.copy-button') + + this.copy = this.copy.bind(this) + } + static get observedAttributes() { + return ['value'] + } + set value(val) { + this.setAttribute('value', val) + } + get value() { + return this.getAttribute('value') + } + fireEvent() { + this.dispatchEvent( + new CustomEvent('copy', { + composed: true, + bubbles: true, + cancelable: true, + }) + ) + } + copy() { + navigator.clipboard.writeText(this.copyContent.textContent) + .then(res => this.fireEvent()) + .catch(err => console.error(err)) + } + connectedCallback() { + this.copyButton.addEventListener('click', this.copy) + } + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'value') { + this.copyContent.textContent = newValue + } + } + disconnectedCallback() { + this.copyButton.removeEventListener('click', this.copy) + } + }) +const smForm = document.createElement('template') +smForm.innerHTML = ` + +
    + +
    +` + +customElements.define('sm-form', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smForm.content.cloneNode(true)) + + this.form = this.shadowRoot.querySelector('form') + this.formElements + this.requiredElements + this.submitButton + this.resetButton + this.allRequiredValid = false + + this.debounce = this.debounce.bind(this) + this.handleInput = this.handleInput.bind(this) + this.handleKeydown = this.handleKeydown.bind(this) + this.reset = this.reset.bind(this) + } + debounce(callback, wait) { + let timeoutId = null; + return (...args) => { + window.clearTimeout(timeoutId); + timeoutId = window.setTimeout(() => { + callback.apply(null, args); + }, wait); + }; + } + handleInput(e) { + this.allRequiredValid = this.requiredElements.every(elem => elem.isValid) + if (!this.submitButton) return; + if (this.allRequiredValid) { + this.submitButton.disabled = false; + } + else { + this.submitButton.disabled = true; + } + } + handleKeydown(e) { + if (e.key === 'Enter' && e.target.tagName !== 'SM-TEXTAREA' ) { + if (this.allRequiredValid) { + this.submitButton.click() + } + else { + this.requiredElements.find(elem => !elem.isValid).vibrate() + } + } + } + reset() { + this.formElements.forEach(elem => elem.reset()) + } + connectedCallback() { + const slot = this.shadowRoot.querySelector('slot') + slot.addEventListener('slotchange', e => { + this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')] + this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required')) + this.submitButton = e.target.assignedElements().find(elem => elem.getAttribute('variant') === 'primary' || elem.getAttribute('type') === 'submit'); + this.resetButton = e.target.assignedElements().find(elem => elem.getAttribute('type') === 'reset'); + if (this.resetButton) { + this.resetButton.addEventListener('click', this.reset) + } + }) + this.addEventListener('input', this.debounce(this.handleInput, 100)) + this.addEventListener('keydown', this.debounce(this.handleKeydown, 100)) + } + disconnectedCallback() { + this.removeEventListener('input', this.debounce(this.handleInput, 100)) + this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100)) + } +}) -//Input const smInput = document.createElement('template') smInput.innerHTML = ` +
    +
    + +
    +
    + +
    +
    `; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) -//textarea -const smTextarea = document.createElement('template') -smTextarea.innerHTML = ` + this.isOpen = false; + this.availableOptions + this.containerDimensions + this.animOptions = { + duration: 200, + easing: 'ease' + } + + this.optionList = this.shadowRoot.querySelector('.options') + this.menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + + this.expand = this.expand.bind(this) + this.collapse = this.collapse.bind(this) + this.toggle = this.toggle.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleClickoutSide = this.handleClickoutSide.bind(this) + + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand() { + if (!this.isOpen) { + this.optionList.classList.remove('hide') + this.optionList.animate([ + { + transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)', + opacity: '0' + }, + { + transform: 'none', + opacity: '1' + }, + ], this.animOptions) + .onfinish = () => { + this.isOpen = true + this.icon.classList.add('focused') + } + } + } + collapse() { + if (this.isOpen) { + this.optionList.animate([ + { + transform: 'none', + opacity: '1' + }, + { + transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)', + opacity: '0' + }, + ], this.animOptions) + .onfinish = () => { + this.isOpen = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + } + } + } + toggle() { + if (!this.isOpen) { + this.expand() + } else { + this.collapse() + } + } + handleKeyDown(e) { + // If key is pressed on menu button + if (e.target === this) { + if (e.code === 'ArrowDown') { + e.preventDefault() + this.availableOptions[0].focus() + } + else if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.toggle() + } + } else { // If mey is pressed over menu options + if (e.code === 'ArrowUp') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } else { + this.availableOptions[this.availableOptions.length - 1].focus() + } + } + else if (e.code === 'ArrowDown') { + e.preventDefault() + if (document.activeElement.nextElementSibling) { + document.activeElement.nextElementSibling.focus() + } else { + this.availableOptions[0].focus() + } + } + else if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + e.target.click() + } + } + } + handleClickoutSide(e) { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + } + connectedCallback() { + this.setAttribute('role', 'listbox') + this.setAttribute('aria-label', 'dropdown menu') + const slot = this.shadowRoot.querySelector('.options slot') + slot.addEventListener('slotchange', e => { + this.availableOptions = e.target.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + }); + this.addEventListener('click', this.toggle) + this.addEventListener('keydown', this.handleKeyDown) + document.addEventListener('mousedown', this.handleClickoutSide) + } + disconnectedCallback() { + this.removeEventListener('click', this.toggle) + this.removeEventListener('keydown', this.handleKeyDown) + document.removeEventListener('mousedown', this.handleClickoutSide) + } +}) + +// option +const menuOption = document.createElement('template') +menuOption.innerHTML = ` + +
    + +
    `; +customElements.define('menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(menuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.setAttribute('role', 'option') + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + } +}) +const smPopup = document.createElement('template') +smPopup.innerHTML = ` - -`; -customElements.define('sm-textarea', - class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smTextarea.content.cloneNode(true)) - this.textarea = this.shadowRoot.querySelector('textarea') - } - get value() { - return this.textarea.value - } - set value(val) { - this.textarea.value = val; - this.textareaBox.dataset.value = val - this.checkInput() - this.fireEvent() - } - focusIn = () => { - this.textarea.focus() - } - fireEvent() { - let event = new Event('input', { - bubbles: true, - cancelable: true, - composed: true - }); - this.dispatchEvent(event); - } - checkInput = () => { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') - return; - if (this.textarea.value !== '') { - this.placeholder.classList.add('hide') - } else { - this.placeholder.classList.remove('hide') - } - } - connectedCallback() { - this.textareaBox = this.shadowRoot.querySelector('.textarea') - this.placeholder = this.shadowRoot.querySelector('.placeholder') - - if(this.hasAttribute('placeholder')) - this.placeholder.textContent = this.getAttribute('placeholder') - - if (this.hasAttribute('value')) { - this.textarea.value = this.getAttribute('value') - this.checkInput() - } - if (this.hasAttribute('required')) { - this.textarea.setAttribute('required', '') - } - if (this.hasAttribute('readonly')) { - this.textarea.setAttribute('readonly', '') - } - if (this.hasAttribute('rows')) { - this.textarea.setAttribute('rows', this.getAttribute('rows')) - } - this.textarea.addEventListener('input', e => { - this.textareaBox.dataset.value = this.textarea.value - this.checkInput() - }) - } - }) - -// tab -const smTab = document.createElement('template') -smTab.innerHTML = ` - -
    - + `; - -customElements.define('sm-tab', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smTab.content.cloneNode(true)) - } -}) - -//chcekbox - -const smCheckbox = document.createElement('template') -smCheckbox.innerHTML = ` - -` -customElements.define('sm-checkbox', class extends HTMLElement { +customElements.define('sm-popup', class extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' - }).append(smCheckbox.content.cloneNode(true)) + }).append(smPopup.content.cloneNode(true)) - this.checkbox = this.shadowRoot.querySelector('.checkbox'); - this.input = this.shadowRoot.querySelector('input') + this.allowClosing = false + this.isOpen = false + this.pinned = false + this.popupStack + this.offset + this.touchStartY = 0 + this.touchEndY = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.touchEndAnimataion - this.isChecked = false - this.isDisabled = false + this.popupContainer = this.shadowRoot.querySelector('.popup-container') + this.popup = this.shadowRoot.querySelector('.popup') + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') + this.popupHeader = this.shadowRoot.querySelector('.popup-top') + + this.resumeScrolling = this.resumeScrolling.bind(this) + this.show = this.show.bind(this) + this.hide = this.hide.bind(this) + this.handleTouchStart = this.handleTouchStart.bind(this) + this.handleTouchMove = this.handleTouchMove.bind(this) + this.handleTouchEnd = this.handleTouchEnd.bind(this) + this.movePopup = this.movePopup.bind(this) } static get observedAttributes() { - return ['disabled', 'checked'] + return ['open']; } - get disabled() { - return this.isDisabled + get open() { + return this.isOpen } - set disabled(val) { - if (val) { - this.setAttribute('disabled', '') + resumeScrolling() { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.style.overflow = 'auto'; + document.body.style.top = 'initial' + }, 300); + } + + show(options = {}) { + const {pinned = false, popupStack = undefined} = options + if (popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1) { + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.setAttribute('open', '') + this.pinned = pinned + this.isOpen = true + } + this.popupContainer.classList.remove('hide') + this.popup.style.transform = 'none'; + document.body.style.overflow = 'hidden'; + document.body.style.top = `-${window.scrollY}px` + return this.popupStack + } + hide() { + if (window.innerWidth < 640) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'translateY(3rem)'; + this.popupContainer.classList.add('hide') + this.removeAttribute('open') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length) { + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } else { + this.resumeScrolling() + } } else { - this.removeAttribute('disabled') + this.resumeScrolling() + } + + if (this.forms.length) { + setTimeout(() => { + this.forms.forEach(form => form.reset()) + }, 300); + } + setTimeout(() => { + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.isOpen = false + }, 300); + } + + handleTouchStart(e) { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.1s' + this.touchStartTime = e.timeStamp + } + + handleTouchMove(e) { + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) } } - get checked() { - return this.isChecked - } - - set checked(value) { - if (value) { - this.setAttribute('checked', '') - } - else { - this.removeAttribute('checked') - } - } - - set value(val) { - this.val = val - this.setAttribute('value', value) - } - - get value() { - return getAttribute('value') - } - - dispatch = () => { - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true - })) - } - handleKeyup = e => { - if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { - if (this.hasAttribute('checked')) { - this.input.checked = false - this.removeAttribute('checked') - } - else { - this.input.checked = true - this.setAttribute('checked', '') + handleTouchEnd(e) { + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.3s' + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } else { + this.show() } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.show() + return + } + else + this.hide() } } - handleChange = e => { - if (this.input.checked) { - this.setAttribute('checked', '') - } - else { - this.removeAttribute('checked') - } + + movePopup() { + this.popup.style.transform = `translateY(${this.offset}px)` } - + connectedCallback() { - this.val = '' - this.addEventListener('keyup', this.handleKeyup) - this.input.addEventListener('change', this.handleChange) - } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'disabled') { - if (newValue === 'true') { - this.isDisabled = true + this.popupBodySlot.addEventListener('slotchange', () => { + this.forms = this.querySelectorAll('sm-form') + }) + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.show() + } else + this.hide() + } + }) + + const resizeObserver = new ResizeObserver(entries => { + for (let entry of entries) { + if (entry.contentBoxSize) { + // Firefox implements `contentBoxSize` as a single content rect, rather than an array + const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; + this.threshold = contentBoxSize.blockSize.height * 0.3 } else { - this.isDisabled = false + this.threshold = entry.contentRect.height * 0.3 } } - else if (name === 'checked') { - if (this.hasAttribute('checked')) { - this.isChecked = true - this.input.checked = true - } - else { - this.input.checked = false - this.isChecked = false - } - this.dispatch() - } - } + }); + resizeObserver.observe(this) + + + this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, { passive: true }) + this.popupHeader.addEventListener('touchmove', (e) => { this.handleTouchMove(e) }, { passive: true }) + this.popupHeader.addEventListener('touchend', (e) => { this.handleTouchEnd(e) }, { passive: true }) } disconnectedCallback() { - this.removeEventListener('keyup', this.handleKeyup) - this.removeEventListener('change', this.handleChange) + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true }) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true }) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true }) + resizeObserver.unobserve() + } + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'open') { + if (this.hasAttribute('open')) { + this.show() + } + } } }) -//switch - const smSwitch = document.createElement('template') smSwitch.innerHTML = ` -
    -
    -
    - - - -
    -
    - -
    -
    `; -customElements.define('sm-select', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smSelect.content.cloneNode(true)) +@keyframes load { + 50% { + stroke-dashoffset: 0; } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) + 100%{ + stroke-dashoffset: -180; } +} - collapse() { - this.chevron.classList.remove('rotate') - this.optionList.animate(this.slideUp, this.animationOptions) - .onfinish = () => { - this.optionList.classList.add('hide') - this.open = false - } - } - connectedCallback() { - this.availableOptions - this.optionList = this.shadowRoot.querySelector('.options') - this.chevron = this.shadowRoot.querySelector('.toggle') - let slot = this.shadowRoot.querySelector('.options slot'), - selection = this.shadowRoot.querySelector('.selection'), - previousOption - this.open = false; - this.slideDown = [{ - transform: `translateY(-0.5rem)`, - opacity: 0 - }, - { - transform: `translateY(0)`, - opacity: 1 - } - ] - this.slideUp = [{ - transform: `translateY(0)`, - opacity: 1 - }, - { - transform: `translateY(-0.5rem)`, - opacity: 0 - } - ] - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: 'ease' - } - selection.addEventListener('click', e => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - selection.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.animate(this.slideDown, this.animationOptions) - this.chevron.classList.add('rotate') - this.open = true - } else { - this.collapse() - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.addEventListener('optionSelected', e => { - if (previousOption !== e.target) { - this.setAttribute('value', e.detail.value) - this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; - this.dispatchEvent(new CustomEvent('change', { - bubbles: true, - composed: true, - detail: { - value: e.detail.value - } - })) - if (previousOption) { - previousOption.classList.remove('check-selected') - } - previousOption = e.target; - } - if (!e.detail.switching) - this.collapse() - - e.target.classList.add('check-selected') - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - if (this.availableOptions[0]) { - let firstElement = this.availableOptions[0]; - previousOption = firstElement; - firstElement.classList.add('check-selected') - this.setAttribute('value', firstElement.getAttribute('value')) - this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent - this.availableOptions.forEach((element, index) => { - element.setAttribute('data-rank', index + 1); - element.setAttribute('tabindex', "0"); - }) - } - }); - document.addEventListener('mousedown', e => { - if (!this.contains(e.target) && this.open) { - this.collapse() - } - }) - } -}) - -// option -const smOption = document.createElement('template') -smOption.innerHTML = ` - -
    - - - - -
    `; -customElements.define('sm-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smOption.content.cloneNode(true)) - } - - sendDetails(switching) { - let optionSelected = new CustomEvent('optionSelected', { - bubbles: true, - composed: true, - detail: { - text: this.textContent, - value: this.getAttribute('value'), - switching: switching - } - }) - this.dispatchEvent(optionSelected) - } - - connectedCallback() { - let validKey = [ - 'ArrowUp', - 'ArrowDown', - 'ArrowLeft', - 'ArrowRight' - ] - this.addEventListener('click', e => { - this.sendDetails() - }) - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.sendDetails(false) - } - if (validKey.includes(e.code)) { - e.preventDefault() - this.sendDetails(true) - } - }) - if (this.hasAttribute('default')) { - setTimeout(() => { - this.sendDetails() - }, 0); - } - } -}) - -// strip select -const stripSelect = document.createElement('template') -stripSelect.innerHTML = ` - -
    -
    - -
    - -
    - -
    -
    + ` -customElements.define('strip-select', class extends HTMLElement{ +class SquareLoader extends HTMLElement { constructor() { - super() + super(); this.attachShadow({ mode: 'open' - }).append(stripSelect.content.cloneNode(true)) - this.stripSelect = this.shadowRoot.querySelector('.strip-select') - this.slottedOptions - this._value - this.scrollDistance - } - get value() { - return this._value - } - scrollLeft = () => { - this.stripSelect.scrollBy({ - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.stripSelect.scrollBy({ - left: this.scrollDistance, - behavior: 'smooth' - }) - } - fireEvent = () => { - this.dispatchEvent( - new CustomEvent("change", { - bubbles: true, - composed: true, - detail: { - value: this._value - } - }) - ) - } - connectedCallback() { - const slot = this.shadowRoot.querySelector('slot') - const coverLeft = this.shadowRoot.querySelector('.cover--left') - const coverRight = this.shadowRoot.querySelector('.cover--right') - const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left') - const navButtonRight = this.shadowRoot.querySelector('.nav-button--right') - slot.addEventListener('slotchange', e => { - const assignedElements = slot.assignedElements() - assignedElements.forEach(elem => { - if (elem.hasAttribute('selected')) { - elem.setAttribute('active', '') - this._value = elem.value - } - }) - if (assignedElements.length > 0) { - firstOptionObserver.observe(slot.assignedElements()[0]) - lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]) - } - else { - navButtonLeft.classList.add('hide') - navButtonRight.classList.add('hide') - coverLeft.classList.add('hide') - coverRight.classList.add('hide') - firstOptionObserver.disconnect() - lastOptionObserver.disconnect() - } - }) - const resObs = new ResizeObserver(entries => { - entries.forEach(entry => { - if(entry.contentBoxSize) { - // Firefox implements `contentBoxSize` as a single content rect, rather than an array - const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; - - this.scrollDistance = contentBoxSize.inlineSize * 0.6 - } else { - this.scrollDistance = entry.contentRect.width * 0.6 - } - }) - }) - resObs.observe(this) - this.stripSelect.addEventListener('option-clicked', e => { - if (this._value !== e.target.value) { - this._value = e.target.value - slot.assignedElements().forEach(elem => elem.removeAttribute('active')) - e.target.setAttribute('active', '') - e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }) - this.fireEvent() - } - }) - const firstOptionObserver = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - navButtonLeft.classList.add('hide') - coverLeft.classList.add('hide') - } - else { - navButtonLeft.classList.remove('hide') - coverLeft.classList.remove('hide') - } - }) - }, - { - threshold: 0.9, - root: this - }) - const lastOptionObserver = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - navButtonRight.classList.add('hide') - coverRight.classList.add('hide') - } - else { - navButtonRight.classList.remove('hide') - coverRight.classList.remove('hide') - } - }) - }, - { - threshold: 0.9, - root: this - }) - navButtonLeft.addEventListener('click', this.scrollLeft) - navButtonRight.addEventListener('click', this.scrollRight) - } -}) - -const stripOption = document.createElement('template') -stripOption.innerHTML = ` - - -` - -//Strip option -customElements.define('strip-option', class extends HTMLElement{ - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(stripOption.content.cloneNode(true)) - this._value - this.radioButton = this.shadowRoot.querySelector('input') - } - get value() { - return this._value - } - fireEvent = () => { - this.dispatchEvent( - new CustomEvent("option-clicked", { - bubbles: true, - composed: true, - detail: { - value: this._value - } - }) - ) - } - handleKeyDown = (e) => { - if (e.key === 'Enter' || e.key === 'Space') { - this.fireEvent() - } - } - connectedCallback() { - this._value = this.getAttribute('value') - this.addEventListener('click', this.fireEvent) - this.addEventListener('keydown', this.handleKeyDown) - } - disconnectedCallback() { - this.removeEventListener('click', this.fireEvent) - this.removeEventListener('keydown', this.handleKeyDown) - } -}) - - -//popup -const smPopup = document.createElement('template') -smPopup.innerHTML = ` - - -`; -customElements.define('sm-popup', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smPopup.content.cloneNode(true)) - - this.allowClosing = false - this.isOpen = false - } - - get open() { - return this.isOpen - } - - resumeScrolling = () => { - const scrollY = document.body.style.top; - window.scrollTo(0, parseInt(scrollY || '0') * -1); - setTimeout(() => { - document.body.style.overflow = 'auto'; - document.body.style.top= 'initial' - }, 300); - } - - show = (pinned, popupStack) => { - if (popupStack) - this.popupStack = popupStack - if (this.popupStack && !this.hasAttribute('open')) { - this.popupStack.push({ - popup: this, - permission: pinned - }) - if (this.popupStack.items.length > 1) { - this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') - } - this.dispatchEvent( - new CustomEvent("popupopened", { - bubbles: true, - detail: { - popup: this, - popupStack: this.popupStack - } - }) - ) - this.setAttribute('open', '') - this.pinned = pinned - this.isOpen = true - } - this.popupContainer.classList.remove('hide') - this.popup.style.transform = 'none'; - document.body.style.overflow = 'hidden'; - document.body.style.top= `-${window.scrollY}px` - return this.popupStack - } - hide = () => { - if (window.innerWidth < 640) - this.popup.style.transform = 'translateY(100%)'; - else - this.popup.style.transform = 'translateY(3rem)'; - this.popupContainer.classList.add('hide') - this.removeAttribute('open') - if (typeof this.popupStack !== 'undefined') { - this.popupStack.pop() - if (this.popupStack.items.length) { - this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') - } else { - this.resumeScrolling() - } - } else { - this.resumeScrolling() - } - - if (this.inputFields.length) { - setTimeout(() => { - this.inputFields.forEach(field => { - if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') - field.checked = false - if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA') - field.value = '' - }) - }, 300); - } - setTimeout(() => { - this.dispatchEvent( - new CustomEvent("popupclosed", { - bubbles: true, - detail: { - popup: this, - popupStack: this.popupStack - } - }) - ) - this.isOpen = false - }, 300); - } - - handleTouchStart = (e) => { - this.touchStartY = e.changedTouches[0].clientY - this.popup.style.transition = 'transform 0.1s' - this.touchStartTime = e.timeStamp - } - - handleTouchMove = (e) => { - if (this.touchStartY < e.changedTouches[0].clientY) { - this.offset = e.changedTouches[0].clientY - this.touchStartY; - this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) - } - /*else { - this.offset = this.touchStartY - e.changedTouches[0].clientY; - this.popup.style.transform = `translateY(-${this.offset}px)` - }*/ - } - - handleTouchEnd = (e) => { - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndY = e.changedTouches[0].clientY - this.popup.style.transition = 'transform 0.3s' - this.threshold = this.popup.getBoundingClientRect().height * 0.3 - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndY - this.touchStartY > this.threshold) { - if (this.pinned) { - this.show() - return - } else - this.hide() - } else { - this.show() - } - } else { - if (this.touchEndY > this.touchStartY) - if (this.pinned) { - this.show() - return - } - else - this.hide() - } - } - - movePopup = () => { - this.popup.style.transform = `translateY(${this.offset}px)` - } - - connectedCallback() { - this.pinned = false - this.popupStack - this.popupContainer = this.shadowRoot.querySelector('.popup-container') - this.popup = this.shadowRoot.querySelector('.popup') - this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') - this.offset - this.popupHeader = this.shadowRoot.querySelector('.popup-top') - this.touchStartY = 0 - this.touchEndY = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.touchEndAnimataion; - this.threshold = this.popup.getBoundingClientRect().height * 0.3 - - if (this.hasAttribute('open')) - this.show() - this.popupContainer.addEventListener('mousedown', e => { - if (e.target === this.popupContainer && !this.pinned) { - if (this.pinned) { - this.show() - return - } else - this.hide() - } - }) - - this.popupBodySlot.addEventListener('slotchange', () => { - setTimeout(() => { - this.threshold = this.popup.getBoundingClientRect().height * 0.3 - }, 200); - this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio') - }) - - this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true}) - this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true}) - this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true}) - } - disconnectedCallback() { - this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true}) - this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true}) - this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true}) - } -}) - -//carousel - -const smCarousel = document.createElement('template') -smCarousel.innerHTML = ` - -
    - -
    - -
    - -
    -
    -`; - -customElements.define('sm-carousel', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smCarousel.content.cloneNode(true)) - - this.isAutoPlaying = false - this.autoPlayInterval = 5000 - this.autoPlayTimeout - this.initialTimeout - this.activeSlideNum = 0 - this.carouselItems - this.indicators - this.showIndicator = false - this.carousel = this.shadowRoot.querySelector('.carousel') - this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') - this.carouselSlot = this.shadowRoot.querySelector('slot') - this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right') - this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left') - this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') - } - - static get observedAttributes() { - return ['indicator', 'autoplay', 'interval'] - } - - scrollLeft = () => { - this.carousel.scrollBy({ - left: -this.scrollDistance, - behavior: 'smooth' - }) - } - - scrollRight = () => { - this.carousel.scrollBy({ - left: this.scrollDistance, - behavior: 'smooth' - }) - } - - handleIndicatorClick = (e) => { - if (e.target.closest('.dot')) { - const slideNum = parseInt(e.target.closest('.dot').dataset.rank) - if (this.activeSlideNum !== slideNum) { - this.showSlide(slideNum) - } - } - } - - showSlide = (slideNum) => { - this.carousel.scrollTo({ - left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft), - behavior: 'smooth' - }) - } - - nextSlide = () => { - if (!this.carouselItems) return - let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0 - this.showSlide(showSlideNo) - } - - autoPlay = () => { - this.nextSlide() - if (this.isAutoPlaying) { - this.autoPlayTimeout = setTimeout(() => { - this.autoPlay() - }, this.autoPlayInterval); - } - } - - startAutoPlay = () => { - this.setAttribute('autoplay', '') - } - - stopAutoPlay = () => { - this.removeAttribute('autoplay') - } - - connectedCallback() { - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - let frag = document.createDocumentFragment(); - if (this.hasAttribute('indicator')) - this.showIndicator = true - - - let firstVisible = false, - lastVisible = false - const allElementsObserver = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (this.showIndicator) { - const activeRank = parseInt(entry.target.dataset.rank) - if (entry.isIntersecting) { - this.indicators[activeRank].classList.add('active') - this.activeSlideNum = activeRank - } - else - this.indicators[activeRank].classList.remove('active') - } - if (!entry.target.previousElementSibling) - if (entry.isIntersecting) { - this.previousArrow.classList.remove('expand') - firstVisible = true - } - else { - this.previousArrow.classList.add('expand') - firstVisible = false - } - if (!entry.target.nextElementSibling) - if (entry.isIntersecting) { - this.nextArrow.classList.remove('expand') - lastVisible = true - } - else { - this.nextArrow.classList.add('expand') - lastVisible = false - } - if (firstVisible && lastVisible) - this.indicatorsContainer.classList.add('hide') - else - this.indicatorsContainer.classList.remove('hide') - }) - }, { - root: this.carouselContainer, - threshold: 0.9 - }) - - const carouselObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 - } - }) - - carouselObserver.observe(this.carouselContainer) - - this.carouselSlot.addEventListener('slotchange', e => { - this.carouselItems = this.carouselSlot.assignedElements() - this.carouselItems.forEach(item => allElementsObserver.observe(item)) - if (this.showIndicator) { - this.indicatorsContainer.innerHTML = `` - this.carouselItems.forEach((item, index) => { - let dot = document.createElement('div') - dot.classList.add('dot') - dot.dataset.rank = index - frag.append(dot) - item.dataset.rank = index - }) - this.indicatorsContainer.append(frag) - this.indicators = this.indicatorsContainer.children - } - }) - - this.addEventListener('keyup', e => { - if (e.code === 'ArrowLeft') - this.scrollRight() - else if (e.code === 'ArrowRight') - this.scrollRight() - }) - - this.nextArrow.addEventListener('click', this.scrollRight) - this.previousArrow.addEventListener('click', this.scrollLeft) - this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick) - } - - async attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - if (name === 'indicator') { - if (this.hasAttribute('indicator')) - this.showIndicator = true - else - this.showIndicator = false - } - if (name === 'autoplay') { - if (this.hasAttribute('autoplay')) { - this.initialTimeout = setTimeout(() => { - this.isAutoPlaying = true - this.autoPlay() - }, this.autoPlayInterval); - } - else { - this.isAutoPlaying = false - clearTimeout(this.autoPlayTimeout) - clearTimeout(this.initialTimeout) - } - - } - if (name === 'interval') { - if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') { - this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim())) - } - else { - this.autoPlayInterval = 5000 - } - } - } - } - - disconnectedCallback() { - this.nextArrow.removeEventListener('click', this.scrollRight) - this.previousArrow.removeEventListener('click', this.scrollLeft) - this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick) - } -}) - -//notifications - -const smNotifications = document.createElement('template') -smNotifications.innerHTML = ` - -
    -` - -customElements.define('sm-notifications', class extends HTMLElement { - constructor() { - super() - this.shadow = this.attachShadow({ - mode: 'open' - }).append(smNotifications.content.cloneNode(true)) - } - - handleTouchStart = (e) => { - this.notification = e.target.closest('.notification') - this.touchStartX = e.changedTouches[0].clientX - this.notification.style.transition = 'initial' - this.touchStartTime = e.timeStamp - } - - handleTouchMove = (e) => { - e.preventDefault() - if (this.touchStartX < e.changedTouches[0].clientX) { - this.offset = e.changedTouches[0].clientX - this.touchStartX; - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } else { - this.offset = -(this.touchStartX - e.changedTouches[0].clientX); - this.touchEndAnimataion = requestAnimationFrame(this.movePopup) - } - } - - handleTouchEnd = (e) => { - this.notification.style.transition = 'transform 0.3s, opacity 0.3s' - this.touchEndTime = e.timeStamp - cancelAnimationFrame(this.touchEndAnimataion) - this.touchEndX = e.changedTouches[0].clientX - if (this.touchEndTime - this.touchStartTime > 200) { - if (this.touchEndX - this.touchStartX > this.threshold) { - this.removeNotification(this.notification) - } else if (this.touchStartX - this.touchEndX > this.threshold) { - this.removeNotification(this.notification, true) - } else { - this.resetPosition() - } - } else { - if (this.touchEndX > this.touchStartX) { - this.removeNotification(this.notification) - } else { - this.removeNotification(this.notification, true) - } - } - } - - movePopup = () => { - this.notification.style.transform = `translateX(${this.offset}px)` - } - - resetPosition = () => { - this.notification.style.transform = `translateX(0)` - } - - push = (messageBody, type, pinned) => { - let notification = document.createElement('div'), - composition = `` - notification.classList.add('notification') - if (pinned) - notification.classList.add('pinned') - if (type === 'error') { - composition += ` - - - - - ` - } else if (type === 'success') { - composition += ` - - - ` - } - composition += ` -

    ${messageBody}

    - - Close - - - ` - notification.innerHTML = composition - this.notificationPanel.prepend(notification) - if (window.innerWidth > 640) { - notification.animate([{ - transform: `translateX(1rem)`, - opacity: '0' - }, - { - transform: 'translateX(0)', - opacity: '1' - } - ], this.animationOptions).onfinish = () => { - notification.setAttribute('style', `transform: none;`); - } - } else { - notification.setAttribute('style', `transform: translateY(0); opacity: 1`) - } - notification.addEventListener('touchstart', this.handleTouchStart) - notification.addEventListener('touchmove', this.handleTouchMove) - notification.addEventListener('touchend', this.handleTouchEnd) - } - - removeNotification = (notification, toLeft) => { - if (!this.offset) - this.offset = 0; - - if (toLeft) - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(-100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - else { - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - } - } - - clearAll = () => { - Array.from(this.notificationPanel.children).forEach(child => { - this.removeNotification(child) - }) - } - - connectedCallback() { - this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: "ease" - } - this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) - this.notification - this.offset - this.touchStartX = 0 - this.touchEndX = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 - this.touchEndAnimataion; - - this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close'))( - this.removeNotification(e.target.closest('.notification')) - ) - }) - - const observer = new MutationObserver(mutationList => { - mutationList.forEach(mutation => { - if (mutation.type === 'childList') { - if (mutation.addedNodes.length) { - if (!mutation.addedNodes[0].classList.contains('pinned')) - setTimeout(() => { - this.removeNotification(mutation.addedNodes[0]) - }, 5000); - if (window.innerWidth > 640) - this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; - else - this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; - } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { - this.notificationPanel.style.padding = 0; - } - } - }) - }) - observer.observe(this.notificationPanel, { - attributes: true, - childList: true, - subtree: true - }) - } -}) - - - -// sm-menu -const smMenu = document.createElement('template') -smMenu.innerHTML = ` - -
    -
    - - options - - - - -
    -
    - -
    -
    `; -customElements.define('sm-menu', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smMenu.content.cloneNode(true)) - } - static get observedAttributes() { - return ['value'] - } - get value() { - return this.getAttribute('value') - } - set value(val) { - this.setAttribute('value', val) - } - expand = () => { - if (!this.open) { - this.optionList.classList.remove('hide') - this.optionList.classList.add('no-transformations') - this.open = true - this.icon.classList.add('focused') - this.availableOptions.forEach(option => { - option.setAttribute('tabindex', '0') - }) - } - } - collapse() { - if (this.open) { - this.open = false - this.icon.classList.remove('focused') - this.optionList.classList.add('hide') - this.optionList.classList.remove('no-transformations') - this.availableOptions.forEach(option => { - option.removeAttribute('tabindex') - }) - } - } - connectedCallback() { - this.availableOptions - this.containerDimensions - this.optionList = this.shadowRoot.querySelector('.options') - let slot = this.shadowRoot.querySelector('.options slot'), - menu = this.shadowRoot.querySelector('.menu') - this.icon = this.shadowRoot.querySelector('.icon') - this.open = false; - menu.addEventListener('click', e => { - if (!this.open) { - this.expand() - } else { - this.collapse() - } - }) - menu.addEventListener('keydown', e => { - if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { - e.preventDefault() - this.availableOptions[0].focus() - } - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - if (!this.open) { - this.expand() - } else { - this.collapse() - } - } - }) - this.optionList.addEventListener('keydown', e => { - if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { - e.preventDefault() - if (document.activeElement.previousElementSibling) { - document.activeElement.previousElementSibling.focus() - } - } - if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { - e.preventDefault() - if (document.activeElement.nextElementSibling) - document.activeElement.nextElementSibling.focus() - } - }) - this.optionList.addEventListener('click', e => { - this.collapse() - }) - slot.addEventListener('slotchange', e => { - this.availableOptions = slot.assignedElements() - this.containerDimensions = this.optionList.getBoundingClientRect() - }); - window.addEventListener('mousedown', e => { - if (!this.contains(e.target) && e.button !== 2) { - this.collapse() - } - }) - } -}) - -// option -const smMenuOption = document.createElement('template') -smMenuOption.innerHTML = ` - -
    - -
    `; -customElements.define('sm-menu-option', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(smMenuOption.content.cloneNode(true)) - } - - connectedCallback() { - this.addEventListener('keyup', e => { - if (e.code === 'Enter' || e.code === 'Space') { - e.preventDefault() - this.click() - } - }) - } -}) - -// tab-header +window.customElements.define('sm-spinner', SquareLoader); const smTabHeader = document.createElement('template') smTabHeader.innerHTML = ` +
    + +
    +`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } }) // tab-panels @@ -3505,21 +2274,27 @@ smTabPanels.innerHTML = ` display: flex; width: 100%; height: 100%; - overflow: hidden auto; + overflow: hidden; + scroll-snap-type: x mandatory; + content-visibility: auto; } -slot::slotted(.hide-completely){ - display: none; +::slotted(*){ + min-width: 100%; + scroll-snap-align: center; } -@media (hover: none){ - .tab-header::-webkit-scrollbar-track { - -webkit-box-shadow: none !important; - background-color: transparent !important; +@media (any-hover: none) { + .panel-container{ + overflow-x: auto; + scrollbar-width: none; } - .tab-header::-webkit-scrollbar { + .container { + overflow-y: scroll; + } + ::-webkit-scrollbar { + width: 0; height: 0; - background-color: transparent; } -} +}
    Nothing to see here. @@ -3532,109 +2307,697 @@ customElements.define('sm-tab-panels', class extends HTMLElement { this.attachShadow({ mode: 'open' }).append(smTabPanels.content.cloneNode(true)) - this.panelSlot = this.shadowRoot.querySelector('slot'); + + this.isTransitioning = false + + this.panelContainer = this.shadowRoot.querySelector('.panel-container'); + this.handleTabChange = this.handleTabChange.bind(this) + } + handleTabChange(e) { + this.isTransitioning = true + this.panelContainer.scrollTo({ + left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft, + behavior: 'smooth' + }) + setTimeout(() => { + this.isTransitioning = false + }, 300); + } + fireEvent(index) { + this.dispatchEvent( + new CustomEvent(`switchedpanel${this.id}`, { + bubbles: true, + detail: { + index: parseInt(index) + } + }) + ) } connectedCallback() { - - //animations - let flyInLeft = [{ - opacity: 0, - transform: 'translateX(-1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyInRight = [{ - opacity: 0, - transform: 'translateX(1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyOutLeft = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(-1rem)' - } - ], - flyOutRight = [{ - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(1rem)' - } - ], - animationOptions = { - duration: 300, - fill: 'forwards', - easing: 'ease' - } - this.prevPanel - this.allPanels - this.previousRank - - this.panelSlot.addEventListener('slotchange', () => { - this.panelSlot.assignedElements().forEach((panel) => { - panel.classList.add('hide-completely') + const slot = this.shadowRoot.querySelector('slot'); + slot.addEventListener('slotchange', (e) => { + this.allPanels = e.target.assignedElements() + this.allPanels.forEach((panel, index) => { + panel.dataset.index = index + intersectionObserver.observe(panel) }) }) - this.allPanels = this.panelSlot.assignedElements() - this._targetBodyFlyRight = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInRight, animationOptions) - } - this._targetBodyFlyLeft = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInLeft, animationOptions) - } - document.addEventListener('switchtab', e => { - if (e.detail.target !== this.id) - return + document.addEventListener(`switchedtab${this.id}`, this.handleTabChange) - if (this.prevPanel) { - let targetBody = this.allPanels[e.detail.rank], - currentBody = this.prevPanel; - if (this.previousRank < e.detail.rank) { - if (currentBody && !targetBody) - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyRight(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyRight(targetBody) - } - } - } else { - if (currentBody && !targetBody) - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyLeft(targetBody) - } else if (currentBody && targetBody) { - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyLeft(targetBody) - } - } + const intersectionObserver = new IntersectionObserver(entries => { + + entries.forEach(entry => { + if (!this.isTransitioning && entry.isIntersecting) { + this.fireEvent(entry.target.dataset.index) } - } else { - this.allPanels[e.detail.rank].classList.remove('hide-completely') - } - this.previousRank = e.detail.rank - this.prevPanel = this.allPanels[e.detail.rank]; + }) + }, { + threshold: 0.6 }) } + disconnectedCallback() { + intersectionObserver.disconnect() + document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange) + } }) + +const themeToggle = document.createElement('template') +themeToggle.innerHTML = ` + + +` + +class ThemeToggle extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ + mode: 'open' + }).append(themeToggle.content.cloneNode(true)) + + this.isChecked = false + this.hasTheme = 'light' + + this.toggleState = this.toggleState.bind(this) + this.fireEvent = this.fireEvent.bind(this) + this.handleThemeChange = this.handleThemeChange.bind(this) + } + static get observedAttributes() { + return ['checked']; + } + + daylight() { + this.hasTheme = 'light' + document.body.dataset.theme = 'light' + this.setAttribute('aria-checked', 'false') + } + + nightlight() { + this.hasTheme = 'dark' + document.body.dataset.theme = 'dark' + this.setAttribute('aria-checked', 'true') + } + + toggleState() { + this.toggleAttribute('checked') + this.fireEvent() + } + handleKeyDown(e) { + if (e.code === 'Space') { + this.toggleState() + } + } + handleThemeChange(e) { + if (e.detail.theme !== this.hasTheme) { + if (e.detail.theme === 'dark') { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + } + + fireEvent() { + this.dispatchEvent( + new CustomEvent('themechange', { + bubbles: true, + composed: true, + detail: { + theme: this.hasTheme + } + }) + ) + } + + connectedCallback() { + this.setAttribute('role', 'switch') + this.setAttribute('aria-label', 'theme toggle') + if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") { + this.nightlight(); + this.setAttribute('checked', '') + } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") { + this.daylight(); + this.removeAttribute('checked') + } + else { + if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) { + this.nightlight(); + this.setAttribute('checked', '') + } else { + this.daylight(); + this.removeAttribute('checked') + } + } + this.addEventListener("click", this.toggleState); + this.addEventListener("keydown", this.handleKeyDown); + document.addEventListener('themechange', this.handleThemeChange) + } + + disconnectedCallback() { + this.removeEventListener("click", this.toggleState); + this.removeEventListener("keydown", this.handleKeyDown); + document.removeEventListener('themechange', this.handleThemeChange) + } + + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'checked') { + if (this.hasAttribute('checked')) { + this.nightlight(); + localStorage.setItem(`${window.location.hostname}-theme`, "dark"); + } else { + this.daylight(); + localStorage.setItem(`${window.location.hostname}-theme`, "light"); + } + } + } +} + +window.customElements.define('theme-toggle', ThemeToggle); + +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + + this.textarea = this.shadowRoot.querySelector('textarea') + this.textareaBox = this.shadowRoot.querySelector('.textarea') + this.placeholder = this.shadowRoot.querySelector('.placeholder') + this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength'] + + this.reset = this.reset.bind(this) + this.focusIn = this.focusIn.bind(this) + this.fireEvent = this.fireEvent.bind(this) + this.checkInput = this.checkInput.bind(this) + } + static get observedAttributes() { + return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength'] + } + get value() { + return this.textarea.value + } + set value(val) { + this.setAttribute('value', val) + this.fireEvent() + } + get disabled() { + return this.hasAttribute('disabled') + } + set disabled(val) { + if (val) { + this.setAttribute('disabled', '') + } else { + this.removeAttribute('disabled') + } + } + get isValid() { + return this.textarea.checkValidity() + } + reset(){ + this.setAttribute('value', '') + } + focusIn(){ + this.textarea.focus() + } + fireEvent(){ + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + checkInput(){ + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.textarea.value !== '') { + this.placeholder.classList.add('hide') + } else { + this.placeholder.classList.remove('hide') + } + } + connectedCallback() { + this.textarea.addEventListener('input', e => { + this.textareaBox.dataset.value = this.textarea.value + this.checkInput() + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (this.reflectedAttributes.includes(name)) { + if (this.hasAttribute(name)) { + this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '') + } + else { + this.textContent.removeAttribute(name) + } + } + else if (name === 'placeholder') { + this.placeholder.textContent = this.getAttribute('placeholder') + } + else if (name === 'value') { + this.textarea.value = newValue; + this.textareaBox.dataset.value = newValue + this.checkInput() + } + } + }) + const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
    +` + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" + } + + this.push = this.push.bind(this) + this.createNotification = this.createNotification.bind(this) + this.removeNotification = this.removeNotification.bind(this) + this.clearAll = this.clearAll.bind(this) + + } + + randString(length) { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < length; i++) + result += characters.charAt(Math.floor(Math.random() * characters.length)); + return result; + } + + createNotification(message, options) { + const { pinned = false, icon = '' } = options + const notification = document.createElement('div') + notification.id = this.randString(8) + notification.classList.add('notification') + let composition = `` + composition += ` +
    ${icon}
    +

    ${message}

    + ` + if (pinned) { + notification.classList.add('pinned') + composition += ` + + ` + } + notification.innerHTML = composition + return notification + } + + push(message, options = {}) { + const notification = this.createNotification(message, options) + this.notificationPanel.append(notification) + notification.animate([ + { + transform: `translateY(1rem)`, + opacity: '0' + }, + { + transform: `none`, + opacity: '1' + }, + ], this.animationOptions) + return notification.id + } + + removeNotification(notification) { + notification.animate([ + { + transform: `none`, + opacity: '1' + }, + { + transform: `translateY(0.5rem)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + + clearAll() { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close')) ( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) { + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + } + } + }) + }) + observer.observe(this.notificationPanel, { + childList: true, + }) + } +}) \ No newline at end of file diff --git a/css/main.css b/css/main.css index 8829112..b3999fc 100644 --- a/css/main.css +++ b/css/main.css @@ -9,145 +9,78 @@ font-size: clamp(1rem, 1.2vmax, 3rem); } -html, body { +html, +body { height: 100%; scroll-behavior: smooth; } body { - --accent-color: #1976D2; - --light-shade: rgba(var(--text-color), 0.06); - --text-color: 17, 17, 17; - --text-color-light: 100, 100, 100; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --error-color: red; color: rgba(var(--text-color), 1); - background: var(--background-color); - display: flex; - flex-direction: column; + background: rgba(var(--background-color), 1); +} +body, +body * { + --accent-color: #5D54A4; + --text-color: 17, 17, 17; + --background-color: 246, 246, 246; + --foreground-color: white; + --danger-color: red; } -body[data-theme=dark] { - --accent-color: #42A5F5; +body[data-theme=dark], +body[data-theme=dark] * { + --accent-color: #9D65C9; --text-color: 240, 240, 240; --text-color-light: 170, 170, 170; - --foreground-color: 20, 20, 20; - --background-color: #0a0a0a; - --error-color: rgb(255, 106, 106); -} - -/* h1,h2,h3,h4,h5,h6{ - font-family: 'Montserrat', sans-serif; -} */ -.full-bleed { - grid-column: 1/4; -} - -.h1 { - font-size: 2.5rem; -} - -.h2 { - font-size: 2rem; -} - -.h3 { - font-size: 1.4rem; -} - -.h4 { - font-size: 1rem; -} - -.h5 { - font-size: 0.8rem; -} - -.uppercase { - text-transform: uppercase; -} - -.capitalize { - text-transform: capitalize; + --background-color: 10, 10, 10; + --foreground-color: rgb(20, 20, 20); + --danger-color: rgb(255, 106, 106); } p { - font-size: 0.8; - max-width: 60ch; + max-width: 65ch; line-height: 1.7; color: rgba(var(--text-color), 0.8); } p:not(:last-of-type) { - margin-bottom: 1rem; + margin-bottom: 1.5rem; } img { object-fit: cover; } -a { +a:where([class]) { color: inherit; text-decoration: none; } -a:focus-visible { +a:where([class]):focus-visible { box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; } button { position: relative; display: inline-flex; - overflow: hidden; - align-items: center; - background: none; - cursor: pointer; - outline: none; - color: inherit; - font-size: 0.9rem; - font-weight: 500; - border-radius: 0.2rem; - padding: 0.5rem 0.6rem; - -webkit-tap-highlight-color: transparent; border: none; -} - -button:focus-visible { - outline: rgba(var(--text-color), 1) 0.1rem solid; -} - -a.button:any-link { - position: relative; - display: inline-flex; - align-items: center; - background: none; - cursor: pointer; - outline: none; - font-weight: 500; - font-size: 0.8rem; - border-radius: 0.3rem; - padding: 0.5rem 0.6rem; - align-self: flex-start; - text-decoration: none; - color: rgba(var(--text-color), 0.7); - -webkit-tap-highlight-color: transparent; - background-color: rgba(var(--text-color), 0.06); -} -a.button:any-link .icon { - margin-right: 0.3rem; - height: 1.2rem; + background-color: transparent; + overflow: hidden; + color: inherit; } a:any-link:focus-visible { outline: rgba(var(--text-color), 1) 0.1rem solid; } -.button { - background-color: rgba(var(--text-color), 0.06); -} - sm-button { --border-radius: 0.3rem; } +sm-button[variant=primary] .icon { + fill: rgba(var(--background-color), 1); +} +sm-button[disabled] .icon { + fill: rgba(var(--text-color), 0.6); +} ul { list-style: none; @@ -192,6 +125,38 @@ ul { hyphens: auto; } +.full-bleed { + grid-column: 1/4; +} + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + .flex { display: flex; } @@ -200,6 +165,10 @@ ul { display: grid; } +.grid-3 { + grid-template-columns: 1fr auto auto; +} + .flow-column { grid-auto-flow: column; } @@ -264,6 +233,10 @@ ul { justify-self: start; } +.justify-self-end { + justify-self: end; +} + .direction-column { flex-direction: column; } @@ -276,6 +249,18 @@ ul { width: 100%; } +.color-0-8 { + color: rgba(var(--text-color), 0.8); +} + +.weight-400 { + font-weight: 400; +} + +.weight-500 { + font-weight: 500; +} + .ripple { position: absolute; border-radius: 50%; @@ -316,20 +301,6 @@ ul { margin-left: 0.5rem; } -.popup__header { - display: grid; - gap: 0.5rem; - width: 100%; - padding: 0 1.5rem 0 0.5rem; - align-items: center; - grid-template-columns: auto 1fr; -} - -.popup__header__close { - padding: 0.5rem; - cursor: pointer; -} - #confirmation_popup, #prompt_popup { flex-direction: column; @@ -354,129 +325,79 @@ ul { margin-left: auto; } -input[type=checkbox] { - display: none; -} - -.checkbox svg { - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - height: 1.6rem; - width: 1.6rem; -} - -.checkbox svg .check { - stroke-dashoffset: 70; - stroke-dasharray: 70; - -webkit-transition: stroke-dashoffset 0.3s ease; - transition: stroke-dashoffset 0.3s ease; -} - -.checkbox input:checked + svg { - stroke: #00C853; -} - -.checkbox input:checked + svg .check { - stroke-dashoffset: 0; -} - -#settings_page { - padding: 1rem; -} - -#settings_page section { - width: 100%; - border-bottom: 1px solid rgba(var(--text-color), 0.1); - display: -ms-grid; +.popup__header { display: grid; - padding-bottom: 1rem; -} - -#settings_page section:last-of-type { - border: none; -} - -#settings_page h3, -#settings_page h4 { - display: flexbox; + gap: 0.5rem; width: 100%; - -ms-flex-item-align: center; - align-self: center; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr auto; } -#settings_page h5 { - margin: 0; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - font-weight: normal; - opacity: 0.9; +.popup__header__close { + padding: 0.5rem; + cursor: pointer; } -#settings_page button { - background: transparent; - border: 1px solid var(--accent-color); - color: var(--accent-color); - margin: 1rem 0; - width: -webkit-min-content; - width: -moz-min-content; - width: min-content; - white-space: nowrap; -} -#settings_page button .icon { - fill: var(--accent-color); +#main_page { + height: 100%; + grid-template-rows: auto 1fr auto; + grid-template-areas: "main-header" "sub-pages" "main-nav"; } -#settings_page > div { - display: -webkit-box; - display: -ms-flexbox; +#main_header { + grid-area: main-header; display: flex; + gap: 1rem; + align-items: center; + position: sticky; + padding: 0.5rem 1.5rem; + background: rgba(var(--background-color), 1); + z-index: 1; +} + +#main_nav { + grid-area: main-nav; + position: relative; + display: flex; + align-items: center; +} + +.nav-list__item { + display: flex; + flex-direction: column; + align-items: center; width: 100%; - padding: 1rem 0; - -ms-flex-line-pack: center; - align-content: center; -} - -#settings_page .row { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -#settings_page .row span { font-size: 0.8rem; + font-weight: 500; + color: rgba(var(--text-color), 0.8); + cursor: pointer; } - -#settings_page .border-card { - color: inherit; - text-decoration: none; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 0.5rem 0; - width: auto; +.nav-list__item--active { + color: var(--accent-color); } - -#settings_page .border-card svg { +.nav-list__item--active .icon { fill: var(--accent-color); - display: flexbox; - height: 2rem; - -ms-flex-item-align: center; - align-self: center; - margin: 0.5rem; +} +.nav-list__item .icon { + margin-bottom: 0.3rem; +} + +#sub_page_container { + grid-area: sub-pages; + height: 100%; + overflow-y: auto; } .container-card { position: relative; - background: rgba(var(--foreground-color), 1); + background: var(--foreground-color); border-radius: 0.4rem; } .solid-background { transition: background-color 2s; - background: rgba(var(--foreground-color), 1); + background: var(--foreground-color); } a { @@ -497,44 +418,38 @@ a { left: 0; right: 0; place-content: center; - background-color: rgba(var(--foreground-color), 1); + background-color: var(--foreground-color); +} + +#sign_in_form { + width: 22rem; } .task { - display: -ms-grid; display: grid; - -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; margin: 0 1rem; } .task:last-of-type .left .line { - -webkit-transform: scaleY(0); transform: scaleY(0); } .task .left { - display: -webkit-box; - display: -ms-flexbox; display: flex; position: relative; - -webkit-box-pack: center; - -ms-flex-pack: center; justify-content: center; padding-top: 0.5rem; } .task .left .circle { - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; position: relative; - -ms-flex-item-align: start; align-self: flex-start; height: 1rem; width: 1rem; border-radius: 50%; - background: rgba(var(--foreground-color), 1); + background: var(--foreground-color); border: solid 2px rgba(var(--text-color), 0.4); z-index: 1; } @@ -544,31 +459,20 @@ a { left: 50%; height: 100%; width: 2px; - -webkit-transform: translateX(-50%) scaleY(1); transform: translateX(-50%) scaleY(1); background-color: rgba(var(--text-color), 0.4); } .task .right { margin-left: 1rem; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; width: 100%; } .task .right .apply-cont { width: 100%; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; flex-direction: row; } @@ -640,67 +544,9 @@ a { #dashboard { padding-bottom: 5rem; - -ms-grid-columns: auto; grid-template-columns: auto; } -.input { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - margin: 1rem 0; - background: rgba(var(--text-color), 0.06); - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 0.2rem; - overflow: hidden; -} - -.input input, -.input textarea { - color: var(--light-text); - padding: 1rem 0.5rem; - width: 100%; - font-size: 1rem; - background: transparent; - margin-left: 0; -} - -.input input:focus, -.input textarea:focus { - outline: none; -} - -.input svg { - height: 1.2rem; - width: 1.2rem; - margin: 0 0.5rem 0 1rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; -} - -.input:focus-within { - background: rgba(0, 0, 0, 0.1); -} - -input, -button, -textarea { - position: relative; - border: none; - font-size: 1rem; - border-radius: 0.2rem; -} - -button[disabled] { - opacity: 0.5 !important; - cursor: default; -} - .show { display: block; } @@ -727,73 +573,16 @@ button[disabled] { margin-top: 0.3rem; } -.chatInput { - overflow: hidden; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0; -} - -.chatInput textarea { - resize: none; - line-height: 1.6; -} - -.chatInput button { - -webkit-transition: -webkit-transform 0.3s ease; - transition: -webkit-transform 0.3s ease; - transition: transform 0.3s ease; - transition: transform 0.3s ease, -webkit-transform 0.3s ease; - -webkit-transform: scale(0); - transform: scale(0); - -ms-flex-item-align: end; - align-self: flex-end; - padding: 1rem; -} - -.chatInput button svg { - margin: 0; - fill: rgba(var(--text-color), 1); -} - -#top_nav { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0.5rem; - z-index: 4; -} - -#top_nav .spacer { +.spacer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } -#top_nav .logo { - margin-right: 0.5rem; -} - .logo { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; font-size: 1.2rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; width: 100%; } @@ -826,7 +615,10 @@ button[disabled] { } .project-card { + padding: 1rem; text-transform: capitalize; + font-weight: 500; + color: rgba(var(--text-color), 0.8); } .intern-card { @@ -889,10 +681,7 @@ button[disabled] { display: flex; position: relative; margin-bottom: 0.5rem; - -webkit-box-align: left; - -ms-flex-align: left; align-items: left; - -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem; border-bottom: 1px solid rgba(var(--text-color), 0.1); @@ -931,8 +720,8 @@ button[disabled] { margin: 1rem; right: 2rem; min-width: 24rem; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.24); + background: var(--foreground-color); + box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3); border-radius: 0.5rem; } @@ -967,6 +756,7 @@ button[disabled] { max-height: 80vh; overflow-y: auto; flex-direction: column; + overscroll-behavior: contain; } #updates { @@ -974,16 +764,15 @@ button[disabled] { } .update { - display: flex; - flex-direction: column; + display: grid; + gap: 0.5rem; padding: 1rem; } -.update__project-name { - font-size: 1.2rem; +.update__topic { + font-weight: 500; + font-size: 1rem; max-width: 60ch; - margin: 0.3rem 0 0.5rem 0; - font-weight: bold; text-transform: capitalize; } @@ -993,6 +782,11 @@ button[disabled] { font-weight: 500; } +.update__time { + font-size: 0.85rem; + color: rgba(var(--text-color), 0.8); +} + .update__message { white-space: pre-line; } @@ -1115,9 +909,6 @@ button[disabled] { } #project_info { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; } @@ -1126,9 +917,6 @@ button[disabled] { padding: 0.5rem; border-radius: 0.2rem; margin: 0.5rem 0.5rem 0.5rem 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -1138,34 +926,24 @@ button[disabled] { background: rgba(var(--text-color), 0.04); } -.active-project { - background: rgba(var(--text-color), 0.06); -} - .opac { opacity: 1 !important; } .task-list-item { - display: -ms-grid; display: grid; - -ms-grid-columns: auto auto 1fr auto; grid-template-columns: auto auto 1fr auto; grid-template-areas: "status . title options" "status . interns interns" "status . description description"; padding: 1rem; gap: 0.5rem; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; background: rgba(var(--text-color), 0.02); } -.task-list-item .checkbox { - -ms-grid-row-span: 3; +.task-list-item sm-checkbox { grid-area: status; + align-self: flex-start; padding: 0.5rem 0.5rem 0.5rem 0; - -ms-flex-item-align: start !important; - align-self: flex-start !important; } .task-list-item:first-of-type { @@ -1189,28 +967,17 @@ button[disabled] { } .task-list-item .assigned-interns { - -ms-grid-column-span: 2; grid-area: interns; } .task-list-item .task-option { grid-area: options; cursor: pointer; - opacity: 1; - -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; -} - -.task-list-item .task-option svg { - width: 2rem; - height: 2rem; padding: 0.5rem; - overflow: visible; - fill: rgba(var(--text-color), 0.8); } .task-list-item p { - -ms-grid-column-span: 2; grid-area: description; margin: 0; text-overflow: ellipsis; @@ -1219,28 +986,18 @@ button[disabled] { } .assigned-interns { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; } .assigned-interns .assigned-intern { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - display: -webkit-box; - display: -ms-flexbox; display: flex; font-size: 0.8rem; margin: 0.2rem 0.5rem 0.2rem 0; padding: 0.2rem 0 0.2rem 0.4rem; border-radius: 0.2rem; border: 1px solid rgba(var(--text-color), 0.24); - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; white-space: nowrap; text-transform: capitalize; @@ -1263,156 +1020,35 @@ button[disabled] { } #task_context { - -webkit-transition: 0.3s opacity ease; transition: 0.3s opacity ease; top: 0; right: 0; margin: 0 2rem; list-style: none; padding: 0.5rem 0; - width: -webkit-max-content; - width: -moz-max-content; width: max-content; - border-radius: 0.2rem; + border-radius: 0.3rem; position: absolute; - background: rgba(var(--foreground-color), 1); - -webkit-box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); - box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + background: var(--foreground-color); + box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3); } - #task_context li { - padding: 0.8rem 1rem; - display: -webkit-box; - display: -ms-flexbox; + padding: 0.8rem 1.5rem; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; + cursor: pointer; } - -#task_context li svg { - margin-right: 1rem; - width: 1.2rem; - height: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; -} - -.temp-task { - padding: 1rem; - background: rgba(var(--text-color), 0.02); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.temp-task .input { - margin: 0.4rem 0; +#task_context li .icon { + margin-right: 0.5rem; } #branch_container { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 1rem 0; } -#notification { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -#bottom_nav { - position: fixed; - bottom: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - width: 100vw; - background: rgba(var(--foreground-color), 1); - z-index: 4; - border-top: 1px solid rgba(var(--text-color), 0.1); -} - -#bottom_nav button { - padding: 0.2rem; - width: 100%; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 0.7rem; - font-weight: normal; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -#bottom_nav button svg { - margin: 0.4rem; -} - -#show_message { - -webkit-transform: translate(0, 0.4rem); - transform: translate(0, 0.4rem); - -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; - transition: opacity 0.3s ease, -webkit-transform 0.3s ease; - transition: transform 0.3s ease, opacity 0.3s ease; - transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; - -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); - box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - color: white; - position: fixed; - bottom: 0; - right: 0; - width: 100%; - z-index: 11; -} - -#show_message span { - font-weight: 500; - padding: 1rem; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -#show_message button { - padding: 0.5rem 1rem; - margin: 0; -} - -#show_message button svg { - stroke: white; -} - #interns_list { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; min-width: 20rem; } @@ -1448,17 +1084,10 @@ button[disabled] { position: -webkit-sticky; position: sticky; top: 0; - background: rgba(var(--foreground-color), 1); - display: -webkit-box; - display: -ms-flexbox; + background: var(--foreground-color); display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row; flex-flow: row; border-bottom: 1px solid rgba(var(--text-color), 0.1); - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; z-index: 2; } @@ -1498,7 +1127,7 @@ button[disabled] { text-align: center; place-content: center; justify-items: center; - background-color: rgba(var(--foreground-color), 1); + background-color: var(--foreground-color); } .loading-message { @@ -1517,31 +1146,6 @@ button[disabled] { width: 4rem; } -.loader { - height: 2rem; - width: 2rem; - stroke-width: 8; - overflow: visible; - stroke: var(--accent-color); - fill: none; - stroke-dashoffset: 180; - stroke-dasharray: 180; - animation: load 3.6s linear infinite, spin 1s linear infinite; -} - -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100% { - stroke-dashoffset: -180; - } -} -@keyframes spin { - 100% { - transform: rotate(360deg); - } -} #status_map_container { position: relative; overflow: hidden; @@ -1599,23 +1203,14 @@ button[disabled] { position: relative; padding-left: 1rem; padding-top: 1rem; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; color: #000; z-index: 1; } .watching h4 { - -webkit-box-flex: 1; - -ms-flex: 1; flex: 1; font-weight: 500; } @@ -1638,8 +1233,6 @@ button[disabled] { } #right div:first-of-type h2 { - -webkit-box-flex: 1; - -ms-flex: 1; flex: 1; margin: 0.4rem 0; } @@ -1650,118 +1243,12 @@ button[disabled] { .center { position: relative; - display: -ms-grid; display: grid; place-content: center; height: 100%; text-align: center; } -.slide-left { - -webkit-animation: slide-left 0.4s ease; - animation: slide-left 0.4s ease; -} - -@-webkit-keyframes slide-left { - 100% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - opacity: 0; - } -} -@keyframes slide-left { - 100% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - opacity: 0; - } -} -.update-mi svg { - -webkit-animation: shake 0.6s ease; - animation: shake 0.6s ease; - -webkit-transform-origin: top; - transform-origin: top; -} - -@-webkit-keyframes shake { - 0% { - -webkit-transform: rotate(30deg); - transform: rotate(30deg); - } - 20% { - -webkit-transform: rotate(-30deg); - transform: rotate(-30deg); - } - 40% { - -webkit-transform: rotate(20deg); - transform: rotate(20deg); - } - 60% { - -webkit-transform: rotate(-20deg); - transform: rotate(-20deg); - } - 80% { - -webkit-transform: rotate(10deg); - transform: rotate(10deg); - } - 100% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } -} -@keyframes shake { - 0% { - -webkit-transform: rotate(30deg); - transform: rotate(30deg); - } - 20% { - -webkit-transform: rotate(-30deg); - transform: rotate(-30deg); - } - 40% { - -webkit-transform: rotate(20deg); - transform: rotate(20deg); - } - 60% { - -webkit-transform: rotate(-20deg); - transform: rotate(-20deg); - } - 80% { - -webkit-transform: rotate(10deg); - transform: rotate(10deg); - } - 100% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } -} -.settings-mi svg { - -webkit-animation: rot 0.6s ease; - animation: rot 0.6s ease; - -webkit-transform-origin: center; - transform-origin: center; -} - -@-webkit-keyframes rot { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(60deg); - transform: rotate(60deg); - } -} -@keyframes rot { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(60deg); - transform: rotate(60deg); - } -} .capitalise { text-transform: capitalize; } @@ -1771,13 +1258,13 @@ button[disabled] { margin: 0; } -#admin_panel { +#admin_page { padding: 0 1.5rem; display: grid; gap: 1.5rem; } -#admin_panel__header { +#admin_page__header { display: grid; gap: 0 1rem; padding: 0.5rem 0; @@ -1795,13 +1282,10 @@ button[disabled] { } .hide-on-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .hide-page-on-mobile { - display: -ms-grid; display: grid; } @@ -1813,54 +1297,44 @@ button[disabled] { padding: 1.5rem 1.5rem 0 0.5rem; } - .page, -#show_all, -#project_explorer { - margin: 1rem 4vw; + #main_nav { + flex-direction: column; + align-items: flex-start; } - #top_nav { - padding: 1rem 2vw; + .nav-list__item { + flex-direction: row; + align-items: center; + padding: 0.5rem 0.8rem; + font-size: 1rem; + } + .nav-list__item--active { + background-color: rgba(var(--text-color), 0.06); + } + .nav-list__item .icon { + margin-right: 0.5rem; + margin-bottom: 0; + } + + .project-card--active { + background-color: rgba(var(--text-color), 0.1); } #settings_page { padding: 1rem 2rem; } - .logo { - -webkit-box-pack: left; - -ms-flex-pack: left; - justify-content: left; - width: auto; - } - - #show_message { - -webkit-transform: translate(0.4rem, 0); - transform: translate(0.4rem, 0); - margin: 1rem; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - border-radius: 0.2rem; - } - #sign_in { width: 24rem; height: auto; border-radius: 0.4rem; } - #floating_btn { - margin: 1rem; - } - #dashboard { - -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; } #dashboard #status_map_container { - -ms-flex-item-align: start; align-self: flex-start; } @@ -1882,33 +1356,18 @@ button[disabled] { opacity: 1; } - #intern_info { - width: 24rem; - } - - .hover { - -webkit-transition: background 0.3s ease; - transition: background 0.3s ease; - cursor: pointer; - } - - .hover:hover { - background: rgba(var(--text-color), 0.06); - } - - #admin_panel { + #admin_page { grid-template-columns: 16rem 1fr; grid-template-rows: auto 1fr; grid-template-areas: "admin-header admin-header" ". ."; } - #admin_panel__header { + #admin_page__header { grid-area: admin-header; } #edit_data_fig { width: 16rem; - -ms-grid-column-align: center; justify-self: center; } @@ -1920,35 +1379,22 @@ button[disabled] { overflow-y: auto; } - .task-list-item .task-option { - opacity: 0; - } - - .task-list-item:hover .task-option { - opacity: 1; - } - #project_explorer { - display: -ms-grid; display: grid; align-items: flex-start; - -ms-grid-columns: 1fr 3fr; grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "left right"; } #project_explorer .header { border-radius: 0.4rem 0.4rem 0 0; - -ms-grid-column-span: 2; grid-area: header; } #project_explorer #left { - position: -webkit-sticky; position: sticky; top: 4.8rem; grid-area: left; - -ms-flex-item-align: start; align-self: flex-start; border-right: 1px solid rgba(var(--text-color), 0.06); } @@ -1963,6 +1409,11 @@ button[disabled] { #project_explorer #right { grid-area: right; } + + #main_page { + grid-template-columns: 10rem minmax(0, 1fr); + grid-template-areas: "main-header main-header" "main-nav sub-pages"; + } } #update_of_project { color: rgba(var(--text-color), 0.8); @@ -2009,7 +1460,7 @@ ul { } .task__title { - font-size: 1.5rem; + font-size: 1.3rem; margin-bottom: 1rem !important; } @@ -2020,7 +1471,7 @@ ul { .send-update-button { grid-area: send-button; - border: solid 1px; + --padding: 0.6rem 0.8rem; color: var(--accent-color); } .send-update-button .icon { @@ -2029,13 +1480,6 @@ ul { fill: var(--accent-color); } -@media only screen and (min-width: 1280px) { - .page, -#show_all, -#project_explorer { - margin: 1rem 8vw; - } -} @media (any-hover: hover) { ::-webkit-scrollbar { width: 0.5rem; @@ -2050,6 +1494,10 @@ ul { background: rgba(var(--text-color), 0.5); } + .interact:hover { + background-color: rgba(var(--text-color), 0.06); + } + .send-update-button { opacity: 0; transition: opacity 0.3s; @@ -2058,6 +1506,15 @@ ul { .task-card:hover .send-update-button { opacity: 1; } + + .task-option { + opacity: 0; + } + + .task-list-item:hover .task-option, +.task-option:focus-within { + opacity: 1; + } } @media (any-hover: none) { .task-option, diff --git a/css/main.min.css b/css/main.min.css index 48329cb..003b9ce 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -a,button{color:inherit}.input,.interact,.overflow-ellipsis,button{overflow:hidden}#textCopied,.hide,.ripple{pointer-events:none}.card,.request-card{margin-bottom:.5rem;padding:1rem}.popup__header,.task{grid-template-columns:auto 1fr}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#1976D2;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;color:rgba(var(--text-color),1);background:var(--background-color);display:flex;flex-direction:column}a.button:any-link,button{display:inline-flex;padding:.5rem .6rem;-webkit-tap-highlight-color:transparent;background:0 0;font-weight:500;cursor:pointer}body[data-theme=dark]{--accent-color:#42A5F5;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#status_map_container #status_map h2,.assigned-interns .assigned-intern,.capitalise,.capitalize,.project-card,.update__project-name{text-transform:capitalize}p{font-size:.8;max-width:60ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{align-items:center;outline:0}button:focus-visible{outline:solid rgba(var(--text-color),1)}a.button:any-link{position:relative;align-items:center;outline:0;font-size:.8rem;border-radius:.3rem;align-self:flex-start;text-decoration:none;color:rgba(var(--text-color),.7);background-color:rgba(var(--text-color),.06)}.button,.task__project-title{background-color:rgba(var(--text-color),.06)}a.button:any-link .icon{margin-right:.3rem;height:1.2rem}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.overflow-ellipsis{width:100%;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.flex{display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1,.page{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}#loading_page,.center,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#loading_page,#sign_in_page{right:0;background-color:rgba(var(--foreground-color),1);place-content:center}.interact{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center}.popup__header__close{padding:.5rem;cursor:pointer}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}input[type=checkbox]{display:none}.checkbox svg{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;height:1.6rem;width:1.6rem}.checkbox svg .check{stroke-dashoffset:70;stroke-dasharray:70;-webkit-transition:stroke-dashoffset .3s ease;transition:stroke-dashoffset .3s ease}.checkbox input:checked+svg{stroke:#00C853}.checkbox input:checked+svg .check{stroke-dashoffset:0}#settings_page{padding:1rem}#settings_page section{width:100%;border-bottom:1px solid rgba(var(--text-color),.1);display:-ms-grid;display:grid;padding-bottom:1rem}#settings_page section:last-of-type{border:none}#settings_page h3,#settings_page h4{display:flexbox;width:100%;-ms-flex-item-align:center;align-self:center}#settings_page h5{margin:0;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;font-weight:400;opacity:.9}#settings_page button{background:0 0;border:1px solid var(--accent-color);color:var(--accent-color);margin:1rem 0;width:-webkit-min-content;width:-moz-min-content;width:min-content;white-space:nowrap}#settings_page button .icon{fill:var(--accent-color)}#settings_page>div{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;padding:1rem 0;-ms-flex-line-pack:center;align-content:center}#settings_page .row{-webkit-box-flex:1;-ms-flex:1;flex:1}#settings_page .row span{font-size:.8rem}#settings_page .border-card{color:inherit;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;padding:.5rem 0;width:auto}#settings_page .border-card svg{fill:var(--accent-color);display:flexbox;height:2rem;-ms-flex-item-align:center;align-self:center;margin:.5rem}.container-card{position:relative;background:rgba(var(--foreground-color),1);border-radius:.4rem}.solid-background{transition:background-color 2s;background:rgba(var(--foreground-color),1)}a{color:var(--accent-color);text-decoration:none}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5;top:0;bottom:0;left:0}.task{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{-webkit-transform:scaleY(0);transform:scaleY(0)}.task .left{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:.5rem}.task .left .circle{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-item-align:start;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:rgba(var(--foreground-color),1);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}#top_nav,.card,.dropdown,.page,.request-card,button,input,textarea{position:relative}.task .right{margin-left:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}#bottom_nav,#branch_container,#show_message,#top_nav,.task .right .apply-cont{-webkit-box-orient:horizontal}.task .right .apply-cont{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{display:grid;margin:1rem;animation:fadein .4s ease}#top_nav,.input{display:-ms-flexbox}.fade-in{-webkit-animation:fadein .4s ease;animation:fadein .4s ease}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}.padding{padding:1rem}#dashboard{padding-bottom:5rem;-ms-grid-columns:auto;grid-template-columns:auto}.input{display:-webkit-box;display:flex;width:100%;margin:1rem 0;background:rgba(var(--text-color),.06);-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:.2rem}.input input,.input textarea{color:var(--light-text);padding:1rem .5rem;width:100%;font-size:1rem;background:0 0;margin-left:0}.input input:focus,.input textarea:focus{outline:0}.input svg{height:1.2rem;width:1.2rem;margin:0 .5rem 0 1rem;fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible}.input:focus-within{background:rgba(0,0,0,.1)}button,input,textarea{border:none;font-size:1rem;border-radius:.2rem}button[disabled]{opacity:.5!important;cursor:default}.show{display:block}.hide-on-mobile,.hide-page-on-mobile{display:none}.hide-on-desktop{display:initial}.no-transformations{-webkit-transform:none!important;transform:none!important}.no-bottom-margin{margin-bottom:0}.top-margin{margin-top:.3rem}.chatInput{overflow:hidden;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}.chatInput textarea{resize:none;line-height:1.6}.chatInput button{-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;-webkit-transform:scale(0);transform:scale(0);-ms-flex-item-align:end;align-self:flex-end;padding:1rem}.chatInput button svg{margin:0;fill:rgba(var(--text-color),1)}#top_nav{display:-webkit-box;display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem;z-index:4}#top_nav .spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}#top_nav .logo{margin-right:.5rem}.logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.active{opacity:1!important;color:var(--accent-color)}.active svg{fill:var(--accent-color)}.svg-margin-right svg{margin-right:.5rem}.intern-card{user-select:none}.intern-card span:first-of-type{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:.8rem;border-radius:50%;background:#673AB7;margin-right:1rem;color:#fff;font-weight:500;font-size:1.2rem;line-height:0}.intern-card span:first-of-type::after{content:"";display:block;padding-bottom:100%}.intern-card span:nth-of-type(2){flex:1;text-transform:capitalize;flex-shrink:0}.intern-card span:nth-of-type(3){display:inline-flex;align-items:center;align-content:center;font-weight:500;font-size:1.2rem;color:var(--light-text)}.intern-card span:nth-of-type(3) svg{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-right:.2rem}.card{display:flex;flex-direction:row;align-items:center}.request-card{display:flex;-webkit-box-align:left;-ms-flex-align:left;align-items:left;-ms-flex-wrap:wrap;flex-wrap:wrap;border-bottom:1px solid rgba(var(--text-color),.1)}.request-card p{margin-top:0;width:100%;font-size:1rem}.request-card b{font-weight:500}.request-card button{padding:.2rem .6rem .2rem 0}.request-card button:first-of-type{margin-left:auto}.request-card:last-of-type{border-bottom:none}.dropdown-content{overflow:hidden;position:absolute;z-index:2;margin:1rem;right:2rem;min-width:24rem;background:rgba(var(--foreground-color),1);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.24);border-radius:.5rem}#bottom_nav,#show_message,#textCopied{position:fixed;bottom:0}#intern_updates .container-header{padding-right:0;border-bottom:1px solid rgba(var(--text-color),.1)}#intern_updates .container-header button{padding:1rem 0;border-bottom:.2rem solid transparent;border-radius:0;opacity:.7}#intern_updates .container-header button:first-of-type{margin-right:1rem}#intern_updates .container-header button:last-of-type{margin-right:1rem}#intern_updates .container-header .active{color:rgba(var(--text-color),1);border-bottom:.2rem solid var(--accent-color)}.active-branch,.commit,.container-header span,.update__sender{color:var(--accent-color)}#requests_container,#update_container{display:flex;max-height:80vh;overflow-y:auto;flex-direction:column}#updates{transition:opacity .3s ease}.update{display:flex;flex-direction:column;padding:1rem}.update__project-name{font-size:1.2rem;max-width:60ch;margin:.3rem 0 .5rem;font-weight:700}.update__sender{font-size:.9rem;font-weight:500}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:0 1rem}.container-header h3{flex:1;font-weight:500}.container-header span{border-radius:.2rem;margin-right:.2rem;padding:.5rem 1rem;font-weight:500}.back-arrow{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;width:2rem;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}#task_context li svg,.close-svg,.tick-mark{stroke:rgba(var(--text-color),.8);overflow:visible}.close-svg,.tick-mark{fill:none;stroke-width:6;height:2rem;width:2rem}.close-svg{padding:.6rem}#textCopied{padding:1rem;border-radius:2rem;background:var(--sec-color);margin:2rem 0;left:50%;transform:translateX(-50%);transition:.3s opacity ease;z-index:10}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info div svg{fill:rgba(var(--text-color),1);height:2.5rem;padding:.6rem;overflow:visible}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info #update_intern_score button{border:1px solid}#intern_info #update_intern_score button svg{stroke-width:10;fill:none;stroke:var(--accent-color)}#intern_info #update_intern_score rect{stroke:transparent}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.active-branch{opacity:1;background:rgba(var(--text-color),.04)}.active-project{background:rgba(var(--text-color),.06)}.opac{opacity:1!important}.task-list-item{display:-ms-grid;display:grid;-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:"status . title options" "status . interns interns" "status . description description";padding:1rem;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(var(--text-color),.02)}.task-list-item .checkbox{-ms-grid-row-span:3;grid-area:status;padding:.5rem .5rem .5rem 0;-ms-flex-item-align:start!important;align-self:flex-start!important}.task-list-item:first-of-type{margin-top:1rem;border-radius:.2rem .2rem 0 0}.task-list-item:last-of-type{border-radius:0 0 .2rem .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{-ms-grid-column-span:2;grid-area:interns}.task-list-item .task-option{grid-area:options;cursor:pointer;opacity:1;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task-list-item .task-option svg{width:2rem;height:2rem;padding:.5rem;overflow:visible;fill:rgba(var(--text-color),.8)}.task-list-item p{-ms-grid-column-span:2;grid-area:description;margin:0;text-overflow:ellipsis;overflow:hidden;max-width:100%}.assigned-interns{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#task_context li,.temp-task{display:-webkit-box;display:-ms-flexbox}.assigned-interns .assigned-intern{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button svg{padding:.2rem;height:1rem;width:1rem}#bottom_nav button,#show_message{-webkit-box-direction:normal;width:100%}.commit{border:1px solid var(--accent-color);padding:.6rem}#task_context{-webkit-transition:.3s opacity ease;transition:.3s opacity ease;top:0;right:0;margin:0 2rem;list-style:none;padding:.5rem 0;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:.2rem;position:absolute;background:rgba(var(--foreground-color),1);-webkit-box-shadow:.2rem .4rem 1rem rgba(0,0,0,.24),-.1rem -.2rem .4rem rgba(0,0,0,.16);box-shadow:.2rem .4rem 1rem rgba(0,0,0,.24),-.1rem -.2rem .4rem rgba(0,0,0,.16)}#task_context li{padding:.8rem 1rem;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#task_context li svg{margin-right:1rem;width:1.2rem;height:1.2rem;fill:none;stroke-width:6}.temp-task{padding:1rem;background:rgba(var(--text-color),.02);display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#bottom_nav,.header{background:rgba(var(--foreground-color),1)}#bottom_nav,#branch_container,#notification,#show_message{display:-webkit-box;display:-ms-flexbox}.temp-task .input{margin:.4rem 0}#branch_container{display:flex;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:1rem 0}#notification{display:flex}#bottom_nav{display:flex;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100vw;z-index:4;border-top:1px solid rgba(var(--text-color),.1)}#bottom_nav button{padding:.2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:.7rem;font-weight:400;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}#bottom_nav button svg{margin:.4rem}#show_message{-webkit-transform:translate(0,.4rem);transform:translate(0,.4rem);-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;-webkit-box-shadow:.2rem .4rem .8rem rgba(0,0,0,.16);box-shadow:.2rem .4rem .8rem rgba(0,0,0,.16);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;display:flex;color:#fff;right:0;z-index:11}#show_message span,.watching h4{-webkit-box-flex:1;font-weight:500}#show_message span{padding:1rem;-ms-flex:1;flex:1}#show_message button{padding:.5rem 1rem;margin:0}#show_message button svg{stroke:#fff}#interns_list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:20rem}.header,.watching{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal}#interns_list #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header,#project_list_container .container-header{padding-right:0}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{fill:rgba(var(--text-color),.6);width:60vw;margin:2rem 0}.header svg,.loader{overflow:visible;fill:none}.header{position:-webkit-sticky;position:sticky;top:0;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;border-bottom:1px solid rgba(var(--text-color),.1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:2}.header svg{stroke:rgba(var(--text-color),.8);stroke-width:6;height:2rem;width:2rem;cursor:pointer;padding:.4rem;margin-left:1rem}.header h3{padding:0 .5rem;display:inline-flexbox}.appear-on-scroll-up{position:fixed!important;top:0;width:100%;height:4rem!important}#loading_page{display:grid;position:fixed;top:0;bottom:0;left:0;z-index:5;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}.loader{height:2rem;width:2rem;stroke-width:8;stroke:var(--accent-color);stroke-dashoffset:180;stroke-dasharray:180;animation:load 3.6s linear infinite,spin 1s linear infinite}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-180}}@keyframes spin{100%{transform:rotate(360deg)}}#status_map_container{position:relative;overflow:hidden;background:#B9F6CA}#status_map_container .branch-btn{color:rgba(0,0,0,.8)}#status_map_container p{color:rgba(0,0,0,.9)}#status_map_container .active-branch{color:#fff;background:rgba(0,200,83,.6)}#status_map_container #status_map{position:relative;z-index:1;padding:1rem;color:#000}#status_map_container #status_map h2{margin:.4rem 0}#status_map_container #status_map .circle{background:#B9F6CA;border:2px solid rgba(0,0,0,.4)}#status_map_container #status_map .line{background:rgba(0,0,0,.4)}#status_map_container #status_map .assigned-intern{border:1px solid rgba(0,0,0,.4)}#status_map_container #status_map .apply-btn{color:#1B5E20;background:rgba(0,200,83,.2)}.apply-btn{padding:.3rem .6rem}#project_editing_panel,.watching button{padding:1rem}.watching{position:relative;padding-left:1rem;padding-top:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#000;z-index:1}.watching h4{-ms-flex:1;flex:1}.watching button svg{fill:none!important;fill:none;stroke-width:6;overflow:visible;stroke:#000}#right{padding:0 1rem}#right div:first-of-type h2{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}.center{position:relative;display:-ms-grid;display:grid;place-content:center;height:100%}.slide-left{-webkit-animation:slide-left .4s ease;animation:slide-left .4s ease}@-webkit-keyframes slide-left{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}@keyframes slide-left{100%{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}}.update-mi svg{-webkit-animation:shake .6s ease;animation:shake .6s ease;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes shake{0%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}20%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}60%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes shake{0%{-webkit-transform:rotate(30deg);transform:rotate(30deg)}20%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}60%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.settings-mi svg{-webkit-animation:rot .6s ease;animation:rot .6s ease;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rot{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}}@keyframes rot{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}}#project_explorer,#show_all{margin:0}#admin_panel{padding:0 1.5rem;display:grid;gap:1.5rem}#admin_panel__header{display:grid;gap:0 1rem;padding:.5rem 0;grid-template-columns:1fr auto;align-items:center}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.hide-on-mobile{display:-webkit-box;display:-ms-flexbox;display:flex}.hide-page-on-mobile{display:-ms-grid;display:grid}sm-popup{--width:24rem}.popup__header{padding:1.5rem 1.5rem 0 .5rem}#project_explorer,#show_all,.page{margin:1rem 4vw}#top_nav{padding:1rem 2vw}#settings_page{padding:1rem 2rem}.logo{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;width:auto}#intern_info,#sign_in{width:24rem}#show_message{-webkit-transform:translate(.4rem,0);transform:translate(.4rem,0);margin:1rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:.2rem}#sign_in{height:auto;border-radius:.4rem}#floating_btn{margin:1rem}#dashboard{-ms-grid-columns:3fr 1fr;grid-template-columns:3fr 1fr}#dashboard #status_map_container{-ms-flex-item-align:start;align-self:flex-start}#dashboard #status_map_container .watching{padding-left:2rem}#dashboard #status_map_container #status_map{padding:1rem 2rem}.task .apply-btn{opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task:hover .apply-btn{opacity:1}.hover{-webkit-transition:background .3s ease;transition:background .3s ease;cursor:pointer}.hover:hover{background:rgba(var(--text-color),.06)}#admin_panel{grid-template-columns:16rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"admin-header admin-header" ". ."}#admin_panel__header{grid-area:admin-header}#edit_data_fig{width:16rem;-ms-grid-column-align:center;justify-self:center}#interns,#projects{display:flex;flex-direction:column;max-height:calc(100vh - 16rem);overflow-y:auto}.task-list-item .task-option{opacity:0}.task-list-item:hover .task-option{opacity:1}#project_explorer{display:-ms-grid;display:grid;align-items:flex-start;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;grid-template-areas:"header header" "left right"}#project_explorer .header{border-radius:.4rem .4rem 0 0;-ms-grid-column-span:2;grid-area:header}#project_explorer #left{position:-webkit-sticky;position:sticky;top:4.8rem;grid-area:left;-ms-flex-item-align:start;align-self:flex-start;border-right:1px solid rgba(var(--text-color),.06)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:#29B6F6;font-size:.9rem}#project_explorer #right{grid-area:right}}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;align-content:flex-start;gap:1.5rem}.task-card{display:grid;padding:1rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.5rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;border:1px solid;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}@media only screen and (min-width:1280px){#project_explorer,#show_all,.page{margin:1rem 8vw}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.send-update-button{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button{opacity:1}}@media (any-hover:none){.apply-btn,.task-option{opacity:1}} \ No newline at end of file +a:where([class]),button{color:inherit}#textCopied,.hide,.ripple{pointer-events:none}a,a:where([class]){text-decoration:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:246,246,246;--foreground-color:white;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:65ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#status_map_container #status_map h2,.assigned-interns .assigned-intern,.capitalise,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}#loading_page,.center,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#loading_page,#sign_in_page{top:0;left:0;right:0;background-color:var(--foreground-color);bottom:0;place-content:center}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1.5rem;background:rgba(var(--background-color),1);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;font-size:.8rem;font-weight:500;cursor:pointer}.active,.nav-list__item--active,a{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.4rem}.solid-background{transition:background-color 2s;background:var(--foreground-color)}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;margin:1rem;animation:fadein .4s ease}.fade-in{-webkit-animation:fadein .4s ease;animation:fadein .4s ease}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}.padding{padding:1rem}#dashboard{padding-bottom:5rem;grid-template-columns:auto}.show{display:block}.hide-on-mobile,.hide-page-on-mobile{display:none}.hide-on-desktop{display:initial}.no-transformations{-webkit-transform:none!important;transform:none!important}.no-bottom-margin{margin-bottom:0}.top-margin{margin-top:.3rem}.spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.active{opacity:1!important}.active svg{fill:var(--accent-color)}.svg-margin-right svg{margin-right:.5rem}.project-card{padding:1rem;font-weight:500;color:rgba(var(--text-color),.8)}.intern-card{user-select:none}.intern-card span:first-of-type{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:.8rem;border-radius:50%;background:#673AB7;margin-right:1rem;color:#fff;font-weight:500;font-size:1.2rem;line-height:0}.intern-card span:first-of-type::after{content:"";display:block;padding-bottom:100%}.card,.request-card{margin-bottom:.5rem;padding:1rem;position:relative}.intern-card span:nth-of-type(2){flex:1;text-transform:capitalize;flex-shrink:0}.intern-card span:nth-of-type(3){display:inline-flex;align-items:center;align-content:center;font-weight:500;font-size:1.2rem;color:var(--light-text)}.intern-card span:nth-of-type(3) svg{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-right:.2rem}.card{display:flex;flex-direction:row;align-items:center}.request-card{display:flex;align-items:left;flex-wrap:wrap;border-bottom:1px solid rgba(var(--text-color),.1)}.request-card p{margin-top:0;width:100%;font-size:1rem}.request-card b{font-weight:500}.request-card button{padding:.2rem .6rem .2rem 0}.request-card button:first-of-type{margin-left:auto}.request-card:last-of-type{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 -.5rem rgba(0,0,0,.3);border-radius:.5rem}#intern_updates .container-header{padding-right:0;border-bottom:1px solid rgba(var(--text-color),.1)}#intern_updates .container-header button{padding:1rem 0;border-bottom:.2rem solid transparent;border-radius:0;opacity:.7}#intern_updates .container-header button:first-of-type{margin-right:1rem}#intern_updates .container-header button:last-of-type{margin-right:1rem}#intern_updates .container-header .active{color:rgba(var(--text-color),1);border-bottom:.2rem solid var(--accent-color)}#requests_container,#update_container{display:flex;max-height:80vh;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}#updates{transition:opacity .3s ease}.update{display:grid;gap:.5rem;padding:1rem}.update__topic{font-weight:500;font-size:1rem;max-width:60ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}.update__time{font-size:.85rem;color:rgba(var(--text-color),.8)}.active-branch,.commit,.container-header span{color:var(--accent-color)}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;flex-direction:row;width:100%;padding:0 1rem}.container-header h3{flex:1;font-weight:500}.container-header span{border-radius:.2rem;margin-right:.2rem;padding:.5rem 1rem;font-weight:500}.back-arrow{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;width:2rem;height:2rem;padding:.5rem .5rem .5rem 0;cursor:pointer}.close-svg,.header svg,.tick-mark{stroke:rgba(var(--text-color),.8);overflow:visible}.close-svg,.tick-mark{fill:none;stroke-width:6;height:2rem;width:2rem}.close-svg{padding:.6rem}#textCopied{padding:1rem;border-radius:2rem;background:var(--sec-color);position:fixed;bottom:0;margin:2rem 0;left:50%;transform:translateX(-50%);transition:.3s opacity ease;z-index:10}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info div svg{fill:rgba(var(--text-color),1);height:2.5rem;padding:.6rem;overflow:visible}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info #update_intern_score button{border:1px solid}#intern_info #update_intern_score button svg{stroke-width:10;fill:none;stroke:var(--accent-color)}#intern_info #update_intern_score rect{stroke:transparent}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none}.active-branch{opacity:1;background:rgba(var(--text-color),.04)}.opac{opacity:1!important}.task-list-item{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"status . title options" "status . interns interns" "status . description description";padding:1rem;gap:.5rem;align-items:center;background:rgba(var(--text-color),.02)}#task_context,.header{background:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.5rem .5rem .5rem 0}.task-list-item:first-of-type{margin-top:1rem;border-radius:.2rem .2rem 0 0}.task-list-item:last-of-type{border-radius:0 0 .2rem .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{grid-area:options;cursor:pointer;transition:opacity .3s ease;padding:.5rem}.task-list-item p{grid-area:description;margin:0;text-overflow:ellipsis;overflow:hidden;max-width:100%}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button svg{padding:.2rem;height:1rem;width:1rem}.commit{border:1px solid var(--accent-color);padding:.6rem}#task_context{transition:.3s opacity ease;top:0;right:0;margin:0 2rem;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;position:absolute;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;cursor:pointer}#task_context li .icon{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#interns_list{flex-direction:column;min-width:20rem}#interns_list #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header,#project_list_container .container-header{padding-right:0}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}.header{position:-webkit-sticky;position:sticky;top:0;display:flex;flex-flow:row;border-bottom:1px solid rgba(var(--text-color),.1);align-items:center;z-index:2}.header svg{fill:none;stroke-width:6;height:2rem;width:2rem;cursor:pointer;padding:.4rem;margin-left:1rem}.header h3{padding:0 .5rem;display:inline-flexbox}.appear-on-scroll-up{position:fixed!important;top:0;width:100%;height:4rem!important}#loading_page{display:grid;position:fixed;z-index:5;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden;background:#B9F6CA}#status_map_container .branch-btn{color:rgba(0,0,0,.8)}#status_map_container p{color:rgba(0,0,0,.9)}#status_map_container .active-branch{color:#fff;background:rgba(0,200,83,.6)}#status_map_container #status_map{position:relative;z-index:1;padding:1rem;color:#000}#status_map_container #status_map h2{margin:.4rem 0}#status_map_container #status_map .circle{background:#B9F6CA;border:2px solid rgba(0,0,0,.4)}#status_map_container #status_map .line{background:rgba(0,0,0,.4)}#status_map_container #status_map .assigned-intern{border:1px solid rgba(0,0,0,.4)}#status_map_container #status_map .apply-btn{color:#1B5E20;background:rgba(0,200,83,.2)}.apply-btn{padding:.3rem .6rem}#project_editing_panel,.watching button{padding:1rem}.watching{position:relative;padding-left:1rem;padding-top:1rem;display:flex;flex-direction:row;align-items:center;color:#000;z-index:1}.watching h4{flex:1;font-weight:500}.watching button svg{fill:none!important;fill:none;stroke-width:6;overflow:visible;stroke:#000}#right{padding:0 1rem}#right div:first-of-type h2{flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}.center{position:relative;display:grid;place-content:center;height:100%}#project_explorer,#show_all{margin:0}#admin_page{padding:0 1.5rem;display:grid;gap:1.5rem}#admin_page__header{display:grid;gap:0 1rem;padding:.5rem 0;grid-template-columns:1fr auto;align-items:center}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.hide-on-mobile{display:flex}.hide-page-on-mobile{display:grid}sm-popup{--width:24rem}.popup__header{padding:1.5rem 1.5rem 0 .5rem}#main_nav{flex-direction:column;align-items:flex-start}.nav-list__item{flex-direction:row;align-items:center;padding:.5rem .8rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-right:.5rem;margin-bottom:0}.project-card--active{background-color:rgba(var(--text-color),.1)}#settings_page{padding:1rem 2rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard{grid-template-columns:3fr 1fr}#dashboard #status_map_container{align-self:flex-start}#dashboard #status_map_container .watching{padding-left:2rem}#dashboard #status_map_container #status_map{padding:1rem 2rem}.task .apply-btn{opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.task:hover .apply-btn{opacity:1}#admin_page{grid-template-columns:16rem 1fr;grid-template-rows:auto 1fr;grid-template-areas:"admin-header admin-header" ". ."}#admin_page__header{grid-area:admin-header}#edit_data_fig{width:16rem;justify-self:center}#interns,#projects{display:flex;flex-direction:column;max-height:calc(100vh - 16rem);overflow-y:auto}#project_explorer{display:grid;align-items:flex-start;grid-template-columns:1fr 3fr;grid-template-areas:"header header" "left right"}#project_explorer .header{border-radius:.4rem .4rem 0 0;grid-area:header}#project_explorer #left{position:sticky;top:4.8rem;grid-area:left;align-self:flex-start;border-right:1px solid rgba(var(--text-color),.06)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:#29B6F6;font-size:.9rem}#project_explorer #right{grid-area:right}#main_page{grid-template-columns:10rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;align-content:flex-start;gap:1.5rem}.task-card{display:grid;padding:1rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background-color:rgba(var(--text-color),.06)}.send-update-button{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button{opacity:1}.task-option{opacity:0}.task-list-item:hover .task-option,.task-option:focus-within{opacity:1}}@media (any-hover:none){.apply-btn,.task-option{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index aab1cf3..bf1c7f6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,161 +1,133 @@ -*{ +* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } -:root{ + +:root { font-size: clamp(1rem, 1.2vmax, 3rem); } -html, body{ + +html, +body { height: 100%; scroll-behavior: smooth; } + body { - --accent-color: #1976D2; - --light-shade: rgba(var(--text-color), 0.06); - --text-color: 17, 17, 17; - --text-color-light: 100, 100, 100; - --foreground-color: 255, 255, 255; - --background-color: #F6f6f6; - --error-color: red; + + &, + * { + --accent-color: #5D54A4; + --text-color: 17, 17, 17; + --background-color: 246, 246, 246; + --foreground-color: white; + --danger-color: red; + } + color: rgba(var(--text-color), 1); - background: var(--background-color); - display: flex; - flex-direction: column; -} -body[data-theme='dark']{ - --accent-color: #42A5F5; - --text-color: 240, 240, 240; - --text-color-light: 170, 170, 170; - --foreground-color: 20, 20, 20; - --background-color: #0a0a0a; - --error-color: rgb(255, 106, 106); -} -/* h1,h2,h3,h4,h5,h6{ - font-family: 'Montserrat', sans-serif; -} */ -.full-bleed{ - grid-column: 1/4; -} -.h1{ - font-size: 2.5rem; -} -.h2{ - font-size: 2rem; -} -.h3{ - font-size: 1.4rem; -} -.h4{ - font-size: 1rem; -} -.h5{ - font-size: 0.8rem; + background: rgba(var(--background-color), 1); } -.uppercase{ - text-transform: uppercase; -} -.capitalize{ - text-transform: capitalize; +body[data-theme='dark'] { + + &, + * { + --accent-color: #9D65C9; + --text-color: 240, 240, 240; + --text-color-light: 170, 170, 170; + --background-color: 10, 10, 10; + --foreground-color: rgb(20, 20, 20); + --danger-color: rgb(255, 106, 106); + } } p { - font-size: 0.8; - max-width: 60ch; + max-width: 65ch; line-height: 1.7; color: rgba(var(--text-color), 0.8); - &:not(:last-of-type){ - margin-bottom: 1rem; + + &:not(:last-of-type) { + margin-bottom: 1.5rem; } } -img{ + +img { object-fit: cover; } -a{ +a:where([class]) { color: inherit; text-decoration: none; - &:focus-visible{ + + &:focus-visible { box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; } } -button{ + +button { position: relative; display: inline-flex; - overflow: hidden; - align-items: center; - background: none; - cursor: pointer; - outline: none; - color: inherit; - font-size: 0.9rem; - font-weight: 500; - border-radius: 0.2rem; - padding: 0.5rem 0.6rem; - -webkit-tap-highlight-color: transparent; border: none; + background-color: transparent; + overflow: hidden; + color: inherit; } -button:focus-visible{ + +a:any-link:focus-visible { outline: rgba(var(--text-color), 1) 0.1rem solid; } -a.button:any-link{ - position: relative; - display: inline-flex; - align-items: center; - background: none; - cursor: pointer; - outline: none; - font-weight: 500; - font-size: 0.8rem; - border-radius: 0.3rem; - padding: 0.5rem 0.6rem; - align-self: flex-start; - text-decoration: none; - color: rgba(var(--text-color), 0.7); - -webkit-tap-highlight-color: transparent; - background-color: rgba(var(--text-color), 0.06); - .icon{ - margin-right: 0.3rem; - height: 1.2rem; + +sm-button { + --border-radius: 0.3rem; + + &[variant="primary"] { + .icon { + fill: rgba(var(--background-color), 1); + } + } + + &[disabled] { + .icon { + fill: rgba(var(--text-color), 0.6); + } } } -a:any-link:focus-visible{ - outline: rgba(var(--text-color), 1) 0.1rem solid; -} -.button{ - background-color: rgba(var(--text-color), 0.06); -} -sm-button{ - --border-radius: 0.3rem; -} -ul{ + +ul { list-style: none; } -.flex{ + +.flex { display: flex; } -.grid{ + +.grid { display: grid; } -.hide{ + +.hide { opacity: 0; pointer-events: none; } -.hide-completely{ + +.hide-completely { display: none !important; } -.no-transformations{ + +.no-transformations { transform: none !important; } -.overflow-ellipsis{ + +.overflow-ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -.breakable{ + +.breakable { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; @@ -165,130 +137,202 @@ ul{ -webkit-hyphens: auto; hyphens: auto; } -.flex{ + +.full-bleed { + grid-column: 1/4; +} + +.h1 { + font-size: 2.5rem; +} + +.h2 { + font-size: 2rem; +} + +.h3 { + font-size: 1.4rem; +} + +.h4 { + font-size: 1rem; +} + +.h5 { + font-size: 0.8rem; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +.flex { display: flex; } -.grid{ + +.grid { display: grid; } -.flow-column{ + +.grid-3 { + grid-template-columns: 1fr auto auto; +} + +.flow-column { grid-auto-flow: column; } -.gap-0-5{ + +.gap-0-5 { gap: 0.5rem; } -.gap-1{ + +.gap-1 { gap: 1rem; } -.gap-1-5{ + +.gap-1-5 { gap: 1.5rem; } -.gap-2{ + +.gap-2 { gap: 2rem; } -.gap-3{ + +.gap-3 { gap: 3rem; } -.text-align-right{ + +.text-align-right { text-align: right; } -.align-start{ + +.align-start { align-items: flex-start; } -.align-center{ + +.align-center { align-items: center; } -.text-center{ + +.text-center { text-align: center; } -.justify-start{ + +.justify-start { justify-content: start; } -.justify-center{ + +.justify-center { justify-content: center; } -.justify-right{ + +.justify-right { margin-left: auto; } -.align-self-center{ + +.align-self-center { align-self: center; } -.justify-self-center{ + +.justify-self-center { justify-self: center; } -.justify-self-start{ + +.justify-self-start { justify-self: start; } -.direction-column{ + +.justify-self-end { + justify-self: end; +} + +.direction-column { flex-direction: column; } -.space-between{ + +.space-between { justify-content: space-between; } -.w-100{ + +.w-100 { width: 100%; } -.ripple{ + +.color-0-8 { + color: rgba(var(--text-color), 0.8); +} + +.weight-400 { + font-weight: 400; +} + +.weight-500 { + font-weight: 500; +} + +.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(var(--text-color), 0.16); pointer-events: none; } -.interact{ + +.interact { position: relative; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } -.observe-empty-state:empty{ - display: none; -} -.observe-empty-state:not(:empty) ~ .empty-state{ + +.observe-empty-state:empty { display: none; } +.observe-empty-state:not(:empty)~.empty-state { + display: none; +} -.icon{ +.icon { width: 1.5rem; height: 1.5rem; fill: rgba(var(--text-color), 0.9); } -.button__icon{ + +.button__icon { height: 1.2rem; width: 1.2rem; - &--left{ + + &--left { margin-right: 0.5rem; } - &--right{ + + &--right { margin-left: 0.5rem; } } -.popup__header{ - display: grid; - gap: 0.5rem; - width: 100%; - padding: 0 1.5rem 0 0.5rem; - align-items: center; - grid-template-columns: auto 1fr; -} -.popup__header__close{ - padding: 0.5rem; - cursor: pointer; -} + #confirmation_popup, #prompt_popup { flex-direction: column; + h4 { font-weight: 500; margin-bottom: 0.5rem; } - sm-button{ + + sm-button { margin: 0; } + .flex { padding: 0; margin-top: 1rem; + sm-button:first-of-type { margin-right: 0.6rem; margin-left: auto; @@ -296,127 +340,85 @@ ul{ } } -input[type="checkbox"] { - display: none; -} - -.checkbox svg { - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; - height: 1.6rem; - width: 1.6rem; -} - -.checkbox svg .check { - stroke-dashoffset: 70; - stroke-dasharray: 70; - -webkit-transition: stroke-dashoffset 0.3s ease; - transition: stroke-dashoffset 0.3s ease; -} - -.checkbox input:checked+svg { - stroke: #00C853; -} - -.checkbox input:checked+svg .check { - stroke-dashoffset: 0; -} -#settings_page { - padding: 1rem; -} - -#settings_page section { - width: 100%; - border-bottom: 1px solid rgba(var(--text-color), 0.1); - display: -ms-grid; +.popup__header { display: grid; - padding-bottom: 1rem; -} - -#settings_page section:last-of-type { - border: none; -} - -#settings_page h3, -#settings_page h4 { - display: flexbox; + gap: 0.5rem; width: 100%; - -ms-flex-item-align: center; - align-self: center; + padding: 0 1.5rem 0 0.5rem; + align-items: center; + grid-template-columns: auto 1fr auto; } -#settings_page h5 { - margin: 0; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - font-weight: normal; - opacity: 0.9; +.popup__header__close { + padding: 0.5rem; + cursor: pointer; } -#settings_page button { - background: transparent; - border: 1px solid var(--accent-color); - color: var(--accent-color); - margin: 1rem 0; - width: -webkit-min-content; - width: -moz-min-content; - width: min-content; - white-space: nowrap; - .icon{ - fill: var(--accent-color); +#main_page { + height: 100%; + grid-template-rows: auto 1fr auto; + grid-template-areas: 'main-header''sub-pages''main-nav'; +} + +#main_header { + grid-area: main-header; + display: flex; + gap: 1rem; + align-items: center; + position: sticky; + padding: 0.5rem 1.5rem; + background: rgba(var(--background-color), 1); + z-index: 1; +} + +#main_nav { + grid-area: main-nav; + position: relative; + display: flex; + align-items: center; +} + +.nav-list__item { + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + + font-size: 0.8rem; + font-weight: 500; + color: rgba(var(--text-color), 0.8); + + cursor: pointer; + + &--active { + color: var(--accent-color); + + .icon { + fill: var(--accent-color); + } + } + + .icon { + margin-bottom: 0.3rem; } } -#settings_page > div { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - padding: 1rem 0; - -ms-flex-line-pack: center; - align-content: center; -} -#settings_page .row { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -#settings_page .row span { - font-size: 0.8rem; -} - -#settings_page .border-card { - color: inherit; - text-decoration: none; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 0.5rem 0; - width: auto; -} - -#settings_page .border-card svg { - fill: var(--accent-color); - display: flexbox; - height: 2rem; - -ms-flex-item-align: center; - align-self: center; - margin: 0.5rem; +#sub_page_container { + grid-area: sub-pages; + height: 100%; + overflow-y: auto; } .container-card { position: relative; - background: rgba(var(--foreground-color), 1); + background: var(--foreground-color); border-radius: 0.4rem; } .solid-background { transition: background-color 2s; - background: rgba(var(--foreground-color), 1); + background: var(--foreground-color); } a { @@ -428,7 +430,7 @@ a { margin: 0.5rem 0; } -#sign_in_page{ +#sign_in_page { display: grid; position: fixed; z-index: 5; @@ -437,45 +439,39 @@ a { left: 0; right: 0; place-content: center; - background-color: rgba(var(--foreground-color), 1); + background-color: var(--foreground-color); +} + +#sign_in_form { + width: 22rem; } .task { - display: -ms-grid; display: grid; - -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; margin: 0 1rem; } .task:last-of-type .left .line { - -webkit-transform: scaleY(0); transform: scaleY(0); } .task .left { - display: -webkit-box; - display: -ms-flexbox; display: flex; position: relative; - -webkit-box-pack: center; - -ms-flex-pack: center; justify-content: center; padding-top: 0.5rem; } .task .left .circle { - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; position: relative; - -ms-flex-item-align: start; align-self: flex-start; height: 1rem; width: 1rem; border-radius: 50%; - background: rgba(var(--foreground-color), 1); + background: var(--foreground-color); border: solid 2px rgba(var(--text-color), 0.4); z-index: 1; } @@ -485,31 +481,20 @@ a { left: 50%; height: 100%; width: 2px; - -webkit-transform: translateX(-50%) scaleY(1); transform: translateX(-50%) scaleY(1); background-color: rgba(var(--text-color), 0.4); } .task .right { margin-left: 1rem; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; width: 100%; } .task .right .apply-cont { width: 100%; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; flex-direction: row; } @@ -585,67 +570,9 @@ a { #dashboard { padding-bottom: 5rem; - -ms-grid-columns: auto; grid-template-columns: auto; } -.input { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - margin: 1rem 0; - background: rgba(var(--text-color), 0.06); - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 0.2rem; - overflow: hidden; -} - -.input input, -.input textarea { - color: var(--light-text); - padding: 1rem 0.5rem; - width: 100%; - font-size: 1rem; - background: transparent; - margin-left: 0; -} - -.input input:focus, -.input textarea:focus { - outline: none; -} - -.input svg { - height: 1.2rem; - width: 1.2rem; - margin: 0 0.5rem 0 1rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; -} - -.input:focus-within { - background: rgba(0, 0, 0, 0.1); -} - -input, -button, -textarea { - position: relative; - border: none; - font-size: 1rem; - border-radius: 0.2rem; -} - -button[disabled] { - opacity: 0.5 !important; - cursor: default; -} - .show { display: block; } @@ -672,73 +599,16 @@ button[disabled] { margin-top: 0.3rem; } -.chatInput { - overflow: hidden; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0; -} - -.chatInput textarea { - resize: none; - line-height: 1.6; -} - -.chatInput button { - -webkit-transition: -webkit-transform 0.3s ease; - transition: -webkit-transform 0.3s ease; - transition: transform 0.3s ease; - transition: transform 0.3s ease, -webkit-transform 0.3s ease; - -webkit-transform: scale(0); - transform: scale(0); - -ms-flex-item-align: end; - align-self: flex-end; - padding: 1rem; -} - -.chatInput button svg { - margin: 0; - fill: rgba(var(--text-color), 1); -} - -#top_nav { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0.5rem; - z-index: 4; -} - -#top_nav .spacer { +.spacer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } -#top_nav .logo { - margin-right: 0.5rem; -} - .logo { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; font-size: 1.2rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; width: 100%; } @@ -771,7 +641,10 @@ button[disabled] { } .project-card { + padding: 1rem; text-transform: capitalize; + font-weight: 500; + color: rgba(var(--text-color), 0.8); } .intern-card { @@ -834,10 +707,7 @@ button[disabled] { display: flex; position: relative; margin-bottom: 0.5rem; - -webkit-box-align: left; - -ms-flex-align: left; align-items: left; - -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem; border-bottom: 1px solid rgba(var(--text-color), 0.1); @@ -876,8 +746,8 @@ button[disabled] { margin: 1rem; right: 2rem; min-width: 24rem; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.24); + background: var(--foreground-color); + box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3); border-radius: 0.5rem; } @@ -912,6 +782,7 @@ button[disabled] { max-height: 80vh; overflow-y: auto; flex-direction: column; + overscroll-behavior: contain; } #updates { @@ -919,24 +790,30 @@ button[disabled] { } .update { - display: flex; - flex-direction: column; + display: grid; + gap: 0.5rem; padding: 1rem; } -.update__project-name{ - font-size: 1.2rem; + +.update__topic { + font-weight: 500; + font-size: 1rem; max-width: 60ch; - margin: 0.3rem 0 0.5rem 0; - font-weight: bold; text-transform: capitalize; } -.update__sender{ +.update__sender { color: var(--accent-color); font-size: 0.9rem; font-weight: 500; } -.update__message{ + +.update__time { + font-size: 0.85rem; + color: rgba(var(--text-color), 0.8); +} + +.update__message { white-space: pre-line; } @@ -1058,9 +935,6 @@ button[disabled] { } #project_info { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; } @@ -1069,9 +943,6 @@ button[disabled] { padding: 0.5rem; border-radius: 0.2rem; margin: 0.5rem 0.5rem 0.5rem 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -1081,36 +952,26 @@ button[disabled] { background: rgba(var(--text-color), 0.04); } -.active-project { - background: rgba(var(--text-color), 0.06); -} - .opac { opacity: 1 !important; } .task-list-item { - display: -ms-grid; display: grid; - -ms-grid-columns: auto auto 1fr auto; grid-template-columns: auto auto 1fr auto; grid-template-areas: 'status . title options' 'status . interns interns' 'status . description description'; padding: 1rem; gap: 0.5rem; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; background: rgba(var(--text-color), 0.02); } -.task-list-item .checkbox { - -ms-grid-row-span: 3; +.task-list-item sm-checkbox { grid-area: status; + align-self: flex-start; padding: 0.5rem 0.5rem 0.5rem 0; - -ms-flex-item-align: start !important; - align-self: flex-start !important; } .task-list-item:first-of-type { @@ -1134,28 +995,17 @@ button[disabled] { } .task-list-item .assigned-interns { - -ms-grid-column-span: 2; grid-area: interns; } .task-list-item .task-option { grid-area: options; cursor: pointer; - opacity: 1; - -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; -} - -.task-list-item .task-option svg { - width: 2rem; - height: 2rem; padding: 0.5rem; - overflow: visible; - fill: rgba(var(--text-color), 0.8); } .task-list-item p { - -ms-grid-column-span: 2; grid-area: description; margin: 0; text-overflow: ellipsis; @@ -1164,28 +1014,18 @@ button[disabled] { } .assigned-interns { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; } .assigned-interns .assigned-intern { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - display: -webkit-box; - display: -ms-flexbox; display: flex; font-size: 0.8rem; margin: 0.2rem 0.5rem 0.2rem 0; padding: 0.2rem 0 0.2rem 0.4rem; border-radius: 0.2rem; border: 1px solid rgba(var(--text-color), 0.24); - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; white-space: nowrap; text-transform: capitalize; @@ -1208,156 +1048,39 @@ button[disabled] { } #task_context { - -webkit-transition: 0.3s opacity ease; transition: 0.3s opacity ease; top: 0; right: 0; margin: 0 2rem; list-style: none; padding: 0.5rem 0; - width: -webkit-max-content; - width: -moz-max-content; width: max-content; - border-radius: 0.2rem; + border-radius: 0.3rem; position: absolute; - background: rgba(var(--foreground-color), 1); - -webkit-box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); - box-shadow: 0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.24), -0.1rem -0.2rem 0.4rem rgba(0, 0, 0, 0.16); + background: var(--foreground-color); + box-shadow: 0 0.5rem 1rem -0.3rem rgba(0, 0, 0, 0.3); + + li { + padding: 0.8rem 1.5rem; + display: flex; + align-items: center; + cursor: pointer; + + .icon { + margin-right: 0.5rem; + } + } } -#task_context li { - padding: 0.8rem 1rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -#task_context li svg { - margin-right: 1rem; - width: 1.2rem; - height: 1.2rem; - fill: none; - stroke: rgba(var(--text-color), 0.8); - stroke-width: 6; - overflow: visible; -} - -.temp-task { - padding: 1rem; - background: rgba(var(--text-color), 0.02); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.temp-task .input { - margin: 0.4rem 0; -} +.temp-task {} #branch_container { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 1rem 0; } -#notification { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -#bottom_nav { - position: fixed; - bottom: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - width: 100vw; - background: rgba(var(--foreground-color), 1); - z-index: 4; - border-top: 1px solid rgba(var(--text-color), 0.1); -} - -#bottom_nav button { - padding: 0.2rem; - width: 100%; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 0.7rem; - font-weight: normal; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -#bottom_nav button svg { - margin: 0.4rem; -} - -#show_message { - -webkit-transform: translate(0, 0.4rem); - transform: translate(0, 0.4rem); - -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; - transition: opacity 0.3s ease, -webkit-transform 0.3s ease; - transition: transform 0.3s ease, opacity 0.3s ease; - transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; - -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); - box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16); - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - color: white; - position: fixed; - bottom: 0; - right: 0; - width: 100%; - z-index: 11; -} - -#show_message span { - font-weight: 500; - padding: 1rem; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; -} - -#show_message button { - padding: 0.5rem 1rem; - margin: 0; -} - -#show_message button svg { - stroke: white; -} - #interns_list { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; min-width: 20rem; } @@ -1377,8 +1100,9 @@ button[disabled] { #project_list_container .container-header { padding-right: 0; } + #best_interns_container .container-header .icon, -#project_list_container .container-header .icon{ +#project_list_container .container-header .icon { margin-right: 0.5rem; } @@ -1392,17 +1116,10 @@ button[disabled] { position: -webkit-sticky; position: sticky; top: 0; - background: rgba(var(--foreground-color), 1); - display: -webkit-box; - display: -ms-flexbox; + background: var(--foreground-color); display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row; flex-flow: row; border-bottom: 1px solid rgba(var(--text-color), 0.1); - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; z-index: 2; } @@ -1431,7 +1148,7 @@ button[disabled] { height: 4rem !important; } -#loading_page{ +#loading_page { display: grid; position: fixed; top: 0; @@ -1442,49 +1159,26 @@ button[disabled] { text-align: center; place-content: center; justify-items: center; - background-color: rgba(var(--foreground-color), 1); + background-color: var(--foreground-color); } -.loading-message{ + +.loading-message { font-size: 1.3rem; margin: 1.5rem 0 0.5rem 0; } -#loading_page__footer{ + +#loading_page__footer { position: absolute; bottom: 0; width: 100%; padding: 1.5rem; - .icon{ + + .icon { height: 4rem; width: 4rem; } } -.loader { - height: 2rem; - width: 2rem; - stroke-width: 8; - overflow: visible; - stroke: var(--accent-color); - fill: none; - stroke-dashoffset: 180; - stroke-dasharray: 180; - animation: load 3.6s linear infinite, spin 1s linear infinite; -} -@keyframes load { - 50% { - stroke-dashoffset: 0; - } - 100%{ - stroke-dashoffset: -180; - } -} - -@keyframes spin { - 100% { - transform: rotate(360deg); - } -} - #status_map_container { position: relative; overflow: hidden; @@ -1537,27 +1231,19 @@ button[disabled] { .apply-btn { padding: 0.3rem 0.6rem; } + .watching { position: relative; padding-left: 1rem; padding-top: 1rem; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; color: #000; z-index: 1; } .watching h4 { - -webkit-box-flex: 1; - -ms-flex: 1; flex: 1; font-weight: 500; } @@ -1580,8 +1266,6 @@ button[disabled] { } #right div:first-of-type h2 { - -webkit-box-flex: 1; - -ms-flex: 1; flex: 1; margin: 0.4rem 0; } @@ -1592,136 +1276,12 @@ button[disabled] { .center { position: relative; - display: -ms-grid; display: grid; place-content: center; height: 100%; text-align: center; } -.slide-left { - -webkit-animation: slide-left 0.4s ease; - animation: slide-left 0.4s ease; -} - -@-webkit-keyframes slide-left { - 100% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - opacity: 0; - } -} - -@keyframes slide-left { - 100% { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - opacity: 0; - } -} - -.update-mi svg { - -webkit-animation: shake 0.6s ease; - animation: shake 0.6s ease; - -webkit-transform-origin: top; - transform-origin: top; -} - -@-webkit-keyframes shake { - 0% { - -webkit-transform: rotate(30deg); - transform: rotate(30deg); - } - - 20% { - -webkit-transform: rotate(-30deg); - transform: rotate(-30deg); - } - - 40% { - -webkit-transform: rotate(20deg); - transform: rotate(20deg); - } - - 60% { - -webkit-transform: rotate(-20deg); - transform: rotate(-20deg); - } - - 80% { - -webkit-transform: rotate(10deg); - transform: rotate(10deg); - } - - 100% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } -} - -@keyframes shake { - 0% { - -webkit-transform: rotate(30deg); - transform: rotate(30deg); - } - - 20% { - -webkit-transform: rotate(-30deg); - transform: rotate(-30deg); - } - - 40% { - -webkit-transform: rotate(20deg); - transform: rotate(20deg); - } - - 60% { - -webkit-transform: rotate(-20deg); - transform: rotate(-20deg); - } - - 80% { - -webkit-transform: rotate(10deg); - transform: rotate(10deg); - } - - 100% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } -} - -.settings-mi svg { - -webkit-animation: rot 0.6s ease; - animation: rot 0.6s ease; - -webkit-transform-origin: center; - transform-origin: center; -} - -@-webkit-keyframes rot { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - 100% { - -webkit-transform: rotate(60deg); - transform: rotate(60deg); - } -} - -@keyframes rot { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - 100% { - -webkit-transform: rotate(60deg); - transform: rotate(60deg); - } -} - .capitalise { text-transform: capitalize; } @@ -1731,19 +1291,21 @@ button[disabled] { margin: 0; } -#admin_panel { +#admin_page { padding: 0 1.5rem; display: grid; gap: 1.5rem; } -#admin_panel__header{ + +#admin_page__header { display: grid; gap: 0 1rem; padding: 0.5rem 0; grid-template-columns: 1fr auto; align-items: center; } -#project_editing_panel{ + +#project_editing_panel { padding: 1rem; } @@ -1753,70 +1315,64 @@ button[disabled] { } .hide-on-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .hide-page-on-mobile { - display: -ms-grid; display: grid; } - sm-popup{ + + sm-popup { --width: 24rem; } - .popup__header{ + + .popup__header { padding: 1.5rem 1.5rem 0 0.5rem; } - .page, - #show_all, - #project_explorer { - margin: 1rem 4vw; + #main_nav { + flex-direction: column; + align-items: flex-start; } - #top_nav { - padding: 1rem 2vw; + .nav-list__item { + flex-direction: row; + align-items: center; + + padding: 0.5rem 0.8rem; + + font-size: 1rem; + + &--active { + background-color: rgba(var(--text-color), 0.06); + } + + .icon { + margin-right: 0.5rem; + margin-bottom: 0; + } } + .project-card { + &--active{ + background-color: rgba(var(--text-color), 0.1); + } + } + #settings_page { padding: 1rem 2rem; } - - .logo { - -webkit-box-pack: left; - -ms-flex-pack: left; - justify-content: left; - width: auto; - } - - #show_message { - -webkit-transform: translate(0.4rem, 0); - transform: translate(0.4rem, 0); - margin: 1rem; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - border-radius: 0.2rem; - } - #sign_in { width: 24rem; height: auto; border-radius: 0.4rem; } - #floating_btn { - margin: 1rem; - } - #dashboard { - -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; } #dashboard #status_map_container { - -ms-flex-item-align: start; align-self: flex-start; } @@ -1838,32 +1394,18 @@ button[disabled] { opacity: 1; } - #intern_info { - width: 24rem; - } - - .hover { - -webkit-transition: background 0.3s ease; - transition: background 0.3s ease; - cursor: pointer; - } - - .hover:hover { - background: rgba(var(--text-color), 0.06); - } - - #admin_panel { + #admin_page { grid-template-columns: 16rem 1fr; grid-template-rows: auto 1fr; - grid-template-areas: 'admin-header admin-header' '. .'; + grid-template-areas: 'admin-header admin-header''. .'; } - #admin_panel__header{ + + #admin_page__header { grid-area: admin-header; } #edit_data_fig { width: 16rem; - -ms-grid-column-align: center; justify-self: center; } @@ -1875,19 +1417,9 @@ button[disabled] { overflow-y: auto; } - .task-list-item .task-option { - opacity: 0; - } - - .task-list-item:hover .task-option { - opacity: 1; - } - #project_explorer { - display: -ms-grid; display: grid; align-items: flex-start; - -ms-grid-columns: 1fr 3fr; grid-template-columns: 1fr 3fr; grid-template-areas: 'header header' 'left right'; @@ -1895,16 +1427,13 @@ button[disabled] { #project_explorer .header { border-radius: 0.4rem 0.4rem 0 0; - -ms-grid-column-span: 2; grid-area: header; } #project_explorer #left { - position: -webkit-sticky; position: sticky; top: 4.8rem; grid-area: left; - -ms-flex-item-align: start; align-self: flex-start; border-right: 1px solid rgba(var(--text-color), 0.06); } @@ -1919,40 +1448,53 @@ button[disabled] { #project_explorer #right { grid-area: right; } + + + // Newer styles + + #main_page { + grid-template-columns: 10rem minmax(0, 1fr); + grid-template-areas: 'main-header main-header''main-nav sub-pages'; + } } // Newer styles -#update_of_project{ +#update_of_project { color: rgba(var(--text-color), 0.8); } -#update_of_task{ + +#update_of_task { font-size: 1.3rem; margin: 0.4rem 0 1.8rem 0; } -ul{ +ul { padding: 0; list-style: none; } -#assigned_task_list{ + +#assigned_task_list { display: grid; align-content: flex-start; gap: 1.5rem; } -.task-card{ + +.task-card { display: grid; padding: 1rem; } -.task__header{ + +.task__header { display: grid; gap: 0 0.5rem; align-items: flex-start; grid-template-columns: 1fr auto; - grid-template-areas: '. send-button' '. send-button'; + grid-template-areas: '. send-button''. send-button'; } -.task__project-title{ + +.task__project-title { font-size: 0.9rem; font-weight: 500; border-radius: 0.3rem; @@ -1962,19 +1504,23 @@ ul{ color: rgba(var(--text-color), 0.8); background-color: rgba(var(--text-color), 0.06); } -.task__title{ - font-size: 1.5rem; + +.task__title { + font-size: 1.3rem; margin-bottom: 1rem !important; } -.task__description{ + +.task__description { white-space: pre-line; color: rgba(var(--text-color), 0.8); } -.send-update-button{ + +.send-update-button { grid-area: send-button; - border: solid 1px; + --padding: 0.6rem 0.8rem; color: var(--accent-color); - .icon{ + + .icon { height: 1.2rem; width: 1.2rem; fill: var(--accent-color); @@ -1987,38 +1533,49 @@ ul{ -@media only screen and (min-width: 1280px) { +@media only screen and (min-width: 1280px) {} - .page, - #show_all, - #project_explorer { - margin: 1rem 8vw; - } -} -@media (any-hover: hover){ - ::-webkit-scrollbar{ +@media (any-hover: hover) { + ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } - - ::-webkit-scrollbar-thumb{ + + ::-webkit-scrollbar-thumb { background: rgba(var(--text-color), 0.3); border-radius: 1rem; - &:hover{ + + &:hover { background: rgba(var(--text-color), 0.5); } } - .send-update-button{ + + .interact:hover { + background-color: rgba(var(--text-color), 0.06); + } + + .send-update-button { opacity: 0; transition: opacity 0.3s; } - .task-card:hover{ - .send-update-button{ + + .task-card:hover { + .send-update-button { opacity: 1; } } + .task-option { + opacity: 0; + } + + .task-list-item:hover .task-option, + .task-option:focus-within { + opacity: 1; + } } -@media (any-hover: none){ + +@media (any-hover: none) { + .task-option, .apply-btn { opacity: 1; diff --git a/new.html b/new.html index f743068..b8cf678 100644 --- a/new.html +++ b/new.html @@ -9,9 +9,8 @@ - - + - + @@ -154,7 +155,7 @@ d="M12 7a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 3.5l-1.323 2.68-2.957.43 2.14 2.085-.505 2.946L12 17.25l2.645 1.39-.505-2.945 2.14-2.086-2.957-.43L12 10.5zm1-8.501L18 2v3l-1.363 1.138A9.935 9.935 0 0 0 13 5.049L13 2zm-2 0v3.05a9.935 9.935 0 0 0-3.636 1.088L6 5V2l5-.001z" />

    Leaderboard

    - All + All
    @@ -166,8 +167,8 @@ -

    Projects

    - All +

    Projects

    + All
    @@ -175,7 +176,7 @@
    -

    +

    @@ -210,7 +211,7 @@
    -

    Add project

    +

    Add project

    -

    Add Intern

    +

    Add Intern

    -
    -
      +
      + +
      Projects
      + +
        +

        No related updates

        -
        -
        - - Go back to previous page - - -

        -
        -
        +
        +
          @@ -326,36 +325,28 @@

          Update Rating

          - - - -

          Points

          - - + +

          Points

          + + + + + +
          - - Close this popup - - +

          Choose an intern

          @@ -411,10 +402,13 @@
          - - close this popup - - +

          Add new intern

          @@ -432,10 +426,13 @@
          - - close this popup - - +

          Create a new branch

          @@ -582,7 +579,7 @@ + + @@ -10374,7 +10378,7 @@ }, branchBtn(projectCode, branch) { return createElement('button', { - className: 'branch-btn', + className: 'branch-btn uppercase', attributes: { 'data-project-code': projectCode }, textContent: branch }); @@ -10558,15 +10562,9 @@ // opens a popup containing various project information function showProjectInfo(projectId) { - const allProjects = document.getElementById('left').querySelectorAll('.project-card'); + const allProjects = getRef('left').querySelectorAll('.project-card'); 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') - if (window.innerWidth < 640) { - document.querySelectorAll('.list-container').forEach((item) => { - item.classList.add('hide-page-on-mobile') - }) - getRef('right').classList.remove('hide-page-on-mobile') - } const { projectName, projectDescription } = RIBC.getProjectDetails(projectId); getRef('right').firstElementChild.children[0].textContent = projectName; // project name if (JSON.parse(localStorage.getItem('watchList')).includes(projectId)) { @@ -10757,15 +10755,6 @@ thisPage.classList.remove('hide-completely'); } - function showListCont(container) { - if (window.innerWidth < 640) { - document.querySelectorAll('.content-page').forEach((container) => { - container.classList.add('hide-page-on-mobile') - }) - document.getElementById(container).classList.remove('hide-completely', 'hide-page-on-mobile'); - } - } - function logout() { getConfirmation("Do you want to sign out?").then((result) => { if (result) { From f15e874b9292df866a6cd9acf4a0f4ac07efe875 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 28 Jul 2021 17:07:36 +0530 Subject: [PATCH 23/41] Added FAB for admin actions --- css/main.css | 80 ++++++++++++++++++++++++++++++++++++++++++++- css/main.min.css | 2 +- css/main.scss | 85 ++++++++++++++++++++++++++++++++++++++++++++++-- new.html | 56 ++++++++++++++++++------------- 4 files changed, 197 insertions(+), 26 deletions(-) diff --git a/css/main.css b/css/main.css index 54a63b2..f23676a 100644 --- a/css/main.css +++ b/css/main.css @@ -1033,6 +1033,7 @@ ul { } #admin_page { + position: relative; display: grid; gap: 1rem; height: 100%; @@ -1050,6 +1051,83 @@ ul { overflow-y: auto; } +.fab-actions { + display: grid; + gap: 1rem; + position: absolute; + bottom: 0; + right: 0; + margin: 1rem; + justify-items: end; + text-align: end; +} +.fab-actions[open] .fab-actions__item { + transform: translateY(0); + opacity: 1; +} +.fab-actions[open] .fab .icon:nth-of-type(1) { + transform: scale(0) rotate(180deg); +} +.fab-actions[open] .fab .icon:nth-of-type(2) { + transform: scale(1) rotate(0); +} + +.fab-actions__item { + display: flex; + align-items: center; + justify-self: end; + padding: 0.7rem 1rem; + border-radius: 2rem; + transform: translateY(1.5rem); + background-color: var(--foreground-color); + opacity: 0; + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s; + box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2); + user-select: none; +} +.fab-actions__item:hover, .fab-actions__item:active { + transform: scale(0.9); +} +.fab-actions__item:nth-of-type(1) { + transition-delay: 0.2s; +} +.fab-actions__item:nth-of-type(2) { + transition-delay: 0.1s; +} +.fab-actions__item .icon { + fill: var(--accent-color); +} + +.fab { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 0.8rem; + height: 3rem; + width: 3rem; + border-radius: 50%; + background-color: var(--accent-color); + box-shadow: 0 0.5rem 0.8remrgba 0, 0, 0, 0.3; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; +} +.fab:active { + transform: scale(0.9); +} +.fab .icon { + position: absolute; + height: 100%; + fill: white; + transition: transform 0.3s; +} +.fab .icon:nth-of-type(1) { + transform: scale(1) rotate(0); +} +.fab .icon:nth-of-type(2) { + transform: scale(0) rotate(-180deg); +} + #update_of_project { color: rgba(var(--text-color), 0.8); } @@ -1360,7 +1438,7 @@ ul { } .interact:hover { - background-color: rgba(var(--text-color), 0.06); + background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), var(--foreground-color); } .send-update-button { diff --git a/css/main.min.css b/css/main.min.css index 27318e4..11603db 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.overflow-ellipsis,.task-description{overflow:hidden;text-overflow:ellipsis}.hide,.ripple{pointer-events:none}.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#updates,.task-option{transition:opacity .3s ease}#loading_page,#sign_in_page{left:0;place-content:center;bottom:0}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:246,246,246;--foreground-color:white;--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.overflow-ellipsis{width:100%;white-space:nowrap}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#status_map_container #status_map h2,.assigned-interns .assigned-intern,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}#update_filters_wrapper,.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center,.task .left{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,.container-card,.interact,.page,.request-card,.task .left,.task .left .circle{position:relative}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.active,.nav-list__item--active,.update__sender{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{background:var(--foreground-color);border-radius:.5rem}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5;top:0;right:0}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;padding-top:.5rem}.task .left .circle{display:inline-flex;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.show{display:block}.no-transformations{-webkit-transform:none!important;transform:none!important}.no-bottom-margin{margin-bottom:0}.top-margin{margin-top:.3rem}.spacer{flex:1}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.reject-app,.svg-margin-right svg{margin-right:.5rem}.active{opacity:1!important}.active svg{fill:var(--accent-color)}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto}#intern_updates .container-header{padding:0 1rem;border-bottom:1px solid rgba(var(--text-color),.1)}#intern_updates .container-header button{padding:1rem 0;border-bottom:.2rem solid transparent;border-radius:0;opacity:.7}#intern_updates .container-header button:first-of-type{margin-right:1rem}#intern_updates .container-header button:last-of-type{margin-right:1rem}#intern_updates .container-header .active{color:rgba(var(--text-color),1);border-bottom:.2rem solid var(--accent-color)}#updates_page sm-select{--max-height:50vh}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;max-width:65ch}.update__sender{font-size:.9rem;font-weight:500}.update__time{font-size:.85rem;color:rgba(var(--text-color),.8)}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#loading_page,#task_context,.task-card{background-color:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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-option{grid-area:options;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:0 2rem;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center}#task_context li .icon,.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#interns_list{flex-direction:column;min-width:20rem}#interns_list #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{fill:rgba(var(--text-color),.6);width:60vw;margin:2rem 0}.header{position:sticky;top:0;background:var(--foreground-color);display:flex;flex-flow:row;border-bottom:1px solid rgba(var(--text-color),.1);align-items:center;z-index:2}.header svg{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;height:2rem;width:2rem;cursor:pointer;padding:.4rem;margin-left:1rem}.header h3{padding:0 .5rem;display:inline-flexbox}#loading_page{display:grid;position:fixed;top:0;right:0;z-index:5;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden}#status_map_container #status_map{position:relative;padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0}.watching{position:relative;display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#project_explorer,ul{padding:0}#right{align-items:flex-start;align-content:flex-start;padding:1rem}#right div:first-of-type h2{flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}#admin_page{display:grid;gap:1rem;height:100%}#admin_page__header{gap:1rem;align-items:center;grid-template-columns:1fr auto}#project_editing_panel{padding:1rem;height:100%;overflow-y:auto}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;border-bottom:1px solid rgba(var(--text-color),.2)}#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{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#admin_page{gap:0;padding:0;grid-template-rows:auto 1fr}#admin_page__header{padding:1rem}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .5rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;border-radius:.5rem;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#settings_page{padding:1rem 2rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{grid-template-columns:18rem minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"admin-header admin-header" ". ."}#admin_page__header{grid-area:admin-header}#admin_page__left,#project_editing_panel{border-radius:.5rem;background-color:var(--foreground-color);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.3)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--text-color),.06)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:#29B6F6;font-size:.9rem}#project_explorer #right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:32rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{grid-column:1/3}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background-color:rgba(var(--text-color),.06)}.send-update-button{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button{opacity:1}.task-option{opacity:0}.task-list-item:hover .task-option,.task-option:focus-within{opacity:1}.apply-btn{opacity:0;transition:opacity .3s}.task:hover .apply-btn{opacity:1}}@media (any-hover:none){.apply-btn,.task-option{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{left:0;place-content:center;bottom:0;right:0}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:246,246,246;--foreground-color:white;--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#status_map_container #status_map h2,.assigned-interns .assigned-intern,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}#update_filters_wrapper,.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_header,.container-card,.header,.task .left .circle{background:var(--foreground-color)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.active,.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;border-radius:.5rem}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5;top:0}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.show{display:block}.no-transformations{-webkit-transform:none!important;transform:none!important}.no-bottom-margin{margin-bottom:0}.top-margin{margin-top:.3rem}.spacer{flex:1}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.reject-app,.svg-margin-right svg{margin-right:.5rem}.active{opacity:1!important}.active svg{fill:var(--accent-color)}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto}#intern_updates .container-header{padding:0 1rem;border-bottom:1px solid rgba(var(--text-color),.1)}#intern_updates .container-header button{padding:1rem 0;border-bottom:.2rem solid transparent;border-radius:0;opacity:.7}#intern_updates .container-header button:first-of-type{margin-right:1rem}#intern_updates .container-header button:last-of-type{margin-right:1rem}#intern_updates .container-header .active{color:rgba(var(--text-color),1);border-bottom:.2rem solid var(--accent-color)}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#loading_page,#task_context,.fab-actions__item,.task-card{background-color:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:0 2rem;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center}#task_context li .icon,.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#interns_list{flex-direction:column;min-width:20rem}#interns_list #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}.header{position:sticky;top:0;display:flex;flex-flow:row;border-bottom:1px solid rgba(var(--text-color),.1);align-items:center;z-index:2}.header svg{fill:none;stroke:rgba(var(--text-color),.8);stroke-width:6;overflow:visible;height:2rem;width:2rem;cursor:pointer;padding:.4rem;margin-left:1rem}.header h3{padding:0 .5rem;display:inline-flexbox}#loading_page{display:grid;position:fixed;top:0;z-index:5;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden}#status_map_container #status_map{position:relative;padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0}.watching{position:relative;display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#right{align-items:flex-start;align-content:flex-start;padding:1rem}#right div:first-of-type h2{flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}#project_explorer{padding:0}#admin_page{position:relative;display:grid;gap:1rem;height:100%}#admin_page__header{gap:1rem;align-items:center;grid-template-columns:1fr auto}#project_editing_panel{padding:1rem;height:100%;overflow-y:auto}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions__item{display:flex;align-items:center;justify-self:end;padding:.7rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color)}.fab{position:relative;display:flex;justify-content:center;align-items:center;padding:.8rem;height:3rem;width:3rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8remrgba 0,0,0,.3}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;border-bottom:1px solid rgba(var(--text-color),.2)}#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{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#admin_page{gap:0;padding:0;grid-template-rows:auto 1fr}#admin_page__header{padding:1rem}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .5rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;border-radius:.5rem;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#settings_page{padding:1rem 2rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{grid-template-columns:18rem minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"admin-header admin-header" ". ."}#admin_page__header{grid-area:admin-header}#admin_page__left,#project_editing_panel{border-radius:.5rem;background-color:var(--foreground-color);box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.3)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--text-color),.06)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:#29B6F6;font-size:.9rem}#project_explorer #right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:32rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{grid-column:1/3}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.send-update-button{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button{opacity:1}.task-option{opacity:0}.task-list-item:hover .task-option,.task-option:focus-within{opacity:1}.apply-btn{opacity:0;transition:opacity .3s}.task:hover .apply-btn{opacity:1}}@media (any-hover:none){.apply-btn,.task-option{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 5f6b755..ddb8164 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1065,6 +1065,7 @@ ul { } #admin_page { + position: relative; display: grid; gap: 1rem; height: 100%; @@ -1082,7 +1083,87 @@ ul { overflow-y: auto; } -// Newer styles +.fab-actions{ + display: grid; + gap: 1rem; + position: absolute; + bottom: 0; + right: 0; + margin: 1rem; + justify-items: end; + text-align: end; + &[open]{ + .fab-actions__item{ + transform: translateY(0); + opacity: 1; + } + .fab{ + .icon{ + &:nth-of-type(1){ + transform: scale(0) rotate(180deg); + } + &:nth-of-type(2){ + transform: scale(1) rotate(0); + } + } + } + } +} +.fab-actions__item{ + display: flex; + align-items: center; + justify-self: end; + padding: 0.7rem 1rem; + border-radius: 2rem; + transform: translateY(1.5rem); + background-color: var(--foreground-color); + opacity: 0; + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s; + box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2); + user-select: none; + &:hover, + &:active{ + transform: scale(0.9); + } + &:nth-of-type(1){ + transition-delay: 0.2s; + } + &:nth-of-type(2){ + transition-delay: 0.1s; + } + .icon{ + fill: var(--accent-color); + } +} +.fab{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 0.8rem; + height: 3rem; + width: 3rem; + border-radius: 50%; + background-color: var(--accent-color); + box-shadow: 0 0.5rem 0.8remrgba(0, 0, 0, 0.3); + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + &:active{ + transform: scale(0.9); + } + .icon{ + position: absolute; + height: 100%; + fill: white; + transition: transform 0.3s; + &:nth-of-type(1){ + transform: scale(1) rotate(0); + } + &:nth-of-type(2){ + transform: scale(0) rotate(-180deg); + } + } +} #update_of_project { color: rgba(var(--text-color), 0.8); @@ -1403,7 +1484,7 @@ ul { } .interact:hover { - background-color: rgba(var(--text-color), 0.06); + background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), var(--foreground-color); } .send-update-button { diff --git a/new.html b/new.html index 631e7c6..a30de7c 100644 --- a/new.html +++ b/new.html @@ -206,8 +206,6 @@

          Don't forget to commit changes

          - Commit
          @@ -217,29 +215,9 @@
          -
          -

          Add project

          - -
          -
          -

          Add Intern

          - -
          @@ -292,6 +270,26 @@
          +
          +
            +
          • + + Add project +
            • +
          • + + Add intern +
            • +
          • + + Commit changes +
            • +
          + +

          Filter

          @@ -316,8 +314,14 @@
          -

          Interns

          -
            +
            +

            Interns

            + + + +
            +
              +

              No intern found

              @@ -380,25 +384,8 @@ d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" /> -
                - - - -
                -
                -

                Information

                -
                - Project name - Points - Description -
                -
                -
                -

                Tasks

                -
                -
                -
                -
                +
                  +

                  No intern found

                   @@ -485,7 +472,7 @@

                  - + @@ -618,7 +605,7 @@
                • -

                  +

                  @@ -632,7 +619,7 @@
                  -
                  +

                  @@ -10276,7 +10263,7 @@ } break; case 'all_interns_page': - // renderAllInterns() + renderAllInterns() break; case 'project_explorer': if(params){ @@ -10299,6 +10286,9 @@ } break; } + if(pageId !== 'all_interns_page'){ + getRef('all_interns_list').innerHTML = '' + } getRef(pageId).classList.remove('hide-completely') lastPage = pageId } @@ -10357,7 +10347,7 @@ card.querySelector('.timeline-task__description').textContent = taskDescription; return card; }, - internCard(internName, internFLOID, internPoints, container) { + internCard(internName, internFLOID, internPoints) { // creates cards containing intern information const card = getRef('intern_card_template').content.cloneNode(true) setAttributes(card.firstElementChild, { 'data-intern-id': internFLOID, 'title': 'Intern Information' }) @@ -10533,7 +10523,7 @@ let internName = getRef('intern_name_field').value.trim(), internFLOID = getRef('intern_flo_id_field').value.trim(); if (RIBC.manage.addIntern(internFLOID, internName)) { - getRef('interns').append(render.internCard(internName, internFLOID, '1', 'interns')) + getRef('admin_page__intern_list').append(render.internCard(internName, internFLOID, '1')) hidePopup(); notify(`${internName} added as an intern.`, 'success') } @@ -10553,7 +10543,7 @@ const projectCode = `${new Date().getFullYear()}_project_${RIBC.getProjectList() ? ( RIBC.getProjectList().length + 1) : '1'}`; RIBC.manage.createProject(projectCode) RIBC.manage.addProjectDetails(projectCode, { projectName, projectDescription }) - getRef('projects').prepend(render.projectCard(projectName, projectCode, true)) + getRef('admin_page__project_list').prepend(render.projectCard(projectName, projectCode, true)) hidePopup(); } @@ -10595,7 +10585,7 @@ currentTask = '', lastProject; function editProjectInfo(projectId) { - const allProjects = getRef('projects').querySelectorAll('.project-card'); + const allProjects = getRef('admin_page__project_list').querySelectorAll('.project-card'); const branchList = document.querySelectorAll('.branch-btn'); const frag = document.createDocumentFragment(); Array.from(allProjects).find(project => project.classList.contains('project-card--active'))?.classList.remove('project-card--active') @@ -10790,13 +10780,9 @@ RIBC.manage.unassignInternFromTask(currentProject, currentBranch, currentTask) } - function populateIntens() { - allInternsList = RIBC.getInternList(); - for (intern in allInternsList) { - frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern))) - } + function renderAllInterns() { getRef('all_interns_list').innerHTML = '' - getRef('all_interns_list').append(frag) + getRef('all_interns_list').append(filterInterns('')) } function changeScore(scoreUpdate) { @@ -11105,7 +11091,7 @@ if (event.target.closest('.intern-card')) showInternInfo(event.target.closest('.intern-card')) }) - document.getElementById('interns').addEventListener('click', (event) => { + document.getElementById('admin_page__intern_list').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) showInternInfo(event.target.closest('.intern-card')) }) @@ -11146,15 +11132,18 @@ } newInternList.sort((a, b) => a[2] - b[2]); + getRef('watch_project_btn').classList.remove('hide-completely') + // Intern's view let assignedProjectsList = [], x; - if (Object.keys(allInternsList).includes(myFloID) && !floGlobals.subAdmins.includes(myFloID)) { + if (allInternsList[myFloID] && !floGlobals.subAdmins.includes(myFloID)) { typeOfUser = 'intern'; document.querySelectorAll('.intern-option').forEach((option) => { option.classList.remove('hide-completely') }) document.getElementById('status_map_container').classList.add('hide-completely') + getRef('watch_project_btn').classList.add('hide-completely') // store all the projects assinged to interns in array for (let i = 0; i < allProjectsList.length; i++) { @@ -11278,20 +11267,17 @@ }) //show interns - document.getElementById('interns').innerHTML = ``; - for (intern in allInternsList) { - frag.appendChild(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern), 'interns')) - } - document.getElementById('interns').appendChild(frag) + getRef('admin_page__intern_list').innerHTML = ``; + getRef('admin_page__intern_list').append(filterInterns('')) //show project - document.getElementById('projects').innerHTML = ``; + getRef('admin_page__project_list').innerHTML = ``; for (let project in allProjectsList) { const projectCode = allProjectsList[project] const projectName = RIBC.getProjectDetails(projectCode).projectName - frag.append(render.projectCard(projectName, projectCode, true)) + frag.prepend(render.projectCard(projectName, projectCode, true)) } - document.getElementById('projects').appendChild(frag) + getRef('admin_page__project_list').append(frag) } else { document.querySelectorAll('.admin-options').forEach((option) => { @@ -11324,26 +11310,12 @@ if (localStorage.getItem('watchList') === null) localStorage.setItem('watchList', JSON.stringify(watchList)) - - populateIntens() document.getElementById('branch_container').addEventListener('click', (event) => { if (event.target.closest('.branch-btn')) { showTasksOfBranch(event.target.closest('.branch-btn'), 'project_editing_panel', 'task_list') } }) - - const searchInterns = debounce((e) => { - const searchKey = e.target.value.trim() - const allInterns = RIBC.getInternList() - for (const intern in allInterns) { - if(allInternsList[intern].toLowerCase().includes(searchKey.toLowerCase())) - frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern))) - } - getRef('interns_list_container').innerHTML = '' - getRef('interns_list_container').append(frag) - }, 150) - getRef('intern_search_field').addEventListener('input', searchInterns) - + getRef('post_update_btn').addEventListener('click', () => { const { projectId, projectName, projectBranch, task } = internAssignedTasks[currentTaskId] const topic = `${projectName} / ${RIBC.getTaskDetails(projectId, projectBranch, task).taskTitle}`; @@ -11398,6 +11370,42 @@ console.log(typeOfUser) } + function filterInterns(searchKey){ + const allInterns = RIBC.getInternList() + const arrayOfInterns = [] + for (const intern in allInterns) { + arrayOfInterns.push({ + floId: intern, + internName: allInternsList[intern] + }) + } + arrayOfInterns.sort((a,b) => a.internName.toLowerCase().localeCompare(b.internName.toLowerCase())) + if(searchKey === ''){ + arrayOfInterns.forEach(({internName, floId}) => { + frag.append(render.internCard(internName, floId, RIBC.getInternRating(floId))) + }) + }else{ + const options = { + keys: ['internName'], + threshold: 0.2 + } + const fuse = new Fuse(arrayOfInterns, options) + fuse.search(searchKey).map(v => v.item).forEach(({internName, floId}) => { + frag.append(render.internCard(internName, floId, RIBC.getInternRating(floId))) + }) + } + return frag + } + const searchInternPopup = debounce((e) => { + getRef('interns_list_container').innerHTML = '' + getRef('interns_list_container').append(filterInterns(e.target.value.trim())) + }, 150) + const searchInternPage = debounce((e) => { + getRef('all_interns_list').innerHTML = '' + getRef('all_interns_list').append(filterInterns(e.target.value.trim())) + }, 150) + getRef('intern_search_field').addEventListener('input', searchInternPopup) + getRef('interns_page__search').addEventListener('input', searchInternPage) From dcd48da076fc0d55c0275507f506bac4f28987da Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 30 Jul 2021 18:07:06 +0530 Subject: [PATCH 26/41] bug fixes --- css/main.css | 27 ++++++--- css/main.min.css | 2 +- css/main.scss | 25 ++++++--- new.html | 142 ++++++++++++++++++++++++++--------------------- 4 files changed, 115 insertions(+), 81 deletions(-) diff --git a/css/main.css b/css/main.css index ba34a11..9fe2992 100644 --- a/css/main.css +++ b/css/main.css @@ -865,9 +865,12 @@ ul { flex-direction: column; } -#intern_list_popup #interns_list_container { - min-height: 50vh; - max-height: 50vh; +#intern_search_field { + margin-bottom: 1rem; +} + +#intern_list_container { + height: 100%; overflow-y: auto; } @@ -949,18 +952,18 @@ ul { border-radius: 0.5rem; } -#right { +#project_explorer__right { align-items: flex-start; align-content: flex-start; padding: 1rem; } -#right div:first-of-type h2 { +#project_explorer__right div:first-of-type h2 { flex: 1; margin: 0.4rem 0; } -#right div:first-of-type button { +#project_explorer__right div:first-of-type button { border: 1px solid rgba(var(--text-color), 0.06); } @@ -983,6 +986,10 @@ ul { overflow-y: auto; } +#editing_panel__title { + margin-bottom: 1rem; +} + .fab-actions { display: grid; gap: 1rem; @@ -1239,7 +1246,7 @@ ul { } #dashboard_page { - grid-template-columns: 3fr 18rem; + grid-template-columns: 3fr 24rem; } #dashboard_page #status_map_container { @@ -1291,7 +1298,7 @@ ul { font-size: 0.9rem; } - #project_explorer #right { + #project_explorer #project_explorer__right { grid-area: right; height: 100%; overflow-y: auto; @@ -1341,6 +1348,10 @@ ul { #all_interns_list .intern-card__initials { grid-column: 1/3; } + + #intern_list_popup { + --height: 80vh; + } } @media only screen and (min-width: 1280px) { #main_page { diff --git a/css/main.min.css b/css/main.min.css index 369682b..6187c63 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}#loading_page,#sign_in_page{top:0;place-content:center;bottom:0;right:0}#assigned_task_list,#right,.task-list-item{align-content:flex-start}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:246,246,246;--foreground-color:white;--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,.container-card,.interact{position:relative}#main_header,.container-card,.task .left .circle{background:var(--foreground-color)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;z-index:1}#main_nav{grid-area:main-nav;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;-webkit-tap-highlight-color:transparent;font-weight:500}.nav-list__item--active,.update__sender{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{border-radius:.5rem}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;position:fixed;z-index:5;left:0;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{font-size:.9rem;font-weight:500}.update__time{font-size:.85rem;color:rgba(var(--text-color),.8)}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h3{text-transform:capitalize}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description";padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#assigned_task_list,.task-card{grid-template-columns:minmax(0,1fr)}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#intern_list_popup #interns_list_container{min-height:50vh;max-height:50vh;overflow-y:auto}#best_interns_container,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{fill:rgba(var(--text-color),.6);width:60vw;margin:2rem 0}#loading_page{display:grid;position:fixed;left:0;z-index:5;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden}#status_map_container #status_map{position:relative;padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0;text-transform:capitalize}.watching{position:relative;display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#right{align-items:flex-start;padding:1rem}#right div:first-of-type h2{flex:1;margin:.4rem 0}#right div:first-of-type button{border:1px solid}#project_explorer{padding:0}#admin_page{position:relative;display:grid;padding:0;gap:0;height:100%}#project_editing_panel{position:relative;padding:1rem;height:100%;overflow-y:auto}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}.search__icon{height:1.2rem;width:1.2rem}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;border-radius:.5rem;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#settings_page{padding:1rem 2rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{padding:1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#admin_page__left,#project_editing_panel{border-radius:.5rem;box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.3)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{grid-column:1/3}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}#updates,.task-option{transition:opacity .3s ease}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:246,246,246;--foreground-color:white;--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,.container-card,.interact{position:relative}#main_header,.container-card,.task .left .circle{background:var(--foreground-color)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}#intern_list_container,#project_editing_panel{overflow-y:auto;height:100%}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;z-index:1}#main_nav{grid-area:main-nav;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;-webkit-tap-highlight-color:transparent;font-weight:500}.nav-list__item--active,.update__sender{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{border-radius:.5rem}#loading_page,#sign_in_page{position:fixed;top:0;place-content:center;bottom:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;z-index:5;left:0;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{font-size:.9rem;font-weight:500}.update__time{font-size:.85rem;color:rgba(var(--text-color),.8)}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h3{text-transform:capitalize}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#assigned_task_list,.task-card{grid-template-columns:minmax(0,1fr)}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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-option{grid-area:options;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;left:0;z-index:5;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden}#status_map_container #status_map{position:relative;padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0;text-transform:capitalize}.watching{position:relative;display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#project_explorer__right{align-items:flex-start;align-content:flex-start;padding:1rem}#project_explorer__right div:first-of-type h2{flex:1;margin:.4rem 0}#project_explorer__right div:first-of-type button{border:1px solid}#project_explorer{padding:0}#admin_page{position:relative;display:grid;padding:0;gap:0;height:100%}#project_editing_panel{position:relative;padding:1rem}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}.search__icon{height:1.2rem;width:1.2rem}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;border-radius:.5rem;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#settings_page{padding:1rem 2rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 24rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{padding:1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#admin_page__left,#project_editing_panel{border-radius:.5rem;box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.3)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{grid-column:1/3}#intern_list_popup{--height:80vh}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index a8af798..6c972b8 100644 --- a/css/main.scss +++ b/css/main.scss @@ -892,10 +892,11 @@ ul { #intern_list_popup { flex-direction: column; } - -#intern_list_popup #interns_list_container { - min-height: 50vh; - max-height: 50vh; +#intern_search_field{ + margin-bottom: 1rem; +} +#intern_list_container { + height: 100%; overflow-y: auto; } @@ -976,18 +977,18 @@ ul { padding: 0.5rem; border-radius: 0.5rem; } -#right { +#project_explorer__right { align-items: flex-start; align-content: flex-start; padding: 1rem; } -#right div:first-of-type h2 { +#project_explorer__right div:first-of-type h2 { flex: 1; margin: 0.4rem 0; } -#right div:first-of-type button { +#project_explorer__right div:first-of-type button { border: 1px solid rgba(var(--text-color), 0.06); } @@ -1009,6 +1010,9 @@ ul { height: 100%; overflow-y: auto; } +#editing_panel__title{ + margin-bottom: 1rem; +} .fab-actions{ display: grid; @@ -1277,7 +1281,7 @@ ul { } #dashboard_page { - grid-template-columns: 3fr 18rem; + grid-template-columns: 3fr 24rem; } #dashboard_page #status_map_container { @@ -1326,7 +1330,7 @@ ul { font-size: 0.9rem; } - #project_explorer #right { + #project_explorer #project_explorer__right { grid-area: right; height: 100%; overflow-y: auto; @@ -1371,6 +1375,9 @@ ul { } } } + #intern_list_popup { + --height: 80vh; + } } @media only screen and (min-width: 1280px) { diff --git a/new.html b/new.html index 8549a7f..7131b0e 100644 --- a/new.html +++ b/new.html @@ -296,7 +296,8 @@
                  • -
                  + Filter +

                  Filter

                  By Projects
                  @@ -330,17 +331,16 @@

                  Other projects

                  -
                  +
                  -

                  - +
                  -

                  -
                  -
                  +

                  +

                  @@ -384,7 +384,7 @@ d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" /> -
                    +

                      No intern found

                      @@ -10095,6 +10095,9 @@ //Function for displaying toast notifications. pass in error for mode param if you want to show an error. function notify(message, mode, options = {}) { + if(mode === 'error'){ + console.error(message) + } const { pinned = false, sound = false } = options let icon switch (mode) { @@ -10269,10 +10272,10 @@ if(params){ showProjectInfo(params.projectId) getRef('left').classList.add('hide-on-mobile') - getRef('right').classList.remove('hide-on-mobile') + getRef('project_explorer__right').classList.remove('hide-on-mobile') }else{ getRef('left').classList.remove('hide-on-mobile') - getRef('right').classList.add('hide-on-mobile') + getRef('project_explorer__right').classList.add('hide-on-mobile') } break; case 'admin_page': @@ -10514,7 +10517,7 @@ return internInfo; } - let i = 0, allInternsList = [], newInternList = [], + let allInternsList = [], highPerformingInterns = [], frag = document.createDocumentFragment(), watchList = [], currentIntern, dashboardProject, currentTaskId, typeOfUser = 'general'; @@ -10564,20 +10567,20 @@ 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') const { projectName, projectDescription } = RIBC.getProjectDetails(projectId); - getRef('right').firstElementChild.children[0].textContent = projectName; // project name + getRef('project_explorer__project_title').textContent = projectName; // project name if (JSON.parse(localStorage.getItem('watchList')).includes(projectId)) { - getRef('right').firstElementChild.children[1].textContent = 'watching'; + getRef('watch_project_btn').textContent = 'watching'; } else { - getRef('right').firstElementChild.children[1].textContent = 'Watch'; + getRef('watch_project_btn').textContent = 'Watch'; } - getRef('right').children[1].textContent = projectDescription; - getRef('right').children[2].innerHTML = ``; + getRef('project_explorer__project_description').textContent = projectDescription; + getRef('explorer_branch_container').innerHTML = ``; RIBC.getProjectBranches(projectId).forEach((branch) => { frag.appendChild(render.branchBtn(projectId, branch)) }) - getRef('right').children[2].appendChild(frag); - getRef('right').children[2].children[0].click() + getRef('explorer_branch_container').append(frag); + getRef('explorer_branch_container').children[0].click() } let currentBranch = 'mainLine', @@ -10763,7 +10766,7 @@ }) } - document.getElementById('interns_list_container').addEventListener('click', (event) => { + document.getElementById('intern_list_container').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) { let floid = event.target.closest('.intern-card').dataset.internId; if (RIBC.manage.assignInternToTask(floid, currentProject, currentBranch, currentTask.id)) { @@ -10782,7 +10785,7 @@ function renderAllInterns() { getRef('all_interns_list').innerHTML = '' - getRef('all_interns_list').append(filterInterns('')) + getRef('all_interns_list').append(filterInterns('', {sortByRating: true})) } function changeScore(scoreUpdate) { @@ -11022,7 +11025,7 @@ if (localStorage.getItem('requests') === null) localStorage.setItem('requests', JSON.stringify(allRequests)) btn.textContent = 'Applied' - getRef(btn).disabled = true + btn.disabled = true RIBC.applyForTask(btn.dataset.projectCode, btn.dataset.branch, btn.dataset.taskNo) .then((result) => { notify('', 'Applied sucessfully.') @@ -11076,6 +11079,10 @@ }, 0); } } + + function toggleFilter(){ + getRef('update_filters_wrapper').classList.toggle('hide-on-mobile') + } // Event listeners document.getElementById('best_interns').addEventListener('click', (event) => { @@ -11098,19 +11105,16 @@ document.addEventListener('popupopened', e => { switch(e.detail.popup.id){ case 'intern_list_popup': - allInternsList = RIBC.getInternList(); - for (intern in allInternsList) { - frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern))) - } - getRef('interns_list_container').innerHTML = '' - getRef('interns_list_container').append(frag) + getRef('intern_list_container').innerHTML = '' + getRef('intern_list_container').append(filterInterns('')) break; } }) document.addEventListener('popupclosed', e => { switch(e.detail.popup.id){ case 'intern_list_popup': - getRef('interns_list_container').innerHTML = '' + getRef('intern_list_container').innerHTML = '' + getRef('intern_search_field').value = '' break; } }) @@ -11126,11 +11130,15 @@ allInternsList = RIBC.getInternList(); - newInternList = []; + highPerformingInterns = []; for (let intern in allInternsList) { - newInternList.push([intern, allInternsList[intern], RIBC.getInternRating(intern)]) + highPerformingInterns.push({ + floId: intern, + internName: allInternsList[intern], + rating: RIBC.getInternRating(intern) + }) } - newInternList.sort((a, b) => a[2] - b[2]); + highPerformingInterns.sort((a, b) => b.rating - a.rating); getRef('watch_project_btn').classList.remove('hide-completely') @@ -11287,9 +11295,9 @@ document.getElementById('best_interns').innerHTML = ``; let limit = 4; - newInternList.reverse() for (let p = 0; p < limit; p++) { - frag.appendChild(render.internCard(newInternList[p][1], newInternList[p][0], newInternList[p][2], 'best_interns')) + const {internName, floId, rating} = highPerformingInterns[p] + frag.append(render.internCard(internName, floId, rating)) } document.getElementById('best_interns').appendChild(frag) @@ -11370,42 +11378,50 @@ console.log(typeOfUser) } - function filterInterns(searchKey){ - const allInterns = RIBC.getInternList() - const arrayOfInterns = [] - for (const intern in allInterns) { - arrayOfInterns.push({ - floId: intern, - internName: allInternsList[intern] - }) - } - arrayOfInterns.sort((a,b) => a.internName.toLowerCase().localeCompare(b.internName.toLowerCase())) - if(searchKey === ''){ - arrayOfInterns.forEach(({internName, floId}) => { + function filterInterns(searchKey, options = {}){ + const {sortByRating = false} = options + const allInterns = RIBC.getInternList() + const arrayOfInterns = [] + for (const intern in allInterns) { + arrayOfInterns.push({ + floId: intern, + internName: allInternsList[intern] + }) + } + arrayOfInterns.sort((a,b) => a.internName.toLowerCase().localeCompare(b.internName.toLowerCase())) + if(searchKey === ''){ + if(sortByRating){ + highPerformingInterns.forEach(({internName, floId}) => { frag.append(render.internCard(internName, floId, RIBC.getInternRating(floId))) }) }else{ - const options = { - keys: ['internName'], - threshold: 0.2 - } - const fuse = new Fuse(arrayOfInterns, options) - fuse.search(searchKey).map(v => v.item).forEach(({internName, floId}) => { + arrayOfInterns.forEach(({internName, floId}) => { frag.append(render.internCard(internName, floId, RIBC.getInternRating(floId))) }) + } - return frag + }else{ + const options = { + keys: ['internName'], + threshold: 0.2 + } + const fuse = new Fuse(arrayOfInterns, options) + fuse.search(searchKey).map(v => v.item).forEach(({internName, floId}) => { + frag.append(render.internCard(internName, floId, RIBC.getInternRating(floId))) + }) } - const searchInternPopup = debounce((e) => { - getRef('interns_list_container').innerHTML = '' - getRef('interns_list_container').append(filterInterns(e.target.value.trim())) - }, 150) - const searchInternPage = debounce((e) => { - getRef('all_interns_list').innerHTML = '' - getRef('all_interns_list').append(filterInterns(e.target.value.trim())) - }, 150) - getRef('intern_search_field').addEventListener('input', searchInternPopup) - getRef('interns_page__search').addEventListener('input', searchInternPage) + return frag + } + const searchInternPopup = debounce((e) => { + getRef('intern_list_container').innerHTML = '' + getRef('intern_list_container').append(filterInterns(e.target.value.trim())) + }, 150) + const searchInternPage = debounce((e) => { + getRef('all_interns_list').innerHTML = '' + getRef('all_interns_list').append(filterInterns(e.target.value.trim(), {sortByRating: true})) + }, 150) + getRef('intern_search_field').addEventListener('input', searchInternPopup) + getRef('interns_page__search').addEventListener('input', searchInternPage) From ec506592b51be7b9e13b5bd0357b5e5e36643bc4 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 31 Jul 2021 16:07:32 +0530 Subject: [PATCH 27/41] Refactoring intern update filter logic --- components.js | 1 - css/main.css | 70 ++++++++++++++++++++++++++------ css/main.min.css | 2 +- css/main.scss | 66 ++++++++++++++++++++++++------ new.html | 103 +++++++++++++++++++++++------------------------ 5 files changed, 162 insertions(+), 80 deletions(-) diff --git a/components.js b/components.js index 38b7f47..ec49741 100644 --- a/components.js +++ b/components.js @@ -231,7 +231,6 @@ smCheckbox.innerHTML = `
                      -
                      +
                      +

                      No project added to watch list.

                      My tasks

                      @@ -190,6 +192,7 @@

                      +
                      @@ -294,6 +297,7 @@
                      +
                      Filter @@ -339,7 +343,7 @@ Watch -

                      +

                      @@ -589,7 +593,7 @@ + @@ -10310,7 +10363,7 @@ className: 'project-card flex align-center interact', attributes: { 'title': "Project information", - href: `#${page}?projectId=${projectCode}` + href: `#${page}?projectId=${projectCode}&branch=mainLine` }, textContent: projectName }); @@ -10351,6 +10404,19 @@ const {taskTitle, taskDescription} = RIBC.getTaskDetails(currentProject, currentBranch, taskNo) card.querySelector('.timeline-task__title').textContent = taskTitle; card.querySelector('.timeline-task__description').textContent = taskDescription; + const branches = getAllBranches(currentProject) + for(const branch of branches){ + const {branchName, parantBranch, startPoint, endPoint} = branch + if(parantBranch === currentBranch && startPoint === taskNo){ + card.querySelector('.task__branch_container').append( + render.branchBtn({ + projectId: currentProject, + branch: branchName, + page: 'project_explorer' + }) + ) + } + } return card; }, internCard(internName, internFLOID, internPoints) { @@ -10373,10 +10439,11 @@ card.querySelector('.update__message').textContent = description return card; }, - branchBtn(projectCode, branch) { - return createElement('button', { - className: 'branch-btn uppercase', - attributes: { 'data-project-code': projectCode }, + branchBtn(obj = {}) { + const {projectId, branch, page} = obj + return createElement('a', { + className: 'branch-button uppercase', + attributes: { href: `#${page}?projectId=${projectId}&branch=${branch}`}, textContent: branch }); }, @@ -10411,34 +10478,37 @@ }) card.querySelector('.assigned-interns').appendChild(frag) } + const branches = getAllBranches(currentProject) + for(const branch of branches){ + const {branchName, parantBranch, startPoint, endPoint} = branch + if(parantBranch === currentBranch && startPoint === taskNo){ + card.querySelector('.task__branch_container').append( + render.branchBtn({ + projectId: currentProject, + branch: branchName, + page: 'admin_page' + }) + ) + } + } return card; }, - projectMapCard: function (projectCode) { - let card = document.createElement('div'), - header = document.createElement('div'), - title = document.createElement('h2'), - para = document.createElement('p'), - branchContainer = document.createElement('div'), - timeline = document.createElement('h4') - mapBody = document.createElement('div'), - frag = document.createDocumentFragment(), - projectDetails = RIBC.getProjectDetails(projectCode), - mapItems = []; - card.id = `${projectCode}_map`; - currentProject = projectCode; - branchContainer.id = `${projectCode}_branch_container`; - title.textContent = projectDetails.projectName; - para.textContent = projectDetails.projectDescription; - timeline.textContent = 'Timeline'; - mapBody.id = `${projectCode}_map_body` + projectMapCard(projectCode, page) { + const card = getRef('project_map_template').content.cloneNode(true) + const frag = document.createDocumentFragment() + const {projectName, projectDescription} = RIBC.getProjectDetails(projectCode) + card.firstElementChild.id = `${projectCode}_map`; + card.querySelector('.project-map__title').textContent = projectName + card.querySelector('.project-map__description').textContent = projectDescription + card.querySelector('.project__branch_container').id = `${projectCode}_branch_container`; RIBC.getProjectBranches(projectCode).forEach((branch) => { - frag.append(render.branchBtn(projectCode, branch)) + frag.append(render.branchBtn({projectId: projectCode, branch, page})) }) - branchContainer.append(frag); - header.append(title) - card.append(header, para, branchContainer, timeline, mapBody) - mapItems.push(card, card.id, branchContainer.id, mapBody.id) - return mapItems; + card.querySelector('.project__branch_container').append(frag); + card.querySelector('.project-map__timeline').id = `${projectCode}_map_body` + currentProject = projectCode; + // mapItems.push(card, card.id, branchContainer.id, mapBody.id) + return card; }, requestCard(floId, projectCode, branch, taskNo) { let name; @@ -10521,7 +10591,7 @@ } let allInternsList = [], highPerformingInterns = [], - watchList = [], currentIntern, dashboardProject, currentTaskId, + watchList = [], currentIntern, currentTaskId, typeOfUser = 'general'; // Adds interns to the database **Only SubAdmins can add interns @@ -10581,10 +10651,9 @@ getRef('project_explorer__project_description').textContent = projectDescription; getRef('explorer_branch_container').innerHTML = ``; RIBC.getProjectBranches(projectId).forEach((branch) => { - frag.append(render.branchBtn(projectId, branch)) + frag.append(render.branchBtn({projectId, branch, page: 'project_explorer'})) }) getRef('explorer_branch_container').append(frag); - getRef('explorer_branch_container').children[0].click() } let currentBranch = 'mainLine', @@ -10593,12 +10662,12 @@ lastProject; function editProjectInfo(projectId) { const allProjects = getRef('admin_page__project_list').querySelectorAll('.project-card'); - const branchList = document.querySelectorAll('.branch-btn'); + const branchList = document.querySelectorAll('.branch-button'); const frag = document.createDocumentFragment(); 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') @@ -10607,40 +10676,62 @@ getRef('editing_panel__title').textContent = projectName; getRef('editing_panel__description').textContent = projectDescription; RIBC.getProjectBranches(currentProject).forEach((branch) => { - frag.appendChild(render.branchBtn(currentProject, branch)) + frag.append(render.branchBtn({projectId: currentProject, branch, page: 'admin_page'})) }) getRef('branch_container').appendChild(frag) - getRef('branch_container').firstElementChild.click() } - function showTasksOfBranch(btn, destination, taskListContainer) { - currentProject = btn.dataset.projectCode; - currentBranch = btn.textContent; + function showTasksOfBranch(obj = {}) { + const {destination, taskListContainer, projectId, branch} = obj + currentProject = projectId; + currentBranch = branch; const frag = document.createDocumentFragment(); let content = RIBC.getProjectMap(currentProject)[currentBranch], taskList = document.getElementById(taskListContainer), - allbranches = document.getElementById(destination).querySelectorAll('.branch-btn'); - console.log(content) + allbranches = document.getElementById(destination).querySelectorAll('.branch-button'); taskList.innerHTML = ''; allbranches.forEach((branchBtn) => { branchBtn.classList.remove('active-branch') }) - btn.classList.add('active-branch') - if (!content[1] && !taskListContainer === 'task_list') { + // document.getElementById(destination).querySelector(`'.branch-button[href="#${}"]`).classList.add('active-branch') + if (content[1] && !taskListContainer === 'task_list') { taskList.textContent = "No tasks added yet, Please explore other projects" }else { if (taskListContainer === 'task_list') { showInnerPage('project_editing_panel') content.slice(4).forEach((taskNo) => { - frag.appendChild(render.taskListItem(taskNo)) + frag.append(render.taskListItem(taskNo)) }) }else { content.slice(4).forEach((taskNo) => { - frag.appendChild(render.taskCard(currentProject, currentBranch, taskNo)) + frag.append(render.taskCard(currentProject, currentBranch, taskNo)) }) } taskList.appendChild(frag); } } + function getAllBranches(projectId){ + const projectMap = RIBC.getProjectMap(projectId) + const projectBranches = RIBC.getProjectBranches(projectId) + const branchPoints = [] + projectBranches.forEach((branch, index) => { + if(index > 0){ + branchPoints.push({ + branchName: branch, + parantBranch: projectMap[branch][0], + startPoint: projectMap[branch][2], + endPoint: projectMap[branch][3] + }) + } + }) + return branchPoints + } + function showProjectMap(projectCode, container) { + if (projectCode === undefined) return; + const tempCard = render.projectMapCard(projectCode, 'dashboard_page'); + getRef(container).innerHTML = ``; + currentProject = projectCode; + getRef(container).append(tempCard) + } getRef('task_list').addEventListener('click', (e) => { if (e.target.closest('.task-list-item')) { currentTask = e.target.closest('.task-list-item'); @@ -10807,18 +10898,19 @@ } } - function addNewBranch() { - showPopup('create_branch') - let startPoint = document.getElementById('branch_start_point'), - mergePoint = document.getElementById('branch_merge_point'), - branchName = ''; - startPoint.value = parseInt(currentTask.id); - document.getElementById('create_branch_btn').onclick = () => { - branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, parseInt(mergePoint.value)); - notify(`Branch added ${branchName}`, 'success') - getRef('branch_container').append(render.branchBtn(currentProject, branchName)) - hidePopup() - } + function showNewBranchPopup() { + showPopup('create_branch_popup') + const startPoint = parseInt(currentTask.id) + getRef('branch_start_point').value = startPoint; + } + getRef('create_branch_btn').onclick = () => { + const startPoint = parseInt(currentTask.id) + const userMergePoint = getRef('branch_merge_point').value.trim() + const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint) + const branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, mergePoint); + notify(`Branch added ${branchName}`, 'success') + getRef('branch_container').append(render.branchBtn({projectId: currentProject, branch: branchName, page: 'admin_page'})) + hidePopup() } function renderProjectSelectorOptions() { @@ -10967,21 +11059,6 @@ } changeProject(0) } - - function showProjectMap(projectCode, container) { - if (projectCode === undefined) return; - let tempCard = render.projectMapCard(projectCode), - containerCard = document.getElementById(container); - containerCard.innerHTML = ``; - currentProject = projectCode; - containerCard.appendChild(tempCard[0]) - document.getElementById(tempCard[2]).addEventListener('click', (event) => { - if (event.target.closest('.branch-btn')) { - showTasksOfBranch(event.target.closest('.branch-btn'), tempCard[1], tempCard[3], '') - } - }) - document.getElementById(tempCard[2]).firstElementChild.click() - } let index = 0; function changeProject(change) { let list = JSON.parse(localStorage.getItem('watchList')), @@ -11011,8 +11088,8 @@ else getRef('next_proj').disabled = false } - dashboardProject = list[index] - showProjectMap(dashboardProject, 'status_map') + showProjectMap(list[index], 'status_map') + window.location.hash = `#dashboard_page?projectId=${list[index]}&branch=mainLine` } let allRequests = []; @@ -11315,11 +11392,6 @@ if (localStorage.getItem('watchList') === null) localStorage.setItem('watchList', JSON.stringify(watchList)) - document.getElementById('branch_container').addEventListener('click', (event) => { - if (event.target.closest('.branch-btn')) { - showTasksOfBranch(event.target.closest('.branch-btn'), 'project_editing_panel', 'task_list') - } - }) getRef('post_update_btn').addEventListener('click', () => { const { projectId, projectName, projectBranch, task } = internAssignedTasks[currentTaskId] @@ -11342,10 +11414,10 @@ getRef('project_explorer').children[0].children[1].innerHTML = ``; getRef('project_explorer').children[0].children[3].innerHTML = ``; - if (Object.keys(allInternsList).includes(myFloID) && !floGlobals.subAdmins.includes(myFloID)) { - for (i = 0; i < assignedProjectsList.length; i++) { - frag.appendChild(render.projectCard(RIBC.getProjectDetails(assignedProjectsList[i]).projectName, assignedProjectsList[i])) - } + if (allInternsList[myFloID] && !floGlobals.subAdmins.includes(myFloID)) { + assignedProjectsList.forEach((project) => { + frag.append(render.projectCard(RIBC.getProjectDetails(project).projectName, project)) + }) getRef('project_explorer').children[0].children[1].appendChild(frag) allProjectsList = allProjectsList.filter(val => !assignedProjectsList.includes(val)); } @@ -11354,9 +11426,7 @@ } getRef('project_explorer').children[0].children[3].appendChild(frag) - getRef('project_explorer').children[1].addEventListener('click', (event) => { - if (event.target.closest('.branch-btn')) - showTasksOfBranch(event.target.closest('.branch-btn'), 'project_explorer', 'explorer_task_list') + getRef('explorer_task_list').addEventListener('click', (event) => { if (event.target.closest('.apply-button')) { requestForTask(event.target.closest('.apply-button')) } From 5a7e4beb23d5f2c2364a1ea9830b6bb9b908f10e Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 2 Aug 2021 01:13:02 +0530 Subject: [PATCH 29/41] Feature update and refactoring -- added new watchlist UI --- css/main.css | 99 +- css/main.min.css | 2 +- css/main.scss | 100 +- new.html | 4867 +++++++++++++++++++++++----------------------- 4 files changed, 2549 insertions(+), 2519 deletions(-) diff --git a/css/main.css b/css/main.css index abae311..c1a44ca 100644 --- a/css/main.css +++ b/css/main.css @@ -751,8 +751,8 @@ ul { .active-branch { opacity: 1; - color: var(--accent-color); - background: rgba(var(--text-color), 0.04); + color: white; + background: var(--accent-color); } #task_list { @@ -959,55 +959,29 @@ ul { width: 4rem; } -#status_map_container { +#project_watching_section { position: relative; overflow: hidden; } -#status_map_container #status_map { - position: relative; - padding: 0 1rem 1rem 1rem; -} - -#status_map_container #status_map h2 { - margin: 0.4rem 0; - text-transform: capitalize; -} - -.watching { - position: relative; - display: flex; - padding: 1rem; - align-items: center; -} - -.watching h4 { - flex: 1; - font-weight: 500; -} - -.watching button { - padding: 0.5rem; - border-radius: 0.5rem; +#project_explorer { + padding: 0; } #project_explorer__right { + gap: 1rem; align-items: flex-start; align-content: flex-start; padding: 1rem; } -#project_explorer__right div:first-of-type h2 { - flex: 1; - margin: 0.4rem 0; +#explorer_branch_container { + margin-top: 1.5rem; } -#project_explorer__right div:first-of-type button { - border: 1px solid rgba(var(--text-color), 0.06); -} - -#project_explorer { - padding: 0; +#watch_project_button { + margin-left: 1rem; + text-transform: capitalize; } #admin_page { @@ -1227,6 +1201,7 @@ ul { #admin_page__left .list-container { height: 100%; overflow-y: auto; + padding-bottom: 2rem; } #admin_page__left .empty-state { padding: 1rem; @@ -1253,6 +1228,44 @@ ul { border: solid var(--accent-color) thin; } +#project_watching_section { + display: grid; + gap: 1rem; +} + +#project_watchlist { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); +} + +.watchlist_project_card { + color: inherit; + display: grid; + border-radius: 0.5rem; + grid-template-rows: auto 1fr; + gap: 1rem; + padding: 1rem; + background-color: rgba(var(--text-color), 0.04); +} +.watchlist_project_card .project__title { + font-size: 1.1rem; + line-height: 1.5; +} + +.progress-bar { + display: flex; + height: 0.5rem; + background-color: rgba(var(--text-color), 0.2); + border-radius: 1rem; + overflow: hidden; + align-self: flex-end; +} +.progress-bar .progress-value { + background-color: var(--accent-color); + transition: width 0.3s; +} + @media only screen and (max-width: 640px) { .hide-on-mobile, .hide-page-on-mobile { @@ -1262,6 +1275,10 @@ ul { #project_editing_panel { padding: 1rem; } + + .list-container { + padding-bottom: 5rem; + } } @media only screen and (min-width: 640px) { .hide-on-desktop { @@ -1314,10 +1331,10 @@ ul { } #dashboard_page { - grid-template-columns: 3fr 20rem; + grid-template-columns: 3fr 18rem; } - #dashboard_page #status_map_container { + #dashboard_page #project_watching_section { align-self: flex-start; } @@ -1435,6 +1452,10 @@ ul { #settings_page { padding: 1rem 2rem; } + + .watchlist_project_card { + padding: 1.5rem; + } } @media only screen and (min-width: 1280px) { #main_page { diff --git a/css/main.min.css b/css/main.min.css index e35b00c..f79ef94 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center,.task .left{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_header,.container-card,.task .left .circle{background:var(--foreground-color)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;border-radius:.5rem}#loading_page,#sign_in_page{position:fixed;place-content:center;z-index:5;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;top:0;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h3{text-transform:capitalize}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-button{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em;background-color:rgba(var(--text-color),.06)}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#assigned_task_list,.task-card{grid-template-columns:minmax(0,1fr)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button{display:flex;align-items:center}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;top:0;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden}#status_map_container #status_map{position:relative;padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0;text-transform:capitalize}.watching{position:relative;display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#project_explorer__right{align-items:flex-start;align-content:flex-start;padding:1rem}#project_explorer__right div:first-of-type h2{flex:1;margin:.4rem 0}#project_explorer__right div:first-of-type button{border:1px solid}#project_explorer{padding:0}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{position:fixed;z-index:3;top:0;bottom:0;left:0;right:0;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 20rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.update__topic{text-transform:capitalize}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-button{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em;background-color:rgba(var(--text-color),.06)}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button{display:flex;align-items:center}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 6a72f71..28133af 100644 --- a/css/main.scss +++ b/css/main.scss @@ -775,8 +775,8 @@ ul { .active-branch { opacity: 1; - color: var(--accent-color); - background: rgba(var(--text-color), 0.04); + color: white; + background: var(--accent-color); } #task_list{ @@ -988,55 +988,27 @@ ul { } } -#status_map_container { +#project_watching_section { position: relative; overflow: hidden; } - -#status_map_container #status_map { - position: relative; - padding: 0 1rem 1rem 1rem; -} - -#status_map_container #status_map h2 { - margin: 0.4rem 0; - text-transform: capitalize; -} - -.watching { - position: relative; - display: flex; - padding: 1rem; - align-items: center; -} - -.watching h4 { - flex: 1; - font-weight: 500; -} - -.watching button { - padding: 0.5rem; - border-radius: 0.5rem; +#project_explorer { + padding: 0; } #project_explorer__right { + gap: 1rem; align-items: flex-start; align-content: flex-start; padding: 1rem; } - -#project_explorer__right div:first-of-type h2 { - flex: 1; - margin: 0.4rem 0; +#explorer_branch_container{ + margin-top: 1.5rem; +} +#watch_project_button{ + margin-left: 1rem; + text-transform: capitalize; } -#project_explorer__right div:first-of-type button { - border: 1px solid rgba(var(--text-color), 0.06); -} - -#project_explorer { - padding: 0; -} #admin_page { position: relative; @@ -1259,7 +1231,8 @@ ul { } .list-container{ height: 100%; - overflow-y: auto; + overflow-y: auto; + padding-bottom: 2rem; } .empty-state{ padding: 1rem; @@ -1283,6 +1256,41 @@ ul { border-radius: 0.3rem; border: solid var(--accent-color) thin; } +#project_watching_section{ + display: grid; + gap: 1rem; +} +#project_watchlist{ + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(15rem ,1fr)); + +} +.watchlist_project_card{ + color: inherit; + display: grid; + border-radius: 0.5rem; + grid-template-rows: auto 1fr; + gap: 1rem; + padding: 1rem; + background-color: rgba(var(--text-color), 0.04); + .project__title{ + font-size: 1.1rem; + line-height: 1.5; + } +} +.progress-bar{ + display: flex; + height: 0.5rem; + background-color: rgba(var(--text-color), 0.2); + border-radius: 1rem; + overflow: hidden; + align-self: flex-end; + .progress-value{ + background-color: var(--accent-color); + transition: width 0.3s; + } +} @media only screen and (max-width: 640px) { .hide-on-mobile, @@ -1292,6 +1300,9 @@ ul { #project_editing_panel{ padding: 1rem; } + .list-container{ + padding-bottom: 5rem; + } } @media only screen and (min-width: 640px) { .hide-on-desktop { @@ -1349,10 +1360,10 @@ ul { } #dashboard_page { - grid-template-columns: 3fr 20rem; + grid-template-columns: 3fr 18rem; } - #dashboard_page #status_map_container { + #dashboard_page #project_watching_section { align-self: flex-start; } @@ -1460,6 +1471,9 @@ ul { #settings_page { padding: 1rem 2rem; } + .watchlist_project_card{ + padding: 1.5rem; + } } @media only screen and (min-width: 1280px) { diff --git a/new.html b/new.html index 5229f7b..aef4844 100644 --- a/new.html +++ b/new.html @@ -58,6 +58,73 @@ OK +
                      + +

                      Loading RIBC

                      +

                      + A FLO Blockchain App by RanchiMall +

                      +
                      + + RanchiMall logo + + + + + + + + + + + +
                      +

                      Sign In

                      Welcome to RIBC.

                      @@ -133,34 +200,16 @@
                      -
                      -
                      -

                      Projects you are watching

                      - - -
                      -
                      -

                      No project added to watch list.

                      -
                      +
                      +

                      Projects watchlist

                      +
                      +

                      No project added to watchlist.

                      +

                      My tasks

                        -
                        +
                        -
                        +
                        @@ -335,10 +384,10 @@

                        Other projects

                        -
                        +

                        - Watch @@ -489,73 +538,6 @@ -
                        - -

                        Loading RIBC

                        -

                        - A FLO Blockchain App by RanchiMall -

                        -
                        - - RanchiMall logo - - - - - - - - - - - -
                        -
                        @@ -643,7 +625,2150 @@
                        + + + + + - - - - \ No newline at end of file From 6989d2fec3027a109347d77b6eb1a0fa762ffd7f Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 2 Aug 2021 17:26:09 +0530 Subject: [PATCH 30/41] Added branch start point --- css/main.css | 19 +++++++++--- css/main.min.css | 2 +- css/main.scss | 19 ++++++++---- new.html | 75 ++++++++++++++++++++++++------------------------ 4 files changed, 68 insertions(+), 47 deletions(-) diff --git a/css/main.css b/css/main.css index c1a44ca..31fe11e 100644 --- a/css/main.css +++ b/css/main.css @@ -738,16 +738,23 @@ ul { } .branch-button { + display: flex; border-radius: 0; padding: 0.5rem; border-radius: 0.2rem; margin: 0.5rem 0.5rem 0.5rem 0; + text-transform: capitalize; + justify-self: start; + align-items: center; user-select: none; font-size: 0.85rem; font-weight: 500; - letter-spacing: 0.05em; background-color: rgba(var(--text-color), 0.06); } +.branch-button .icon { + height: 1.2rem; + width: 1.2rem; +} .active-branch { opacity: 1; @@ -756,7 +763,7 @@ ul { } #task_list { - padding: 1.5rem 0; + padding-bottom: 1.5rem; } .task-list-item { @@ -894,10 +901,14 @@ ul { margin-right: 0.5rem; } +#editing_panel__description { + margin-bottom: 2rem; +} + #branch_container { display: flex; flex-flow: row wrap; - margin: 1rem 0; + margin: 0.5rem 0 1rem 0; } #intern_list_popup { @@ -1219,7 +1230,7 @@ ul { #user_role { justify-self: start; - font-size: 0.8rem; + font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; diff --git a/css/main.min.css b/css/main.min.css index f79ef94..ad7bd29 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.update__topic{text-transform:capitalize}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-button{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em;background-color:rgba(var(--text-color),.06)}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button{display:flex;align-items:center}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#updates,.task-option{transition:opacity .3s ease}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.branch-button,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}#intern_info h4,#intern_info h5,.update__topic{margin-top:.5rem}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500;background-color:rgba(var(--text-color),.06)}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button{display:flex;align-items:center}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 28133af..a4a3f72 100644 --- a/css/main.scss +++ b/css/main.scss @@ -762,15 +762,22 @@ ul { } .branch-button { + display: flex; border-radius: 0; padding: 0.5rem; border-radius: 0.2rem; margin: 0.5rem 0.5rem 0.5rem 0; + text-transform: capitalize; + justify-self: start; + align-items: center; user-select: none; font-size: 0.85rem; font-weight: 500; - letter-spacing: 0.05em; background-color: rgba(var(--text-color), 0.06); + .icon{ + height: 1.2rem; + width: 1.2rem; + } } .active-branch { @@ -780,7 +787,7 @@ ul { } #task_list{ - padding: 1.5rem 0; + padding-bottom: 1.5rem; } .task-list-item { display: grid; @@ -924,11 +931,13 @@ ul { margin-right: 0.5rem; } } - +#editing_panel__description{ + margin-bottom: 2rem; +} #branch_container { display: flex; flex-flow: row wrap; - margin: 1rem 0; + margin: 0.5rem 0 1rem 0; } #intern_list_popup { @@ -1248,7 +1257,7 @@ ul { } #user_role{ justify-self: start; - font-size: 0.8rem; + font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; diff --git a/new.html b/new.html index aef4844..03af190 100644 --- a/new.html +++ b/new.html @@ -131,7 +131,7 @@ - Sign in + Sign in

                        Don't have a private key? get it here @@ -279,9 +279,10 @@

                        +

                        Tasks

                        -

                        Tasks

                          +

                          No tasks added yet, tasks will appear here after adding them.

                          @@ -1680,7 +1681,7 @@ const {branchName, parantBranch, startPoint, endPoint} = branch if(parantBranch === currentBranch && startPoint === taskNo){ card.querySelector('.task__branch_container').append( - render.branchBtn({ + render.branchButton({ projectId: currentProject, branch: branchName, page: 'project_explorer' @@ -1710,12 +1711,13 @@ card.querySelector('.update__message').textContent = description return card; }, - branchBtn(obj = {}) { - const {projectId, branch, page} = obj + branchButton(obj = {}) { + const {projectId, branch, page, innerHTML} = obj return createElement('a', { - className: 'branch-button uppercase', + className: 'branch-button', attributes: { href: `#${page}?projectId=${projectId}&branch=${branch}`}, - textContent: branch + textContent: branch, + innerHTML }); }, assignedInternCard(intern, options) { @@ -1754,7 +1756,7 @@ const {branchName, parantBranch, startPoint, endPoint} = branch if(parantBranch === currentBranch && startPoint === taskNo){ card.querySelector('.task__branch_container').append( - render.branchBtn({ + render.branchButton({ projectId: currentProject, branch: branchName, page: 'admin_page' @@ -1773,7 +1775,7 @@ card.querySelector('.project-map__description').textContent = projectDescription card.querySelector('.project__branch_container').id = `${projectCode}_branch_container`; RIBC.getProjectBranches(projectCode).forEach((branch) => { - frag.append(render.branchBtn({projectId: projectCode, branch, page})) + frag.append(render.branchButton({projectId: projectCode, branch, page})) }) card.querySelector('.project__branch_container').append(frag); card.querySelector('.project-map__timeline').id = `${projectCode}_map_body` @@ -1837,7 +1839,6 @@ projectBranches.forEach(branch => { projectMap[branch].forEach((task, index, array) => { if(index > 3){ - console.log(projectId, branch, array[index]) projectTasks.push({ status: RIBC.getTaskStatus(projectId, branch, array[index]) }) @@ -1845,7 +1846,6 @@ }) }) const completedTasks = projectTasks.reduce((count, task) => { - console.log(task) if(task.status === 'completed'){ return count += 1 }else{ @@ -1953,7 +1953,7 @@ getRef('project_explorer__project_description').textContent = projectDescription; getRef('explorer_branch_container').innerHTML = ``; RIBC.getProjectBranches(projectId).forEach((branch) => { - frag.append(render.branchBtn({projectId, branch, page: 'project_explorer'})) + frag.append(render.branchButton({projectId, branch, page: 'project_explorer'})) }) getRef('explorer_branch_container').append(frag); } @@ -1978,7 +1978,7 @@ getRef('editing_panel__title').textContent = projectName; getRef('editing_panel__description').textContent = projectDescription; RIBC.getProjectBranches(currentProject).forEach((branch) => { - frag.append(render.branchBtn({projectId: currentProject, branch, page: 'admin_page'})) + frag.append(render.branchButton({projectId: currentProject, branch, page: 'admin_page'})) }) getRef('branch_container').appendChild(frag) } @@ -1987,27 +1987,42 @@ currentProject = projectId; currentBranch = branch; const frag = document.createDocumentFragment(); - let content = RIBC.getProjectMap(currentProject)[currentBranch], + let branchTasks = RIBC.getProjectMap(currentProject)[currentBranch], taskList = document.getElementById(taskListContainer), allbranches = document.getElementById(destination).querySelectorAll('.branch-button'); taskList.innerHTML = ''; - allbranches.forEach((branchBtn) => { - branchBtn.classList.remove('active-branch') + allbranches.forEach((branchButton) => { + branchButton.classList.remove('active-branch') }) document.getElementById(destination).querySelector(`.branch-button[href="#${pageId}?projectId=${projectId}&branch=${branch}"]`).classList.add('active-branch') - if (content[1] && !taskListContainer === 'task_list') { + if (branchTasks[1] && !taskListContainer === 'task_list') { taskList.textContent = "No tasks added yet, Please explore other projects" }else { if (taskListContainer === 'task_list') { showInnerPage('project_editing_panel') - content.slice(4).forEach((taskNo) => { + branchTasks.slice(4).forEach((taskNo) => { frag.append(render.taskListItem(taskNo)) }) }else { - content.slice(4).forEach((taskNo) => { + branchTasks.slice(4).forEach((taskNo) => { frag.append(render.taskCard(currentProject, currentBranch, taskNo)) }) } + if(branch !== 'mainLine'){ + const {startPoint} = getAllBranches(projectId).find(({branchName}) => branchName === branch) + let branchEntryPoint = ` + + ${branchTasks[0]} + ` + if(startPoint){ + const {taskTitle} = RIBC.getTaskDetails(projectId, branchTasks[0], startPoint) + branchEntryPoint = ` + + ${branchTasks[0]} - ${taskTitle} + ` + } + taskList.append(render.branchButton({projectId, branch: branchTasks[0], page: pageId, innerHTML: branchEntryPoint})) + } taskList.appendChild(frag); } } @@ -2213,7 +2228,7 @@ const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint) const branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, mergePoint); notify(`Branch added ${branchName}`, 'success') - getRef('branch_container').append(render.branchBtn({projectId: currentProject, branch: branchName, page: 'admin_page'})) + getRef('branch_container').append(render.branchButton({projectId: currentProject, branch: branchName, page: 'admin_page'})) hidePopup() } @@ -2406,16 +2421,15 @@ return new Promise((resolve, reject) => { loader('hide') getRef('sign_in_page').classList.remove('hide-completely'); - let container = document.getElementById('priv_key_sign_in'), - signIn = document.getElementById('sign_in') document.getElementById('guest_btn').onclick = function () { getRef('sign_in_page').classList.add('hide-completely'); reject(null); } - document.getElementById('sign_in_btn').onclick = function () { + document.getElementById('sign_in_button').onclick = function () { resolve(getRef('private_key_input').value.trim()) - getRef('sign_in_page').classList.add('hide-completely'); + getRef('private_key_input').value = '' loader('show') + getRef('sign_in_page').classList.add('hide-completely'); } }) } @@ -2443,11 +2457,6 @@ if (event.target.closest('.intern-card')) showInternInfo(event.target.closest('.intern-card')) }) - // document.getElementById('status_map').addEventListener('click', (e) => { - // if (e.target.closest('.apply-button')) { - // requestForTask(e.target.closest('.apply-button')) - // } - // }) document.getElementById('all_interns_page').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) showInternInfo(event.target.closest('.intern-card')) @@ -2708,14 +2717,6 @@ requestForTask(event.target.closest('.apply-button')) } }) - // if (JSON.parse(localStorage.getItem(`${myFloID}_watchlist`)).length) { - // showProjectMap(JSON.parse(localStorage.getItem(`${myFloID}_watchlist`))[0], 'status_map') - // } - // else { - // document.getElementById('status_map').innerHTML = '

                          No project added to watch list.

                          ' - // } - // if (JSON.parse(localStorage.getItem(`${myFloID}_watchlist`)).length < 2) - // getRef('next_proj').disabled = true let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!` getRef('username').textContent = greetings; getRef('user_flo_id').value = myFloID; From cdc066e00211e8eabc49f9e1e2e99194a29cc1a0 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 2 Aug 2021 17:34:26 +0530 Subject: [PATCH 31/41] fixed bug with intern port update feature --- new.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new.html b/new.html index 03af190..314fa5c 100644 --- a/new.html +++ b/new.html @@ -1814,7 +1814,7 @@ const { taskTitle, taskDescription } = RIBC.getTaskDetails(projectId, projectBranch, task) return createElement('li', { className: "task-card", - attributes: {uniqueId}, + attributes: {'data-unique-id': uniqueId}, innerHTML: `
                          ${projectName}
                          From 4856365b0ade9410086453ed0898139e06988a58 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 2 Aug 2021 18:00:24 +0530 Subject: [PATCH 32/41] Removed branches from project view --- css/main.css | 5 ----- css/main.min.css | 2 +- css/main.scss | 3 --- new.html | 44 ++++++++++++++++++++++---------------------- 4 files changed, 23 insertions(+), 31 deletions(-) diff --git a/css/main.css b/css/main.css index 31fe11e..07a61a2 100644 --- a/css/main.css +++ b/css/main.css @@ -749,7 +749,6 @@ ul { user-select: none; font-size: 0.85rem; font-weight: 500; - background-color: rgba(var(--text-color), 0.06); } .branch-button .icon { height: 1.2rem; @@ -820,10 +819,6 @@ ul { border-color: rgba(var(--text-color), 0.6); border-radius: 0 0 0 0.2rem; } -.task__branch_container .branch-button + .branch-button { - display: flex; - align-items: center; -} .task__branch_container .branch-button + .branch-button::before { top: calc(-50% - 1.5rem ); height: calc(100% + 1.5rem); diff --git a/css/main.min.css b/css/main.min.css index ad7bd29..a5c8cea 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#updates,.task-option{transition:opacity .3s ease}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.branch-button,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}#intern_info h4,#intern_info h5,.update__topic{margin-top:.5rem}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500;background-color:rgba(var(--text-color),.06)}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button{display:flex;align-items:center}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.task-description,.task__description,.timeline-task__description,.update__message{white-space:pre-line}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.branch-button,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}#intern_info h4,#intern_info h5,.update__topic{margin-top:.5rem}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index a4a3f72..314fc2e 100644 --- a/css/main.scss +++ b/css/main.scss @@ -773,7 +773,6 @@ ul { user-select: none; font-size: 0.85rem; font-weight: 500; - background-color: rgba(var(--text-color), 0.06); .icon{ height: 1.2rem; width: 1.2rem; @@ -848,8 +847,6 @@ ul { } } .branch-button + .branch-button{ - display: flex; - align-items: center; &::before{ top: calc(-50% - 1.5rem ); height: calc(100% + 1.5rem); diff --git a/new.html b/new.html index 314fa5c..050f4ac 100644 --- a/new.html +++ b/new.html @@ -280,7 +280,7 @@

                          Tasks

                          -
                          +

                            No tasks added yet, tasks will appear here after adding them.

                            -
                            +

                            No tasks are added to this projects

                            @@ -1951,11 +1951,11 @@ getRef('watch_project_button').textContent = 'Watch'; } getRef('project_explorer__project_description').textContent = projectDescription; - getRef('explorer_branch_container').innerHTML = ``; - RIBC.getProjectBranches(projectId).forEach((branch) => { - frag.append(render.branchButton({projectId, branch, page: 'project_explorer'})) - }) - getRef('explorer_branch_container').append(frag); + // getRef('explorer_branch_container').innerHTML = ``; + // RIBC.getProjectBranches(projectId).forEach((branch) => { + // frag.append(render.branchButton({projectId, branch, page: 'project_explorer'})) + // }) + // getRef('explorer_branch_container').append(frag); } let currentBranch = 'mainLine', @@ -1968,19 +1968,19 @@ const frag = document.createDocumentFragment(); 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('branch_container').innerHTML = '', getRef('task_list').innerHTML = ''; currentProject = projectId; - branchList.forEach((branch) => { - branch.classList.remove('active-branch') - }) + // branchList.forEach((branch) => { + // branch.classList.remove('active-branch') + // }) const { projectName, projectDescription } = RIBC.getProjectDetails(projectId); getRef('editing_panel__title').textContent = projectName; getRef('editing_panel__description').textContent = projectDescription; - RIBC.getProjectBranches(currentProject).forEach((branch) => { - frag.append(render.branchButton({projectId: currentProject, branch, page: 'admin_page'})) - }) - getRef('branch_container').appendChild(frag) + // RIBC.getProjectBranches(currentProject).forEach((branch) => { + // frag.append(render.branchButton({projectId: currentProject, branch, page: 'admin_page'})) + // }) + // getRef('branch_container').appendChild(frag) } function showTasksOfBranch(obj = {}) { const {destination, taskListContainer, projectId, branch, pageId} = obj @@ -1988,13 +1988,13 @@ currentBranch = branch; const frag = document.createDocumentFragment(); let branchTasks = RIBC.getProjectMap(currentProject)[currentBranch], - taskList = document.getElementById(taskListContainer), - allbranches = document.getElementById(destination).querySelectorAll('.branch-button'); + taskList = document.getElementById(taskListContainer) + // allbranches = document.getElementById(destination).querySelectorAll('.branch-button'); taskList.innerHTML = ''; - allbranches.forEach((branchButton) => { - branchButton.classList.remove('active-branch') - }) - document.getElementById(destination).querySelector(`.branch-button[href="#${pageId}?projectId=${projectId}&branch=${branch}"]`).classList.add('active-branch') + // allbranches.forEach((branchButton) => { + // branchButton.classList.remove('active-branch') + // }) + // document.getElementById(destination).querySelector(`.branch-button[href="#${pageId}?projectId=${projectId}&branch=${branch}"]`).classList.add('active-branch') if (branchTasks[1] && !taskListContainer === 'task_list') { taskList.textContent = "No tasks added yet, Please explore other projects" }else { @@ -2228,7 +2228,7 @@ const mergePoint = (userMergePoint === '') ? startPoint : parseInt(userMergePoint) const branchName = RIBC.manage.addBranch(currentProject, currentBranch, startPoint, mergePoint); notify(`Branch added ${branchName}`, 'success') - getRef('branch_container').append(render.branchButton({projectId: currentProject, branch: branchName, page: 'admin_page'})) + currentTask.querySelector('.task__branch_container').append(render.branchButton({projectId: currentProject, branch: branchName, page: 'admin_page'})) hidePopup() } From 5b80f45560411f644fbde6008dfc2b43ff2bfc23 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 2 Aug 2021 21:45:19 +0530 Subject: [PATCH 33/41] Fixed bug related to task status in admin page --- new.html | 1 + 1 file changed, 1 insertion(+) diff --git a/new.html b/new.html index 050f4ac..77586e6 100644 --- a/new.html +++ b/new.html @@ -2051,6 +2051,7 @@ } getRef('task_list').addEventListener('change', (e) => { if (e.target.closest('sm-checkbox')) { + currentTask = e.target.closest('.task-list-item'); const taskStatus = e.target.closest('sm-checkbox').checked ? 'completed' : 'incomplete' RIBC.manage.putTaskStatus(taskStatus, currentProject, currentBranch, currentTask.id) } From 56006d81cfc2c839c8ebb73d1b5c5d8f97c6000a Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 3 Aug 2021 01:22:55 +0530 Subject: [PATCH 34/41] Feature update and bug fix -- Added - filtering intern updates by date -- fixed - bug that caused infinite loop when end of update list is reached --- components.js | 6 +- css/main.css | 69 +++++++++++------- css/main.min.css | 2 +- css/main.scss | 76 ++++++++++++-------- new.html | 183 ++++++++++++++++++++++++++--------------------- 5 files changed, 202 insertions(+), 134 deletions(-) diff --git a/components.js b/components.js index ec49741..ef67c2e 100644 --- a/components.js +++ b/components.js @@ -362,11 +362,15 @@ smCopy.innerHTML = ` } .copy{ display: grid; - gap: 1rem; + gap: 0.5rem; padding: var(--padding); align-items: center; grid-template-columns: minmax(0, 1fr) auto; } +.copy-content{ + overflow-wrap: break-word; + word-wrap: break-word; +} .copy-button{ display: inline-flex; justify-content: center; diff --git a/css/main.css b/css/main.css index 07a61a2..0cb60d6 100644 --- a/css/main.css +++ b/css/main.css @@ -38,6 +38,9 @@ body[data-theme=dark] * { --foreground-color: rgb(20, 20, 20); --danger-color: rgb(255, 106, 106); } +body[data-theme=dark] ::-webkit-calendar-picker-indicator { + filter: invert(1); +} p { max-width: 70ch; @@ -697,40 +700,43 @@ ul { font-weight: 500; } -#intern_info { - flex-direction: column; +#intern_info_popup .grid > * { + justify-self: center; } - -#intern_info div { - display: flex; - flex-direction: row; - align-items: center; +#intern_info_popup #update_intern_score { width: 100%; + margin-top: 1rem; +} + +#intern_info__initials { margin-bottom: 1rem; + position: relative; + height: 3rem; + width: 3rem; + font-size: 1.3rem; +} +#intern_info__initials::before { + content: ""; + position: absolute; + background-color: inherit; + border-radius: inherit; + height: calc(100% + 1.5rem); + width: calc(100% + 1.5rem); + opacity: 0.3; + z-index: -1; } -#intern_info div span { - flex: 1; - word-break: break-all; - font-size: 0.9rem; +#intern_info__name { + font-size: 1.5rem; + margin-bottom: 0.5rem; } -#intern_info .gold-fill { +.gold-fill { fill: #FF5722; } -#intern_info #update_intern_score h4 { - margin: 0; - font-size: 2rem; -} - -#intern_info h3 { - text-transform: capitalize; -} - -#intern_info h4, -#intern_info h5 { - margin-top: 0.5rem; +#intern_info__score { + font-size: 1.5rem; } #project_info { @@ -845,6 +851,7 @@ ul { .assigned-interns { display: flex; flex-wrap: wrap; + margin-bottom: 1rem; } .assigned-interns .assigned-intern { @@ -1218,6 +1225,20 @@ ul { gap: 1.5rem; } +input[type=date] { + padding: 0.5rem; + border: rgba(var(--text-color), 0.2) solid thin; + border-radius: 0.3rem; + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: rgba(var(--text-color), 0.06); +} +input[type=date]:focus { + outline: none; + box-shadow: 0 0 0 0.1rem var(--accent-color); +} + .search__icon { height: 1.2rem; width: 1.2rem; diff --git a/css/main.min.css b/css/main.min.css index a5c8cea..85e5c7d 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.task-description,.task__description,.timeline-task__description,.update__message{white-space:pre-line}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.branch-button,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}#intern_info h4,#intern_info h5,.update__topic{margin-top:.5rem}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.task__project-title,a.button,input[type=date]{background-color:rgba(var(--text-color),.06)}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}#main_header,#main_nav,.flex,.nav-list__item{display:flex}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center,.popup__header{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;align-items:center}.nav-list__item{flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;z-index:5;top:0;bottom:0;place-content:center;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}#assigned_task_list,.page,.task-card{grid-template-columns:minmax(0,1fr)}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}#user_role,.intern-card__initials{font-weight:500;text-transform:uppercase}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-size:1rem;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info_popup .grid>*{justify-self:center}#intern_info_popup #update_intern_score{width:100%;margin-top:1rem}#intern_info__initials{margin-bottom:1rem;position:relative;height:3rem;width:3rem;font-size:1.3rem}#intern_info__initials::before{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1.5rem);width:calc(100% + 1.5rem);opacity:.3;z-index:-1}#intern_info__name{font-size:1.5rem;margin-bottom:.5rem}.gold-fill{fill:#FF5722}#intern_info__score{font-size:1.5rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;text-transform:capitalize;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap;margin-bottom:1rem}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;top:0;bottom:0;z-index:5;text-align:center;place-content:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem;text-transform:capitalize}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;top:0;bottom:0;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}input[type=date]{padding:.5rem;border:rgba(var(--text-color),.2) solid thin;border-radius:.3rem;font-family:inherit;font-size:inherit;color:inherit}input[type=date]:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;letter-spacing:.05em;padding:.4rem .8rem;border-radius:.3rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 314fc2e..459c890 100644 --- a/css/main.scss +++ b/css/main.scss @@ -42,6 +42,9 @@ body[data-theme='dark'] { --foreground-color: rgb(20, 20, 20); --danger-color: rgb(255, 106, 106); } + ::-webkit-calendar-picker-indicator { + filter: invert(1); + } } p { @@ -721,40 +724,43 @@ ul { font-weight: 500; } -#intern_info { - flex-direction: column; +#intern_info_popup { + .grid{ + & > *{ + justify-self: center; + } + } + #update_intern_score{ + width: 100%; + margin-top: 1rem; + } } - -#intern_info div { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; +#intern_info__initials{ margin-bottom: 1rem; + position: relative; + height: 3rem; + width: 3rem; + font-size: 1.3rem; + &::before{ + content: ''; + position: absolute; + background-color: inherit; + border-radius: inherit; + height: calc(100% + 1.5rem); + width: calc(100% + 1.5rem); + opacity: 0.3; + z-index: -1; + } } - -#intern_info div span { - flex: 1; - word-break: break-all; - font-size: 0.9rem; +#intern_info__name{ + font-size: 1.5rem; + margin-bottom: 0.5rem; } - -#intern_info .gold-fill { +.gold-fill { fill: #FF5722; } - -#intern_info #update_intern_score h4 { - margin: 0; - font-size: 2rem; -} - -#intern_info h3 { - text-transform: capitalize; -} - -#intern_info h4, -#intern_info h5 { - margin-top: 0.5rem; +#intern_info__score{ + font-size: 1.5rem; } #project_info { @@ -875,6 +881,7 @@ ul { .assigned-interns { display: flex; flex-wrap: wrap; + margin-bottom: 1rem; } .assigned-interns .assigned-intern { @@ -1248,6 +1255,19 @@ ul { #update_filters_wrapper{ gap: 1.5rem; } +input[type="date"]{ + padding: 0.5rem; + border: rgba(var(--text-color), 0.2) solid thin; + border-radius: 0.3rem; + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: rgba(var(--text-color), 0.06); + &:focus{ + outline: none; + box-shadow: 0 0 0 0.1rem var(--accent-color); + } +} .search__icon{ height: 1.2rem; width: 1.2rem; diff --git a/new.html b/new.html index 77586e6..40a5c94 100644 --- a/new.html +++ b/new.html @@ -361,6 +361,10 @@
                            By Intern
                            + Clear
                            @@ -403,22 +407,37 @@
                            - -

                            Intern name

                            - -

                            Update Rating

                            -
                            - -

                            - - - - - - -
                            + +
                            + +
                            +
                            +
                            +

                            Intern name

                            + +
                            +
                            + +

                            +
                            +
                            + + + + + + +
                            +
                            +
                            @@ -1649,10 +1668,10 @@ card.firstElementChild.classList.add('completed-task') } if (assignedInterns || typeOfUser === 'general') { - getInternDetails(assignedInterns).forEach((intern) => { - frag.append(render.assignedInternCard(intern)); + assignedInterns.forEach((internFloId) => { + frag.append(render.assignedInternCard(internFloId)); }) - card.querySelector('.assigned-interns').appendChild(frag) + card.querySelector('.assigned-interns').append(frag) } else { if(typeOfUser === 'intern'){ @@ -1694,7 +1713,7 @@ internCard(internName, internFLOID, internPoints) { // creates cards containing intern information const card = getRef('intern_card_template').content.cloneNode(true) - setAttributes(card.firstElementChild, { 'data-intern-id': internFLOID, 'title': 'Intern Information' }) + setAttributes(card.firstElementChild, { 'data-intern-flo-id': internFLOID, 'title': 'Intern Information' }) card.querySelector('.intern-card__initials').style.backgroundColor = getInternColor(internFLOID) card.querySelector('.intern-card__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join(''); card.querySelector('.intern-card__name').textContent = internName; @@ -1720,19 +1739,21 @@ innerHTML }); }, - assignedInternCard(intern, options) { - const thisIntern = createElement('span', { + assignedInternCard(internFloId, options) { + const internCard = createElement('span', { className: 'assigned-intern', - attributes: { 'data-floid': intern.split(':', 1) }, - textContent: intern.split(':')[1] + attributes: { 'data-flo-id': internFloId }, + textContent: RIBC.getInternList()[internFloId] }); + console.log(internFloId, RIBC.getInternList()[internFloId]) if (options === 'yes') { - let closeBtn = createElement('button', { - innerHTML: `` - }); - thisIntern.append(closeBtn) + internCard.append( + createElement('button', { + innerHTML: `` + }) + ) } - return thisIntern; + return internCard; }, taskListItem(taskNo) { const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo) @@ -1746,10 +1767,10 @@ card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`; card.querySelector('.task-description').textContent = taskDescription; if (assignedInterns) { - getInternDetails(assignedInterns).forEach((intern) => { - frag.appendChild(render.assignedInternCard(intern, 'yes')); + assignedInterns.forEach((internFloId) => { + frag.appendChild(render.assignedInternCard(internFloId, 'yes')); }) - card.querySelector('.assigned-interns').appendChild(frag) + card.querySelector('.assigned-interns').append(frag) } const branches = getAllBranches(currentProject) for(const branch of branches){ @@ -1784,14 +1805,11 @@ return card; }, requestCard(floId, projectCode, branch, taskNo) { - let name; - name = floId; - if (getInternDetails(floId).length !== 0) - name = getInternDetails(floId)[0].split(':')[1]; + const internName = RIBC.getInternList()[floId]; return createElement('li', { className: 'request-card', innerHTML: `

                            - ${name} applied for + ${internName} applied for ${RIBC.getTaskDetails(projectCode, branch, taskNo).taskTitle} from ${branch} of ${RIBC.getProjectDetails(projectCode).projectName} @@ -1876,23 +1894,6 @@ } } - function getInternDetails(floId) { - let internInfo = []; - if (Array.isArray(floId)) - floId.forEach((id) => { - Object.keys(allInternsList).forEach((key) => { - if (id === key) - internInfo.push(`${key}:${allInternsList[key]}`) - }) - }) - else - Object.keys(allInternsList).forEach((key) => { - if (floId === key) - internInfo.push(`${key}:${allInternsList[key]}`) - }) - return internInfo; - } - let allInternsList = [], highPerformingInterns = [], watchList = [], currentIntern, currentTaskId, typeOfUser = 'general'; @@ -1927,14 +1928,17 @@ } // opens a popup containing various intern information - function showInternInfo(intern) { - getRef('intern_info').children[0].textContent = intern.children[1].textContent; // intern name - getRef('intern_info__flo_id').value = currentIntern = intern.dataset.internId; // intern - getRef('intern_info__score').textContent = intern.children[2].textContent; // points earned by intern - if(parseInt(intern.children[2].textContent) === 1){ + function showInternInfo(internFloId) { + const internName = RIBC.getInternList()[internFloId] + getRef('intern_info__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join(''); + getRef('intern_info__initials').style.backgroundColor = getInternColor(internFloId) + getRef('intern_info__name').textContent = internName; + getRef('intern_info__flo_id').value = currentIntern = internFloId; + getRef('intern_info__score').textContent = RIBC.getInternRating(internFloId); // points earned by intern + if(RIBC.getInternRating(internFloId) === 1){ getRef('reduce_score_button').disabled = true; } - showPopup('intern_info'); + showPopup('intern_info_popup'); } // opens a popup containing various project information @@ -2042,13 +2046,6 @@ }) return branchPoints } - function showProjectMap(projectCode, container) { - if (projectCode === undefined) return; - const tempCard = render.projectMapCard(projectCode, 'dashboard_page'); - getRef(container).innerHTML = ``; - currentProject = projectCode; - getRef(container).append(tempCard) - } getRef('task_list').addEventListener('change', (e) => { if (e.target.closest('sm-checkbox')) { currentTask = e.target.closest('.task-list-item'); @@ -2182,13 +2179,15 @@ document.getElementById('intern_list_container').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) { - let floid = event.target.closest('.intern-card').dataset.internId; - if (RIBC.manage.assignInternToTask(floid, currentProject, currentBranch, currentTask.id)) { - notify(`${event.target.closest('.intern-card').children[1].textContent} assigned to ${RIBC.getProjectDetails(currentProject).projectName}`) - currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(getInternDetails(floid)[0], 'yes')) - } - else + const floId = event.target.closest('.intern-card').dataset.internFloId; + const internName = RIBC.getInternList()[floId] + const {projectName} = RIBC.getProjectDetails(currentProject) + if (RIBC.manage.assignInternToTask(floId, currentProject, currentBranch, currentTask.id)) { + notify(`${internName} assigned to ${projectName}`) + currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(floId, 'yes')) + }else{ notify('intern already assigned', 'error') + } hidePopup() } }) @@ -2206,7 +2205,7 @@ let score = parseInt(getRef('intern_info__score').textContent) score += scoreUpdate; getRef('intern_info__score').textContent = score - document.querySelectorAll(`[data-intern-id="${currentIntern}"]`).forEach(internCard => { + document.querySelectorAll(`[data-intern-flo-id="${currentIntern}"]`).forEach(internCard => { internCard.querySelector('.intern-card__score').textContent = score }) if (score > 0) { @@ -2294,6 +2293,24 @@ const fuse = new Fuse(allUpdates, options) return fuse.search(floId).map(v => v.item) } + async function getUpdatesByDate(date, allUpdates) { + if(!allUpdates){ + allUpdates = RIBC.getInternUpdates() + } + const filteredUpdates = [] + const dateStart = new Date(`${date} 00:00:00`).getTime() + const dateEnd = new Date(`${date} 23:59:59`).getTime() + let isFromDate = false + for(const update of allUpdates){ + if(update.time > dateStart && update.time < dateEnd){ + filteredUpdates.push(update) + isFromDate = true + }else if(isFromDate){ + break + } + } + return filteredUpdates + } let updateStartIndex = 0 let updateEndIndex = 0 @@ -2326,7 +2343,7 @@ const element = updates[index]; const { floID, time, update: { topic, description } } = element const updateObj = { - internName: getInternDetails(floID)[0].split(':')[1], + internName: RIBC.getInternList()[floID], time: parseInt(time), topic, description @@ -2334,7 +2351,7 @@ frag.append(render.updateCard(updateObj)) } getRef('all_updates_list').append(frag) - if(getRef('all_updates_list').lastElementChild){ + if(updateEndIndex !== updates.length && getRef('all_updates_list').lastElementChild){ intersectionObserver.observe(getRef('all_updates_list').lastElementChild) } } @@ -2343,6 +2360,7 @@ const {lazyLoad = false} = options const selectedProject = getRef('updates_page__project_selector').value const selectedintern = getRef('updates_page__intern_selector').value + const selectedDate = getRef('updates_page__date_selector').value let matchedUpdates if(selectedProject !== 'all'){ const projectName = RIBC.getProjectDetails(selectedProject).projectName @@ -2351,16 +2369,21 @@ if(selectedintern !== 'all'){ matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates) } + if(selectedDate){ + matchedUpdates = await getUpdatesByDate(selectedDate, matchedUpdates) + } renderInternUpdates({updates: matchedUpdates, lazyLoad}) }, 100) function clearFilter(){ getRef('updates_page__project_selector').reset() getRef('updates_page__intern_selector').reset() + getRef('updates_page__date_selector').value = '' } getRef('updates_page__project_selector').addEventListener('change', renderFilteredUpdates) getRef('updates_page__intern_selector').addEventListener('change', renderFilteredUpdates) + getRef('updates_page__date_selector').addEventListener('change', renderFilteredUpdates) getRef('watch_project_button').addEventListener('mouseenter', e => { if(e.target.textContent === 'watching'){ @@ -2456,15 +2479,15 @@ document.getElementById('best_interns').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) - showInternInfo(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')) + 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')) + showInternInfo(event.target.closest('.intern-card').dataset.internFloId) }) document.addEventListener('popupopened', e => { switch(e.detail.popup.id){ @@ -2718,7 +2741,7 @@ requestForTask(event.target.closest('.apply-button')) } }) - let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!` + const greetings = RIBC.getInternList()[myFloID] !== undefined ? `Hi, ${RIBC.getInternList()[myFloID]}` : `Hi, there!` getRef('username').textContent = greetings; getRef('user_flo_id').value = myFloID; getRef('user_role').textContent = typeOfUser; From 02f15ab652d488b086e7fc4acb545a484116ce17 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 3 Aug 2021 15:30:43 +0530 Subject: [PATCH 35/41] Feature update -- added option to edit task title and description in admin page --- css/main.css | 24 +++++++++++----- css/main.min.css | 2 +- css/main.scss | 23 ++++++++++----- new.html | 75 +++++++++++++++++++++++++++++++++++++++--------- 4 files changed, 95 insertions(+), 29 deletions(-) diff --git a/css/main.css b/css/main.css index 0cb60d6..2113c5b 100644 --- a/css/main.css +++ b/css/main.css @@ -549,7 +549,7 @@ ul { opacity: 1; } } -.title { +.task-title { font-weight: 500; } @@ -744,11 +744,11 @@ ul { } .branch-button { + margin-bottom: 0.5rem; display: flex; border-radius: 0; padding: 0.5rem; border-radius: 0.2rem; - margin: 0.5rem 0.5rem 0.5rem 0; text-transform: capitalize; justify-self: start; align-items: center; @@ -768,7 +768,7 @@ ul { } #task_list { - padding-bottom: 1.5rem; + padding: 1rem 0 1.5rem 0; } .task-list-item { @@ -790,7 +790,7 @@ ul { font-weight: 500; margin: 0; } -.task-list-item .title { +.task-list-item .task-title { grid-area: title; line-height: 1.6; } @@ -808,6 +808,7 @@ ul { background-color: transparent; padding: 0; padding-left: 2rem; + margin: 0.5rem 0; } .task__branch_container .branch-button::before { position: absolute; @@ -1226,6 +1227,8 @@ ul { } input[type=date] { + display: flex; + width: 100%; padding: 0.5rem; border: rgba(var(--text-color), 0.2) solid thin; border-radius: 0.3rem; @@ -1322,6 +1325,7 @@ input[type=date]:focus { #main_nav { padding: 0.5rem; + background-color: rgba(var(--background-color), 1); flex-direction: column; } #main_nav theme-toggle { @@ -1351,6 +1355,10 @@ input[type=date]:focus { background-color: rgba(var(--text-color), 0.1); } + .page { + background-color: var(--foreground-color); + } + #sign_in { width: 24rem; height: auto; @@ -1393,7 +1401,7 @@ input[type=date]:focus { grid-template-areas: "left right"; } - #project_explorer #left { + #project_explorer__left { grid-area: left; height: 100%; overflow-y: auto; @@ -1402,14 +1410,14 @@ input[type=date]:focus { background-color: rgba(var(--background-color), 1); } - #project_explorer #left h4 { + #project_explorer__left h4 { margin-top: 0; margin-bottom: 0.5rem; color: var(--accent-color); font-size: 0.9rem; } - #project_explorer #project_explorer__right { + #project_explorer__right { grid-area: right; height: 100%; overflow-y: auto; @@ -1477,6 +1485,8 @@ input[type=date]:focus { } #settings_page { + height: 100%; + align-items: flex-start; padding: 1rem 2rem; } diff --git a/css/main.min.css b/css/main.min.css index 85e5c7d..797c6f4 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.task__project-title,a.button,input[type=date]{background-color:rgba(var(--text-color),.06)}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}#main_header,#main_nav,.flex,.nav-list__item{display:flex}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center,.popup__header{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;align-items:center}.nav-list__item{flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;z-index:5;top:0;bottom:0;place-content:center;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}#assigned_task_list,.page,.task-card{grid-template-columns:minmax(0,1fr)}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}#user_role,.intern-card__initials{font-weight:500;text-transform:uppercase}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-size:1rem;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info_popup .grid>*{justify-self:center}#intern_info_popup #update_intern_score{width:100%;margin-top:1rem}#intern_info__initials{margin-bottom:1rem;position:relative;height:3rem;width:3rem;font-size:1.3rem}#intern_info__initials::before{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1.5rem);width:calc(100% + 1.5rem);opacity:.3;z-index:-1}#intern_info__name{font-size:1.5rem;margin-bottom:.5rem}.gold-fill{fill:#FF5722}#intern_info__score{font-size:1.5rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;text-transform:capitalize;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.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__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap;margin-bottom:1rem}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;top:0;bottom:0;z-index:5;text-align:center;place-content:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem;text-transform:capitalize}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;top:0;bottom:0;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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 .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}input[type=date]{padding:.5rem;border:rgba(var(--text-color),.2) solid thin;border-radius:.3rem;font-family:inherit;font-size:inherit;color:inherit}input[type=date]:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;letter-spacing:.05em;padding:.4rem .8rem;border-radius:.3rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item,.project-card{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.task-description,.task__description,.timeline-task__description,.update__message{white-space:pre-line}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}#loading_page,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#loading_page,#sign_in_page{position:fixed;place-content:center;z-index:5;top:0;bottom:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;left:0;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}#assigned_task_list,.page,.task-card{grid-template-columns:minmax(0,1fr)}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.task-title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}#loading_page,#task_context,.fab-actions__item,.intern-update{background-color:var(--foreground-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info_popup .grid>*{justify-self:center}#intern_info_popup #update_intern_score{width:100%;margin-top:1rem}#intern_info__initials{margin-bottom:1rem;position:relative;height:3rem;width:3rem;font-size:1.3rem}#intern_info__initials::before{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1.5rem);width:calc(100% + 1.5rem);opacity:.3;z-index:-1}#intern_info__name{font-size:1.5rem;margin-bottom:.5rem}.gold-fill{fill:#FF5722}#intern_info__score{font-size:1.5rem}#project_info{flex-direction:column}#user_role,.branch-button{justify-self:start;font-weight:500}.branch-button{margin-bottom:.5rem;display:flex;padding:.5rem;border-radius:.2rem;text-transform:capitalize;align-items:center;user-select:none;font-size:.85rem}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding:1rem 0 1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.task-list-item h4{font-weight:500;margin:0}.task-list-item .task-title{grid-area:title;line-height:1.6}.task-list-item .assigned-interns{grid-area:interns}.task__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem;margin:.5rem 0}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0}.assigned-interns{display:flex;flex-wrap:wrap;margin-bottom:1rem}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;left:0;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem;text-transform:capitalize}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{display:flex;align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;display:flex;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{position:fixed;z-index:3;top:0;bottom:0;left:0;right:0;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__project-title,input[type=date]{background-color:rgba(var(--text-color),.06)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#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{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}input[type=date]{display:flex;width:100%;padding:.5rem;border:rgba(var(--text-color),.2) solid thin;border-radius:.3rem;font-family:inherit;font-size:inherit;color:inherit}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}input[type=date]:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.search__icon{height:1.2rem;width:1.2rem}#user_role{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border-radius:.3rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;background-color:rgba(var(--background-color),1);flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#admin_page__left,.page{background-color:var(--foreground-color)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer__left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer__left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{height:100%;align-items:flex-start;padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 459c890..9a8ff58 100644 --- a/css/main.scss +++ b/css/main.scss @@ -572,7 +572,7 @@ ul { } } -.title { +.task-title { font-weight: 500; } @@ -768,11 +768,11 @@ ul { } .branch-button { + margin-bottom: 0.5rem; display: flex; border-radius: 0; padding: 0.5rem; border-radius: 0.2rem; - margin: 0.5rem 0.5rem 0.5rem 0; text-transform: capitalize; justify-self: start; align-items: center; @@ -792,7 +792,7 @@ ul { } #task_list{ - padding-bottom: 1.5rem; + padding: 1rem 0 1.5rem 0; } .task-list-item { display: grid; @@ -816,7 +816,7 @@ ul { margin: 0; } - .title { + .task-title { grid-area: title; line-height: 1.6; } @@ -835,6 +835,7 @@ ul { background-color: transparent; padding: 0; padding-left: 2rem; + margin: 0.5rem 0; &::before{ position: absolute; content: ''; @@ -1256,6 +1257,8 @@ ul { gap: 1.5rem; } input[type="date"]{ + display: flex; + width: 100%; padding: 0.5rem; border: rgba(var(--text-color), 0.2) solid thin; border-radius: 0.3rem; @@ -1345,6 +1348,7 @@ input[type="date"]{ #main_nav { padding: 0.5rem; + background-color: rgba(var(--background-color), 1); flex-direction: column; theme-toggle{ margin: 1rem; @@ -1378,6 +1382,9 @@ input[type="date"]{ background-color: rgba(var(--text-color), 0.1); } } + .page{ + background-color: var(--foreground-color); + } #sign_in { width: 24rem; @@ -1418,7 +1425,7 @@ input[type="date"]{ grid-template-columns: 16rem 3fr; grid-template-areas: 'left right'; } - #project_explorer #left { + #project_explorer__left { grid-area: left; height: 100%; overflow-y: auto; @@ -1427,14 +1434,14 @@ input[type="date"]{ background-color: rgba(var(--background-color), 1); } - #project_explorer #left h4 { + #project_explorer__left h4 { margin-top: 0; margin-bottom: 0.5rem; color: var(--accent-color); font-size: 0.9rem; } - #project_explorer #project_explorer__right { + #project_explorer__right { grid-area: right; height: 100%; overflow-y: auto; @@ -1495,6 +1502,8 @@ input[type="date"]{ --height: 80vh; } #settings_page { + height: 100%; + align-items: flex-start; padding: 1rem 2rem; } .watchlist_project_card{ diff --git a/new.html b/new.html index 40a5c94..11b22ad 100644 --- a/new.html +++ b/new.html @@ -292,6 +292,14 @@ Add task

                              +
                            • + + Edit title +
                              • +
                            • + + Edit description +
                            • @@ -383,7 +391,7 @@

                              No intern found

                            -
                            +

                            My projects

                            Other projects

                            @@ -597,7 +605,7 @@ @@ -656,7 +737,11 @@