Add a drag target, instead of having the whole TOC entry be draggable.

harvard-lil · Oct 12, 2023 · 3dec823 · 3dec823
1 parent 9e75edd
commit 3dec823
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/web/frontend/components/TableOfContents/Entry.vue b/web/frontend/components/TableOfContents/Entry.vue
@@ -4,8 +4,9 @@
   v-bind:class="['listing-wrapper', showDelete ? 'delete-confirm' : '', animated, dimmed]"
   v-click-outside.stop.prevent="dismissAudit"
   >
-  <component :is="editing ? 'vue-nestable-handle' : 'div'" v-bind:item="item">
+  <div v-bind:item="item">
     <div v-bind:class="{'listing':true, 'resource':true, 'temporary': item.resource_type == 'Temp', 'editing': 'editing'}" v-if="isResource">
+      <vue-nestable-handle v-if="editing" class="drag-target" :item="item"><i class="fa fa-th" aria-hidden="true"></i></vue-nestable-handle>
       <div class="list-left">
         <div :class="{'section-number': true, 'is-instructional-material': item.is_instructional_material}">{{ item.ordinal_string }}</div>
 
@@ -64,6 +65,7 @@
     </div>
 
     <div class="listing section" v-bind:class="['listing', 'section' ,item.children.length > 0 ? 'child-present' : 'child-free', editing ? 'editing' : '' ]" v-else>
+      <vue-nestable-handle v-if="editing" class="drag-target" :item="item"><i class="fa fa-th" aria-hidden="true"></i></vue-nestable-handle>
       <div class="list-left">
         <button
           aria-role="heading"
@@ -110,7 +112,7 @@
 
       </div>
     </div>
-  </component>
+  </div>
   <div class="audit-drawer" v-if="item.audit && item.resource_type === 'Temp'">
     <entry-auditor :item="item"></entry-auditor>
     </div>
@@ -298,4 +300,22 @@ export default {
   border: none;
   background: none;
 }
+
+.drag-target {
+  position: absolute;
+  height: 100%;
+  width: 2em;
+  right: -2.25em;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+  text-align: center;
+  color: #777;
+  background: lightgray;
+
+  &:hover {
+    cursor: grab;
+  }
+}
 </style>
diff --git a/web/frontend/styles/casebook.scss b/web/frontend/styles/casebook.scss
@@ -593,6 +593,7 @@ form.edit_content_resource, form.edit_content_section, form.edit_content_caseboo
         grid-template-columns: auto 1fr 15%;
 
         @media (max-width: $screen-xs) {
+          padding-right: 0;
           .resource-container {
             margin: 0 9px;
           }