Merge pull request #2031 from rebeccacremona/touch-targets

Re-order casebook contents via a handle
harvard-lil · Oct 13, 2023 · 4bb7ffa · 4bb7ffa
2 parents 3ed6a3c + 3dec823
commit 4bb7ffa
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 19 deletions.
diff --git a/web/frontend/components/CollapseTriangle.vue b/web/frontend/components/CollapseTriangle.vue
@@ -1,6 +1,6 @@
 <template>
-  <svg height="32" width="32" v-bind:class="{open: !collapsed, collapsed:collapsed}">
-    <polygon points="6,6 20,16 6,24" />
+  <svg height="20" width="32" v-bind:class="{open: !collapsed, collapsed:collapsed}">
+    <polygon points="6,0 20,10 6,18" />
   </svg>
 </template>
 

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/components/TheTableOfContents.vue b/web/frontend/components/TheTableOfContents.vue
@@ -253,7 +253,6 @@ export default {
     button.action-expand {
         border: 0 solid transparent;
         background: transparent;
-        margin: -8px;
     }
     button.toc-expand {
         display: flex;
@@ -347,7 +346,7 @@ export default {
     .listing {
         display: flex;
         justify-content:space-between;
-        align-items: baseline;
+        align-items: center;
         width: 100%;
         padding: 12px 16px;
         /* padding-right: 42px; */
@@ -359,7 +358,7 @@ export default {
             display: flex;
             flex-direction:row;
             div {
-                align-self:baseline;
+                align-self:center;
             }
             .is-instructional-material {
                 background-image:url('~static/images/ui/casebook/lock.svg') ;
@@ -375,13 +374,9 @@ export default {
         }
         .actions {
             position: relative;
-            top: 12px;
+            top: 0;
         }
         &.section {
-            .actions {
-                min-height:44px;
-            }
-
             align-items: left;
             background-color: $black;
 
@@ -541,7 +536,7 @@ export default {
         @media (min-width: $screen-xs) {
             &.section {
                 flex-direction: row;
-                align-items: baseline;
+                align-items: center;
             }
         }
         .section-number,
@@ -587,13 +582,11 @@ export default {
         .nestable-list {
             border-left: 8px solid $light-blue;
             padding-left: 16px;
-            margin-left: 30px;
         }
     }
     div.editable .nestable-list .nestable-list {
         border-left: 8px solid $yellow;
         padding-left: 16px;
-        margin-left: 30px;
     }
     .nestable-drag-layer {
         opacity: 0.7;

diff --git a/web/frontend/styles/casebook.scss b/web/frontend/styles/casebook.scss
@@ -528,7 +528,6 @@ form.edit_content_resource, form.edit_content_section, form.edit_content_caseboo
 
       .actions {
           margin-left: 1rem;
-          margin-top: -8px;
         > form > input[type=submit], button {
           // @include square(50px);
             display: block;
@@ -540,8 +539,9 @@ form.edit_content_resource, form.edit_content_section, form.edit_content_caseboo
           background-size: auto;
           &.action-delete {
             background-image: url('~static/images/ui/edit/elide.png');
-            height: 36px;
-            width: 36px;
+            height: 20px;
+            width: 20px;
+            margin: 0;
             border-width: 0px;
             background-color: transparent;
           }
@@ -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;
           }
@@ -903,4 +904,4 @@ div.tox-toolbar__group:nth-child(2) button.tox-tbtn.tox-tbtn--select.tox-tbtn--d
 
 .casebook-copyright-notice {
   margin-top: 4rem;
-}
+}
diff --git a/web/static/images/ui/edit/elide.png b/web/static/images/ui/edit/elide.png