Mobile friendly design for projects explorer page

css/main.css

@@ -26,6 +26,7 @@ body * {
   --background-color: 246, 246, 246;
   --foreground-color: white;
   --danger-color: red;
+  scrollbar-width: thin;
 }
 
 body[data-theme=dark],
@@ -702,6 +703,7 @@ ul {
   font-size: 1rem;
   margin-top: 0.5rem;
   text-transform: capitalize;
+  max-width: 65ch;
 }
 
 .update__sender {
@@ -777,6 +779,9 @@ ul {
   border-radius: 0.2rem;
   margin: 0.5rem 0.5rem 0.5rem 0;
   user-select: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
 }
 
 .active-branch {
@@ -881,6 +886,10 @@ ul {
   margin-right: 0.5rem;
 }
 
+.temp-task .cancel-task-button {
+  margin-right: 0.5rem;
+}
+
 #branch_container {
   display: flex;
   flex-flow: row wrap;
@@ -1030,10 +1039,9 @@ ul {
 }
 
 #admin_page__header {
-  display: grid;
+  gap: 1rem;
-  gap: 0 1rem;
-  grid-template-columns: 1fr auto;
   align-items: center;
+  grid-template-columns: 1fr auto;
 }
 
 #project_editing_panel {
@@ -1155,6 +1163,7 @@ ul {
   #admin_page {
     gap: 0;
     padding: 0;
+    grid-template-rows: auto 1fr;
   }
 
   #admin_page__header {
@@ -1216,7 +1225,7 @@ ul {
   }
 
   #dashboard_page {
-    grid-template-columns: 3fr 1fr;
+    grid-template-columns: 3fr 18rem;
   }
 
   #dashboard_page #status_map_container {
@@ -1233,6 +1242,13 @@ ul {
     grid-area: admin-header;
   }
 
+  #admin_page__left,
+#project_editing_panel {
+    border-radius: 0.5rem;
+    background-color: var(--foreground-color);
+    box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
+  }
+
   #edit_data_fig {
     width: 16rem;
     justify-self: center;

css/main.scss

@@ -24,6 +24,7 @@ body {
         --background-color: 246, 246, 246;
         --foreground-color: white;
         --danger-color: red;
+        scrollbar-width: thin;
     }
 
     color: rgba(var(--text-color), 1);
@@ -728,6 +729,7 @@ ul {
     font-size: 1rem;
     margin-top: 0.5rem;
     text-transform: capitalize;
+    max-width: 65ch;
 }
 
 .update__sender {
@@ -803,6 +805,9 @@ ul {
     border-radius: 0.2rem;
     margin: 0.5rem 0.5rem 0.5rem 0;
     user-select: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
 }
 
 .active-branch {
@@ -911,7 +916,11 @@ ul {
     }
 }
 
-.temp-task {}
+.temp-task {
+    .cancel-task-button{
+        margin-right: 0.5rem;
+    }
+}
 
 #branch_container {
     display: flex;
@@ -1062,10 +1071,9 @@ ul {
 }
 
 #admin_page__header {
-    display: grid;
+    gap: 1rem;
-    gap: 0 1rem;
-    grid-template-columns: 1fr auto;
     align-items: center;
+    grid-template-columns: 1fr auto;
 }
 
 #project_editing_panel {
@@ -1191,6 +1199,7 @@ ul {
     #admin_page{
         gap: 0;
         padding: 0;
+        grid-template-rows: auto 1fr;
     }
     #admin_page__header{
         padding: 1rem;
@@ -1256,7 +1265,7 @@ ul {
     }
 
     #dashboard_page {
-        grid-template-columns: 3fr 1fr;
+        grid-template-columns: 3fr 18rem;
     }
 
     #dashboard_page #status_map_container {
@@ -1272,6 +1281,12 @@ ul {
     #admin_page__header {
         grid-area: admin-header;
     }
+    #admin_page__left,
+    #project_editing_panel{
+        border-radius: 0.5rem;
+        background-color: var(--foreground-color);
+        box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
+    }
 
     #edit_data_fig {
         width: 16rem;

new.html

@@ -204,15 +204,12 @@
                 </section>
             </section>
             <section id="admin_page" class="page hide-completely">
-                <header id="admin_page__header">
+                <header id="admin_page__header" class="grid">
-                    <div class="grid">
+                    <p>Don't forget to commit changes</p>
-                        <h4>Manage projects and intern assignments</h4>
-                        <p>Don't forget to commit changes</p>
-                    </div>
                     <sm-button id="update_project_info_btn" variant="primary" onclick="commitToChanges()"
                         title="commit to changes">Commit</sm-button>
                 </header>
-                <section id="admin_page__left" class="flex direction-column container-card">
+                <section id="admin_page__left" class="flex direction-column">
                     <sm-tab-header target="admin_tabs">
                         <sm-tab>Projects</sm-tab>
                         <sm-tab>Interns</sm-tab>
@@ -251,7 +248,7 @@
                         </section>
                     </sm-tab-panels>
                 </section>
-                <section id="project_editing_panel" class="inner-page container-card hide-on-mobile">
+                <section id="project_editing_panel" class="inner-page hide-on-mobile">
                     <h2 id="editing_panel__title"></h2>
                     <p id="editing_panel__description"></p>
                     <div id="branch_container"></div>
@@ -328,7 +325,7 @@
                     <h4 class="padding intern-option hide-completely">Other projects</h4>
                     <div></div>
                 </div>
-                <section id="right" class="grid gap-0-5 hide-page-on-mobile content-page">
+                <section id="right" class="grid gap-0-5 hide-on-mobile content-page">
                     <header class="flex space-between align-center">
                         <h2></h2>
                         <button id="watch_project_btn" title="add this project to your watch list"
@@ -10234,10 +10231,12 @@
             }
         }
 
+        let lastPage
         function showPage(targetPage, options = {}) {
             const { firstLoad, hashChange } = options
             let pageId
             let searchParams
+            let params
             if (targetPage === '') {
                 pageId = 'dashboard_page'
             }
@@ -10251,16 +10250,17 @@
                 }
             }
             if (!appPages.includes(pageId)) return
-            document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
+            
-            document.querySelector('.nav-list__item--active')?.classList.remove('nav-list__item--active')
-            const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
-            targetListItem?.classList.add('nav-list__item--active')
-
-            let params
             if (searchParams) {
                 const urlSearchParams = new URLSearchParams('?' + searchParams);
                 params = Object.fromEntries(urlSearchParams.entries());
             }
+            if(pageId !== lastPage){
+                document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
+            }
+            document.querySelector('.nav-list__item--active')?.classList.remove('nav-list__item--active')
+            const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
+            targetListItem?.classList.add('nav-list__item--active')
             switch (pageId) {
                 case 'dashboard_page':
                     if (JSON.parse(localStorage.getItem('watchList')).length) {
@@ -10280,8 +10280,11 @@
                 case 'project_explorer':
                     if(params){
                         showProjectInfo(params.projectId)
+                        getRef('left').classList.add('hide-on-mobile')
+                        getRef('right').classList.remove('hide-on-mobile')
                     }else{
-
+                        getRef('left').classList.remove('hide-on-mobile')
+                        getRef('right').classList.add('hide-on-mobile')
                     }
                     break;
                 case 'admin_page':
@@ -10296,6 +10299,7 @@
                     break;
             }
             getRef(pageId).classList.remove('hide-completely')
+            lastPage = pageId
         }
 
     </script>
@@ -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) {