Skip to content

Commit 0163e36

Browse files
koppenkoppen
authored
Merge pull request #53 from substancelab/flowbite4
Set up Demo site for Flowbite 4
2 parents d974956 + 2ed0d03 commit 0163e36

File tree

4 files changed

+265
-63
lines changed

4 files changed

+265
-63
lines changed

‎app/components/flowbite/card/card.html.erb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<%= content_tag(:div, card_options) do %>
22
<%= title %>
3+
34
<% if content.present? %>
4-
<div class="font-normal text-gray-700 dark:text-gray-400"><%= content %></div>
5+
<div class="font-normal text-body"><%= content %></div>
56
<% end %>
67
<% end %>

‎demo/app/assets/tailwind/application.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
@import "tailwindcss";
22

3-
/* Load Flowbite */
4-
@plugin "flowbite/plugin";
5-
63
/* Load the default theme - or pick another, see https://flowbite.com/docs/customize/theming/ */
4+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
75
@import "flowbite/src/themes/default";
86

7+
/* Load Flowbite */
8+
@plugin "flowbite/plugin";
9+
910
/* Include CSS classes used by the components in the final CSS */
1011
@import "../builds/tailwind/flowbite_components";
1112

12-
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
13+
@custom-variant dark (&:where(.dark, .dark *));
1314

1415
footer a {
15-
@apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
16+
@apply font-medium text-brand hover:underline;
1617
}

‎demo/app/views/layouts/application.html.erb‎

Lines changed: 103 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<!DOCTYPE html>
2+
23
<html>
34
<head>
45
<title><%= content_for(:title) || "Flowbite Components for Rails" %></title>
6+
57
<meta name="viewport" content="width=device-width,initial-scale=1">
68
<meta name="apple-mobile-web-app-capable" content="yes">
79
<meta name="mobile-web-app-capable" content="yes">
10+
811
<%= csrf_meta_tags %>
912
<%= csp_meta_tag %>
1013

1114
<%= yield :head %>
1215

1316
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
14-
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
17+
<%# = tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
1518

1619
<link rel="icon" href="/icon.png" type="image/png">
1720
<link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -21,38 +24,105 @@
2124
<%= stylesheet_link_tag :app %>
2225
</head>
2326

24-
<body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-400">
27+
<body class="bg-neutral-primary text-body">
2528
<header>
26-
<nav class="bg-white border-gray-200 dark:bg-gray-900">
27-
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
29+
<nav class="bg-neutral-primary border-gray-200">
30+
<div
31+
class="
32+
max-w-screen-xl flex flex-wrap items-center justify-between
33+
mx-auto p-4
34+
"
35+
>
2836
<%= link_to(root_path, class: "flex items-center space-x-3 rtl:space-x-reverse") do %>
29-
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">flowbite-components</span>
37+
<span
38+
class="
39+
self-center text-2xl font-semibold whitespace-nowrap
40+
text-heading
41+
"
42+
>
43+
flowbite-components
44+
</span>
3045
<% end %>
46+
3147
<% if @menu_toggle_implemented %>
32-
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
33-
<span class="sr-only">Open main menu</span>
34-
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
35-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
36-
</svg>
48+
<button
49+
data-collapse-toggle="navbar-default"
50+
type="button"
51+
class="
52+
inline-flex items-center p-2 w-10 h-10 justify-center
53+
text-sm text-body rounded-lg md:hidden hover:bg-neutral-primary/10
54+
focus:outline-none focus:ring-2 focus:ring-primary/50
55+
"
56+
aria-controls="navbar-default"
57+
aria-expanded="false"
58+
>
59+
<span class="sr-only">Open main menu</span>
60+
61+
<svg
62+
class="w-5 h-5"
63+
aria-hidden="true"
64+
xmlns="http://www.w3.org/2000/svg"
65+
fill="none"
66+
viewBox="0 0 17 14"
67+
>
68+
<path
69+
stroke="currentColor"
70+
stroke-linecap="round"
71+
stroke-linejoin="round"
72+
stroke-width="2"
73+
d="M1 1h15M1 7h15M1 13h15"
74+
/>
75+
</svg>
3776
</button>
3877
<% end %>
78+
3979
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
40-
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
80+
<ul
81+
class="
82+
font-medium flex flex-col p-4 md:p-0 mt-4 border
83+
border-light rounded-lg bg-neutral-secondary md:flex-row
84+
md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0
85+
md:bg-neutral-primary
86+
"
87+
>
4188
<li>
42-
<%= link_to("Home", root_url, class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
89+
<%= link_to("Home", root_url, class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
4390
</li>
91+
4492
<li>
45-
<%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
93+
<%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
4694
</li>
95+
4796
<li>
4897
<button data-theme-toggle="dark" class="dark:hidden">
49-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
50-
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
98+
<svg
99+
xmlns="http://www.w3.org/2000/svg"
100+
viewBox="0 0 24 24"
101+
fill="currentColor"
102+
class="size-6"
103+
>
104+
<path
105+
fill-rule="evenodd"
106+
d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
107+
clip-rule="evenodd"
108+
/>
51109
</svg>
52110
</button>
111+
53112
<button data-theme-toggle="light" class="hidden dark:block">
54-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
55-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
113+
<svg
114+
xmlns="http://www.w3.org/2000/svg"
115+
fill="none"
116+
viewBox="0 0 24 24"
117+
stroke-width="1.5"
118+
stroke="currentColor"
119+
class="size-6"
120+
>
121+
<path
122+
stroke-linecap="round"
123+
stroke-linejoin="round"
124+
d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
125+
/>
56126
</svg>
57127
</button>
58128
</li>
@@ -63,12 +133,10 @@
63133
</header>
64134

65135
<main class="container mx-auto mt-28 px-5 flex">
66-
<article>
67-
<%= yield %>
68-
</article>
136+
<article><%= yield %></article>
69137
</main>
70138

71-
<footer class="mt-28 px-5 py-5 flex border-t-2 border-gray-200 dark:border-gray-700">
139+
<footer class="mt-28 px-5 py-5 flex border-t-2 border-default">
72140
<div class="space-y-5">
73141
<div class="flex space-x-5">
74142
<%= link_to("GitHub", "https://github.com/substancelab/flowbite-components") %>
@@ -77,19 +145,29 @@
77145
</div>
78146

79147
<div>
80-
Licensed under the <%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>, except where otherwise stated
148+
Licensed under the
149+
<%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>,
150+
except where otherwise stated
81151
</div>
82152

83153
<div>
84-
The Flowbite name and logos are trademarks of <%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>.
85-
The Tailwind name and logos are trademarks of <%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>.
154+
The Flowbite name and logos are trademarks of
155+
<%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>. The
156+
Tailwind name and logos are trademarks of
157+
<%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>.
86158
</div>
87159
</div>
88160
</footer>
89161

90162
<script>
91163
function setTheme(theme) {
92-
document.documentElement.setAttribute('data-theme', theme);
164+
if (theme == "dark") {
165+
document.documentElement.classList.add('dark');
166+
document.documentElement.classList.remove('light');
167+
} else {
168+
document.documentElement.classList.add('light');
169+
document.documentElement.classList.remove('dark');
170+
}
93171
localStorage.setItem("theme", theme);
94172
}
95173
setTheme(localStorage.getItem('theme') || 'light');

0 commit comments

Comments
 (0)