Skip to content

Commit 4d1ca03

Browse files
farzindevfarzindev
committed
global list
1 parent 10e2cdf commit 4d1ca03

File tree

8 files changed

+157
-149
lines changed

8 files changed

+157
-149
lines changed

‎Blogifier.Web/Views/Blogifier/Admin/Packages/Widgets.cshtml‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@
55
Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Packages.cshtml";
66
}
77

8-
98
<!-- Toolbar -->
109
<div class="bf-toolbar d-flex">
11-
<label class="custom-control custom-checkbox my-auto mr-3">
10+
<label class="custom-control custom-checkbox my-auto mr-3" data-tooltip title="Select All">
1211
<input class="custom-control-input item-checkbox" type="checkbox" id="selectAll" name="selectAll">
1312
<span class="item-control custom-control-indicator"></span>
1413
</label>
1514
<a asp-controller="Packages" asp-action="Widgets" class="btn btn-outline-secondary btn-sm btn-rounded" style="padding: 0 20px; margin-right: 20px">
16-
<i class="fa fa-arrow-left"></i> &nbsp; Back
15+
<i class="fa fa-arrow-left mr-2"></i> Back
1716
</a>
1817
<div id="postActionButtons" class="btn-group mr-3">
1918
<button type="button" class="btn btn-outline-secondary btn-icon btn-sm btn-rounded" disabled="disabled" data-tooltip onclick="return packagesController.enable()" title="Enable"><i class="fa fa-check"></i></button>
@@ -25,24 +24,24 @@
2524

