Various AT Protocol integrations with obsidian
better responsiveness for source selection
authored by
treethought
and committed by
tangled.org
4a17599c
0fb21672
+81
-39
+4
-5
src/views/atmark.ts
+4
-5
src/views/atmark.ts
···
52
52
}
53
53
54
54
getIcon() {
55
-
return "bookmark";
55
+
return "layers";
56
56
}
57
57
58
58
async onOpen() {
···
115
115
// eslint-disable-next-line obsidianmd/ui/sentence-case
116
116
nav.createEl("h1", { text: "ATmark", cls: "atmark-title" });
117
117
118
-
// Source selector in the center
119
-
const sourceSelector = nav.createEl("div", { cls: "atmark-source-selector" });
118
+
renderProfileIcon(nav, this.plugin.profile);
119
+
120
+
const sourceSelector = header.createEl("div", { cls: "atmark-source-selector" });
120
121
const sources: SourceType[] = ["semble", "bookmark", "margin"];
121
122
122
123
for (const source of sources) {
···
138
139
cls: "atmark-source-text",
139
140
});
140
141
}
141
-
142
-
renderProfileIcon(nav, this.plugin.profile);
143
142
144
143
// Let the active source render its filters
145
144
const filtersContainer = container.createEl("div", { cls: "atmark-filters" });
+77
-34
styles.css
+77
-34
styles.css
···
10
10
}
11
11
12
12
.atmark-nav {
13
-
position: relative;
14
13
display: flex;
15
14
align-items: center;
16
15
justify-content: space-between;
17
-
margin-bottom: 16px;
16
+
margin-bottom: 12px;
17
+
gap: 10px;
18
18
}
19
19
20
20
.atmark-title {
···
22
22
font-size: var(--h1-size);
23
23
font-weight: var(--font-bold);
24
24
color: var(--text-accent);
25
+
flex-shrink: 1;
26
+
min-width: 0;
25
27
}
26
28
27
29
.atmark-source-selector {
28
-
position: absolute;
29
-
left: 50%;
30
-
transform: translateX(-50%);
31
30
display: flex;
32
31
align-items: center;
33
-
gap: 8px;
32
+
justify-content: center;
33
+
gap: 6px;
34
+
margin-bottom: 12px;
35
+
flex-wrap: wrap;
34
36
}
35
37
36
38
.atmark-source-option {
37
39
display: flex;
38
40
align-items: center;
39
41
justify-content: center;
40
-
gap: 6px;
41
-
padding: 8px 20px;
42
+
gap: 4px;
43
+
padding: 4px 12px;
42
44
cursor: pointer;
43
45
user-select: none;
44
-
border-radius: var(--radius-m);
46
+
border-radius: var(--radius-s);
45
47
border: 1px solid var(--background-modifier-border);
46
48
background: var(--background-secondary);
47
49
transition: all 0.15s ease;
50
+
font-size: var(--font-smaller);
48
51
}
49
52
50
53
.atmark-source-option:hover {
···
66
69
}
67
70
68
71
.atmark-source-text {
69
-
font-size: var(--font-small);
72
+
font-size: var(--font-smaller);
70
73
font-weight: var(--font-medium);
71
74
color: var(--text-normal);
72
75
}
···
74
77
.atmark-filters {
75
78
display: flex;
76
79
flex-direction: column;
77
-
gap: 12px;
80
+
gap: 16px;
78
81
margin-bottom: 16px;
79
82
}
80
83
81
84
.atmark-filter-section {
82
85
display: flex;
83
86
flex-direction: column;
84
-
gap: 8px;
87
+
gap: 6px;
85
88
}
86
89
87
90
.atmark-filter-title-row {
88
91
display: flex;
89
92
align-items: center;
90
-
justify-content: space-between;
91
-
gap: 8px;
93
+
gap: 6px;
94
+
margin-bottom: 2px;
92
95
}
93
96
94
97
.atmark-filter-title {
95
98
margin: 0;
96
-
font-size: var(--font-small);
99
+
font-size: var(--font-smallest);
97
100
font-weight: var(--font-semibold);
98
-
color: var(--text-muted);
101
+
color: var(--text-faint);
99
102
text-transform: uppercase;
100
-
letter-spacing: 0.5px;
103
+
letter-spacing: 0.05em;
101
104
}
102
105
103
106
.atmark-filter-create-btn {
104
107
display: flex;
105
108
align-items: center;
106
109
justify-content: center;
107
-
width: 24px;
108
-
height: 24px;
110
+
width: 18px;
111
+
height: 18px;
109
112
padding: 0;
110
113
background: transparent;
111
-
border: 1px solid var(--background-modifier-border);
114
+
border: none;
112
115
border-radius: var(--radius-s);
113
116
cursor: pointer;
114
-
color: var(--text-muted);
117
+
color: var(--text-faint);
115
118
transition: all 0.15s ease;
119
+
opacity: 0.7;
116
120
}
117
121
118
122
.atmark-filter-create-btn:hover {
119
123
background: var(--background-modifier-hover);
120
-
color: var(--text-normal);
121
-
border-color: var(--background-modifier-border-hover);
124
+
color: var(--interactive-accent);
125
+
opacity: 1;
122
126
}
123
127
124
128
.atmark-filter-create-btn svg {
125
-
width: 14px;
126
-
height: 14px;
129
+
width: 12px;
130
+
height: 12px;
127
131
}
128
132
129
133
.atmark-filter-chips {
130
134
display: flex;
131
135
flex-wrap: wrap;
132
-
gap: 8px;
136
+
gap: 6px;
137
+
align-items: center;
133
138
}
134
139
135
140
.atmark-chip {
136
-
padding: 6px 14px;
137
-
border-radius: var(--radius-full);
138
-
border: 1px solid var(--background-modifier-border);
139
-
background: var(--background-secondary);
141
+
padding: 3px 10px;
142
+
border-radius: var(--radius-m);
143
+
border: none;
144
+
background: var(--background-modifier-border);
140
145
color: var(--text-muted);
141
-
font-size: var(--font-small);
146
+
font-size: var(--font-smallest);
147
+
font-weight: var(--font-medium);
142
148
cursor: pointer;
143
-
transition: all 0.15s ease;
149
+
transition: all 0.12s ease;
150
+
white-space: nowrap;
144
151
}
145
152
146
153
.atmark-chip:hover {
147
-
background: var(--background-modifier-hover);
154
+
background: var(--background-modifier-border-hover);
148
155
color: var(--text-normal);
156
+
transform: translateY(-1px);
149
157
}
150
158
151
159
.atmark-chip-active {
152
160
background: var(--interactive-accent);
153
161
color: var(--text-on-accent);
154
-
border-color: var(--interactive-accent);
162
+
font-weight: var(--font-semibold);
155
163
}
156
164
157
165
.atmark-chip-active:hover {
158
166
background: var(--interactive-accent-hover);
167
+
transform: translateY(-1px);
159
168
}
160
169
161
170
.atmark-grid {
···
1194
1203
.semble-error {
1195
1204
color: var(--text-error);
1196
1205
}
1206
+
1207
+
/* Responsive styles for mobile and narrow views */
1208
+
@media (max-width: 600px) {
1209
+
.atmark-view {
1210
+
padding: 12px;
1211
+
}
1212
+
1213
+
.atmark-header {
1214
+
margin-bottom: 16px;
1215
+
padding-bottom: 12px;
1216
+
}
1217
+
1218
+
.atmark-title {
1219
+
font-size: var(--font-ui-medium);
1220
+
}
1221
+
1222
+
.atmark-source-option {
1223
+
padding: 3px 10px;
1224
+
font-size: var(--font-smallest);
1225
+
}
1226
+
1227
+
.atmark-source-text {
1228
+
font-size: var(--font-smallest);
1229
+
}
1230
+
1231
+
.atmark-grid {
1232
+
grid-template-columns: 1fr;
1233
+
gap: 12px;
1234
+
}
1235
+
1236
+
.atmark-filter-section {
1237
+
margin-bottom: 12px;
1238
+
}
1239
+
}