hyperzlib
/
IsekaiWidgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修正对齐

Browse Source
master
落雨楓 2 months ago
parent 0447cf168f
commit e955f3e89e
4 changed files with 82 additions and 78 deletions
Show Stats Download Patch File Download Diff File

5
includes/MasonryWidget.php
Unescape Escape View File

@ -26,14 +26,15 @@ class MasonryWidget {
public static function getStyle($params) {
$gutter = max(0, $params['gutter']);
$halfGutter = round($gutter / 2, 6);
$maxCol = max(1, $params['cols']);
$colWidth = round(100 / $maxCol, 6);
$css = ".isekai-masonry.max-col-{$maxCol} { --masonry-col-width: {$colWidth}%; --masonry-gutter: {$gutter}px; }";
$css = ".isekai-masonry.max-col-{$maxCol} { --masonry-col-width: {$colWidth}%; --masonry-gutter: {$gutter}px; --masonry-gutter-half: {$halfGutter}px; }";
if (isset($params['xs-cols'])) {
$maxCol = max(1, $params['xs-cols']);
$colWidth = round(100 / $maxCol, 6);
$css = ".isekai-masonry.max-col-xs-{$maxCol} { --masonry-col-width: {$colWidth}%; --masonry-gutter: {$gutter}px; }";
$css = ".isekai-masonry.max-col-xs-{$maxCol} { --masonry-col-width: {$colWidth}% }";
}
foreach (self::$breakpoints as $breakpoint => $width) {

147
modules/masonry/ext.isekai.masonry.css
Unescape Escape View File

@ -2,6 +2,7 @@
display: block;
width: 100%;
--masonry-col-width: 50%;
margin-left: calc(var(--masonry-gutter-half, 0) + 1px);
}
.isekai-masonry .isekai-masonry-gutter-sizer {
width: 0;
@ -9,307 +10,307 @@
}
.isekai-masonry .isekai-masonry-sizer {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .isekai-masonry-item {
margin-bottom: var(--masonry-gutter);
}
.isekai-masonry .col-1 {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .col-2 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-3 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-4 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-5 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-6 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-7 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-8 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-9 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-10 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-11 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-12 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
}
@media (min-width: 576px) {
.isekai-masonry .col-xs-1 {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .col-xs-2 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-3 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-4 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-5 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-6 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-7 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-8 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-9 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-10 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-11 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xs-12 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
}
}
@media (min-width: 768px) {
.isekai-masonry .col-sm-1 {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .col-sm-2 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-3 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-4 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-5 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-6 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-7 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-8 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-9 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-10 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-11 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-sm-12 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
}
}
@media (min-width: 992px) {
.isekai-masonry .col-md-1 {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .col-md-2 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-3 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-4 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-5 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-6 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-7 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-8 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-9 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-10 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-11 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-md-12 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
}
}
@media (min-width: 1200px) {
.isekai-masonry .col-lg-1 {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .col-lg-2 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-3 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-4 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-5 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-6 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-7 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-8 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-9 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-10 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-11 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-lg-12 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
}
}
@media (min-width: 1400px) {
.isekai-masonry .col-xl-1 {
width: 100%;
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
}
.isekai-masonry .col-xl-2 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-3 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-4 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-5 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-6 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-7 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-8 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-9 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-10 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-11 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
}
.isekai-masonry .col-xl-12 {
width: 100%;
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
}
}

1
modules/tile/style.less
Unescape Escape View File

@ -18,6 +18,7 @@ a {
.tiles-group {
margin: 10px 0;
justify-content: center;
}
.tiles-group::before {

7
src/masonry/ext.isekai.masonry.less
Unescape Escape View File

@ -11,13 +11,13 @@
.col-@{prefix}1 {
width: 100%; // Fallback
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px)";
}
each(range(2, 12, 1), {
.col-@{prefix}@{value} {
width: 100%;
width: ~"min(100%, calc(var(--masonry-col-width) * @{value} - var(--masonry-gutter) - 1px))";
width: ~"min(100%, calc(var(--masonry-col-width) * @{value} - var(--masonry-gutter) - 0.001px))";
}
});
}
@ -26,6 +26,7 @@
display: block;
width: 100%;
--masonry-col-width: 50%;
margin-left: ~"calc(var(--masonry-gutter-half, 0) + 1px)";
.isekai-masonry-gutter-sizer {
width: 0;
@ -34,7 +35,7 @@
.isekai-masonry-sizer {
width: 100%;
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px)";
}
.isekai-masonry-item {

Write Preview
Loading…
Cancel
Save