rubyon
/
farmitry_hvac
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

헤더 모바일용 메뉴 버튼 추가, 스케줄러 edit view 스타일 수정

This commit is contained in:
ming 2025-04-28 13:02:01 +09:00
parent 07c5d0fa2a
commit f7cedfd799
6 changed files with 46 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/controllers/index.js
View File

@ -10,5 +10,8 @@ application.register("hello", HelloController)
import ModalsController from "./modals_controller" import ModalsController from "./modals_controller"
application.register("modals", ModalsController) application.register("modals", ModalsController)
import SidebarController from "./sidebar_controller"
application.register("sidebar", SidebarController)
import TimerController from "./timer_controller" import TimerController from "./timer_controller"
application.register("timer", TimerController) application.register("timer", TimerController)

15
app/javascript/controllers/sidebar_controller.js Normal file
View File

@ -0,0 +1,15 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["menu", "overlay"]
toggle() {
this.menuTarget.classList.toggle("-translate-x-full")
this.overlayTarget.classList.toggle("hidden")
}
close() {
this.menuTarget.classList.add("-translate-x-full")
this.overlayTarget.classList.add("hidden")
}
}

4
app/views/layouts/application.html.erb
View File

@ -25,11 +25,11 @@
<body class="min-h-screen bg-base-background text-base-text min-w-[400px] overflow-x-auto h-full"> <body class="min-h-screen bg-base-background text-base-text min-w-[400px] overflow-x-auto h-full">
<%= turbo_frame_tag :modals %> <%= turbo_frame_tag :modals %>
<main class="flex flex-col h-full"> <main class="flex flex-col h-full" data-controller="sidebar">
<%= render "partials/header" %> <%= render "partials/header" %>
<div class="flex flex-row flex-1 w-full"> <div class="flex flex-row flex-1 w-full">
<%= render "partials/sidebar" %> <%= render "partials/sidebar" %>
<div class="flex-1 h-full pb-4 pr-4"> <div class="flex-1 h-full pb-4 px-4 md:pl-0">
<div class="flex-1 h-full content"> <div class="flex-1 h-full content">
<% if flash[:notice] %> <% if flash[:notice] %>
<div class="rounded px-4 py-2 bg-accept text-white"> <div class="rounded px-4 py-2 bg-accept text-white">

13
app/views/partials/_header.html.erb
View File

@ -1,9 +1,14 @@
<header class="flex header" data-controller="timer"> <header class="flex header justify-between items-center">
<div class="flex flex-row h-full"> <div class="flex flex-row h-full items-center">
<%= image_tag "svg/svg_logo.svg", class: "w-fit h-auto mr-4" %> <%= image_tag "svg/svg_logo.svg", class: "w-auto h-8 mr-4" %>
<%= link_to root_path do %> <%= link_to root_path do %>
<div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div> <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
<% end %> <% end %>
</div> </div>
<div data-timer-target="output"></div>
<div data-timer-target="output" class="hidden md:block"></div>
<button data-action="click->sidebar#toggle" class="block md:hidden p-2 cursor-pointer">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</header> </header>

3
app/views/partials/_sidebar.html.erb
View File

@ -1,4 +1,5 @@
<nav class="side-bar overflow-y-auto"> <div data-sidebar-target="overlay" data-action="click->sidebar#close" class="fixed inset-0 bg-black/50 z-40 hidden md:hidden"></div>
<nav class="side-bar overflow-y-auto transition-transform md:translate-x-0 -translate-x-full fixed md:relative top-0 left-0 h-full bg-base-background z-50" data-sidebar-target="menu">
<div class="menu-group"> <div class="menu-group">
<div class="menu-group-icon"> <div class="menu-group-icon">
<i class="fa-solid fa-house text-base-text/30 text-4xl"></i> <i class="fa-solid fa-house text-base-text/30 text-4xl"></i>

12
app/views/schedules/schedule_edit.html.erb
View File

@ -7,12 +7,12 @@
<div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div> <div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
<%= submit_tag "업데이트", class: "btn bg-primary" %> <%= submit_tag "업데이트", class: "btn bg-primary" %>
</div> </div>
<ul class="divide-y divide-base-border"> <ul class="divide-y divide-base-border whitespace-nowrap">
<% @schedule.each do |s| %> <% @schedule.each do |s| %>
<li class="flex justify-between items-center px-4 py-2 space-x-4"> <li class="flex justify-between items-center px-4 py-2 space-x-4">
<div class="flex items-center space-x-6"> <div class="flex items-center space-x-4 basis-2/3">
<!-- 시간 --> <!-- 시간 -->
<div class="flex flex-col md:flex-row items-center space-x-2"> <div class="flex flex-col md:flex-row w-full items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0">
<div class="text-white">시간</div> <div class="text-white">시간</div>
<div class="text-xl flex items-center space-x-1"> <div class="text-xl flex items-center space-x-1">
<%= select_tag "schedule[#{s.id}][hour]", <%= select_tag "schedule[#{s.id}][hour]",
@ -24,7 +24,7 @@
</div> </div>
<!-- 온도 --> <!-- 온도 -->
<div class="flex flex-col md:flex-row items-center space-x-4"> <div class="flex flex-col md:flex-row w-full items-center space-x-0 space-y-2 md:space-x-4 md:space-y-0">
<div class="text-white">온도</div> <div class="text-white">온도</div>
<div class="text-xl flex items-center space-x-2"> <div class="text-xl flex items-center space-x-2">
<div> <div>
@ -35,8 +35,9 @@
</div> </div>
</div> </div>
<div class="flex items-center space-x-6 basis-1/3 justify-end">
<!-- 사용 여부 --> <!-- 사용 여부 -->
<div class="flex flex-col md:flex-row items-center space-x-4"> <div class="flex flex-col md:flex-row items-center space-x-0 space-y-2 md:space-x-4 md:space-y-0">
<div class="text-white">사용여부</div> <div class="text-white">사용여부</div>
<label class="relative inline-flex items-center cursor-pointer"> <label class="relative inline-flex items-center cursor-pointer">
<%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %> <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
@ -46,7 +47,6 @@
</div> </div>
<!-- 삭제 --> <!-- 삭제 -->
<div>
<%= link_to "삭제", schedule_path(s), <%= link_to "삭제", schedule_path(s),
data: { data: {
turbo_method: :delete, turbo_method: :delete,