Skip to content

Commit bee10e7

Browse files
guillaumebridayguillaumebriday
committed
New design
1 parent 4370e11 commit bee10e7

File tree

1 file changed

+162
-72
lines changed

1 file changed

+162
-72
lines changed

‎index.html

Lines changed: 162 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,130 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
7-
<title>Stimulus Rails Nested Form</title>
8-
<script type="module" src="./src/index.js" defer></script>
6+
<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet" />
97
<script src="https://unpkg.com/[email protected]/dist/stimulus.umd.js" defer></script>
108

9+
<title>Stimulus Rails Nested Form</title>
10+
1111
<script type="module" defer>
1212
import NestedForm from './src/index.js'
1313

1414
const application = Stimulus.Application.start()
1515
application.register('nested-form', NestedForm)
1616
</script>
17-
18-
<style>
19-
ul {
20-
list-style-type: none;
21-
padding: 0;
22-
}
23-
24-
li {
25-
display: inline-block;
26-
margin: 0 10px;
27-
}
28-
29-
a {
30-
color: #667eea;
31-
display: inline-block;
32-
}
33-
34-
.badges a {
35-
margin: 0 0.25rem;
36-
}
37-
38-
pre code {
39-
border-radius: 0.5rem;
40-
text-align: left;
41-
font-family: Menlo, 'Courier New', Courier, monospace;
42-
}
43-
</style>
4417
</head>
45-
<body>
46-
<div class="w-full max-w-6xl mx-auto my-24 p-4">
47-
<h1 class="text-center mb-8 text-5xl font-bold">Stimulus Rails Nested Form</h1>
4818

49-
<p class="text-center mb-4">
50-
A Stimulus controller to create new fields on the fly to populate your Rails relationship.
51-
</p>
52-
53-
<p class="text-center badges">
54-
<a href="https://www.npmjs.com/package/stimulus-rails-nested-form">
55-
<img src="https://img.shields.io/npm/dt/stimulus-rails-nested-form.svg" />
56-
</a>
19+
<body>
20+
<!-- This example requires Tailwind CSS v2.0+ -->
21+
<div class="relative bg-gray-50 overflow-hidden">
22+
<div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full" aria-hidden="true">
23+
<div class="relative h-full max-w-7xl mx-auto">
24+
<svg
25+
class="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2"
26+
width="404"
27+
height="784"
28+
fill="none"
29+
viewBox="0 0 404 784"
30+
>
31+
<defs>
32+
<pattern
33+
id="f210dbf6-a58d-4871-961e-36d5016a0f49"
34+
x="0"
35+
y="0"
36+
width="20"
37+
height="20"
38+
patternUnits="userSpaceOnUse"
39+
>
40+
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
41+
</pattern>
42+
</defs>
43+
<rect width="404" height="784" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
44+
</svg>
45+
<svg
46+
class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2"
47+
width="404"
48+
height="784"
49+
fill="none"
50+
viewBox="0 0 404 784"
51+
>
52+
<defs>
53+
<pattern
54+
id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
55+
x="0"
56+
y="0"
57+
width="20"
58+
height="20"
59+
patternUnits="userSpaceOnUse"
60+
>
61+
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
62+
</pattern>
63+
</defs>
64+
<rect width="404" height="784" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)" />
65+
</svg>
66+
</div>
67+
</div>
5768

58-
<a href="https://www.npmjs.com/package/stimulus-rails-nested-form">
59-
<img src="https://img.shields.io/npm/v/stimulus-rails-nested-form.svg" />
60-
</a>
69+
<div class="relative pt-6 pb-16 sm:pb-24">
70+
<main class="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
71+
<div class="text-center">
72+
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
73+
<span class="block xl:inline">Stimulus</span>
74+
<span class="block text-yellow-600 xl:inline">Rails Nested Form</span>
75+
</h1>
6176

62-
<a href="https://github.com/stimulus-components/stimulus-rails-nested-form">
63-
<img src="https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Lint/badge.svg" />
64-
</a>
77+
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
78+
A Stimulus controller to create new fields on the fly to populate your Rails relationship.
79+
</p>
6580

66-
<a href="https://github.com/stimulus-components/stimulus-rails-nested-form">
67-
<img src="https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Test/badge.svg" />
68-
</a>
81+
<p class="text-center mt-3">
82+
<img class="inline-block" src="https://img.shields.io/npm/dt/stimulus-rails-nested-form.svg" />
83+
<img class="inline-block" src="https://img.shields.io/npm/v/stimulus-rails-nested-form.svg" />
6984

70-
<a href="https://github.com/stimulus-components/stimulus-rails-nested-form">
71-
<img src="https://img.shields.io/github/license/stimulus-components/stimulus-rails-nested-form.svg" />
72-
</a>
85+
<img
86+
class="inline-block"
87+
src="https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Lint/badge.svg"
88+
/>
7389

