From f90962c54fed3f7e9fe70214ee59934f43ff2804 Mon Sep 17 00:00:00 2001 From: ming Date: Thu, 17 Apr 2025 04:14:43 +0900 Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/images/svg/svg_logo.svg | 5 ++ .../stylesheets/application.tailwind.css | 58 +++++++++++-------- app/views/layouts/application.html.erb | 14 ++++- app/views/modbus/index.html.erb | 29 +++++++--- app/views/modbus/schedule_edit.html.erb | 36 +++++++----- app/views/partials/_header.html.erb | 10 ++++ app/views/partials/_sidebar.html.erb | 42 ++++++++++++++ 7 files changed, 146 insertions(+), 48 deletions(-) create mode 100644 app/assets/images/svg/svg_logo.svg create mode 100644 app/views/partials/_header.html.erb create mode 100644 app/views/partials/_sidebar.html.erb diff --git a/app/assets/images/svg/svg_logo.svg b/app/assets/images/svg/svg_logo.svg new file mode 100644 index 0000000..89ecf7e --- /dev/null +++ b/app/assets/images/svg/svg_logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index ade35dc..98585c8 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -2,14 +2,14 @@ @theme { --color-default: rgb(226, 232, 240); - --color-defaultSlate: rgb(100, 116, 139); - --color-defaultSlateDark: rgb(71, 85, 105); + --color-default-slate: rgb(100, 116, 139); + --color-default-slate-dark: rgb(71, 85, 105); --color-primary: rgb(66, 165, 245); --color-notice: rgb(19, 198, 154); --color-warning: rgb(255, 202, 40); --color-accept: rgb(121, 134, 203); --color-danger: rgb(239, 83, 80); - --color-tableBorder: rgb(203, 213, 225); + --color-table-border: rgb(203, 213, 225); --base-font-size: 0.85rem; --text-xs: calc(var(--base-font-size) * 0.75); @@ -42,11 +42,11 @@ @layer base { body { - @apply text-sm text-defaultSlateDark + @apply text-sm text-default-slate-dark } hr { - @apply border-tableBorder + @apply border-table-border } a.disabled { @@ -58,33 +58,41 @@ } .btn { - @apply justify-center rounded-xs bg-defaultSlate px-2 py-0.5 text-sm font-semibold leading-6 text-white + @apply justify-center rounded-md bg-default-slate px-4 py-2 text-sm font-semibold leading-6 text-white shadow-xs hover:opacity-80 cursor-pointer } .card { - @apply bg-white border border-tableBorder rounded-xs shadow-xs + @apply bg-white border border-table-border rounded-xs shadow-xs } /*Form*/ .label-style { - @apply block my-1 font-bold text-defaultSlateDark + @apply block my-1 font-bold text-default-slate-dark } .select-style { - @apply block w-full h-8 px-3 py-1.5 border border-defaultSlate/50 rounded-xs + @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs } .input-style { - @apply block w-full h-8 px-3 py-1.5 border border-defaultSlate/50 rounded-xs + @apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs } .textarea-style { - @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-defaultSlate/50 rounded-xs + @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs } } @layer utilities { + .header { + @apply p-4 text-lg font-bold h-16 flex justify-between; + } + + .side-bar { + @apply w-64 px-4 text-lg font-bold divide-y divide-default-slate-dark; + } + .page-title { @apply text-xl font-bold; } @@ -94,7 +102,7 @@ } .form-title { - @apply text-center text-3xl font-bold tracking-tight text-defaultSlateDark + @apply text-center text-3xl font-bold tracking-tight text-default-slate-dark } .field { @@ -107,15 +115,15 @@ /*Menu*/ .menu-group { - @apply py-2 px-4 + @apply flex flex-row py-6 px-4 gap-x-4 justify-between items-center w-full } - .menu-group-title { - @apply py-1 text-sm text-defaultSlateDark font-medium + .menu-group-icon { + @apply py-1 text-sm text-default-slate-dark font-medium justify-center } - .menu-group-items { - @apply p-1 + .menu-group-name { + @apply p-1 flex-1 } .menu-group-items-title { @@ -123,16 +131,16 @@ } .copyright { - @apply text-defaultSlateDark text-center + @apply text-default-slate-dark text-center } /*Pagy*/ .pagy { - @apply flex items-center justify-center space-x-1 font-semibold text-sm text-defaultSlate; + @apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate; } .pagy a:not(.gap) { - @apply block rounded-xs px-2 py-1 border border-defaultSlate/50; + @apply block rounded-xs px-2 py-1 border border-default-slate/50; } .pagy a:not(.gap):hover { @@ -140,11 +148,11 @@ } .pagy a:not(.gap):not([href]) { - @apply text-defaultSlate/50 border border-defaultSlate/25 cursor-default + @apply text-default-slate/50 border border-default-slate/25 cursor-default } .pagy a:not(.gap).current { - @apply text-white bg-defaultSlate + @apply text-white bg-default-slate } .pagy a.gap { @@ -161,15 +169,15 @@ /*Base Table*/ .base-table { - @apply min-w-full divide-y divide-tableBorder whitespace-nowrap + @apply min-w-full divide-y divide-table-border whitespace-nowrap border border-table-border } .base-table th { - @apply bg-default px-2 py-2 text-left font-semibold text-defaultSlateDark lg:table-cell + @apply bg-default px-2 py-2 text-left font-semibold text-default-slate-dark lg:table-cell } .base-table td { - @apply border-t border-tableBorder px-2 py-1 text-defaultSlate lg:table-cell whitespace-nowrap + @apply border-t border-table-border px-2 py-1 text-default-slate lg:table-cell whitespace-nowrap } } diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index acabb33..2dc8c35 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -20,11 +20,19 @@ <%# Includes all stylesheet files in app/assets/stylesheets %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> + - -
- <%= yield %> + +
+ <%= render "partials/header" %> +
+ <%= render "partials/sidebar" %> +
+ <%= yield %> +
+
+ diff --git a/app/views/modbus/index.html.erb b/app/views/modbus/index.html.erb index ae77f45..c4abde2 100644 --- a/app/views/modbus/index.html.erb +++ b/app/views/modbus/index.html.erb @@ -8,11 +8,26 @@ <% end %> -<% @schedule.each do |s| %> -
-
<%= s.hour %>시
-
<%= s.temperature %> °C
+
+
+ + + + + + + + + <% @schedule.each do |s| %> + + + + + <% end %> + +
시간온도
<%= s.hour %>시<%= s.temperature %> °C
-<% end %> - -<%= link_to "수정", "/modbus/schedule_edit", class: "btn btn-primary" %> +
+ <%= link_to "수정", "/modbus/schedule_edit", class: "btn bg-default-slate" %> +
+
\ No newline at end of file diff --git a/app/views/modbus/schedule_edit.html.erb b/app/views/modbus/schedule_edit.html.erb index c986172..e148df1 100644 --- a/app/views/modbus/schedule_edit.html.erb +++ b/app/views/modbus/schedule_edit.html.erb @@ -1,14 +1,24 @@ -<%= form_with url: "/modbus/schedule_edit_update", method: :post do %> - <% @schedule.each do |s| %> -
-
<%= s.hour %>시
-
- <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C -
-
- <% end %> - -
- <%= submit_tag "업데이트", class: "bg-blue-500 text-white px-4 py-2 rounded" %> +<%= form_with url: "/modbus/schedule_edit_update", method: :post, class: 'flex flex-col h-full divide-y divide-border-table-border' do %> +
+ + + + + + + + + <% @schedule.each do |s| %> + + + + + <% end %> + +
시간온도
<%= s.hour %>시<%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C
-<% end %> + +
+ <%= submit_tag "업데이트", class: "btn bg-primary" %> +
+<% end %> \ No newline at end of file diff --git a/app/views/partials/_header.html.erb b/app/views/partials/_header.html.erb new file mode 100644 index 0000000..2f5359a --- /dev/null +++ b/app/views/partials/_header.html.erb @@ -0,0 +1,10 @@ +
+
+ <%= image_tag "svg/svg_logo.svg", class: "w-16 h-auto" %> +
FARMITRY
+
+
+ + <%= link_to "로그아웃", '', class: "btn" %> +
+
\ No newline at end of file diff --git a/app/views/partials/_sidebar.html.erb b/app/views/partials/_sidebar.html.erb new file mode 100644 index 0000000..e8536c3 --- /dev/null +++ b/app/views/partials/_sidebar.html.erb @@ -0,0 +1,42 @@ + \ No newline at end of file