8000 Styles · tinyplex/vite-tinybase-react@12215ee · GitHub
[go: up one dir, main page]
Skip to content

Commit 12215ee

Browse files
jamesgpearcejamesgpearce
committed
Styles
1 parent fe18517 commit 12215ee

File tree

4 files changed

+24
-27
lines changed

4 files changed

+24
-27
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ npm run dev
3636

3737
## Other templates
3838

39-
There are nine templates for TinyBase, of which this is one:
39+
There are ten templates for TinyBase, of which this is one:
4040

4141
| | Template | Language | React | Plus |
4242
| --- | ---------------------------------------------------------------------------------------------- | ---------- | ----- | ------------------- |
@@ -45,6 +45,7 @@ There are nine templates for TinyBase, of which this is one:
4545
| 👉 | [vite-tinybase-react](https://github.com/tinyplex/vite-tinybase-react) | JavaScript | Yes | |
4646
| | [vite-tinybase-ts-react](https://github.com/tinyplex/vite-tinybase-ts-react) | TypeScript | Yes | |
4747
| | [vite-tinybase-ts-react-sync](https://github.com/tinyplex/vite-tinybase-ts-react-sync) | TypeScript | Yes | Synchronization |
48+
| | [vite-tinybase-ts-react-pglite](https://github.com/tinyplex/vite-tinybase-ts-react-pglite) | TypeScript | Yes | PGlite |
4849
| | [vite-tinybase-ts-react-crsqlite](https://github.com/tinyplex/vite-tinybase-ts-react-crsqlite) | TypeScript | Yes | CR-SQLite |
4950
| | [tinybase-ts-react-partykit](https://github.com/tinyplex/tinybase-ts-react-partykit) | TypeScript | Yes | PartyKit |
5051
| 8000 | [tinybase-ts-react-electricsql](https://github.com/tinyplex/tinybase-ts-react-electricsql) | TypeScript | Yes | ElectricSQL |

‎index.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@
1313
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
1414
</head>
1515
<body>
16-
<img id="logo" src="/favicon.svg" />
17-
<h1>A TinyBase App</h1>
1816
<div id="app"></div>
1917
<script type="module" src="/src/index.jsx"></script>
2018
</body>

‎src/App.jsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,18 @@ export const App = () => {
2626
return (
2727
<StrictMode>
2828
<Provider store={store}>
29+
<header>
30+
<h1>
31+
<img src='/favicon.svg' />
32+
TinyBase & React
33+
</h1>
34+
</header>
2935
<Buttons />
3036
<div>
3137
<h2>Values</h2>
3238
<ValuesInHtmlTable />
3339
</div>
3440
<div>
35-
<h2>Species Table</h2>
36-
<SortedTableInHtmlTable
37-
tableId='species'
38-
cellId='price'
39-
descending={true}
40-
sortOnClick={true}
41-
className='sortedTable'
42-
/>
4341
<h2>Pets Table</h2>
4442
<SortedTableInHtmlTable
4543
tableId='pets'

‎src/index.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,23 @@ body {
55
user-select: none;
66
}
77

8-
#logo {
9-
display: block;
8+
#app {
9+
max-width: 40rem;
1010
margin: 2rem auto;
11-
width: 6rem;
11+
display: grid;
12+
grid-template-columns: 1fr;
13+
column-gap: 2rem;
14+
align-items: start;
15+
row-gap: 1rem;
1216
}
1317

1418
h1 {
15-
text-align: center;
16-
font-weight: 800;
19+
font-weight: 600;
20+
img {
21+
margin-right: 1rem;
22+
height: 2.5rem;
23+
vertical-align: text-bottom;
24+
}
1725
}
1826

1927
h2 {
@@ -23,16 +31,6 @@ h2 {
2331
margin: 1rem 0 0;
2432
}
2533

26-
#app {
27-
max-width: 40rem;
28-
margin: 2rem auto;
29-
display: grid;
30-
grid-template-columns: 1fr;
31-
column-gap: 2rem;
32-
align-items: start;
33-
row-gap: 1rem;
34-
}
35-
3634
#buttons {
3735
border: solid #666;
3836
border-width: 1px 0;
@@ -41,7 +39,7 @@ h2 {
4139

4240
#buttons button {
4341
border: 1px solid #666;
44-
border-radius: 1rem;
42+
border-radius: 0.25rem;
4543
padding: 0.5rem 1rem;
4644
background: #222;
4745
color: #fff;
@@ -63,6 +61,7 @@ table {
6361
table-layout: fixed;
6462
width: 100%;
6563
margin-bottom: 2rem;
64+
caption-side: bottom;
6665
}
6766
table caption {
6867
text-align: left;
@@ -99,6 +98,7 @@ table.sortedTable thead th {
9998
#app {
10099
grid-template-columns: 1fr 1fr;
101100
}
101+
header,
102102
#buttons {
103103
grid-column: span 2;
104104
}

0 commit comments

Comments
 (0)
0