74-
<a href="https://stimulus-rails-nested-form.netlify.com/">
75-
<img src="https://api.netlify.com/api/v1/badges/c21b3ca7-40fa-4de3-aad5-56dbc343ace6/deploy-status" />
76-
</a>
77-
</p>
90+
<img
91+
class="inline-block"
92+
src="https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Test/badge.svg"
93+
/>
7894

79-
<h2 class="text-center text-2xl font-bold my-4">Essential links</h2>
95+
<img
96+
class="inline-block"
97+
src="https://img.shields.io/github/license/stimulus-components/stimulus-rails-nested-form.svg"
98+
/>
8099

81-
<ul class="text-center mb-8">
82-
<li>
83-
<a href="https://github.com/stimulus-components/stimulus-rails-nested-form" target="_blank" rel="noopener">
84-
Github
85-
</a>
86-
</li>
100+
<img
101+
class="inline-block"
102+
src="https://api.netlify.com/api/v1/badges/f75f37fa-c1c7-42c3-8266-27d11c67c2b1/deploy-status"
103+
/>
104+
</p>
87105

88-
<li>
89-
<a href="https://www.npmjs.com/package/stimulus-rails-nested-form" target="_blank" rel="noopener">
90-
Npm
91-
</a>
92-
</li>
93-
</ul>
106+
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
107+
<div class="rounded-md shadow">
108+
<a
109+
href="https://github.com/stimulus-components/stimulus-rails-nested-form"
110+
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 md:py-4 md:text-lg md:px-10"
111+
>
112+
GitHub
113+
</a>
114+
</div>
115+
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
116+
<a
117+
href="https://stimulus-components.netlify.app/docs/components/stimulus-rails-nested-form/"
118+
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-yellow-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
119+
>
120+
Documentation
121+
</a>
122+
</div>
123+
</div>
124+
</div>
125+
</main>
126+
</div>
127+
</div>
94128

129+
<div class="relative h-full max-w-5xl mx-auto px-4">
95130
<section class="mt-16">
96131
<form data-controller="nested-form">
97132
<template data-target="nested-form.template">
@@ -148,19 +183,74 @@ <h2 class="text-center text-2xl font-bold my-4">Essential links</h2>
148183
id="nested-form-button"
149184
type="button"
150185
data-action="nested-form#add"
151-
class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
186+
class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
152187
>
153188
Add todo
154189
</button>
155190

156191
<button
157192
type="submit"
158-
class="mt-4 bg-indigo-600 hover:bg-indigo-400 text-white font-semibold py-2 px-4 border border-gray-400 rounded shadow"
193+
class="mt-4 bg-indigo-600 hover:bg-indigo-400 text-white font-semibold py-2 px-4 border rounded shadow"
159194
>
160195
Save todos
161196
</button>
162197
</form>
163198
</section>
164199
</div>
200+
201+
<!-- This example requires Tailwind CSS v2.0+ -->
202+
<footer class="bg-white">
203+
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
204+
<div class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
205+
<div class="px-5 py-2">
206+
<p class="text-base text-gray-500">
207+
stimulus-rails-nested-form is a package from the
208+
<a href="https://github.com/stimulus-components/stimulus-components" class="hover:text-gray-900 underline"
209+
>stimulus-components</a
210+
>
211+
project.
212+
</p>
213+
</div>
214+
</div>
215+
216+
<div class="mt-8 flex justify-center space-x-6">
217+
<a
218+
href="https://twitter.com/guillaumebriday"
219+
target="_blank"
220+
rel="noopener"
221+
class="text-gray-400 hover:text-gray-500"
222+
>
223+
<span class="sr-only">Twitter</span>
224+
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
225+
<path
226+
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
227+
/>
228+
</svg>
229+
</a>
230+
231+
<a
232+
href="https://github.com/stimulus-components/stimulus-rails-nested-form"
233+
target="_blank"
234+
rel="noopener"
235+
class="text-gray-400 hover:text-gray-500"
236+
>
237+
<span class="sr-only">GitHub</span>
238+
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
239+
<path
240+
fill-rule="evenodd"
241+
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
242+
clip-rule="evenodd"
243+
/>
244+
</svg>
245+
</a>
246+
</div>
247+
248+
<p class="mt-8 text-center text-base text-gray-400">
249+
This project is released under the
250+
<a href="https://opensource.org/licenses/MIT" class="hover:text-gray-900 underline">MIT</a>
251+
license.
252+
</p>
253+
</div>
254+
</footer>
165255
</body>
166256
</html>

0 commit comments

Comments
 (0)