스케줄러 edit view 반응형 디테일 수정 3

This commit is contained in:
ming 2025-04-28 21:19:50 +09:00
parent 91aefdba24
commit 05f610bd86
6 changed files with 32 additions and 23 deletions

View File

@ -78,7 +78,7 @@
} }
.select-style { .select-style {
@apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs text-base-background @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs text-base-background
} }
.select-style option { .select-style option {
@ -86,7 +86,7 @@
} }
.input-style { .input-style {
@apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs @apply block w-full px-2 py-1.5 border border-default-slate/50 rounded-xs
} }
.textarea-style { .textarea-style {
@ -109,11 +109,11 @@
} }
.side-bar { .side-bar {
@apply w-[16rem] px-4 text-lg font-bold divide-y divide-base-border; @apply w-[16rem] pl-4 text-lg font-bold divide-y divide-base-border;
} }
.content { .content {
@apply rounded-lg bg-base-secondary; @apply lg:rounded-lg bg-base-secondary;
} }
.page-title { .page-title {
@ -234,3 +234,13 @@
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: rgba(100, 100, 100, 0.6); background-color: rgba(100, 100, 100, 0.6);
} }
.input-style::-webkit-outer-spin-button,
.input-style::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-style[type="number"] {
-moz-appearance: textfield;
}

View File

@ -23,20 +23,20 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head> </head>
<body class="min-h-screen bg-base-background text-base-text min-w-full overflow-x-auto h-full"> <body class="min-h-screen bg-base-background text-base-text min-w-full overflow-x-auto h-full whitespace-nowrap">
<%= turbo_frame_tag :modals %> <%= turbo_frame_tag :modals %>
<main class="flex flex-col h-full" data-controller="sidebar"> <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 px-4 lg:pl-0"> <div class="flex-1 h-full pb-0 px-0 lg:pb-4 lg:px-4 ">
<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-tl-md rounded-tr-md px-4 py-2 bg-accept text-white">
<%= raw flash[:notice] %> <%= raw flash[:notice] %>
</div> </div>
<% elsif flash[:alert] %> <% elsif flash[:alert] %>
<div class="rounded px-4 py-2 bg-danger text-white"> <div class="rounded-tl-md rounded-tr-md px-4 py-2 bg-danger text-white">
<%= raw flash[:alert] %> <%= raw flash[:alert] %>
</div> </div>
<% end %> <% end %>

View File

@ -1,4 +1,4 @@
<header class="flex header justify-between items-center"> <header class="flex header justify-between items-center" data-controller="timer">
<div class="flex flex-row h-full items-center"> <div class="flex flex-row h-full items-center">
<%= image_tag "svg/svg_logo.svg", class: "w-auto h-8 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 %>

View File

@ -1,7 +1,7 @@
<%= form_with model: @schedule, method: :post, data: { turbo: false }, class: 'flex flex-col h-full space-y-4' do |form| %> <%= form_with model: @schedule, method: :post, data: { turbo: false }, class: 'flex flex-col h-full space-y-4' do |form| %>
<%= form.hidden_field :controller_id, value: params[:id] %> <%= form.hidden_field :controller_id, value: params[:id] %>
<div class="flex-1 text-white space-y-4"> <div class="flex-1 text-white space-y-4">
<div class="text-2xl font-bold"><%= Controller.find(params[:id]).name %> 컨트롤러</div> <div class="text-2xl font-bold leading-10"><%= Controller.find(params[:id]).name %> 컨트롤러</div>
<table class="base-table"> <table class="base-table">
<thead> <thead>
<tr> <tr>

View File

