yummy-guide-generic-administrate 0.3.2 → 0.4.1
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: 63cc246c05e84a30d02af50083b1c1e373207f1f0c87148ffcf38fe85686483d
|
|
4
|
+
data.tar.gz: 28fd3bc1f473b963b187067c8b7b9f0ce90584f764be4374e908984f1212e86c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 426df20985241129a46305a65bd7643f4f47808f195a11409aa2828655b757baab5c4ecb5ec9a0a950aec5bd95ba612baad441cea103c92d0076084d56a47fe9
|
|
7
|
+
data.tar.gz: 44e0e8f4f2d976dc2b7034a7658d321044327b10990a6c0bf1e642fffe932e2ae5b9c88bd8bc8fb47b850a4a8b1be1fec9b66d15a9c241f84322fd8a04f6748e
|
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,13 @@ 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 と揃い、一覧 wrapper
|
|
175
|
+
自体には縦スクロールを持たせません。
|
|
174
176
|
|
|
175
177
|
#### 3. 自前の table partial を使う場合
|
|
176
178
|
|
|
@@ -1,9 +1,94 @@
|
|
|
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
|
+
.main-content__body--flush > .scroll-table {
|
|
64
|
+
max-height: none;
|
|
65
|
+
overflow-x: auto;
|
|
66
|
+
overflow-y: hidden;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.table-fixed-header-slot[data-fixed-header-inline="true"] {
|
|
70
|
+
flex-basis: calc(100% + 4rem - 1em);
|
|
71
|
+
flex-shrink: 0;
|
|
72
|
+
margin: 0 calc(-2rem + 0.5em) -1rem;
|
|
73
|
+
overflow-x: hidden;
|
|
74
|
+
overflow-y: hidden;
|
|
75
|
+
background: #fff;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.table-fixed-header-slot[data-fixed-header-inline="true"] .home-table--fixed-header {
|
|
79
|
+
min-width: 100%;
|
|
80
|
+
margin: 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
3
84
|
.scroll-table {
|
|
4
85
|
overflow-x: auto;
|
|
5
86
|
}
|
|
6
87
|
|
|
88
|
+
.table-fixed-header-slot {
|
|
89
|
+
overflow-y: hidden;
|
|
90
|
+
}
|
|
91
|
+
|
|
7
92
|
.scroll-table table th,
|
|
8
93
|
.scroll-table table td,
|
|
9
94
|
.sticky-table-scroll table th,
|
|
@@ -419,6 +504,7 @@ td.actions-column .sticky__item,
|
|
|
419
504
|
word-break: break-word;
|
|
420
505
|
}
|
|
421
506
|
|
|
507
|
+
|
|
422
508
|
.home-table--fixed-header th.sticky {
|
|
423
509
|
position: sticky;
|
|
424
510
|
right: 0;
|