Making admin panel mobile friendly
This commit is contained in:
sairaj mote
parent
c321106d6f
commit
70ff7095ea
@ -3549,7 +3549,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
}
|
||||
|
||||
reset(fire = true) {
|
||||
if (this.availableOptions[0]) {
|
||||
if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
|
||||
const firstElement = this.availableOptions[0];
|
||||
if (this.previousOption) {
|
||||
this.previousOption.classList.remove('check-selected')
|
||||
|
||||
56
css/main.css
56
css/main.css
@ -363,7 +363,7 @@ ul {
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--foreground-color);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -543,15 +543,6 @@ ul {
|
||||
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;
|
||||
@ -650,9 +641,6 @@ ul {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
}
|
||||
.request-card b {
|
||||
font-weight: 500;
|
||||
}
|
||||
.request-card sm-button {
|
||||
--padding: 0.5rem 0.8rem;
|
||||
}
|
||||
@ -805,16 +793,16 @@ ul {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "status title options" "status interns interns" "status description description";
|
||||
align-content: flex-start;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.02);
|
||||
}
|
||||
.task-list-item sm-checkbox {
|
||||
grid-area: status;
|
||||
align-self: flex-start;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0;
|
||||
padding: 0.2rem 0.5rem 0.5rem 0;
|
||||
}
|
||||
.task-list-item h4 {
|
||||
font-weight: 500;
|
||||
@ -1158,19 +1146,26 @@ ul {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-mobile,
|
||||
.hide-page-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#admin_page {
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#admin_page__header {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@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: 26rem;
|
||||
}
|
||||
@ -1301,6 +1296,21 @@ ul {
|
||||
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 0.5rem;
|
||||
padding: 1.5rem;
|
||||
grid-template-columns: 1fr;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
#all_interns_list .intern-card__initials {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
#main_page {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -377,7 +377,7 @@ ul {
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--foreground-color);
|
||||
z-index: 1;
|
||||
}
|
||||
@ -564,15 +564,6 @@ ul {
|
||||
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;
|
||||
@ -670,9 +661,6 @@ ul {
|
||||
display: grid;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
sm-button{
|
||||
--padding: 0.5rem 0.8rem;
|
||||
}
|
||||
@ -832,15 +820,15 @@ ul {
|
||||
grid-template-areas: 'status title options'
|
||||
'status interns interns'
|
||||
'status description description';
|
||||
align-content: flex-start;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--text-color), 0.02);
|
||||
sm-checkbox {
|
||||
grid-area: status;
|
||||
align-self: flex-start;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0;
|
||||
padding: 0.2rem 0.5rem 0.5rem 0;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
@ -1195,19 +1183,24 @@ ul {
|
||||
}
|
||||
//
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-mobile,
|
||||
.hide-page-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
#admin_page{
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#admin_page__header{
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@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: 26rem;
|
||||
}
|
||||
@ -1343,6 +1336,20 @@ ul {
|
||||
overflow-y: auto;
|
||||
grid-area: updates;
|
||||
}
|
||||
#all_interns_list{
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem ,1fr));
|
||||
.intern-card{
|
||||
gap: 1rem 0.5rem;
|
||||
padding: 1.5rem;
|
||||
grid-template-columns: 1fr;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--foreground-color);
|
||||
&__initials{
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1280px) {
|
||||
|
||||
67
new.html
67
new.html
@ -168,7 +168,7 @@
|
||||
<path
|
||||
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" />
|
||||
</svg>
|
||||
<h3>Leaderboard</h3>
|
||||
<h4>Leaderboard</h4>
|
||||
<a id="all_interns_btn" href="#all_interns_page" class="button">All</a>
|
||||
</div>
|
||||
<div id="best_interns"></div>
|
||||
@ -251,7 +251,7 @@
|
||||
</section>
|
||||
</sm-tab-panels>
|
||||
</section>
|
||||
<div id="project_editing_panel" class="inner-page container-card">
|
||||
<section id="project_editing_panel" class="inner-page container-card hide-on-mobile">
|
||||
<h2 id="editing_panel__title"></h2>
|
||||
<p id="editing_panel__description"></p>
|
||||
<div id="branch_container"></div>
|
||||
@ -294,7 +294,7 @@
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="updates_page" class="page hide-completely">
|
||||
<!-- <sm-input id="updates_page__search" placeholder="Search interns, projects">
|
||||
@ -317,10 +317,11 @@
|
||||
<h4 class="empty-state">No related updates</h4>
|
||||
</section>
|
||||
</section>
|
||||
<section id="all_interns_page" class="page hide-completely container-card">
|
||||
<ul id="all_interns_list" class="grid gap-1"></ul>
|
||||
<section id="all_interns_page" class="page hide-completely">
|
||||
<h2>Interns</h2>
|
||||
<ul id="all_interns_list" class="grid"></ul>
|
||||
</section>
|
||||
<section id="project_explorer" class="page hide-completely container-card">
|
||||
<section id="project_explorer" class="page hide-completely">
|
||||
<div id="left" class="list-container">
|
||||
<h4 class="padding intern-option hide-completely">My projects</h4>
|
||||
<div></div>
|
||||
@ -351,13 +352,13 @@
|
||||
<h4 class="admin-options hide-completely">Update Rating</h4>
|
||||
<div id="update_intern_score">
|
||||
<svg class="icon gold-fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"/></svg>
|
||||
<h4 id="intern_info__score">Points</h4>
|
||||
<sm-button class="admin-options hide-completely" title="increase intern score"
|
||||
onclick="changeScore(1)">
|
||||
<h4 id="intern_info__score"></h4>
|
||||
<sm-button id="reduce_score_button" class="admin-options hide-completely" title="increase intern score"
|
||||
onclick="changeScore(-1)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></svg>
|
||||
</sm-button>
|
||||
<sm-button class="admin-options hide-completely" title="decrease intern score"
|
||||
onclick="changeScore(-1)">
|
||||
<sm-button id="increase_score_button" class="admin-options hide-completely" title="decrease intern score"
|
||||
onclick="changeScore(1)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>
|
||||
</sm-button>
|
||||
</div>
|
||||
@ -10267,12 +10268,15 @@
|
||||
}
|
||||
break;
|
||||
case 'updates_page':
|
||||
renderInternUpdates()
|
||||
if(!getRef('updates_page__project_selector').children.length){
|
||||
renderInternUpdates()
|
||||
renderProjectSelectorOptions()
|
||||
renderInternSelectorOptions()
|
||||
}
|
||||
break;
|
||||
case 'all_interns_page':
|
||||
// renderAllInterns()
|
||||
break;
|
||||
case 'project_explorer':
|
||||
if(params){
|
||||
showProjectInfo(params.projectId)
|
||||
@ -10283,6 +10287,11 @@
|
||||
case 'admin_page':
|
||||
if (params) {
|
||||
editProjectInfo(params.projectId)
|
||||
getRef('admin_page__left').classList.add('hide-on-mobile')
|
||||
getRef('project_editing_panel').classList.remove('hide-on-mobile')
|
||||
}else{
|
||||
getRef('admin_page__left').classList.remove('hide-on-mobile')
|
||||
getRef('project_editing_panel').classList.add('hide-on-mobile')
|
||||
}
|
||||
break;
|
||||
}
|
||||
@ -10541,6 +10550,9 @@
|
||||
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){
|
||||
getRef('reduce_score_button').disabled = true;
|
||||
}
|
||||
showPopup('intern_info');
|
||||
}
|
||||
|
||||
@ -10718,9 +10730,12 @@
|
||||
function commitToChanges() {
|
||||
getConfirmation("Do you want to commit to changes?").then((result) => {
|
||||
if (result) {
|
||||
RIBC.manage.updateObjects()
|
||||
notify('Changes saved.', 'success')
|
||||
renderAllElements()
|
||||
RIBC.manage.updateObjects().then(res => {
|
||||
notify('Changes saved.', 'success')
|
||||
renderAllElements()
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -10779,26 +10794,30 @@
|
||||
|
||||
function populateIntens() {
|
||||
allInternsList = RIBC.getInternList();
|
||||
let internsPopup = document.getElementById('interns_list_container');
|
||||
for (intern in allInternsList) {
|
||||
frag.appendChild(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern)))
|
||||
frag.append(render.internCard(allInternsList[intern], intern, RIBC.getInternRating(intern)))
|
||||
}
|
||||
internsPopup.innerHTML = ''
|
||||
internsPopup.appendChild(frag)
|
||||
getRef('interns_list_container').innerHTML = ''
|
||||
getRef('all_interns_list').innerHTML = ''
|
||||
const fragClone = frag.cloneNode(true)
|
||||
getRef('interns_list_container').append(frag)
|
||||
getRef('all_interns_list').append(fragClone)
|
||||
}
|
||||
|
||||
function changeScore(scoreUpdate) {
|
||||
let score = parseInt(getRef('intern_info__score').textContent)
|
||||
if (score === 1 && scoreUpdate === -1) {
|
||||
parent.children[3].disabled = true;
|
||||
return;
|
||||
}
|
||||
score += scoreUpdate;
|
||||
getRef('intern_info__score').textContent = score
|
||||
document.querySelectorAll(`[data-intern-id="${currentIntern}"]`).forEach(internCard => {
|
||||
internCard.querySelector('.intern-card__score').textContent = score
|
||||
})
|
||||
if (score > 0) {
|
||||
parent.children[3].disabled = false;
|
||||
getRef('reduce_score_button').disabled = false;
|
||||
RIBC.manage.updateInternRating(currentIntern, scoreUpdate)
|
||||
}
|
||||
if (score === 1 && scoreUpdate === -1) {
|
||||
getRef('reduce_score_button').disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function addNewBranch() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user