2625
@if (Model.Packages.Any())
2726
{
28-
<ul class="" aria-label="widgets">
27+
<ul class="bf-list" aria-label="widgets">
2928
@foreach (var item in Model.Packages)
3029
{
31-
var publishedClass = item.Enabled ? "item-status-published" : "item-status-draft";
32-
<li class="d-flex">
33-
<label class="item-select custom-control custom-checkbox mr-3 my-auto">
30+
var publishedClass = item.Enabled ? "published" : "draft";
31+
<li class="bf-list-item d-flex align-items-center">
32+
<label class="bf-list-item-select custom-control custom-checkbox mr-3" data-tooltip title="Select">
3433
<input type="checkbox" value="@item.Title" class="item-checkbox custom-control-input">
3534
<span class="item-control custom-control-indicator"></span>
3635
</label>
3736
@if (item.HasSettings)
3837
{
39-
<a class="item-link" href="~/admin/packages/widgets/@item.Title">@item.Description</a>
38+
<a class="bf-list-item-link" href="~/admin/packages/widgets/@item.Title">@item.Description</a>
4039
}
4140
else
4241
{
43-
<div class="bf-posts-empty" style="margin-top: 13px">@item.Description</div>
42+
<div class="bf-list-item-name">@item.Description</div>
4443
}
45-
<span class="item-status @publishedClass ml-auto my-auto" data-original-title="" title=""><i class="fa fa-circle"></i></span>
44+
<span class="bf-list-item-status bf-list-item-status-@publishedClass ml-auto" data-tooltip title="@publishedClass"><i class="fa fa-circle"></i></span>
4645
</li>
4746
}
4847
</ul>

‎Blogifier.Web/Views/Blogifier/Admin/Posts/Index.cshtml‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -89,21 +89,21 @@
8989
<!--/Search -->
9090

9191
<!-- List -->
92-
<ul class="bf-posts-list @listStyle" aria-label="posts">
92+
<ul class="bf-list bf-posts-list @listStyle" aria-label="posts">
9393
@foreach (var item in Model.BlogPosts)
9494
{
9595
var publishedLbl = item.Published == DateTime.MinValue ? item.LastUpdated.ToString("MMM dd, yyyy") : item.Published.ToString("MMM dd, yyyy");
9696
var postStatus = item.Published == DateTime.MinValue ? "draft" : "published";
9797
if (curPost == 0) { curPost = item.BlogPostId; }
98-
<li class="post-list-item d-flex">
99-
<label class="item-select custom-control custom-checkbox mr-3 my-auto" data-tooltip title="Select"><input type="checkbox" id="@item.BlogPostId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
100-
<a class="item-link" href="~/admin/posts/editor/@item.BlogPostId?user=@user">@item.Title</a>
101-
<span class="item-status item-status-@postStatus ml-auto my-auto" data-tooltip title="@postStatus"><i class="fa fa-circle"></i></span>
102-
<span class="item-date my-auto ml-3">@publishedLbl</span>
98+
<li class="bf-list-item d-flex align-items-center">
99+
<label class="bf-list-item-select custom-control custom-checkbox mr-3" data-tooltip title="Select"><input type="checkbox" id="@item.BlogPostId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
100+
<a class="bf-list-item-link" href="~/admin/posts/editor/@item.BlogPostId?user=@user">@item.Title</a>
101+
<span class="bf-list-item-status bf-list-item-status-@postStatus ml-auto" data-tooltip title="@postStatus"><i class="fa fa-circle"></i></span>
102+
<span class="bf-list-item-date ml-3 d-none d-lg-block">@publishedLbl</span>
103103
@if (Model.Profile.IsAdmin) {
104-
<button class="btn-unstyled item-favorite my-auto ml-3" data-tooltip title="featured" onclick="postsController.featured('@item.BlogPostId', this)"> @if (item.IsFeatured) { <i class="fa fa-star"></i> } else { <i class="fa fa-star-o"></i> } </button>
104+
<button class="btn-unstyled bf-list-item-favorite ml-3" data-tooltip title="featured" onclick="postsController.featured('@item.BlogPostId', this)"> @if (item.IsFeatured) { <i class="fa fa-star"></i> } else { <i class="fa fa-star-o"></i> } </button>
105105
}
106-
<a class="item-show my-auto ml-3" href="~/@ApplicationSettings.BlogRoute@item.Slug" target="_blank" data-tooltip title="View"><i class="fa fa-external-link-square"></i></a>
106+
<a class="bf-list-item-show ml-3" href="~/@ApplicationSettings.BlogRoute@item.Slug" target="_blank" data-tooltip title="View"><i class="fa fa-external-link-square"></i></a>
107107
</li>
108108
}
109109
</ul>

‎Blogifier.Web/Views/Blogifier/Admin/Settings/Users.cshtml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@
1717
<button type="button" id="userActionButtons" class="btn btn-outline-secondary btn-rounded btn-sm btn-icon mr-3" disabled="disabled" data-tooltip onclick="return usersController.removeUser()" title="Delete"><i class="fa fa-trash"></i></button>
1818
<div class="loading loading-sm"><div class="loading-dot-1"></div><div class="loading-dot-2"></div><div class="loading-dot-3"></div></div>
1919
</div>
20-
<ul class="bf-users-list d-block" aria-label="posts">
20+
<ul class="bf-list d-block" aria-label="posts">
2121
@foreach (var blog in Model.Blogs)
2222
{
23-
<li class="user-list-item d-flex ">
23+
<li class="bf-list-item d-flex align-items-center">
2424
@if (!blog.IsAdmin)
2525
{
26-
<label class="item-select custom-control custom-checkbox my-auto mr-3"><input type="checkbox" id="@blog.ProfileId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
26+
<label class="bf-list-item-select custom-control custom-checkbox mr-3"><input type="checkbox" id="@blog.ProfileId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
2727
}
28-
<span class="item-name">@blog.AuthorName</span>
29-
<span class="item-count ml-auto my-auto mr-3">@blog.PostCount Posts</span>
30-
<a class="item-show my-auto" href="@blog.Url" target="_blank" role="button"><i class="fa fa-external-link-square"></i></a>
28+
<span class="bf-list-item-name">@blog.AuthorName</span>
29+
<span class="bf-list-item-text ml-auto mr-3">@blog.PostCount Posts</span>
30+
<a class="bf-list-item-show" href="@blog.Url" target="_blank" role="button"><i class="fa fa-external-link-square"></i></a>
3131
</li>
3232
}
3333
</ul>

‎Blogifier.Web/wwwroot/admin/css/styles.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Blogifier.Web/wwwroot/admin/js/app/postsController.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,10 +145,6 @@
145145
}
146146
}(DataService);
147147

148-
$('.bf-posts-list .item-link-desktop').click(function () {
149-
$('.bf-posts-list .item-link-desktop').removeClass('active');
150-
$(this).addClass('active');
151-
});
152148

153149
var itemCheckbox = $('.item-checkbox');
154150
var firstitemCheckbox = itemCheckbox.first();

