From 9e75eddde57d9c2887c4eec49d40ee818f4762ad Mon Sep 17 00:00:00 2001
From: Rebecca Cremona <rcremona@law.harvard.edu>
Date: Thu, 12 Oct 2023 15:32:57 -0400
Subject: [PATCH] Tidy the table of contents (particularly the editable view)

---
 web/frontend/components/CollapseTriangle.vue   |   4 ++--
 web/frontend/components/TheTableOfContents.vue |  15 ++++-----------
 web/frontend/styles/casebook.scss              |   8 ++++----
 web/static/images/ui/edit/elide.png            | Bin 679 -> 1371 bytes
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/web/frontend/components/CollapseTriangle.vue b/web/frontend/components/CollapseTriangle.vue
index e98c45fff..3aed55545 100644
--- 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/TheTableOfContents.vue b/web/frontend/components/TheTableOfContents.vue
index af657abed..0e1ab9544 100644
--- 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
index 73f64f156..7c4f87147 100644
--- 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;
           }
@@ -903,4 +903,4 @@ div.tox-toolbar__group:nth-child(2) button.tox-tbtn.tox-tbtn--select.tox-tbtn--d
 
 .casebook-copyright-notice {
   margin-top: 4rem;
-}
\ No newline at end of file
+}
diff --git a/web/static/images/ui/edit/elide.png b/web/static/images/ui/edit/elide.png
index afb97dfeb5cddab48d4b206882c789613fc93109..8d0aa6ddf313d55a13e67f37f185b383f42e1397 100644
GIT binary patch
literal 1371
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VOS+@4BLl<6e(pbstU$g(vPY0F
z14ES>14Ba#1H&(%P{RubhEf9thF1v;3|2E37{m+a><Y92O0=X#c&7RKGH3zW91N_C
zLJZ7679$WcFiJ6iOarnQycnh7>>x%Bs2U~)hW1Pb7O0viAPoW@Kn&6Yp_vyjB1~Ms
z1XnGxfEmFCX>)u&_aBhrEbxddW?<kJ24O~qS#u<SrbT9kM3hAM`dB6B=jtV<<R_)-
zRpb_cbTQaeSOJ;2sU?XD6}dTi#a0!zN?;XMKsHENUr7P1q$Jx`DZ)2E!8yMuRl!Wp
zK+izQj!Qv7!KNrB%__*n4XPc;vsKC{DJihh*Do(G*DE*H%P&gTH?*|0)Hg8FH!{)%
zs?aU2%qvN((9J7Wh8O}f$0fBmxhS)sBr`ux0c37sQhsTPt&$SRA~=A!vm`SOVN+f)
z)LTFg>VstT4fPE4;bsH1+JHo@{EISEfi{E8w==W>t3(ll+GC>+vK+}V5TAlYfnK%a
zveAbJn;n;A+(UK-2BtfnE{-7<f@?$f=3Q|Rm^b%xe2us(*CGeU29}@~>mD*TaJjUz
z@al4Onp<3&Z0?}2U<qSq-+s0V2CkrqE(#MJ7Cg|?c=BfR-hHvpqUY;#%5*4c-@G+<
z{`vc7&h?1)PTLxGGVG*LbXm5U)Qro{#(O+`mY=vZ$2fS4W7|Em9UoO@KQcGYN(=rI
zQ4;p&4TqPX=nU)SneT%xz2Cce+lE~~GB+ROpRH#5J%L}cWJ6;vZ&0#EPSzKdn|nmt
z>e@XoDxCIuc>0s+@tP+Yu4%4m%NCt5cCtPHHEFYDwQyCts=nI{hVI8{>b~203)<H%
zXE05SWLdsK#Ps;tOux%V8m)A0G*>-f@Bd_DZo$4UN!dEKNkGM#J7M4Q4%On;ZRhNG
zob^fyE&KRw(zL}D+_(=3nKLoR#p=Jv-p;b2WurKc(TfD;=pP5d7l;?kj5(2e>|=@b
z<T;$F;%Un|-`Tvr{3_j+jn&|QLNlLP0>AtZuNS!?Y>Q32=I&hokoEYtj}7bQbiVx8
zZMSw!_yUH*azMj2ciS>EM`-!(KE0-*&f-X{$13*)i3>6+eJ|gAUc0MsA*<otx?9U%
zKaVc?w8Fn~qx$}B7ZXy~L<VMFx+^wkT0ptq*VTL<4~zSLZxOw=wOH4x@W%1fKZTJe
z79Y9pKK1=;C*FL6@QK$>B(zVMXxze?R<WU-XV-n^B8dY<dvAVdFzvGxYX6?iYFiQc
zlqd0#<3EtYcTal~V6f!8WbeD5f+g!bCU!0DXSJ=Fdnq*0w0_Ac$xm&zDHjeNTe{ZC
z^Z>&&C&MbwpITjqwv}|PKI(tp<f!1~JC6D1S+9t1{kV6DiE+uB3H@mrOM{n)eO|ih
z<=oOe-*<l1S<L>~Nq^BrLC1BumMi-gI?uRpkS+a(Mf|~n!;W!>c1iW+)v(sFo3@q-
zz2D!r-s6~fmUzPM<KlKrbu#fYr8k_c=ZV-j(;`9k5ue5lDIW!%-uk~xOg~vyaPDu2
Yzx7LIt^FaTN1!6Z)78&qol`;+06T5%>i_@%

literal 679
zcmV;Y0$BZtP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00001b5ch_0Itp)
z=>Px%VM#<mR7ef2RxwK)K@@&7QRH?-Q9;lmM6k3GRO|$cfS_n6n9e}rZwNxJ@JFbH
zpkQIAAP5$MZ4_)Q1;yeH4o`C-yK<;IdEew_+1uOMJ9S?(GjG26zI`)q=B=O<Q%ZGI
z{fB8qYCa$}#?V1QqL0UA?iVD9a~>abI6Wsqh^mcBBuy}Ro9{m?69suvG?0X;^9d>v
z$-LwAY_ZsL-5d`ZL>?dSKL$at&*Y<VaMQ7%3n}G7F4ub-#ny><US*ur(;)-;qo7yz
zOC;K7UAOzptP4eS1TO(5-XmamOY(ypHxWsAaRz#evJn7fKls3lffnII{`#gf0E5l=
zO#dejiy%!oi+;wjSH)-gvHhFSrdc{J$b(<v9wepd@IV_aO}VtXQ=!Y7r$in2F%KN@
z4aVsYeu<0LFj;eqd}^oF#V%Ug`_mu<0r)WwoXx;5Yd6`3(FAd!Rs}!`e&Km{g{19@
zs~X}jQx5H(`b{GU*Yj&2@fL-Sln%B80_#VfZqv3XN&|kJ2_CzqhDZ>>%8aX9j9W4A
z<DL|nfz4LoZ006&)?~2o6eON&%cOQk1<V$qjVFVR1N=CX0~;Voz+hVy0>8kG^!@U6
zJi~C4w~qhP^5@Rvi&j%h#c^giPT!Dzg+1^78>wK!d}U^>kl$UmcT<btwd81iW%@{R
z0plnpP$~5*tUFxMID%3}QIt?2O)1tQAl3zjD_RCZx-y!A1@2G;1C&fuG_L#?7{A(3
z<9U6w^n#;K1P*)w_L78LVKM#-X~BSFJk~`cFe}3vZyeDU>7B)Y*FUzkGd_5cVO{_L
N002ovPDHLkV1n6TEI<GN