@goodfellow-cms/admin 0.1.0 → 0.3.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@goodfellow-cms/admin",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Goodfellow's admin panel: a visual editor for a site's pages, layout and settings.",
5
5
  "keywords": [
6
6
  "goodfellow",
@@ -10,12 +10,12 @@
10
10
  "admin-panel",
11
11
  "visual-editor"
12
12
  ],
13
- "homepage": "https://chartung17.github.io/goodfellow-cms/docs/edit-pages",
14
- "bugs": "https://github.com/chartung17/goodfellow-cms/issues",
13
+ "homepage": "https://goodfellow-cms.github.io/goodfellow-cms/docs/edit-pages",
14
+ "bugs": "https://github.com/goodfellow-cms/goodfellow-cms/issues",
15
15
  "license": "MIT",
16
16
  "repository": {
17
17
  "type": "git",
18
- "url": "git+https://github.com/chartung17/goodfellow-cms.git",
18
+ "url": "git+https://github.com/goodfellow-cms/goodfellow-cms.git",
19
19
  "directory": "packages/admin"
20
20
  },
21
21
  "type": "module",
@@ -49,10 +49,10 @@
49
49
  "codemirror": "6.0.2",
50
50
  "turndown": "7.2.4",
51
51
  "turndown-plugin-gfm": "1.0.2",
