Skip to content

Commit 1c19362

Browse files
author
Your Name
committed
Refactor CSS formatting in SortableList.razor.css and app.css
1 parent 5f717f2 commit 1c19362

12 files changed

+354
-209
lines changed

‎MainLayout.razor

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,5 @@
11
@inherits LayoutComponentBase
22

33
<main>
4-
<a class="button is-dark is-pulled-right mr-4" href="https://github.com/the-urlist/blazorsortable" target="_blank">
5-
<span class="icon">
6-
<i class="fab fa-github"></i>
7-
</span>
8-
<span>View on GitHub</span>
9-
</a>
10-
<div class="columns m-5">
11-
<div class="column is-narrow">
12-
<aside class="menu">
13-
<p class="menu-label">
14-
Sortable Lists
15-
</p>
16-
<ul class="menu-list">
17-
<li>
18-
<a href="singlelist">Single List</a>
19-
<ul>
20-
<li>
21-
<a href="draghandles">Drag Handles</a>
22-
</li>
23-
</ul>
24-
</li>
25-
<li>
26-
<a href="multiplelists">Multiple Lists</a>
27-
</li>
28-
</ul>
29-
</aside>
30-
</div>
31-
<div class="column">
32-
@Body
33-
</div>
34-
</div>
4+
@Body
355
</main>

‎Pages/Index.razor

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,20 @@
22

33
@inject IJSRuntime JS
44

5-
<div style="height: 100vh; padding-top: 100px;">
6-
<div class="container">
7-
<h1 class="title is-size-1 has-text-centered">Blazor Sortable</h1>
5+
<div class="has-background-light">
6+
<div class="hero">
7+
<div class="hero-body has-background-blazor has-text-white has-text-centered">
8+
<h1 class="title is-size-1 has-text-white">Blazor Sortable</h1>
9+
<p>An integration of the SortableJS library with Blazor.</p>
10+
</div>
811
</div>
12+
<section class="section has-background-white">
13+
<SimpleList></SimpleList>
14+
</section>
15+
<section class="section">
16+
<SharedLists></SharedLists>
17+
</section>
18+
<section class="section has-background-white">
19+
<Cloning></Cloning>
20+
</section>
921
</div>

‎Pages/MultipleLists.razor

Lines changed: 0 additions & 101 deletions
This file was deleted.

‎Pages/SingleList.razor

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎Shared/Cloning.razor

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<div class="container">
2+
<h1 class="title is-size-1 has-text-centered">Cloning</h1>
3+
<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>
4+
<Tabs CodeContent="Test">
5+
<ExampleContent>
6+
<div class="columns">
7+
<div class="column">
8+
<SortableList Group="cloning" Pull="clone" Items="items1" Context="item" OnRemove="ListOneRemove">
9+
<SortableItemTemplate>
10+
<div class="has-border has-background-blazor has-text-white">
11+
<p class="is-size-4 p-2 ml-4">@item.Name</p>
12+
</div>
13+
</SortableItemTemplate>
14+
</SortableList>
15+
</div>
16+
<div class="column">
17+
<SortableList Group="cloning" Pull="clone" OnRemove="ListTwoRemove" Items="items2" Context="item">
18+
<SortableItemTemplate>
19+
<div class="has-border has-background-blazor has-text-white">
20+
<p class="is-size-4 p-2 ml-4">@item.Name</p>
21+
22+
</div>
23+
</SortableItemTemplate>
24+
</SortableList>
25+
</div>
26+
</div>
27+
</ExampleContent>
28+
</Tabs>
29+
</div>
30+
31+
@code {
32+
33+
private bool showCode = false;
34+
35+
public class Item
36+
{
37+
public int Id { get; set; }
38+
public string Name { get; set; } = "";
39+
}
40+
41+
public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
42+
43+
public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
44+
45+
private void ListOneRemove((int oldIndex, int newIndex) indices)
46+
{
47+
// get the item at the old index in list 1
48+
var item = items1[indices.oldIndex];
49+
50+
// make a copy
51+
var clone = item;
52+
53+
// add it to the new index in list 2
54+
items2.Insert(indices.newIndex, clone);
55+
}
56+
57+
private void ListTwoRemove((int oldIndex, int newIndex) indices)
58+
{
59+
// get the item at the old index in list 2
60+
var item = items2[indices.oldIndex];
61+
62+
// add it to the new index in list 1
63+
items1.Insert(indices.newIndex, item);
64+
}
65+
66+
}

