스케줄러 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 {
@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 {
@ -86,7 +86,7 @@
}
.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 {
@ -109,11 +109,11 @@
}
.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 {
@apply rounded-lg bg-base-secondary;
@apply lg:rounded-lg bg-base-secondary;
}
.page-title {
@ -234,3 +234,13 @@
::-webkit-scrollbar-thumb:hover {
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">
</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 %>
<main class="flex flex-col h-full" data-controller="sidebar">
<%= render "partials/header" %>
<div class="flex flex-row flex-1 w-full">
<%= 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">
<% 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] %>
</div>
<% 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] %>
</div>
<% 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">
<%= image_tag "svg/svg_logo.svg", class: "w-auto h-8 mr-4" %>
<%= 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.hidden_field :controller_id, value: params[:id] %>
<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">
<thead>
<tr>

View File

@ -4,7 +4,7 @@
<%= hidden_field_tag :controller_id, params[:id] %>
<div class="divide-y divide-base-border">
<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" %>
</div>
<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">
<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-xl flex items-center space-x-1 w-full h-full">
<%= select_tag "schedule[#{s.id}][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>
<%= number_field_tag "schedule[#{s.id}][minute]",
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 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="text-white text-left w-full lg:w-auto">온도</div>
<div class="text-xl flex items-center space-x-2">
<%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style min-w-[78px] h-full" %>
<div class="text-white text-xl leading-8">°C</div>
<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">온도 (°C)</div>
<div class="text-xl flex items-center">
<%= 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>
</div>
</div>

View File

@ -2,7 +2,7 @@
<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="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" %>
</div>
<ul class="divide-y divide-base-border">
@ -25,15 +25,15 @@
<div class="text-white">온도</div>
<div class="text-3xl flex items-end space-x-2">
<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 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-3xl">
<div class="text-3xl mr-0">
<%#= s.is_active %>
<% if s.is_active %>
<i class="fa-solid fa-check text-notice"></i>