52
- "@goodfellow-cms/ai": "0.1.0",
53
- "@goodfellow-cms/registry": "0.1.0",
54
- "@goodfellow-cms/core": "0.1.0",
55
- "@goodfellow-cms/react": "0.1.0"
52
+ "@goodfellow-cms/core": "0.3.0",
53
+ "@goodfellow-cms/ai": "0.3.0",
54
+ "@goodfellow-cms/registry": "0.3.0",
55
+ "@goodfellow-cms/react": "0.3.0"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "@puckeditor/core": "0.23.0",
package/styles.css CHANGED
@@ -20,6 +20,8 @@
20
20
  --gfa-success-bg: light-dark(#ecfdf5, #052e1c);
21
21
  --gfa-success-text: light-dark(#065f46, #6ee7b7);
22
22
  --gfa-success-border: light-dark(#a7f3d0, #065f46);
23
+ --gfa-published-bg: light-dark(#047857, #34d399);
24
+ --gfa-published-text: light-dark(#ffffff, #022c22);
23
25
  --gfa-error-bg: light-dark(#fef2f2, #3b0d0d);
24
26
  --gfa-error-text: light-dark(#991b1b, #fca5a5);
25
27
  --gfa-demo-bg: light-dark(#fef9c3, #422006);
@@ -164,11 +166,46 @@ body,
164
166
  }
165
167
 
166
168
  .gfa-header-actions {
169
+ position: relative;
167
170
  display: flex;
168
171
  flex-wrap: wrap;
172
+ align-items: center;
169
173
  gap: 8px;
170
174
  }
171
175
 
176
+ /* "Published.", just under the Publish button, for a few seconds. */
177
+ .gfa-published {
178
+ position: fixed;
179
+ z-index: 1000;
180
+ width: max-content;
181
+ max-width: 320px;
182
+ margin: 0;
183
+ padding: 8px 14px;
184
+ border-radius: var(--gfa-radius);
185
+ background: var(--gfa-published-bg);
186
+ color: var(--gfa-published-text);
187
+ font-weight: 600;
188
+ box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
189
+ animation: gfa-published-in 150ms ease-out;
190
+ }
191
+
192
+ .gfa-published::before {
193
+ content: "✓ ";
194
+ }
195
+
196
+ @keyframes gfa-published-in {
197
+ from {
198
+ opacity: 0;
199
+ transform: translateY(-4px);
200
+ }
201
+ }
202
+
203
+ @media (prefers-reduced-motion: reduce) {
204
+ .gfa-published {
205
+ animation: none;
206
+ }
207
+ }
208
+
172
209
  .gfa-screen-header h1,
173
210
  .gfa-screen > h1 {
174
211
  margin: 0;
@@ -896,6 +933,18 @@ body,
896
933
  white-space: nowrap;
897
934
  }
898
935
 
936
+ .gfa-media-credit {
937
+ overflow: hidden;
938
+ font-size: 12px;
939
+ color: var(--gfa-muted);
940
+ text-overflow: ellipsis;
941
+ white-space: nowrap;
942
+ }
943
+
944
+ .gfa-media-credit a {
945
+ color: inherit;
946
+ }
947
+
899
948
  .gfa-media-actions {
900
949
  display: flex;
901
950
  flex-wrap: wrap;
@@ -1226,3 +1275,212 @@ body,
1226
1275
  font: inherit;
1227
1276
  font-size: 14px;
1228
1277
  }
1278
+
1279
+ /* The Domain screen's records: values such as verification codes are long and unbroken. */
1280
+ .gfa-records code {
1281
+ overflow-wrap: anywhere;
1282
+ }
1283
+
1284
+ /* Version history */
1285
+ .gfa-versions-screen {
1286
+ max-width: 1400px;
1287
+ }
1288
+
1289
+ .gfa-versions-layout {
1290
+ display: grid;
1291
+ grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
1292
+ gap: 24px;
1293
+ align-items: start;
1294
+ }
1295
+
1296
+ .gfa-versions {
1297
+ list-style: none;
1298
+ margin: 12px 0;
1299
+ padding: 0;
1300
+ display: grid;
1301
+ gap: 6px;
1302
+ }
1303
+
1304
+ .gfa-version {
1305
+ display: grid;
1306
+ gap: 2px;
1307
+ width: 100%;
1308
+ padding: 8px 12px;
1309
+ border: 1px solid var(--gfa-border);
1310
+ border-radius: var(--gfa-radius);
1311
+ background: var(--gfa-bg);
1312
+ color: var(--gfa-text);
1313
+ font: inherit;
1314
+ text-align: left;
1315
+ cursor: pointer;
1316
+ }
1317
+
1318
+ .gfa-version[aria-pressed="true"] {
1319
+ border-color: var(--gfa-accent);
1320
+ background: var(--gfa-current-bg);
1321
+ }
1322
+
1323
+ .gfa-version-message {
1324
+ font-weight: 600;
1325
+ }
1326
+
1327
+ .gfa-version-detail {
1328
+ display: grid;
1329
+ gap: 12px;
1330
+ }
1331
+
1332
+ .gfa-version-preview {
1333
+ position: relative;
1334
+ height: 70vh;
1335
+ border: 1px solid var(--gfa-border);
1336
+ border-radius: var(--gfa-radius);
1337
+ overflow: hidden;
1338
+ }
1339
+
1340
+ @media (max-width: 900px) {
1341
+ .gfa-versions-layout {
1342
+ grid-template-columns: 1fr;
1343
+ }
1344
+ }
1345
+
1346
+ /* Editors */
1347
+ .gfa-editor-person {
1348
+ display: grid;
1349
+ gap: 2px;
1350
+ }
1351
+
1352
+ .gfa-owner-token {
1353
+ padding: 16px;
1354
+ border: 1px solid var(--gfa-border);
1355
+ border-radius: var(--gfa-radius);
1356
+ }
1357
+
1358
+ .gfa-owner-token ol {
1359
+ margin: 0;
1360
+ padding-left: 20px;
1361
+ }
1362
+
1363
+ /* Failed rebuilds */
1364
+ .gfa-deploy .gfa-deploy-why {
1365
+ padding: 0 4px;
1366
+ font-size: inherit;
1367
+ text-decoration: underline;
1368
+ }
1369
+
1370
+ .gfa-build-problem {
1371
+ display: grid;
1372
+ gap: 8px;
1373
+ max-width: 560px;
1374
+ }
1375
+
1376
+ .gfa-build-problem p {
1377
+ margin: 0;
1378
+ }
1379
+
1380
+ /* Releases updates skip, each with a way to allow it again. */
1381
+ .gfa-update-skipped {
1382
+ list-style: none;
1383
+ margin: 0;
1384
+ padding: 0;
1385
+ display: grid;
1386
+ gap: 0.25rem;
1387
+ }
1388
+
1389
+ .gfa-update-skip {
1390
+ display: flex;
1391
+ align-items: center;
1392
+ gap: 0.75rem;
1393
+ }
1394
+
1395
+ /* Choosing what a new collection starts with. */
1396
+ .gfa-choice-group {
1397
+ display: flex;
1398
+ flex-direction: column;
1399
+ gap: 6px;
1400
+ margin: 0;
1401
+ padding: 0;
1402
+ border: 0;
1403
+ }
1404
+
1405
+ /* An event's dates, times and repeats, in an item's fields. */
1406
+ .gfa-event-field {
1407
+ display: flex;
1408
+ flex-direction: column;
1409
+ gap: 10px;
1410
+ min-width: 0;
1411
+ margin: 0;
1412
+ padding: 0;
1413
+ border: 0;
1414
+ }
1415
+
1416
+ .gfa-event-row {
1417
+ display: flex;
1418
+ flex-wrap: wrap;
1419
+ align-items: flex-end;
1420
+ gap: 8px;
1421
+ }
1422
+
1423
+ .gfa-event-part {
1424
+ display: flex;
1425
+ flex-direction: column;
1426
+ gap: 4px;
1427
+ font-size: 13px;
1428
+ color: var(--gfa-muted);
1429
+ }
1430
+
1431
+ .gfa-event-row > .gfa-event-part {
1432
+ flex: 1 1 140px;
1433
+ }
1434
+
1435
+ .gfa-event-repeat {
1436
+ display: flex;
1437
+ flex-direction: column;
1438
+ gap: 10px;
1439
+ padding-left: 12px;
1440
+ border-left: 2px solid var(--gfa-border);
1441
+ }
1442
+
1443
+ .gfa-event-interval input {
1444
+ max-width: 6rem;
1445
+ }
1446
+
1447
+ .gfa-tags-field {
1448
+ display: flex;
1449
+ flex-wrap: wrap;
1450
+ gap: 4px 16px;
1451
+ margin: 0;
1452
+ padding: 0;
1453
+ border: 0;
1454
+ }
1455
+
1456
+ .gfa-event-days {
1457
+ display: flex;
1458
+ flex-wrap: wrap;
1459
+ gap: 4px 12px;
1460
+ margin: 0;
1461
+ padding: 0;
1462
+ border: 0;
1463
+ font-size: 13px;
1464
+ }
1465
+
1466
+ .gfa-event-days legend {
1467
+ margin-bottom: 4px;
1468
+ color: var(--gfa-muted);
1469
+ }
1470
+
1471
+ .gfa-event-skips {
1472
+ display: flex;
1473
+ flex-direction: column;
1474
+ gap: 2px;
1475
+ margin: 0;
1476
+ padding: 0;
1477
+ list-style: none;
1478
+ color: var(--gfa-text);
1479
+ }
1480
+
1481
+ .gfa-event-skip {
1482
+ display: flex;
1483
+ align-items: center;
1484
+ justify-content: space-between;
1485
+ gap: 8px;
1486
+ }