Making admin panel mobile friendly

components.js

@@ -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')

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 {

css/main.scss

@@ -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) {

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">
+            <section id="all_interns_page" class="page hide-completely">
-                <ul id="all_interns_list" class="grid gap-1"></ul>
+                <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>
+            <h4 id="intern_info__score"></h4>
-            <sm-button class="admin-options hide-completely" title="increase intern score"
+            <sm-button id="reduce_score_button" class="admin-options hide-completely" title="increase intern score"
-                onclick="changeScore(1)">
+                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"
+            <sm-button id="increase_score_button" class="admin-options hide-completely" title="decrease intern score"
-                onclick="changeScore(-1)">
+                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()
+                    RIBC.manage.updateObjects().then(res => {
-                    notify('Changes saved.', 'success')
+                        notify('Changes saved.', 'success')
-                    renderAllElements()
+                        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 = ''
+            getRef('interns_list_container').innerHTML = ''
-            internsPopup.appendChild(frag)
+            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() {