Skip to content

Commit

Permalink
Refactor CSS formatting in SortableList.razor.css and app.css
Browse files Browse the repository at this point in the history
  • Loading branch information
Your Name committed Dec 26, 2023
1 parent 5f717f2 commit 1c19362
Show file tree
Hide file tree
Showing 12 changed files with 354 additions and 209 deletions.
32 changes: 1 addition & 31 deletions MainLayout.razor
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,5 @@
@inherits LayoutComponentBase

<main>
<a class="button is-dark is-pulled-right mr-4" href="https://github.com/the-urlist/blazorsortable" target="_blank">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>View on GitHub</span>
</a>
<div class="columns m-5">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">
Sortable Lists
</p>
<ul class="menu-list">
<li>
<a href="singlelist">Single List</a>
<ul>
<li>
<a href="draghandles">Drag Handles</a>
</li>
</ul>
</li>
<li>
<a href="multiplelists">Multiple Lists</a>
</li>
</ul>
</aside>
</div>
<div class="column">
@Body
</div>
</div>
@Body
</main>
18 changes: 15 additions & 3 deletions Pages/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,20 @@

@inject IJSRuntime JS

<div style="height: 100vh; padding-top: 100px;">
<div class="container">
<h1 class="title is-size-1 has-text-centered">Blazor Sortable</h1>
<div class="has-background-light">
<div class="hero">
<div class="hero-body has-background-blazor has-text-white has-text-centered">
<h1 class="title is-size-1 has-text-white">Blazor Sortable</h1>
<p>An integration of the SortableJS library with Blazor.</p>
</div>
</div>
<section class="section has-background-white">
<SimpleList></SimpleList>
</section>
<section class="section">
<SharedLists></SharedLists>
</section>
<section class="section has-background-white">
<Cloning></Cloning>
</section>
</div>
101 changes: 0 additions & 101 deletions Pages/MultipleLists.razor
View file

This file was deleted.

57 changes: 0 additions & 57 deletions Pages/SingleList.razor
View file

This file was deleted.

66 changes: 66 additions & 0 deletions Shared/Cloning.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<div class="container">
<h1 class="title is-size-1 has-text-centered">Cloning</h1>
<p class="mb-4">Cloning is enabled by the "Pull='Clone'" property. This allows cloning of an item by dropping it into a shared list.</p>
<Tabs CodeContent="Test">
<ExampleContent>
<div class="columns">
<div class="column">
<SortableList Group="cloning" Pull="clone" Items="items1" Context="item" OnRemove="ListOneRemove">
<SortableItemTemplate>
<div class="has-border has-background-blazor has-text-white">
<p class="is-size-4 p-2 ml-4">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>
</div>
<div class="column">
<SortableList Group="cloning" Pull="clone" OnRemove="ListTwoRemove" Items="items2" Context="item">
<SortableItemTemplate>
<div class="has-border has-background-blazor has-text-white">
<p class="is-size-4 p-2 ml-4">@item.Name</p>

</div>
</SortableItemTemplate>
</SortableList>
</div>
</div>
</ExampleContent>
</Tabs>
</div>

@code {

private bool showCode = false;

public class Item
{
public int Id { get; set; }
public string Name { get; set; } = "";
}

public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

private void ListOneRemove((int oldIndex, int newIndex) indices)
{
// get the item at the old index in list 1
var item = items1[indices.oldIndex];

// make a copy
var clone = item;

// add it to the new index in list 2
items2.Insert(indices.newIndex, clone);
}

private void ListTwoRemove((int oldIndex, int newIndex) indices)
{
// get the item at the old index in list 2
var item = items2[indices.oldIndex];

// add it to the new index in list 1
items1.Insert(indices.newIndex, item);
}

}
108 changes: 108 additions & 0 deletions Shared/SharedLists.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<div class="container">
<h1 class="title is-size-1 has-text-centered">Shared Lists</h1>
<p class="mb-4">Shared lists are lists where items can be dragged from one list to the other and vice-versa. Providing the same "Group" string name for both lists is what links them together. Note that when an item is dragged into a different list, it assumes the visual style of that list. This is because Blazor controls the rendering of the list items.</p>
<Tabs CodeContent="@codeContent">
<ExampleContent>
<div class="columns">
<div class="column">
<SortableList Group="sharedLists" Items="items1" Context="item" OnRemove="ListOneRemove">
<SortableItemTemplate>
<div class=" card has-border has-background-white">
<p class="is-size-4 p-2 ml-4">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>
</div>
<div class="column">
<SortableList Group="sharedLists" OnRemove="ListTwoRemove" Items="items2" Context="item">
<SortableItemTemplate>
<div class="card has-background-white has-border">
<p class="is-size-4 p-2 ml-4">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>
</div>
</div>
</ExampleContent>
</Tabs>
</div>

@code {

private string codeContent = $@"
<SortableList Group=""sharedLists"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
<SortableItemTemplate>
<div class="" card has-border has-background-white"">
<p class=""is-size-4 p-2 ml-4"">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>
<SortableList Group=""sharedLists"" OnRemove=""ListTwoRemove"" Items=""items2"" Context=""item"">
<SortableItemTemplate>
<div class=""card has-background-white has-border"">
<p class=""is-size-4 p-2 ml-4"">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>
@code {{
private void ListOneRemove((int oldIndex, int newIndex) indices)
{{
// get the item at the old index in list 1
var item = items1[indices.oldIndex];
// add it to the new index in list 2
items2.Insert(indices.newIndex, item);
// remove the item from the old index in list 1
items1.Remove(items1[indices.oldIndex]);
}}
private void ListTwoRemove((int oldIndex, int newIndex) indices)
{{
// get the item at the old index in list 2
var item = items2[indices.oldIndex];
// add it to the new index in list 1
items1.Insert(indices.newIndex, item);
// remove the item from the old index in list 2
items2.Remove(items2[indices.oldIndex]);
}}
}}
";
public class Item
{
public int Id { get; set; }
public string Name { get; set; } = "";

}

public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

private void ListOneRemove((int oldIndex, int newIndex) indices)
{
// get the item at the old index in list 1
var item = items1[indices.oldIndex];

// add it to the new index in list 2
items2.Insert(indices.newIndex, item);

// remove the item from the old index in list 1
items1.Remove(items1[indices.oldIndex]);
}

private void ListTwoRemove((int oldIndex, int newIndex) indices)
{
// get the item at the old index in list 2
var item = items2[indices.oldIndex];

// add it to the new index in list 1
items1.Insert(indices.newIndex, item);

// remove the item from the old index in list 2
items2.Remove(items2[indices.oldIndex]);
}
}
Loading

0 comments on commit 1c19362

Please sign in to comment.