@ -4,7 +4,7 @@
<%= hidden_field_tag :controller_id, params[:id] %> <%= hidden_field_tag :controller_id, params[:id] %>
<div class="divide-y divide-base-border"> <div class="divide-y divide-base-border">
<div class="flex justify-between p-4"> <div class="flex justify-between p-4">
<div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div> <div class="text-2xl font-bold leading-10"><%= @controller.name %> 컨트롤러</div>
<%= submit_tag "업데이트", class: "btn bg-primary" %> <%= submit_tag "업데이트", class: "btn bg-primary" %>
</div> </div>
<ul class="divide-y divide-base-border whitespace-nowrap h-full relative"> <ul class="divide-y divide-base-border whitespace-nowrap h-full relative">
@ -13,25 +13,24 @@
<li class="flex justify-between items-stretch px-4 py-2 space-x-4 h-full relative"> <li class="flex justify-between items-stretch px-4 py-2 space-x-4 h-full relative">
<div class="flex items-center space-x-4 basis-3/5 h-full"> <div class="flex items-center space-x-4 basis-3/5 h-full">
<!-- 시간 --> <!-- 시간 -->
<div class="flex flex-col lg:flex-row basis-2/5 h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0"> <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
<div class="text-white text-left w-full lg:w-auto">시간</div> <div class="text-white text-left w-full lg:w-auto">시간</div>
<div class="text-xl flex items-center space-x-1 w-full h-full"> <div class="text-xl flex items-center space-x-1 w-full h-full">
<%= select_tag "schedule[#{s.id}][hour]", <%= select_tag "schedule[#{s.id}][hour]",
options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour), options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
class: "select-style text-white min-w-[68px] h-full" %> class: "select-style text-white min-w-[60px] h-full" %>
<div>:</div> <div>:</div>
<%= number_field_tag "schedule[#{s.id}][minute]", <%= number_field_tag "schedule[#{s.id}][minute]",
s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
class: "input-style min-w-[68px] h-full" %> class: "input-style min-w-[60px] h-full" %>
</div> </div>
</div> </div>
<!-- 온도 --> <!-- 온도 -->
<div class="flex flex-col lg:flex-row basis-2/5 h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0"> <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
<div class="text-white text-left w-full lg:w-auto">온도</div> <div class="text-white text-left w-full lg:w-auto">온도 (°C)</div>
<div class="text-xl flex items-center space-x-2"> <div class="text-xl flex items-center">
<%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style min-w-[78px] h-full" %> <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px] h-full" %>
<div class="text-white text-xl leading-8">°C</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,7 +2,7 @@
<div class="flex flex-col flex-1 space-y-4 overflow-y-hidden"> <div class="flex flex-col flex-1 space-y-4 overflow-y-hidden">
<div class="overflow-y-auto divide-y divide-base-border"> <div class="overflow-y-auto divide-y divide-base-border">
<div class="flex justify-between p-4"> <div class="flex justify-between p-4">
<div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div> <div class="text-2xl font-bold leading-10"><%= @controller.name %> 컨트롤러</div>
<%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %> <%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %>
</div> </div>
<ul class="divide-y divide-base-border"> <ul class="divide-y divide-base-border">
@ -25,15 +25,15 @@
<div class="text-white">온도</div> <div class="text-white">온도</div>
<div class="text-3xl flex items-end space-x-2"> <div class="text-3xl flex items-end space-x-2">
<div><%= s.temperature %></div> <div><%= s.temperature %></div>
<div class="text-white text-xl leading-8">°C</div> <div class="text-white text-base leading-7">°C</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 사용 여부 --> <!-- 사용 여부 -->
<div class="flex flex-col lg:flex-row items-baseline space-x-4"> <div class="flex flex-col lg:flex-row items-baseline space-x-0 lg:space-x-4 items-end">
<div class="text-white mb-1">ON/OFF</div> <div class="text-white mb-1">ON/OFF</div>
<div class="text-3xl"> <div class="text-3xl mr-0">
<%#= s.is_active %> <%#= s.is_active %>
<% if s.is_active %> <% if s.is_active %>
<i class="fa-solid fa-check text-notice"></i> <i class="fa-solid fa-check text-notice"></i>