yummy-guide-generic-administrate 0.3.2 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7a900e85ac77c86b162da45de406b17c80f1aa18340da95f6d02ac45ca8ce259
|
|
4
|
+
data.tar.gz: 80d5fca1e0d8248f26906395613ff1974b0704d306cece30985f2ebf954a7b67
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 105bcc475d2ac342e51ff9765dda3ca8e3709949a1b72d471182ec90c6a3df1fe17bc014a09bce4ef27f4976e0dddc41d2457ea4b2b8424345a5cb4a24c69cfe
|
|
7
|
+
data.tar.gz: afca6ea454ec4ddb804234954df68ab30790a58bc109a8555afaab9d012fd480aed5c3cff3d749cd5ca001851d10a0d788f82180821877f60be0ef83fcd1d155
|
data/README.md
CHANGED
|
@@ -151,7 +151,7 @@ gem には専用 partial があります。
|
|
|
151
151
|
<%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
|
|
152
152
|
</header>
|
|
153
153
|
|
|
154
|
-
<section class="main-content__body">
|
|
154
|
+
<section class="main-content__body main-content__body--flush">
|
|
155
155
|
<%= render "yummy_guide/administrate/administrate/application/collection",
|
|
156
156
|
collection_presenter: collection_presenter,
|
|
157
157
|
page: page,
|
|
@@ -166,11 +166,12 @@ gem には専用 partial があります。
|
|
|
166
166
|
`fixed_table_header` partial 自体は以下の 1 行です。
|
|
167
167
|
|
|
168
168
|
```erb
|
|
169
|
-
<div data-fixed-table-header hidden></div>
|
|
169
|
+
<div class="yummy-guide-administrate-fixed-table-header" data-fixed-table-header hidden></div>
|
|
170
170
|
```
|
|
171
171
|
|
|
172
172
|
この slot を置かない場合でも、JS が table の直前に自動生成します。配置を制御
|
|
173
|
-
したいときだけ明示してください。
|
|
173
|
+
したいときだけ明示してください。desktop では LMJ と同じく、`main-content__body--flush`
|
|
174
|
+
と組み合わせることで fixed header のクリップ幅が一覧 body と揃います。
|
|
174
175
|
|
|
175
176
|
#### 3. 自前の table partial を使う場合
|
|
176
177
|
|
|
@@ -1,5 +1,79 @@
|
|
|
1
1
|
@import "fixed_submit_actions";
|
|
2
2
|
|
|
3
|
+
@media screen and (min-width: 768px) {
|
|
4
|
+
.app-container {
|
|
5
|
+
--app-container-block-padding: 1.5em;
|
|
6
|
+
align-items: flex-start;
|
|
7
|
+
gap: 1.5em;
|
|
8
|
+
min-height: 100vh;
|
|
9
|
+
min-height: 100dvh;
|
|
10
|
+
height: auto;
|
|
11
|
+
overflow: visible;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
margin-right: 0;
|
|
15
|
+
max-width: 100%;
|
|
16
|
+
padding: var(--app-container-block-padding) 1.5em;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.navigation {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex: 0 0 240px;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
width: 240px;
|
|
24
|
+
max-width: 240px;
|
|
25
|
+
height: auto;
|
|
26
|
+
max-height: calc(100vh - 3em);
|
|
27
|
+
max-height: calc(100dvh - 3em);
|
|
28
|
+
overflow-y: auto;
|
|
29
|
+
overscroll-behavior: contain;
|
|
30
|
+
position: sticky;
|
|
31
|
+
top: 1.5em;
|
|
32
|
+
align-self: flex-start;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.navigation .navigation__link__secondary {
|
|
36
|
+
margin-left: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.main-content {
|
|
40
|
+
flex: 1 1 auto;
|
|
41
|
+
min-width: 0;
|
|
42
|
+
min-height: calc(100vh - (var(--app-container-block-padding) + var(--app-container-block-padding)));
|
|
43
|
+
min-height: calc(100dvh - (var(--app-container-block-padding) + var(--app-container-block-padding)));
|
|
44
|
+
height: auto;
|
|
45
|
+
overflow: visible;
|
|
46
|
+
margin-bottom: 0;
|
|
47
|
+
padding-bottom: 1rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.main-content__header--sticky-table-layout {
|
|
51
|
+
position: sticky;
|
|
52
|
+
top: 0;
|
|
53
|
+
z-index: 10;
|
|
54
|
+
flex-wrap: wrap;
|
|
55
|
+
overflow-x: hidden;
|
|
56
|
+
background: #fff;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.main-content__body--flush {
|
|
60
|
+
padding: 0 0.5em 1rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.table-fixed-header-slot[data-fixed-header-inline="true"] {
|
|
64
|
+
flex-basis: calc(100% + 4rem - 1em);
|
|
65
|
+
flex-shrink: 0;
|
|
66
|
+
margin: 0 calc(-2rem + 0.5em) -1rem;
|
|
67
|
+
overflow-x: hidden;
|
|
68
|
+
background: #fff;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.table-fixed-header-slot[data-fixed-header-inline="true"] .home-table--fixed-header {
|
|
72
|
+
min-width: 100%;
|
|
73
|
+
margin: 0;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
3
77
|
.scroll-table {
|
|
4
78
|
overflow-x: auto;
|
|
5
79
|
}
|
|
@@ -419,6 +493,7 @@ td.actions-column .sticky__item,
|
|
|
419
493
|
word-break: break-word;
|
|
420
494
|
}
|
|
421
495
|
|
|
496
|
+
|
|
422
497
|
.home-table--fixed-header th.sticky {
|
|
423
498
|
position: sticky;
|
|
424
499
|
right: 0;
|