17 changed files with 790 additions and 312 deletions
-
2.vscode/settings.json
-
51app/assets/css/input.css
-
204app/assets/css/output.css
-
0app/assets/stylesheets/application.css
-
1app/assets/stylesheets/input.css
-
681app/assets/stylesheets/output.css
-
10app/controllers/livres_controller.rb
-
2app/models/livre.rb
-
3app/views/layouts/application.html.erb
-
23app/views/livres/_form.html.erb
-
19app/views/livres/_ligne.html.erb
-
9app/views/livres/edit.html.erb
-
10app/views/livres/form.html.erb
-
80app/views/livres/index.html.erb
-
2app/views/livres/new.html.erb
-
2config/routes.rb
-
3package-lock.json
@ -1,51 +0,0 @@ |
|||
@import "tailwindcss"; |
|||
|
|||
.table { |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 40%; |
|||
border: 1px solid #e0e0e0; |
|||
border-radius: 6px; |
|||
margin-top: 30px; |
|||
background-color: #fafafa; |
|||
} |
|||
|
|||
.table-header, |
|||
.table-row { |
|||
display: flex; |
|||
padding: 12px; |
|||
border-bottom: 1px solid #eaeaea; |
|||
} |
|||
|
|||
.cell { |
|||
display: flex; |
|||
flex: 1; |
|||
padding: 8px 12px; |
|||
align-items: center; |
|||
} |
|||
|
|||
.table-header { |
|||
background-color: #f5f7fa; |
|||
font-weight: 600; |
|||
color: #a51010; |
|||
} |
|||
|
|||
.btn { |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); |
|||
display: inline-block; |
|||
background-color: #b7e1ff; |
|||
color: #0f0f0f; |
|||
padding: 1px 10px; |
|||
margin-right: 8px; |
|||
border: none; |
|||
border-radius: 6px; |
|||
text-decoration: none; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: background-color 0.3s ease; |
|||
} |
|||
|
|||
.btn:hover { |
|||
background-color: #f6fafe; |
|||
} |
|||
@ -1,204 +0,0 @@ |
|||
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ |
|||
@layer theme, base, components, utilities; |
|||
@layer theme { |
|||
:root, :host { |
|||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", |
|||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
|||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", |
|||
"Courier New", monospace; |
|||
--default-font-family: var(--font-sans); |
|||
--default-mono-font-family: var(--font-mono); |
|||
} |
|||
} |
|||
@layer base { |
|||
*, ::after, ::before, ::backdrop, ::file-selector-button { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0 solid; |
|||
} |
|||
html, :host { |
|||
line-height: 1.5; |
|||
-webkit-text-size-adjust: 100%; |
|||
tab-size: 4; |
|||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); |
|||
font-feature-settings: var(--default-font-feature-settings, normal); |
|||
font-variation-settings: var(--default-font-variation-settings, normal); |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
hr { |
|||
height: 0; |
|||
color: inherit; |
|||
border-top-width: 1px; |
|||
} |
|||
abbr:where([title]) { |
|||
-webkit-text-decoration: underline dotted; |
|||
text-decoration: underline dotted; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { |
|||
font-size: inherit; |
|||
font-weight: inherit; |
|||
} |
|||
a { |
|||
color: inherit; |
|||
-webkit-text-decoration: inherit; |
|||
text-decoration: inherit; |
|||
} |
|||
b, strong { |
|||
font-weight: bolder; |
|||
} |
|||
code, kbd, samp, pre { |
|||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); |
|||
font-feature-settings: var(--default-mono-font-feature-settings, normal); |
|||
font-variation-settings: var(--default-mono-font-variation-settings, normal); |
|||
font-size: 1em; |
|||
} |
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
sub, sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
table { |
|||
text-indent: 0; |
|||
border-color: inherit; |
|||
border-collapse: collapse; |
|||
} |
|||
:-moz-focusring { |
|||
outline: auto; |
|||
} |
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
summary { |
|||
display: list-item; |
|||
} |
|||
ol, ul, menu { |
|||
list-style: none; |
|||
} |
|||
img, svg, video, canvas, audio, iframe, embed, object { |
|||
display: block; |
|||
vertical-align: middle; |
|||
} |
|||
img, video { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
button, input, select, optgroup, textarea, ::file-selector-button { |
|||
font: inherit; |
|||
font-feature-settings: inherit; |
|||
font-variation-settings: inherit; |
|||
letter-spacing: inherit; |
|||
color: inherit; |
|||
border-radius: 0; |
|||
background-color: transparent; |
|||
opacity: 1; |
|||
} |
|||
:where(select:is([multiple], [size])) optgroup { |
|||
font-weight: bolder; |
|||
} |
|||
:where(select:is([multiple], [size])) optgroup option { |
|||
padding-inline-start: 20px; |
|||
} |
|||
::file-selector-button { |
|||
margin-inline-end: 4px; |
|||
} |
|||
::placeholder { |
|||
opacity: 1; |
|||
} |
|||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { |
|||
::placeholder { |
|||
color: currentcolor; |
|||
@supports (color: color-mix(in lab, red, red)) { |
|||
color: color-mix(in oklab, currentcolor 50%, transparent); |
|||
} |
|||
} |
|||
} |
|||
textarea { |
|||
resize: vertical; |
|||
} |
|||
::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
::-webkit-date-and-time-value { |
|||
min-height: 1lh; |
|||
text-align: inherit; |
|||
} |
|||
::-webkit-datetime-edit { |
|||
display: inline-flex; |
|||
} |
|||
::-webkit-datetime-edit-fields-wrapper { |
|||
padding: 0; |
|||
} |
|||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { |
|||
padding-block: 0; |
|||
} |
|||
::-webkit-calendar-picker-indicator { |
|||
line-height: 1; |
|||
} |
|||
:-moz-ui-invalid { |
|||
box-shadow: none; |
|||
} |
|||
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { |
|||
appearance: button; |
|||
} |
|||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { |
|||
height: auto; |
|||
} |
|||
[hidden]:where(:not([hidden="until-found"])) { |
|||
display: none !important; |
|||
} |
|||
} |
|||
@layer utilities { |
|||
.visible { |
|||
visibility: visible; |
|||
} |
|||
.absolute { |
|||
position: absolute; |
|||
} |
|||
.fixed { |
|||
position: fixed; |
|||
} |
|||
.static { |
|||
position: static; |
|||
} |
|||
.container { |
|||
width: 100%; |
|||
@media (width >= 40rem) { |
|||
max-width: 40rem; |
|||
} |
|||
@media (width >= 48rem) { |
|||
max-width: 48rem; |
|||
} |
|||
@media (width >= 64rem) { |
|||
max-width: 64rem; |
|||
} |
|||
@media (width >= 80rem) { |
|||
max-width: 80rem; |
|||
} |
|||
@media (width >= 96rem) { |
|||
max-width: 96rem; |
|||
} |
|||
} |
|||
.contents { |
|||
display: contents; |
|||
} |
|||
.inline { |
|||
display: inline; |
|||
} |
|||
.table { |
|||
display: table; |
|||
} |
|||
.table-row { |
|||
display: table-row; |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
@import "tailwindcss"; |
|||
@ -0,0 +1,681 @@ |
|||
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ |
|||
@layer properties; |
|||
@layer theme, base, components, utilities; |
|||
@layer theme { |
|||
:root, :host { |
|||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", |
|||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
|||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; |
|||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", |
|||
"Courier New", monospace; |
|||
--color-red-500: oklch(63.7% 0.237 25.331); |
|||
--color-red-600: oklch(57.7% 0.245 27.325); |
|||
--color-yellow-400: oklch(85.2% 0.199 91.936); |
|||
--color-yellow-500: oklch(79.5% 0.184 86.047); |
|||
--color-green-600: oklch(62.7% 0.194 149.214); |
|||
--color-green-700: oklch(52.7% 0.154 150.069); |
|||
--color-blue-500: oklch(62.3% 0.214 259.815); |
|||
--color-blue-600: oklch(54.6% 0.245 262.881); |
|||
--color-blue-700: oklch(48.8% 0.243 264.376); |
|||
--color-blue-800: oklch(42.4% 0.199 265.638); |
|||
--color-gray-50: oklch(98.5% 0.002 247.839); |
|||
--color-gray-100: oklch(96.7% 0.003 264.542); |
|||
--color-gray-200: oklch(92.8% 0.006 264.531); |
|||
--color-gray-300: oklch(87.2% 0.01 258.338); |
|||
--color-gray-500: oklch(55.1% 0.027 264.364); |
|||
--color-gray-600: oklch(44.6% 0.03 256.802); |
|||
--color-gray-700: oklch(37.3% 0.034 259.733); |
|||
--color-gray-800: oklch(27.8% 0.033 256.848); |
|||
--color-black: #000; |
|||
--color-white: #fff; |
|||
--spacing: 0.25rem; |
|||
--text-sm: 0.875rem; |
|||
--text-sm--line-height: calc(1.25 / 0.875); |
|||
--text-base: 1rem; |
|||
--text-base--line-height: calc(1.5 / 1); |
|||
--text-4xl: 2.25rem; |
|||
--text-4xl--line-height: calc(2.5 / 2.25); |
|||
--font-weight-extralight: 200; |
|||
--font-weight-normal: 400; |
|||
--font-weight-medium: 500; |
|||
--font-weight-semibold: 600; |
|||
--font-weight-bold: 700; |
|||
--radius-md: 0.375rem; |
|||
--radius-lg: 0.5rem; |
|||
--default-transition-duration: 150ms; |
|||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
|||
--default-font-family: var(--font-sans); |
|||
--default-mono-font-family: var(--font-mono); |
|||
} |
|||
} |
|||
@layer base { |
|||
*, ::after, ::before, ::backdrop, ::file-selector-button { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0 solid; |
|||
} |
|||
html, :host { |
|||
line-height: 1.5; |
|||
-webkit-text-size-adjust: 100%; |
|||
tab-size: 4; |
|||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); |
|||
font-feature-settings: var(--default-font-feature-settings, normal); |
|||
font-variation-settings: var(--default-font-variation-settings, normal); |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
hr { |
|||
height: 0; |
|||
color: inherit; |
|||
border-top-width: 1px; |
|||
} |
|||
abbr:where([title]) { |
|||
-webkit-text-decoration: underline dotted; |
|||
text-decoration: underline dotted; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { |
|||
font-size: inherit; |
|||
font-weight: inherit; |
|||
} |
|||
a { |
|||
color: inherit; |
|||
-webkit-text-decoration: inherit; |
|||
text-decoration: inherit; |
|||
} |
|||
b, strong { |
|||
font-weight: bolder; |
|||
} |
|||
code, kbd, samp, pre { |
|||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); |
|||
font-feature-settings: var(--default-mono-font-feature-settings, normal); |
|||
font-variation-settings: var(--default-mono-font-variation-settings, normal); |
|||
font-size: 1em; |
|||
} |
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
sub, sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
table { |
|||
text-indent: 0; |
|||
border-color: inherit; |
|||
border-collapse: collapse; |
|||
} |
|||
:-moz-focusring { |
|||
outline: auto; |
|||
} |
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
summary { |
|||
display: list-item; |
|||
} |
|||
ol, ul, menu { |
|||
list-style: none; |
|||
} |
|||
img, svg, video, canvas, audio, iframe, embed, object { |
|||
display: block; |
|||
vertical-align: middle; |
|||
} |
|||
img, video { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
button, input, select, optgroup, textarea, ::file-selector-button { |
|||
font: inherit; |
|||
font-feature-settings: inherit; |
|||
font-variation-settings: inherit; |
|||
letter-spacing: inherit; |
|||
color: inherit; |
|||
border-radius: 0; |
|||
background-color: transparent; |
|||
opacity: 1; |
|||
} |
|||
:where(select:is([multiple], [size])) optgroup { |
|||
font-weight: bolder; |
|||
} |
|||
:where(select:is([multiple], [size])) optgroup option { |
|||
padding-inline-start: 20px; |
|||
} |
|||
::file-selector-button { |
|||
margin-inline-end: 4px; |
|||
} |
|||
::placeholder { |
|||
opacity: 1; |
|||
} |
|||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { |
|||
::placeholder { |
|||
color: currentcolor; |
|||
@supports (color: color-mix(in lab, red, red)) { |
|||
color: color-mix(in oklab, currentcolor 50%, transparent); |
|||
} |
|||
} |
|||
} |
|||
textarea { |
|||
resize: vertical; |
|||
} |
|||
::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
::-webkit-date-and-time-value { |
|||
min-height: 1lh; |
|||
text-align: inherit; |
|||
} |
|||
::-webkit-datetime-edit { |
|||
display: inline-flex; |
|||
} |
|||
::-webkit-datetime-edit-fields-wrapper { |
|||
padding: 0; |
|||
} |
|||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { |
|||
padding-block: 0; |
|||
} |
|||
::-webkit-calendar-picker-indicator { |
|||
line-height: 1; |
|||
} |
|||
:-moz-ui-invalid { |
|||
box-shadow: none; |
|||
} |
|||
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { |
|||
appearance: button; |
|||
} |
|||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { |
|||
height: auto; |
|||
} |
|||
[hidden]:where(:not([hidden="until-found"])) { |
|||
display: none !important; |
|||
} |
|||
} |
|||
@layer utilities { |
|||
.visible { |
|||
visibility: visible; |
|||
} |
|||
.absolute { |
|||
position: absolute; |
|||
} |
|||
.fixed { |
|||
position: fixed; |
|||
} |
|||
.static { |
|||
position: static; |
|||
} |
|||
.container { |
|||
width: 100%; |
|||
@media (width >= 40rem) { |
|||
max-width: 40rem; |
|||
} |
|||
@media (width >= 48rem) { |
|||
max-width: 48rem; |
|||
} |
|||
@media (width >= 64rem) { |
|||
max-width: 64rem; |
|||
} |
|||
@media (width >= 80rem) { |
|||
max-width: 80rem; |
|||
} |
|||
@media (width >= 96rem) { |
|||
max-width: 96rem; |
|||
} |
|||
} |
|||
.mt-4 { |
|||
margin-top: calc(var(--spacing) * 4); |
|||
} |
|||
.mt-6 { |
|||
margin-top: calc(var(--spacing) * 6); |
|||
} |
|||
.mt-8 { |
|||
margin-top: calc(var(--spacing) * 8); |
|||
} |
|||
.mb-4 { |
|||
margin-bottom: calc(var(--spacing) * 4); |
|||
} |
|||
.mb-6 { |
|||
margin-bottom: calc(var(--spacing) * 6); |
|||
} |
|||
.ml-2 { |
|||
margin-left: calc(var(--spacing) * 2); |
|||
} |
|||
.contents { |
|||
display: contents; |
|||
} |
|||
.flex { |
|||
display: flex; |
|||
} |
|||
.grid { |
|||
display: grid; |
|||
} |
|||
.inline { |
|||
display: inline; |
|||
} |
|||
.inline-block { |
|||
display: inline-block; |
|||
} |
|||
.table { |
|||
display: table; |
|||
} |
|||
.table-row { |
|||
display: table-row; |
|||
} |
|||
.w-20 { |
|||
width: calc(var(--spacing) * 20); |
|||
} |
|||
.w-40 { |
|||
width: calc(var(--spacing) * 40); |
|||
} |
|||
.w-48 { |
|||
width: calc(var(--spacing) * 48); |
|||
} |
|||
.w-50 { |
|||
width: calc(var(--spacing) * 50); |
|||
} |
|||
.w-64 { |
|||
width: calc(var(--spacing) * 64); |
|||
} |
|||
.w-\[40\%\] { |
|||
width: 40%; |
|||
} |
|||
.w-\[90px\] { |
|||
width: 90px; |
|||
} |
|||
.flex-1 { |
|||
flex: 1; |
|||
} |
|||
.border-collapse { |
|||
border-collapse: collapse; |
|||
} |
|||
.resize { |
|||
resize: both; |
|||
} |
|||
.grid-cols-4 { |
|||
grid-template-columns: repeat(4, minmax(0, 1fr)); |
|||
} |
|||
.flex-col { |
|||
flex-direction: column; |
|||
} |
|||
.items-center { |
|||
align-items: center; |
|||
} |
|||
.justify-between { |
|||
justify-content: space-between; |
|||
} |
|||
.justify-center { |
|||
justify-content: center; |
|||
} |
|||
.gap-2 { |
|||
gap: calc(var(--spacing) * 2); |
|||
} |
|||
.gap-3 { |
|||
gap: calc(var(--spacing) * 3); |
|||
} |
|||
.divide-y { |
|||
:where(& > :not(:last-child)) { |
|||
--tw-divide-y-reverse: 0; |
|||
border-bottom-style: var(--tw-border-style); |
|||
border-top-style: var(--tw-border-style); |
|||
border-top-width: calc(1px * var(--tw-divide-y-reverse)); |
|||
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); |
|||
} |
|||
} |
|||
.divide-gray-200 { |
|||
:where(& > :not(:last-child)) { |
|||
border-color: var(--color-gray-200); |
|||
} |
|||
} |
|||
.rounded-lg { |
|||
border-radius: var(--radius-lg); |
|||
} |
|||
.rounded-md { |
|||
border-radius: var(--radius-md); |
|||
} |
|||
.border { |
|||
border-style: var(--tw-border-style); |
|||
border-width: 1px; |
|||
} |
|||
.border-b { |
|||
border-bottom-style: var(--tw-border-style); |
|||
border-bottom-width: 1px; |
|||
} |
|||
.border-\[\#E0E0E0\] { |
|||
border-color: #E0E0E0; |
|||
} |
|||
.border-\[\#EAEAEA\] { |
|||
border-color: #EAEAEA; |
|||
} |
|||
.border-gray-300 { |
|||
border-color: var(--color-gray-300); |
|||
} |
|||
.bg-\[\#B7E1FF\] { |
|||
background-color: #B7E1FF; |
|||
} |
|||
.bg-\[\#F5F7FA\] { |
|||
background-color: #F5F7FA; |
|||
} |
|||
.bg-\[\#FAFAFA\] { |
|||
background-color: #FAFAFA; |
|||
} |
|||
.bg-blue-600 { |
|||
background-color: var(--color-blue-600); |
|||
} |
|||
.bg-gray-100 { |
|||
background-color: var(--color-gray-100); |
|||
} |
|||
.bg-green-600 { |
|||
background-color: var(--color-green-600); |
|||
} |
|||
.bg-red-500 { |
|||
background-color: var(--color-red-500); |
|||
} |
|||
.bg-yellow-400 { |
|||
background-color: var(--color-yellow-400); |
|||
} |
|||
.px-1 { |
|||
padding-inline: calc(var(--spacing) * 1); |
|||
} |
|||
.px-2 { |
|||
padding-inline: calc(var(--spacing) * 2); |
|||
} |
|||
.px-3 { |
|||
padding-inline: calc(var(--spacing) * 3); |
|||
} |
|||
.px-4 { |
|||
padding-inline: calc(var(--spacing) * 4); |
|||
} |
|||
.py-1 { |
|||
padding-block: calc(var(--spacing) * 1); |
|||
} |
|||
.py-1\.5 { |
|||
padding-block: calc(var(--spacing) * 1.5); |
|||
} |
|||
.py-2 { |
|||
padding-block: calc(var(--spacing) * 2); |
|||
} |
|||
.py-3 { |
|||
padding-block: calc(var(--spacing) * 3); |
|||
} |
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
.font-sans { |
|||
font-family: var(--font-sans); |
|||
} |
|||
.font-serif { |
|||
font-family: var(--font-serif); |
|||
} |
|||
.text-4xl { |
|||
font-size: var(--text-4xl); |
|||
line-height: var(--tw-leading, var(--text-4xl--line-height)); |
|||
} |
|||
.text-base { |
|||
font-size: var(--text-base); |
|||
line-height: var(--tw-leading, var(--text-base--line-height)); |
|||
} |
|||
.text-sm { |
|||
font-size: var(--text-sm); |
|||
line-height: var(--tw-leading, var(--text-sm--line-height)); |
|||
} |
|||
.font-bold { |
|||
--tw-font-weight: var(--font-weight-bold); |
|||
font-weight: var(--font-weight-bold); |
|||
} |
|||
.font-extralight { |
|||
--tw-font-weight: var(--font-weight-extralight); |
|||
font-weight: var(--font-weight-extralight); |
|||
} |
|||
.font-medium { |
|||
--tw-font-weight: var(--font-weight-medium); |
|||
font-weight: var(--font-weight-medium); |
|||
} |
|||
.font-normal { |
|||
--tw-font-weight: var(--font-weight-normal); |
|||
font-weight: var(--font-weight-normal); |
|||
} |
|||
.font-semibold { |
|||
--tw-font-weight: var(--font-weight-semibold); |
|||
font-weight: var(--font-weight-semibold); |
|||
} |
|||
.text-\[\#0F0F0F\] { |
|||
color: #0F0F0F; |
|||
} |
|||
.text-\[\#A51010\] { |
|||
color: #A51010; |
|||
} |
|||
.text-black { |
|||
color: var(--color-black); |
|||
} |
|||
.text-blue-600 { |
|||
color: var(--color-blue-600); |
|||
} |
|||
.text-gray-500 { |
|||
color: var(--color-gray-500); |
|||
} |
|||
.text-gray-600 { |
|||
color: var(--color-gray-600); |
|||
} |
|||
.text-gray-700 { |
|||
color: var(--color-gray-700); |
|||
} |
|||
.text-gray-800 { |
|||
color: var(--color-gray-800); |
|||
} |
|||
.text-red-600 { |
|||
color: var(--color-red-600); |
|||
} |
|||
.text-white { |
|||
color: var(--color-white); |
|||
} |
|||
.font-stretch-95\% { |
|||
font-stretch: 95%; |
|||
} |
|||
.font-stretch-100\% { |
|||
font-stretch: 100%; |
|||
} |
|||
.underline { |
|||
text-decoration-line: underline; |
|||
} |
|||
.shadow-\[1px_1px_1px_rgba\(0\,0\,0\,0\.2\)\] { |
|||
--tw-shadow: 1px 1px 1px var(--tw-shadow-color, rgba(0,0,0,0.2)); |
|||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
|||
} |
|||
.shadow-sm { |
|||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); |
|||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
|||
} |
|||
.outline { |
|||
outline-style: var(--tw-outline-style); |
|||
outline-width: 1px; |
|||
} |
|||
.transition { |
|||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; |
|||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); |
|||
transition-duration: var(--tw-duration, var(--default-transition-duration)); |
|||
} |
|||
.hover\:bg-\[\#F6FAFE\] { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
background-color: #F6FAFE; |
|||
} |
|||
} |
|||
} |
|||
.hover\:bg-blue-700 { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
background-color: var(--color-blue-700); |
|||
} |
|||
} |
|||
} |
|||
.hover\:bg-gray-50 { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
background-color: var(--color-gray-50); |
|||
} |
|||
} |
|||
} |
|||
.hover\:bg-green-700 { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
background-color: var(--color-green-700); |
|||
} |
|||
} |
|||
} |
|||
.hover\:bg-red-600 { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
background-color: var(--color-red-600); |
|||
} |
|||
} |
|||
} |
|||
.hover\:bg-yellow-500 { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
background-color: var(--color-yellow-500); |
|||
} |
|||
} |
|||
} |
|||
.hover\:text-blue-800 { |
|||
&:hover { |
|||
@media (hover: hover) { |
|||
color: var(--color-blue-800); |
|||
} |
|||
} |
|||
} |
|||
.focus\:border-blue-500 { |
|||
&:focus { |
|||
border-color: var(--color-blue-500); |
|||
} |
|||
} |
|||
.focus\:ring-2 { |
|||
&:focus { |
|||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); |
|||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
|||
} |
|||
} |
|||
.focus\:ring-blue-500 { |
|||
&:focus { |
|||
--tw-ring-color: var(--color-blue-500); |
|||
} |
|||
} |
|||
.focus\:outline-none { |
|||
&:focus { |
|||
--tw-outline-style: none; |
|||
outline-style: none; |
|||
} |
|||
} |
|||
} |
|||
@property --tw-divide-y-reverse { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: 0; |
|||
} |
|||
@property --tw-border-style { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: solid; |
|||
} |
|||
@property --tw-font-weight { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
} |
|||
@property --tw-shadow { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: 0 0 #0000; |
|||
} |
|||
@property --tw-shadow-color { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
} |
|||
@property --tw-shadow-alpha { |
|||
syntax: "<percentage>"; |
|||
inherits: false; |
|||
initial-value: 100%; |
|||
} |
|||
@property --tw-inset-shadow { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: 0 0 #0000; |
|||
} |
|||
@property --tw-inset-shadow-color { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
} |
|||
@property --tw-inset-shadow-alpha { |
|||
syntax: "<percentage>"; |
|||
inherits: false; |
|||
initial-value: 100%; |
|||
} |
|||
@property --tw-ring-color { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
} |
|||
@property --tw-ring-shadow { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: 0 0 #0000; |
|||
} |
|||
@property --tw-inset-ring-color { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
} |
|||
@property --tw-inset-ring-shadow { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: 0 0 #0000; |
|||
} |
|||
@property --tw-ring-inset { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
} |
|||
@property --tw-ring-offset-width { |
|||
syntax: "<length>"; |
|||
inherits: false; |
|||
initial-value: 0px; |
|||
} |
|||
@property --tw-ring-offset-color { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: #fff; |
|||
} |
|||
@property --tw-ring-offset-shadow { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: 0 0 #0000; |
|||
} |
|||
@property --tw-outline-style { |
|||
syntax: "*"; |
|||
inherits: false; |
|||
initial-value: solid; |
|||
} |
|||
@layer properties { |
|||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { |
|||
*, ::before, ::after, ::backdrop { |
|||
--tw-divide-y-reverse: 0; |
|||
--tw-border-style: solid; |
|||
--tw-font-weight: initial; |
|||
--tw-shadow: 0 0 #0000; |
|||
--tw-shadow-color: initial; |
|||
--tw-shadow-alpha: 100%; |
|||
--tw-inset-shadow: 0 0 #0000; |
|||
--tw-inset-shadow-color: initial; |
|||
--tw-inset-shadow-alpha: 100%; |
|||
--tw-ring-color: initial; |
|||
--tw-ring-shadow: 0 0 #0000; |
|||
--tw-inset-ring-color: initial; |
|||
--tw-inset-ring-shadow: 0 0 #0000; |
|||
--tw-ring-inset: initial; |
|||
--tw-ring-offset-width: 0px; |
|||
--tw-ring-offset-color: #fff; |
|||
--tw-ring-offset-shadow: 0 0 #0000; |
|||
--tw-outline-style: solid; |
|||
} |
|||
} |
|||
} |
|||
@ -1,3 +1,3 @@ |
|||
class Livre < ApplicationRecord |
|||
validates :titre, :auteur, presence: true |
|||
validates :titre, :auteur, :date_de_sortie, presence: true |
|||
end |
|||
@ -1,23 +0,0 @@ |
|||
<%= form_with(model: @livre, local: true) do |form| %> |
|||
<div> |
|||
<%= form.label :titre %><br> |
|||
<%= form.text_field :titre %> |
|||
</div> |
|||
|
|||
<div> |
|||
<%= form.label :auteur %><br> |
|||
<%= form.text_field :auteur %> |
|||
</div> |
|||
|
|||
<div> |
|||
<%= form.label :date_de_sortie %><br> |
|||
<%= form.date_field :date_de_sortie %> |
|||
</div> |
|||
|
|||
<div> |
|||
<%= form.submit "Modifier le livre" %> |
|||
|
|||
</div> |
|||
<% end %> |
|||
|
|||
> |
|||
@ -0,0 +1,19 @@ |
|||
<turbo-frame id="livre_<%= livre.id %>"> |
|||
<div class="flex px-3 py-3 border-b border-[#EAEAEA] hover:bg-gray-50 transition text-sm"> |
|||
<div class="flex flex-1 px-3 py-2"><%= livre.titre %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= livre.auteur %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= livre.date_de_sortie %></div> |
|||
|
|||
<!-- Btn Modifier --> |
|||
<div class="flex flex-1 px-3 py-2 gap-2 justify-center"> |
|||
<%= link_to "Modifier", edit_livre_path(livre), |
|||
data: { turbo_frame: "livre_#{livre.id}" }, |
|||
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %> |
|||
|
|||
<!-- Btn Supp --> |
|||
<%= button_to "Supprimer", livre_path(livre), method: :delete, |
|||
data: { confirm: "Supprimer ce livre ?" }, |
|||
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %> |
|||
</div> |
|||
</div> |
|||
</turbo-frame> |
|||
@ -1,3 +1,10 @@ |
|||
<h1>Modifier le livre</h1> |
|||
<h1 class="text-4xl font-bold text-gray-800 mb-6"> |
|||
Modifier le livre |
|||
</h1> |
|||
|
|||
<%= render 'form', livre: @livre %> |
|||
|
|||
<p class="mt-6"> |
|||
<%= link_to "Retour au catalogue", livres_path, |
|||
class: "text-black underline text-sm hover:text-blue-800 transition" %> |
|||
</p> |
|||
@ -0,0 +1,10 @@ |
|||
<turbo-frame id="livre_<%= @livre.id %>"> |
|||
<%= form_with model: @livre, url: livre_path(@livre), method: :patch do |form| %> |
|||
<div class="flex px-3 py-3 border-b border-[#EAEAEA] hover:bg-gray-50 transition text-sm"> |
|||
<div class="flex flex-1 px-3 py-2"><%= form.text_field :titre %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= form.text_field :auteur %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= form.date_field :date_de_sortie %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= form.submit "Enregistrer", class: "btn" %></div> |
|||
</div> |
|||
<% end %> |
|||
</turbo-frame> |
|||
@ -1,29 +1,63 @@ |
|||
<h1>Catalogue de la bibliothèque</h1> |
|||
<%= form_with url: livres_path, method: :get, local: true do %> |
|||
<p> |
|||
Rechercher un livre : |
|||
<%= text_field_tag :query, params[:query] %> |
|||
<%= submit_tag "Rechercher" %> |
|||
</p> |
|||
<% end %> |
|||
<p>Nombre total de livres : <%= @livres.count %></p> |
|||
<div class="table"> |
|||
<div class="table-header"> |
|||
<div class="cell">Titre</div> |
|||
<div class="cell">Auteur</div> |
|||
<div class="cell">Date de sortie</div> |
|||
<div class="cell">Actions</div> |
|||
<!-- Titre de la page--> |
|||
<h1 class="text-4xl font-bold text-gray-800 mb-6"> |
|||
catalogue de la bibliothèque |
|||
</h1> |
|||
|
|||
<div class="flex items-center mb-6"> |
|||
<%= form_with url: livres_path, method: :get, local: true do %> |
|||
<div class="flex items-center gap-3"> |
|||
<label class="text-base font-medium text-gray-700"> |
|||
Rechercher un livre : |
|||
</label> |
|||
|
|||
<%= text_field_tag :query, params[:query], |
|||
placeholder: "Rechercher un livre...", |
|||
class: "border border-gray-300 rounded-md px-3 py-1.5 w-48 focus:outline-none focus:ring-2 focus:ring-blue-500 transition text-sm" %> |
|||
|
|||
<%= submit_tag "Rechercher", |
|||
class: "bg-blue-600 text-white px-4 py-1.5 rounded-md hover:bg-blue-700 transition shadow-sm text-sm" %> |
|||
</div> |
|||
<% end %> |
|||
</div> |
|||
|
|||
<!-- Nombre total de livres --> |
|||
<p class="text-sm text-gray-600 mb-4"> |
|||
Nombre total de livres : <%= @livres.count %> |
|||
</p> |
|||
|
|||
<div class="flex flex-col w-[40%] mt-8 border border-[#E0E0E0] rounded-md bg-[#FAFAFA] shadow-[1px_1px_1px_rgba(0,0,0,0.2)]"> |
|||
<div class="flex px-3 py-3 border-b border-[#EAEAEA] bg-[#F5F7FA] font-semibold text-[#A51010] text-sm"> |
|||
<div class="flex flex-1 px-3 py-2">Titre</div> |
|||
<div class="flex flex-1 px-3 py-2">Auteur</div> |
|||
<div class="flex flex-1 px-3 py-2">Date de sortie</div> |
|||
<div class="flex flex-1 px-3 py-2">Actions</div> |
|||
</div> |
|||
|
|||
<% @livres.each do |livre| %> |
|||
<div class="table-row"> |
|||
<div class="cell"><%= livre.titre %></div> |
|||
<div class="cell"><%= livre.auteur %></div> |
|||
<div class="cell"><%= livre.date_de_sortie %></div> |
|||
<div class="cell"> |
|||
<%= link_to "Modifier", edit_livre_path(livre), class: "btn" %> |
|||
<%= button_to "Supprimer", livre_path(livre), method: :delete, data: { confirm: "Supprimer ce livre ?" }, class: "btn" %> |
|||
<turbo-frame id="livre_<%= livre.id %>"> |
|||
<div class="flex px-3 py-3 border-b border-[#EAEAEA] hover:bg-gray-50 transition text-sm"> |
|||
<div class="flex flex-1 px-3 py-2"><%= livre.titre %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= livre.auteur %></div> |
|||
<div class="flex flex-1 px-3 py-2"><%= livre.date_de_sortie %></div> |
|||
|
|||
<!-- Btn Modifier --> |
|||
<div class="flex flex-1 px-3 py-2 gap-2 justify-center"> |
|||
<%= link_to "Modifier", edit_livre_path(livre), |
|||
data: { turbo_frame: "livre_#{livre.id}" }, |
|||
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %> |
|||
|
|||
<!-- Btn Supp --> |
|||
<%= button_to "Supprimer", livre_path(livre), method: :delete, |
|||
data: { confirm: "Supprimer ce livre ?" }, |
|||
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %> |
|||
</div> |
|||
</div> |
|||
</turbo-frame> |
|||
<% end %> |
|||
</div> |
|||
<p><%= link_to "Ajouter un nouveau livre", new_livre_path %></p> |
|||
|
|||
<!-- Pour ajouter un nouveau livre --> |
|||
<p class="mt-6"> |
|||
<%= link_to "Ajouter un nouveau livre", new_livre_path, |
|||
class: "text-black underline text-sm hover:text-blue-800 transition" %> |
|||
</p> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue