Skip to content

Commit 70cbab5

Browse files
davegaeddertdavegaeddert
committed
Darker admin sidebar, updated table styles
1 parent 036c401 commit 70cbab5

File tree

3 files changed

+63
-56
lines changed

3 files changed

+63
-56
lines changed

‎bolt-admin/bolt/admin/templates/admin/base.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@
1515
<script src="{{ asset('admin/chart.js') }}"></script>
1616
<script src="{{ asset('admin/jquery-3.6.1.slim.min.js') }}"></script>
1717
</head>
18-
<body class="flex min-h-screen text-black bg-[#fbf7f0]">
19-
<div class="fixed flex flex-col justify-between flex-shrink-0 w-64 h-full px-6 pt-6 pb-3">
18+
<body class="flex min-h-screen text-black bg-stone-900">
19+
<div class="fixed flex flex-col justify-between flex-shrink-0 w-64 h-full px-6 pt-6 pb-5">
2020
<div>
21-
<a class="flex items-center font-bold text-stone-800" href="{{ url('admin:index') }}">
21+
<a class="inline-flex items-center font-bold text-stone-300" href="{{ url('admin:index') }}">
2222
<svg class="w-5 h-5 mr-2" width="237" height="237" viewBox="0 0 237 237" fill="none" xmlns="http://www.w3.org/2000/svg">
2323
<path d="M163.316 15.876C172.248 15.876 180.501 20.641 184.967 28.376L229.783 106C234.249 113.735 234.249 123.265 229.783 131L184.967 208.624C180.501 216.359 172.248 221.124 163.316 221.124L73.6837 221.124C64.7521 221.124 56.4989 216.359 52.0331 208.624L7.21686 131C2.75105 123.265 2.75105 113.735 7.21687 106L52.0331 28.376C56.4989 20.6409 64.7521 15.876 73.6837 15.876L163.316 15.876Z" fill="#8B8276"/>
2424
<circle cx="118.5" cy="118.5" r="64.5" fill="#CDC8C2"/>
2525
</svg>
26-
Admin
26+
<span class="sr-only">Admin</span>
2727
</a>
2828
<div class="mt-4">
2929
{% for view in admin_registry.get_nav_views() %}
30-
<a class="flex items-center px-2 py-2 -mx-2 text-sm rounded hover:text-black text-stone-600 hover:bg-black/5" href="{{ view.get_absolute_url() }}">
30+
<a class="flex items-center px-2 py-2 -mx-2 text-sm rounded hover:text-stone-300 text-stone-400 hover:bg-white/5" href="{{ view.get_absolute_url() }}">
3131
{{ view.title }}
3232
</a>
3333
{% endfor %}
@@ -37,21 +37,21 @@
3737
<div class="mt-6">
3838
<div class="text-xs tracking-wide text-gray-500">Dashboards</div>
3939
{% for view in admin_registry.registered_dashboards %}
40-
<a class="flex items-center px-2 py-2 -mx-2 text-sm rounded hover:text-black text-stone-600 hover:bg-black/5" href="{{ view.get_absolute_url() }}">
40+
<a class="flex items-center px-2 py-2 -mx-2 text-sm rounded hover:text-stone-300 text-stone-400 hover:bg-white/5" href="{{ view.get_absolute_url() }}">
4141
{{ view.title }}
4242
</a>
4343
{% endfor %}
4444
</div>
4545
{% endif %}
4646

4747
<div class="mt-6">
48-
<div class="text-xs tracking-wide text-gray-500">Pinned</div>
48+
<div class="text-xs tracking-wide text-stone-500">Pinned</div>
4949
</div>
5050
<div class="mt-6">
51-
<div class="text-xs tracking-wide text-gray-500">Recent</div>
51+
<div class="text-xs tracking-wide text-stone-500">Recent</div>
5252
</div>
5353
</div>
54-
<div class="flex items-center justify-between text-sm text-stone-700">
54+
<div class="flex items-center justify-between text-sm text-stone-400">
5555
<div class="flex items-center">
5656
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4 mr-2 bi bi-person-circle" viewBox="0 0 16 16">
5757
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
@@ -62,16 +62,16 @@
6262
<a class="hover:text-white hover:underline" href="{{ url('logout') }}">Log out</a>
6363
</div>
6464
</div>
65-
<div class="flex-grow ml-64 overflow-auto text-black bg-white border-l border-black/10">
66-
<div class="flex justify-between px-8 py-4 text-sm border-b border-gray-200">
65+
<div class="flex-grow mt-3 mb-3 ml-64 mr-3 overflow-auto text-black bg-white border-l rounded-lg border-black/10">
66+
<div class="flex justify-between px-8 py-4 text-xs border-b border-gray-200">
6767
<div class="flex items-center space-x-2">
68-
<a class="text-gray-700" href="{{ url ('admin:index') }}">Admin</a>
68+
<a class="text-stone-500" href="{{ url ('admin:index') }}">Admin</a>
6969
{% for parent in parent_view_classes %}
70-
<span class="text-gray-600">/</span>
71-
<a class="text-gray-700" href="{{ parent.get_absolute_url() }}">{{ parent.title }}</a>
70+
<span class="text-stone-400">/</span>
71+
<a class="text-stone-500" href="{{ parent.get_absolute_url() }}">{{ parent.title }}</a>
7272
{% endfor %}
73-
<span class="text-gray-600">/</span>
74-
<a href="{{ request.path }}">{{ title }}</a>
73+
<span class="text-stone-400">/</span>
74+
<a class="text-stone-600" href="{{ request.path }}">{{ title }}</a>
7575
</div>
7676
<div>
7777
<a href="/">Back to app</a>

‎bolt-admin/bolt/admin/templates/admin/list.html

+46-39
Original file line numberDiff line numberDiff line change
@@ -9,54 +9,61 @@
99

1010
<div>
1111

12-
{% if list_actions %}
13-
<form method="POST" data-actions-form>
14-
{{ csrf_input }}
15-
<select name="action_key">
16-
<option value="">Actions</option>
17-
{% for action in list_actions %}
18-
<option>{{ action }}</option>
19-
{% endfor %}
20-
</select>
21-
<input type="hidden" name="action_pks" value="" />
22-
<button type="submit" disabled>Apply</button>
23-
</form>
24-
{% endif %}
12+
<div class="flex items-center justify-between pb-2 border-b border-stone-200">
13+
<div class="font-semibold">
14+
{{ title }}
15+
</div>
16+
<div>
17+
{% if list_actions %}
18+
<form method="POST" data-actions-form>
19+
{{ csrf_input }}
20+
<select name="action_key">
21+
<option value="">Actions</option>
22+
{% for action in list_actions %}
23+
<option>{{ action }}</option>
24+
{% endfor %}
25+
</select>
26+
<input type="hidden" name="action_pks" value="" />
27+
<button type="submit" disabled>Apply</button>
28+
</form>
29+
{% endif %}
2530

26-
{% if show_search %}
27-
<div class="flex justify-end">
28-
<form method="GET" class="flex">
29-
<div class="relative max-w-xs">
30-
<label for="search" class="sr-only">Search</label>
31-
<input
32-
{% if search_query %}value="{{ search_query }}"{% endif %}
33-
type="text"
34-
name="search"
35-
id="search"
36-
class="block w-full p-3 pl-10 text-sm border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500"
37-
placeholder="Search for items"
38-
>
39-
<div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
40-
<svg class="h-3.5 w-3.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
41-
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
42-
</svg>
43-
</div>
31+
{% if show_search %}
32+
<div class="flex justify-end">
33+
<form method="GET" class="flex">
34+
<div class="relative max-w-xs">
35+
<label for="search" class="sr-only">Search</label>
36+
<input
37+
{% if search_query %}value="{{ search_query }}"{% endif %}
38+
type="text"
39+
name="search"
40+
id="search"
41+
class="block w-full px-3 pl-10 text-sm border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500"
42+
placeholder="Search for items"
43+
>
44+
<div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
45+
<svg class="h-3.5 w-3.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
46+
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
47+
</svg>
48+
</div>
49+
</div>
50+
<!-- <button type="submit">Search</button> -->
51+
</form>
4452
</div>
45-
<button type="submit">Search</button>
46-
</form>
53+
{% endif %}
54+
</div>
4755
</div>
48-
{% endif %}
4956

5057
<div class="overflow-auto">
51-
<table class="w-full mt-4 text-sm table-auto">
58+
<table class="w-full mt-6 text-sm table-auto">
5259
<thead>
53-
<tr>
60+
<tr class="bg-stone-100 [&>th]:py-2 [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md">
5461
{% if list_actions %}<th></th>{% endif %}
5562

5663
{% for field in list_fields %}
5764
{% if order_by_field is defined %}
58-
<th class="font-mono">
59-
<a href="?order_by={{ '-' if not order_by_direction else '' }}{{ field }}">
65+
<th>
66+
<a class="font-mono text-xs font-normal text-gray-600" href="?order_by={{ '-' if not order_by_direction else '' }}{{ field }}">
6067
{{ field }}
6168
{% if field == order_by_field %}
6269
{% if order_by_direction == "-" %}
@@ -68,7 +75,7 @@
6875
</a>
6976
</th>
7077
{% else %}
71-
<th class="font-mono">{{ field }}</th>
78+
<th class="font-mono text-xs font-normal text-gray-600">{{ field }}</th>
7279
{% endif %}
7380
{% endfor %}
7481
<th></th>

‎bolt-admin/bolt/admin/templates/components/admin/Card.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="relative px-4 py-2 bg-white border border-gray-300 rounded col-span-{{ size|default(4) }}">
1+
<div class="relative px-4 py-2 bg-white drop-shadow-sm border border-stone-200 rounded-xl col-span-{{ size|default(4) }}">
22
{{ caller() }}
33
</div>

0 commit comments

Comments
 (0)