Skip to content

Commit fe0fca0

Browse files
stdwordstdword
committed
feat(views): tabular view: add hidden header mode with #.tabular0
1 parent c84160b commit fe0fca0

File tree

1 file changed

+62
-27
lines changed

1 file changed

+62
-27
lines changed

‎src/css/tabular_view.css‎

Lines changed: 62 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,132 @@
22
/* based on «Tabular Journals» by nmartin84 */
33

44
/* header */
5-
.ls-block[data-refs-self*=".tabular"] > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner > div > :is(h1,h2) {
5+
.ls-block[data-refs-self*='".tabular"'] > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner > div > :is(h1,h2) {
66
border-bottom: none;
77
margin: 0px;
88
padding: 0px;
99
}
10-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container.items-baseline {
11-
align-items: center;
10+
11+
@keyframes hideAnimation {
12+
to {
13+
display: none;
14+
}
15+
}
16+
.ls-block[data-refs-self*='".tabular0"'] > .block-main-container {
17+
animation: hideAnimation 0s forwards;
18+
animation-delay: 1s;
19+
}
20+
.ls-block[data-refs-self*='".tabular0"'].selected > .block-main-container,
21+
.ls-block[data-refs-self*='".tabular0"'] > .block-main-container:hover,
22+
.ls-block[data-refs-self*='".tabular0"'] > .block-main-container:has(> .editor-wrapper),
23+
.ls-block[data-refs-self*='".tabular0"'] > .block-main-container:has(+ .block-children-container > .block-children-left-border:hover) {
24+
display: flex;
25+
animation: none;
1226
}
13-
/* table */
14-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children {
27+
28+
.ls-block[data-refs-self*='".tabular0"'] > .block-children-container {
29+
margin-left: 0px;
30+
}
31+
32+
/* table alignment */
33+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children {
1534
border-left: 0px;
1635

1736
display: flex;
1837
flex-direction: column;
1938
}
20-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block:first-child {
39+
40+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block:first-child {
2141
border-top: 1px solid var(--ls-guideline-color);
2242
}
23-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block {
43+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block {
2444
display: flex;
2545
border-bottom: 1px solid var(--ls-guideline-color);
2646
padding: 0px;
2747

2848
flex-grow: 1;
2949
width: 100%;
3050
}
31-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container {
51+
52+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container {
3253
padding: 2px 0px;
3354
}
55+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container.items-baseline {
56+
align-items: center;
57+
}
58+
3459
/* left: size & header */
35-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner {
60+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner {
3661
font-weight: 500;
3762
}
38-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner,
39-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-body,
40-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .editor-wrapper > .editor-inner {
63+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner,
64+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-body,
65+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .editor-wrapper > .editor-inner {
4166
min-width: 165px;
4267
max-width: 165px;
4368
}
69+
4470
/* left: plain text */
45-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-body {
71+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-body {
4672
font-size: 85%;
4773
opacity: 0.7;
4874
font-weight: 400;
4975
}
76+
5077
/* left: hide brackets */
51-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper .page-reference .bracket {
78+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper .page-reference .bracket {
5279
display: none;
5380
}
81+
5482
/* right: adapt margins */
55-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-children-container {
83+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-children-container {
5684
margin-left: 0px;
5785
width: 100%;
5886
}
59-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-children-container > .block-children {
87+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-children-container > .block-children {
6088
padding-bottom: 10px;
6189
}
6290

6391
/* sub tabular */
64-
/* table */
65-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children {
92+
/* table alignment */
93+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children {
6694
border-left: 1px solid var(--ls-guideline-color);
6795
padding-top: 0px;
6896
padding-bottom: 0px;
6997
}
70-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block:first-child {
98+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block:first-child {
7199
border-top: 0px;
72100
}
73-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block:last-child {
101+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block:last-child {
74102
margin-bottom: -1px;
75103
border-bottom: 0px;
76104
}
77105
/* left: size */
78-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner,
79-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-body,
80-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-main-container > .editor-wrapper > .editor-inner {
106+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-content-inner,
107+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .block-content-wrapper > div > div > .block-content > .block-body,
108+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-main-container > .editor-wrapper > .editor-inner {
81109
min-width: 115px;
82110
max-width: 115px;
83111
}
84112
/* right: adapt margins */
85-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block > .block-children-container > .block-children {
113+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block > .block-children-container > .block-children {
86114
padding-bottom: 7px;
87115
}
88116

89117
/* zero sub tabular */
90-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular0"] > .block-children-container > .block-children-left-border {
118+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular0"'] > .block-main-container {
119+
animation: none; /* to prevent animating when #.tabular0 is the root */
120+
border-right: 1px solid var(--ls-guideline-color);
121+
}
122+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular0"'] > .block-children-container {
123+
margin-left: -1px;
124+
}
125+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular0"'] > .block-children-container > .block-children-left-border {
91126
display: none;
92127
}
93-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular0"] > .block-children-container > .block-children {
128+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular0"'] > .block-children-container > .block-children {
94129
border-left: 0px;
95130
}
96-
.ls-block[data-refs-self*=".tabular"] > .block-children-container > .block-children > .ls-block[data-refs-self*=".tabular0"] > .block-children-container > .block-children > .ls-block > .block-main-container {
131+
.ls-block[data-refs-self*='".tabular'] > .block-children-container > .block-children > .ls-block[data-refs-self*='".tabular0"'] > .block-children-container > .block-children > .ls-block > .block-main-container {
97132
display: none;
98133
}

0 commit comments

Comments
 (0)