* style names (#7)

* bug touch
* bug last release

Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>

BlazorReorderExample/Pages/Styled.razor

@@ -9,12 +9,14 @@
 <div class="card">
     <Reorder Items="list" TItem="ListItem" DisableDrag="denyDrag">
         <div class="row mb-2 mx-2">
-            <div class="col-auto align-middle" style="line-height: 72px;" @onmousedown="() => denyDrag = false" @onmouseup="() => denyDrag = true">
+            <div class="col-auto align-middle" style="line-height: 72px;" 
+            @onmousedown="() => denyDrag = false" @onmouseup="() => denyDrag = true"
+            @ontouchstart="() => denyDrag = false" @ontouchend="() => denyDrag = true">
                 <i class="oi oi-grid-three-up"></i>
             </div>
             <div class="col" style="cursor: default;">
                 <h5>@context.title</h5>
-                <p>@context.details <a href="@context.url">Go</a></p>      
+                <p>@context.details <a href="@context.url">Go</a></p>
             </div>
         </div>
     </Reorder>

BlazorReorderExample/Pages/Styled.razor.css

@@ -1,17 +1,17 @@
-::deep .item {
+::deep .reorder-item {
     cursor: move;
     user-select: none;
 }
 
-    ::deep .item:hover {
+    ::deep .reorder-item:hover {
         background: #4cff00;
     }
 
-::deep .active {
+::deep .reorder-item-active {
     background: #b200ff;
 }
 
-::deep .dragging {
+::deep .reorder-item-dragging {
     background: #ffd800;
     box-shadow: 0 4px 20px #ffd800AA;
     opacity: 0.8;
@@ -19,6 +19,6 @@
     z-index: 999;
 }
 
-    ::deep .dragging:hover {
+    ::deep .reorder-item-dragging:hover {
         background: #ffd800;
     }

BlazorReorderList/Reorder.razor

@@ -8,7 +8,7 @@
 
 @if(rs != null && rs.selected != null && rs.isDragging && elemPosition.x != -1000)
 {
-    <div class="dragging item" 
+    <div class="reorder-item-dragging reorder-item" 
          style="width: @(elemWidth)px; left: @(elemPosition.x)px; top: @(elemPosition.y)px; transform: translateX(@(ghostTrans.x)px) translateY(@(ghostTrans.y)px )">
     @ChildContent(rs.selected)
     </div>
@@ -16,10 +16,10 @@
 
 @if (rs != null && itemElem != null)
 {
-    <div class="sortable" @ref="sortable">
+    <div class="reorder" @ref="reorder">
         @foreach (var item in Items.Select((v, i) => (v, i)))
         {
-            <div @ref="itemElem[item.i]" @key="item.i" class="item @(rs.selected != null && (object)item.v == (object)rs.selected ? "active" : "")"
+            <div @ref="itemElem[item.i]" @key="item.i" class="reorder-item @(rs.selected != null && (object)item.v == (object)rs.selected ? "reorder-item-active" : "")"
             @onmousedown="async (e) => await onPress(e, item.v, item.i)" @ontouchstart="async (e) => await onTouch(e, item.v, item.i)">
                 @ChildContent(item.v)
             </div>
@@ -44,7 +44,7 @@
     private bool shouldRender = true; // cancel re-rendering
     private DotNetObjectReference<Reorder<TItem>>? dotNetHelper; //js-interop 2-ways
     Dictionary<int, ElementReference> itemElem = new();
-    ElementReference sortable;
+    ElementReference reorder;
     point elemPosition = new point(-1000, 0);
     point ghostTrans = new point(0, 0);
     point clickPosition = new point(0, 0);
@@ -156,7 +156,7 @@
 
                 // If is on top of an element or if top top of a empty list -> confirm drag
                 if (await isOnTop(subItem, pos) ||
-                Items.Count == 0 && await isOnTop((ElementReference) sortable, pos))
+                Items.Count == 0 && await isOnTop((ElementReference) reorder, pos))
                 {
                     // reorder
                     newElemIndex = b;

BlazorReorderList/Reorder.razor.css

@@ -1,21 +1,21 @@
-.sortable {
+.reorder {
     min-height: 10px;
 }
 
-.item {
-  cursor: move;
-  user-select: none;
+.reorder-item {
+    cursor: move;
+    user-select: none;
 }
 
-.item:hover {
-  background: #ffffe0;
+    .reorder-item:hover {
+        background: #ffffe0;
+    }
+
+.reorder-item-active {
+    background: #ccc;
 }
 
-.active {
-  background: #ccc;
-}
-
-.dragging {
+.reorder-item-dragging {
     background: #e0ffff;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
     opacity: 0.8;
@@ -23,6 +23,6 @@
     z-index: 999;
 }
 
-    .dragging:hover {
+    .reorder-item-dragging:hover {
         background: #e0ffff;
     }