Skip to content

Commit 72f62e9

Browse files
ajaydsouzaajaydsouza
committed
Update README title to "Top 10 Pro" and refactor left-thumbs CSS with improved flexbox layout and custom properties
1 parent 2c00e80 commit 72f62e9

18 files changed

Lines changed: 1246 additions & 326 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# WebberZone Top 10 — Popular Posts
1+
# WebberZone Top 10 Pro — Popular Posts
22

33
[![Top 10](https://raw.githubusercontent.com/WebberZone/top-10/master/wporg-assets/banner-1544x500.png)](https://wordpress.org/plugins/top-10/)
44

‎css/left-thumbs-rtl.css‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
/* Custom properties for easy theming. */
88
--tptn-gap: 0.625rem;
99
--tptn-border-radius: 8px;
10+
--tptn-thumb-frame-padding: 0.25rem;
11+
--tptn-thumb-frame-border-width: 1px;
1012
--tptn-thumb-border: #ccc;
1113
--tptn-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
1214
--tptn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -21,6 +23,7 @@
2123

2224
.tptn-left-thumbs ul li {
2325
display: flex;
26+
flex-wrap: wrap;
2427
gap: var(--tptn-gap);
2528
align-items: flex-start;
2629
margin-bottom: 1.25rem;
@@ -29,43 +32,46 @@
2932
list-style: none;
3033
}
3134

32-
.tptn-left-thumbs ul li:last-child {
33-
margin-bottom: 0;
34-
}
35-
36-
.tptn-left-thumbs .tptn_thumb {
37-
flex-shrink: 0;
35+
.tptn-left-thumbs li > a.tptn_link {
3836
display: block;
39-
padding: 0.25rem !important;
40-
border: 1px solid var(--tptn-thumb-border);
37+
flex: 0 0 auto;
38+
align-self: flex-start;
39+
width: min(var(--tptn-thumb-width, 9999px), 100%);
40+
max-width: 100%;
41+
padding: var(--tptn-thumb-frame-padding);
42+
border-width: var(--tptn-thumb-frame-border-width);
43+
border-style: solid;
44+
border-color: var(--tptn-thumb-border);
4145
border-radius: var(--tptn-border-radius);
4246
box-shadow: var(--tptn-shadow);
4347
transition:
4448
transform var(--tptn-transition),
4549
box-shadow var(--tptn-transition);
4650
will-change: transform;
47-
width: min(var(--tptn-thumb-width, 9999px), 100%);
48-
height: var(--tptn-thumb-height, auto);
49-
max-width: 100%;
5051
}
5152

52-
.tptn-left-thumbs ul li:hover .tptn_thumb {
53+
.tptn-left-thumbs ul li:last-child {
54+
margin-bottom: 0;
55+
}
56+
57+
.tptn-left-thumbs ul li:hover > a.tptn_link {
5358
transform: scale(1.03);
5459
box-shadow: var(--tptn-shadow-hover);
5560
}
5661

5762
.tptn-left-thumbs img.tptn_thumb {
58-
width: min(var(--tptn-thumb-width, 9999px), 100%) !important;
59-
height: var(--tptn-thumb-height, auto) !important;
63+
width: min(var(--tptn-thumb-width, 9999px), 100%);
64+
height: var(--tptn-thumb-height, auto);
6065
max-width: 100%;
66+
max-height: var(--tptn-thumb-height, none);
6167
display: block;
6268
object-fit: cover;
6369
aspect-ratio: var(--tptn-thumb-aspect-ratio, auto);
64-
border-radius: calc(var(--tptn-border-radius) * 0.75);
70+
border-radius: calc(var(--tptn-border-radius) * 0.6);
6571
}
6672

6773
.tptn-left-thumbs .tptn_after_thumb {
68-
flex: 1;
74+
flex: 1 1 12rem;
6975
min-width: 0;
7076
}
7177

@@ -94,12 +100,12 @@
94100

95101
/* Reduced motion for accessibility. */
96102
@media (prefers-reduced-motion: reduce) {
97-
.tptn-left-thumbs .tptn_thumb {
103+
.tptn-left-thumbs li > a.tptn_link {
98104
transition: none;
99105
will-change: auto;
100106
}
101107

102-
.tptn-left-thumbs ul li:hover .tptn_thumb {
108+
.tptn-left-thumbs ul li:hover > a.tptn_link {
103109
transform: none;
104110
}
105111
}

‎css/left-thumbs-rtl.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/left-thumbs.css‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
/* Custom properties for easy theming. */
88
--tptn-gap: 0.625rem;
99
--tptn-border-radius: 8px;
10+
--tptn-thumb-frame-padding: 0.25rem;
11+
--tptn-thumb-frame-border-width: 1px;
1012
--tptn-thumb-border: #ccc;
1113
--tptn-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
1214
--tptn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -21,6 +23,7 @@
2123

2224
.tptn-left-thumbs ul li {
2325
display: flex;
26+
flex-wrap: wrap;
2427
gap: var(--tptn-gap);
2528
align-items: flex-start;
2629
margin-bottom: 1.25rem;
@@ -29,41 +32,44 @@
2932
list-style: none;
3033
}
3134

32-
.tptn-left-thumbs ul li:last-child {
33-
margin-bottom: 0;
34-
}
35-
36-
.tptn-left-thumbs .tptn_thumb {
37-
flex-shrink: 0;
35+
.tptn-left-thumbs li > a.tptn_link {
3836
display: block;
39-
padding: 0.25rem !important;
40-
border: 1px solid var(--tptn-thumb-border);
37+
flex: 0 0 auto;
38+
align-self: flex-start;
39+
width: min(var(--tptn-thumb-width, 9999px), 100%);
40+
max-width: 100%;
41+
padding: var(--tptn-thumb-frame-padding);
42+
border-width: var(--tptn-thumb-frame-border-width);
43+
border-style: solid;
44+
border-color: var(--tptn-thumb-border);
4145
border-radius: var(--tptn-border-radius);
4246
box-shadow: var(--tptn-shadow);
4347
transition: transform var(--tptn-transition), box-shadow var(--tptn-transition);
4448
will-change: transform;
45-
width: min(var(--tptn-thumb-width, 9999px), 100%);
46-
height: var(--tptn-thumb-height, auto);
47-
max-width: 100%;
4849
}
4950

50-
.tptn-left-thumbs ul li:hover .tptn_thumb {
51+
.tptn-left-thumbs ul li:last-child {
52+
margin-bottom: 0;
53+
}
54+
55+
.tptn-left-thumbs ul li:hover > a.tptn_link {
5156
transform: scale(1.03);
5257
box-shadow: var(--tptn-shadow-hover);
5358
}
5459

5560
.tptn-left-thumbs img.tptn_thumb {
56-
width: min(var(--tptn-thumb-width, 9999px), 100%) !important;
57-
height: var(--tptn-thumb-height, auto) !important;
61+
width: min(var(--tptn-thumb-width, 9999px), 100%);
62+
height: var(--tptn-thumb-height, auto);
5863
max-width: 100%;
64+
max-height: var(--tptn-thumb-height, none);
5965
display: block;
6066
object-fit: cover;
6167
aspect-ratio: var(--tptn-thumb-aspect-ratio, auto);
62-
border-radius: calc(var(--tptn-border-radius) * 0.75);
68+
border-radius: calc(var(--tptn-border-radius) * 0.6);
6369
}
6470

6571
.tptn-left-thumbs .tptn_after_thumb {
66-
flex: 1;
72+
flex: 1 1 12rem;
6773
min-width: 0;
6874
}
6975

@@ -92,12 +98,12 @@
9298

9399
/* Reduced motion for accessibility. */
94100
@media (prefers-reduced-motion: reduce) {
95-
.tptn-left-thumbs .tptn_thumb {
101+
.tptn-left-thumbs li > a.tptn_link {
96102
transition: none;
97103
will-change: auto;
98104
}
99105

100-
.tptn-left-thumbs ul li:hover .tptn_thumb {
106+
.tptn-left-thumbs ul li:hover > a.tptn_link {
101107
transform: none;
102108
}
103-
}
109+
}

‎css/left-thumbs.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pro/grid-thumbs-pro-rtl.css‎

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

‎css/pro/grid-thumbs-pro-rtl.min.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)