‎Shared/SharedLists.razor

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<div class="container">
2+
<h1 class="title is-size-1 has-text-centered">Shared Lists</h1>
3+
<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>
4+
<Tabs CodeContent="@codeContent">
5+
<ExampleContent>
6+
<div class="columns">
7+
<div class="column">
8+
<SortableList Group="sharedLists" Items="items1" Context="item" OnRemove="ListOneRemove">
9+
<SortableItemTemplate>
10+
<div class=" card has-border has-background-white">
11+
<p class="is-size-4 p-2 ml-4">@item.Name</p>
12+
</div>
13+
</SortableItemTemplate>
14+
</SortableList>
15+
</div>
16+
<div class="column">
17+
<SortableList Group="sharedLists" OnRemove="ListTwoRemove" Items="items2" Context="item">
18+
<SortableItemTemplate>
19+
<div class="card has-background-white has-border">
20+
<p class="is-size-4 p-2 ml-4">@item.Name</p>
21+
</div>
22+
</SortableItemTemplate>
23+
</SortableList>
24+
</div>
25+
</div>
26+
</ExampleContent>
27+
</Tabs>
28+
</div>
29+
30+
@code {
31+
32+
private string codeContent = $@"
33+
<SortableList Group=""sharedLists"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
34+
<SortableItemTemplate>
35+
<div class="" card has-border has-background-white"">
36+
<p class=""is-size-4 p-2 ml-4"">@item.Name</p>
37+
</div>
38+
</SortableItemTemplate>
39+
</SortableList>
40+
<SortableList Group=""sharedLists"" OnRemove=""ListTwoRemove"" Items=""items2"" Context=""item"">
41+
<SortableItemTemplate>
42+
<div class=""card has-background-white has-border"">
43+
<p class=""is-size-4 p-2 ml-4"">@item.Name</p>
44+
</div>
45+
</SortableItemTemplate>
46+
</SortableList>
47+
48+
@code {{
49+
private void ListOneRemove((int oldIndex, int newIndex) indices)
50+
{{
51+
// get the item at the old index in list 1
52+
var item = items1[indices.oldIndex];
53+
54+
// add it to the new index in list 2
55+
items2.Insert(indices.newIndex, item);
56+
57+
// remove the item from the old index in list 1
58+
items1.Remove(items1[indices.oldIndex]);
59+
}}
60+
61+
private void ListTwoRemove((int oldIndex, int newIndex) indices)
62+
{{
63+
// get the item at the old index in list 2
64+
var item = items2[indices.oldIndex];
65+
66+
// add it to the new index in list 1
67+
items1.Insert(indices.newIndex, item);
68+
69+
// remove the item from the old index in list 2
70+
items2.Remove(items2[indices.oldIndex]);
71+
}}
72+
}}
73+
";
74+
public class Item
75+
{
76+
public int Id { get; set; }
77+
public string Name { get; set; } = "";
78+
79+
}
80+
81+
public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
82+
83+
public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
84+
85+
private void ListOneRemove((int oldIndex, int newIndex) indices)
86+
{
87+
// get the item at the old index in list 1
88+
var item = items1[indices.oldIndex];
89+
90+
// add it to the new index in list 2
91+
items2.Insert(indices.newIndex, item);
92+
93+
// remove the item from the old index in list 1
94+
items1.Remove(items1[indices.oldIndex]);
95+
}
96+
97+
private void ListTwoRemove((int oldIndex, int newIndex) indices)
98+
{
99+
// get the item at the old index in list 2
100+
var item = items2[indices.oldIndex];
101+
102+
// add it to the new index in list 1
103+
items1.Insert(indices.newIndex, item);
104+
105+
// remove the item from the old index in list 2
106+
items2.Remove(items2[indices.oldIndex]);
107+
}
108+
}

0 commit comments

Comments
 (0)