‎Blogifier.Web/wwwroot/admin/scss/components/_list.scss‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
.bf-list {
2+
@include unstyled(ul);
3+
4+
.custom-control {
5+
display: block;
6+
padding: 0;
7+
margin: 0;
8+
min-width: 1rem;
9+
min-height: 1rem;
10+
width: 1rem;
11+
height: 1rem;
12+
13+
&-indicator {
14+
top: 0;
15+
left: 0;
16+
}
17+
}
18+
19+
&-item {
20+
position: relative;
21+
height: 3rem;
22+
padding: 0 2rem;
23+
border-bottom: 1px solid #f8f8f8;
24+
25+
&:hover {
26+
background-color: #fafafa;
27+
}
28+
@media screen and (max-width: 991px) {
29+
padding: 0 1rem;
30+
}
31+
}
32+
33+
&-empty {
34+
padding: 2rem;
35+
}
36+
37+
&-item-link {
38+
color: #666;
39+
height: 3rem;
40+
line-height: 3rem;
41+
display: block;
42+
width: 100%;
43+
font-size: .875rem;
44+
font-weight: 500;
45+
@include ellipsis;
46+
47+
&:focus {
48+
outline: none;
49+
}
50+
51+
&:focus,
52+
&:hover {
53+
color: $cl-bf;
54+
}
55+
}
56+
57+
58+
&-item-name {
59+
color: #666;
60+
height: 3rem;
61+
line-height: 3rem;
62+
display: block;
63+
width: 100%;
64+
font-size: .875rem;
65+
font-weight: 500;
66+
@include ellipsis;
67+
}
68+
69+
&-item-status {
70+
font-size: .625rem;
71+
padding-left: 1rem;
72+
73+
&-draft {
74+
color: #ff9b00;
75+
}
76+
77+
&-published {
78+
color: #00c748;
79+
}
80+
}
81+
&-item-text,
82+
&-item-date {
83+
display: block;
84+
color: #666;
85+
font-size: .75rem;
86+
text-transform: uppercase;
87+
white-space: nowrap;
88+
}
89+
90+
&-item-favorite {
91+
font-size: .875rem;
92+
cursor: pointer;
93+
padding: 0;
94+
95+
.fa-star-o {
96+
color: #888;
97+
}
98+
99+
.fa-star {
100+
color: #ffbe00;
101+
}
102+
103+
&:focus,
104+
&:hover {
105+
outline: none;
106+
107+
.fa-star-o {
108+
color: #ffbe00;
109+
}
110+
111+
.fa-star {
112+
color: #888;
113+
}
114+
}
115+
}
116+
117+
&-item-show {
118+
font-size: .875rem;
119+
color: #888;
120+
121+
&:focus {
122+
outline: none;
123+
}
124+
125+
&:focus,
126+
&:hover {
127+
color: $cl-bf;
128+
}
129+
}
130+
//
131+
}

‎Blogifier.Web/wwwroot/admin/scss/pages/posts/_list.scss‎

Lines changed: 0 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,3 @@
11
.bf-posts-list {
22
display: none;
3-
@include unstyled(ul);
4-
margin-bottom: 2rem;
5-
@media screen and (max-width: 991px) {
6-
margin-bottom: 1rem;
7-
}
8-
}
9-
10-
.post-list-item {
11-
position: relative;
12-
height: 3rem;
13-
padding: 0 2rem;
14-
border-bottom: 1px solid #f8f8f8;
15-
16-
.custom-control {
17-
display: block;
18-
padding: 0;
19-
margin: 0;
20-
min-width: 1rem;
21-
min-height: 1rem;
22-
width: 1rem;
23-
height: 1rem;
24-
25-
&-indicator {
26-
top: 0;
27-
left: 0;
28-
}
29-
}
30-
31-
.item-link {
32-
color: #000;
33-
height: 3rem;
34-
line-height: 3rem;
35-
display: block;
36-
width: 100%;
37-
@include ellipsis;
38-
39-
&:focus {
40-
outline: none;
41-
}
42-
43-
&:focus,
44-
&:hover {
45-
color: $cl-bf;
46-
}
47-
}
48-
49-
.item-status {
50-
font-size: .625rem;
51-
padding-left: 1rem;
52-
53-
&-draft {
54-
color: #ff9b00;
55-
}
56-
57-
&-published {
58-
color: #00c748;
59-
}
60-
}
61-
62-
.item-date {
63-
display: block;
64-
color: #666;
65-
font-size: .75rem;
66-
text-transform: uppercase;
67-
white-space: nowrap;
68-
}
69-
70-
.item-favorite {
71-
font-size: .875rem;
72-
cursor: pointer;
73-
padding: 0;
74-
75-
.fa-star-o {
76-
color: #888;
77-
}
78-
79-
.fa-star {
80-
color: #ffbe00;
81-
}
82-
83-
&:focus,
84-
&:hover {
85-
outline: none;
86-
87-
.fa-star-o {
88-
color: #ffbe00;
89-
}
90-
91-
.fa-star {
92-
color: #888;
93-
}
94-
}
95-
}
96-
97-
.item-show {
98-
font-size: .875rem;
99-
color: #888;
100-
101-
&:focus {
102-
outline: none;
103-
}
104-
105-
&:focus,
106-
&:hover {
107-
color: $cl-bf;
108-
}
109-
}
110-
//
111-
&:hover {
112-
background-color: #f8f8f8;
113-
}
114-
@media screen and (max-width: 991px) {
115-
padding: 0 1rem;
116-
}
117-
@media screen and (max-width: 767px) {
118-
.item-date {
119-
display: none;
120-
}
121-
}
1223
}

‎Blogifier.Web/wwwroot/admin/scss/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@import "layouts/toolbar";
1919

2020
// Components
21+
@import "components/list";
2122
@import "components/utilities";
2223
@import "components/button";
2324
@import "components/dropdown";

0 commit comments

Comments
 (0)