Feature update and bug fixes

-- added ability to drag and drop display tasks

css/main.css

@@ -1484,14 +1484,57 @@ ul {
 
 #task_display_container {
   padding: 0 1rem;
+  height: 100%;
+  gap: 1rem;
+  overflow-y: hidden;
+}
+#task_display_container > * {
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.drop-zone {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 0.3rem;
+  align-content: flex-start;
+  overflow-y: auto;
+  padding-bottom: 2rem;
+}
+.drop-zone:empty {
+  position: relative;
+  min-height: 8rem;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.5rem;
+}
+.drop-zone:empty::after {
+  content: "Drop here";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.6);
+}
+
+#display_task_map {
+  position: relative;
+  padding-right: 1rem;
+  border-right: solid thin rgba(var(--text-color), 0.16);
 }
 
 .displayable-task {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   padding: 1rem;
   border-radius: 0.5rem;
   border: solid thin rgba(var(--text-color), 0.1);
   background-color: rgba(var(--foreground-color), 1);
-  margin-bottom: 0.5rem;
+  transition: box-shadow 0.2s;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
 }
 .displayable-task__project {
   font-size: 0.9rem;
@@ -1499,6 +1542,19 @@ ul {
   background-color: rgba(var(--text-color), 0.06);
   border-radius: 0.3rem;
   opacity: 0.8;
+  margin-right: auto;
+}
+.displayable-task.draggable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  cursor: move;
+}
+.displayable-task.draggable .dragging-handle {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  grid-area: 1/1/3/2;
+  align-self: center;
 }
 
 #loading {
@@ -1537,6 +1593,10 @@ ul {
   overflow: hidden;
   grid-template-rows: auto 1fr;
 }
+#admin_page__header {
+  background-color: rgba(var(--foreground-color), 0.5);
+  padding: 0.5rem 1rem;
+}
 
 #admin_views {
   display: grid;
@@ -2016,4 +2076,23 @@ input[type=date]:focus {
   .interact:hover {
     background-color: rgba(var(--text-color), 0.04);
   }
+}
+.gu-mirror {
+  position: fixed;
+  z-index: 9999 !important;
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
+}
+
+.gu-hide {
+  display: none !important;
+}
+
+.gu-unselectable {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+
+.gu-transit {
+  opacity: 0.2;
 }

css/main.scss

@@ -1462,19 +1462,71 @@ ul {
 }
 #task_display_container {
   padding: 0 1rem;
+  height: 100%;
+  gap: 1rem;
+  overflow-y: hidden;
+  & > * {
+    height: 100%;
+    overflow-y: hidden;
+  }
+}
+.drop-zone {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 0.3rem;
+  align-content: flex-start;
+  overflow-y: auto;
+  padding-bottom: 2rem;
+  &:empty {
+    position: relative;
+    min-height: 8rem;
+    background-color: rgba(var(--text-color), 0.06);
+    border-radius: 0.5rem;
+    &::after {
+      content: "Drop here";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: rgba(var(--text-color), 0.6);
+    }
+  }
+}
+#display_task_map {
+  position: relative;
+  padding-right: 1rem;
+  border-right: solid thin rgba(var(--text-color), 0.16);
 }
 .displayable-task {
+  user-select: none;
   padding: 1rem;
   border-radius: 0.5rem;
   border: solid thin rgba(var(--text-color), 0.1);
   background-color: rgba(var(--foreground-color), 1);
-  margin-bottom: 0.5rem;
+  transition: box-shadow 0.2s;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
   &__project {
     font-size: 0.9rem;
     padding: 0.2rem 0.5rem;
     background-color: rgba(var(--text-color), 0.06);
     border-radius: 0.3rem;
     opacity: 0.8;
+    margin-right: auto;
+  }
+  &.draggable {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    cursor: move;
+    .dragging-handle {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      grid-area: 1/1/3/2;
+      align-self: center;
+    }
   }
 }
 
@@ -1510,6 +1562,10 @@ ul {
   height: 100%;
   overflow: hidden;
   grid-template-rows: auto 1fr;
+  &__header {
+    background-color: rgba(var(--foreground-color), 0.5);
+    padding: 0.5rem 1rem;
+  }
 }
 #admin_views {
   display: grid;
@@ -2011,3 +2067,18 @@ input[type="date"] {
     }
   }
 }
+
+.gu-mirror {
+  position: fixed;
+  z-index: 9999 !important;
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
+}
+.gu-hide {
+  display: none !important;
+}
+.gu-unselectable {
+  user-select: none !important;
+}
+.gu-transit {
+  opacity: 0.2;
+}

scripts/ribc.js

@@ -105,7 +105,7 @@
     Ribc.getInternRating = (floID) => _.internRating[floID];
     Ribc.getAssignedInterns = (projectCode, branch, taskNumber) => _.internsAssigned[projectCode + "_" + branch + "_" + taskNumber]
     Ribc.getAllTasks = () => _.projectTaskDetails
-    Ribc.getDisplayedTasks = () => floGlobals.appObjects.RIBC.displayedTasks
+    Ribc.getDisplayedTasks = () => floGlobals.appObjects.RIBC.displayedTasks.filter(v => v)
 
     Admin.updateObjects = () => new Promise((resolve, reject) => {
         floCloudAPI.updateObjectData("RIBC")