Merge pull request #81 from motohiro-mm/chore/add_css_to_tables_and_h…

…eader カレンダー表示とヘッダーにクラス名を追加
motohiro-mm · Sep 23, 2024 · 893eb12 · 893eb12
2 parents 3c115fb + 657eee3
commit 893eb12
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 76 deletions.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -19,16 +19,19 @@
   </head>
 
   <body>
-    <header>
-      <% if current_user %>
-        <%= current_user.name %>さん
-        <%= link_to 'ログアウト', log_out_path %>
-      <% else %>
-        ゲストさん
-        <%= button_to 'Googleでログイン', '/auth/google_oauth2', method: :post, data: { turbo: false } %>
-      <% end %>
+    <header class="bg-stone-700 text-white py-4 px-5 flex justify-between items-center">
+      <div class="flex items-center">
+        <% if current_user %>
+          <span><%= current_user.name %>さん</span>
+          <%= link_to 'ログアウト', log_out_path, class: 'ml-4 text-stone-300 hover:underline' %>
+        <% else %>
+          <%= button_to 'Googleでログイン', '/auth/google_oauth2', method: :post, data: { turbo: false },
+                                                              class: 'ml-4 bg-stone-500 text-white rounded-md py-2 px-4' %>
+          <span class="mr-4">ゲストさん</span>
+        <% end %>
+      </div>
     </header>
-    <main class="container mx-auto mt-28 px-5 flex">
+    <main class="container mx-auto mt-4 px-5 flex">
       <%= yield %>
     </main>
   </body>

diff --git a/app/views/meal_plans/_form.html.erb b/app/views/meal_plans/_form.html.erb
@@ -33,6 +33,6 @@
   <% end %>
 
   <div class="inline">
-    <%= form.submit class: 'rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer' %>
+    <%= form.submit class: 'rounded-lg py-3 px-5 bg-gray-600 text-white inline-block font-medium cursor-pointer' %>
   </div>
 <% end %>
diff --git a/app/views/meal_plans/_meal.html.erb b/app/views/meal_plans/_meal.html.erb
@@ -1,11 +1,13 @@
-<div id="<%= dom_id meal %>">
-  <strong><%= meal.timing %></strong>
+<div id="<%= dom_id meal %>" class="border border-stone-300 rounded-md p-4 my-5 text-stone-800">
+  <strong class="block font-bold text-lg"><%= meal.timing %></strong>
+
   <p class="my-5">
     <strong class="block font-medium mb-1">Name:</strong>
-    <%= meal.name %>
+    <span class="block rounded-md px-3 py-2"><%= meal.name %></span>
   </p>
+
   <p class="my-5">
     <strong class="block font-medium mb-1">Memo:</strong>
-    <%= meal.memo %>
+    <span class="block rounded-md px-3 py-2"><%= meal.memo %></span>
   </p>
 </div>
diff --git a/app/views/meal_plans/_meal_plan.html.erb b/app/views/meal_plans/_meal_plan.html.erb
@@ -1,11 +1,8 @@
-<div id="<%= dom_id meal_plan %>">
+<div id="<%= dom_id meal_plan %>" class="my-5">
 
-  <h2 class="font-bold text-3xl"><%= meal_plan.meal_date %></h2>
+  <h2 class="font-bold text-3xl text-stone-800"><%= meal_plan.meal_date %></h2>
 
   <% @meal_plan.meals.sort_by(&:timing_before_type_cast).each do |meal| %>
-    ---------------
     <%= render 'meal', meal: %>
   <% end %>
-    ---------------
-
 </div>
diff --git a/app/views/meal_plans/calendar.html.erb b/app/views/meal_plans/calendar.html.erb
@@ -26,6 +26,8 @@
       </div>
     <% end %>
   </div>
-  <%= link_to 'Back to meal plans', meal_plans_path,
-              class: 'ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium' %>
+  <div class="flex justify-end">
+    <%= link_to 'Back to meal plans', meal_plans_path,
+                class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block font-medium' %>
+  </div>
 </div>
diff --git a/app/views/meal_plans/edit.html.erb b/app/views/meal_plans/edit.html.erb
@@ -3,7 +3,8 @@
 
   <%= render 'form', meal_plan: @meal_plan %>
 
-  <%= link_to 'Show this meal_plan', @meal_plan, class: 'ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium' %>
+  <%= link_to 'Show this meal_plan', @meal_plan,
+              class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block font-medium' %>
   <%= link_to 'Back to meal plans', meal_plans_path(start_date: @meal_plan.meal_date),
-              class: 'ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium' %>
+              class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block font-medium' %>
 </div>
diff --git a/app/views/meal_plans/index.html.erb b/app/views/meal_plans/index.html.erb
@@ -7,13 +7,11 @@
 
   <% content_for :title, 'MealPlans' %>
   <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">MealPlans</h1>
+    <h1 class="font-bold text-4xl text-stone-800">MealPlans</h1>
   </div>
 
   <div>
     <%= week_calendar events: @meal_plans do |date, meal_plan| %>
-      <%= date.day %>
-
       <% if meal_plan.blank? || meal_plan.meals.blank? %>
         <%= link_to '新規作成 >', new_meal_plan_path(meal_date: date) %>
       <% else %>
@@ -25,6 +23,8 @@
       <% end %>
     <% end %>
   </div>
-  <%= link_to 'Meal Plans Calendar', meal_plans_calendar_path,
-              class: 'ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium' %>
+  <div class="flex justify-end">
+    <%= link_to 'Meal Plans Calendar', meal_plans_calendar_path,
+                class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block font-medium' %>
+  </div>
 </div>
diff --git a/app/views/meal_plans/show.html.erb b/app/views/meal_plans/show.html.erb
@@ -1,19 +1,18 @@
 <div class="mx-auto md:w-2/3 w-full flex">
-  <div class="mx-auto">
+  <div class="mx-auto font-medium">
     <% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 rounded-lg inline-block" id="notice"><%= notice %></p>
     <% end %>
-    <%#= link_to "相談部屋 >", meal_remarks_path(@meal_plan) %>
 
     <%= render @meal_plan %>
 
-    <%= link_to 'Edit this meal_plan', edit_meal_plan_path(@meal_plan),
-                class: 'mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium' %>
+    <%= link_to 'Edit this meal plan', edit_meal_plan_path(@meal_plan),
+                class: 'mt-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block' %>
     <%= link_to 'Back to meal plans', meal_plans_path(start_date: @meal_plan.meal_date),
-                class: 'ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium' %>
+                class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block' %>
     <div class="inline-block ml-2">
-      <%= button_to 'Destroy this meal_plan', @meal_plan, method: :delete,
-                                                          class: 'mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium' %>
+      <%= button_to 'Destroy this meal plan', @meal_plan, method: :delete,
+                                                          class: 'rounded-lg py-3 px-5 text-stone-500 bg-stone-100' %>
     </div>
   </div>
 </div>
diff --git a/app/views/simple_calendar/_month_calendar.html.erb b/app/views/simple_calendar/_month_calendar.html.erb
@@ -1,36 +1,41 @@
-<div class="simple-calendar">
-  <div class="calendar-heading">
-    <time datetime="<%= start_date.strftime('%Y-%m') %>" class="calendar-title">
-      <%= start_date.year %>
-      <%= t('date.month_names')[start_date.month] %>
-    </time>
+<div>
+  <div class="header flex justify-between items-center border-b p-4 bg-stone-100">
+    <span class="text-lg font-bold text-stone-700">
+      <time datetime="<%= start_date.strftime('%Y-%m') %>">
+        <%= start_date.year %>
+        <%= t('date.month_names')[start_date.month] %>
+      </time>
+    </span>
 
-    <nav>
-      <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view %>
-      <%= link_to t('simple_calendar.today', default: 'Today'), calendar.url_for_today_view %>
-      <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view %>
+    <nav class="space-x-4">
+      <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view,
+                  class: 'text-stone-500 hover:underline' %>
+      <%= link_to t('simple_calendar.today', default: 'Today'), calendar.url_for_today_view,
+                  class: 'text-stone-500 hover:underline' %>
+      <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view,
+                  class: 'text-stone-500 hover:underline' %>
     </nav>
   </div>
 
-  <table class="table table-striped">
+  <table class="w-full table-fixed border-collapse">
     <thead>
-      <tr>
-        <% date_range.slice(0, 7).each do |day| %>
-          <th><%= t('date.abbr_day_names')[day.wday] %></th>
-        <% end %>
-      </tr>
+    <tr class="bg-stone-200">
+      <% date_range.slice(0, 7).each do |day| %>
+        <th class="py-2 text-center text-stone-600"><%= t('date.abbr_day_names')[day.wday] %></th>
+      <% end %>
+    </tr>
     </thead>
 
     <tbody>
-      <% date_range.each_slice(7) do |week| %>
-        <tr>
-          <% week.each do |day| %>
-            <%= content_tag :td, class: calendar.td_classes_for(day) do %>
-              <% instance_exec(day, calendar.sorted_events_for(day).first, &passed_block) %>
-            <% end %>
+    <% date_range.each_slice(7) do |week| %>
+      <tr class="border-t">
+        <% week.each do |day| %>
+          <%= content_tag :td, class: "px-4 py-2 text-center border hover:bg-stone-100 #{calendar.td_classes_for(day)}" do %>
+            <% instance_exec(day, calendar.sorted_events_for(day).first, &passed_block) %>
           <% end %>
-        </tr>
-      <% end %>
+        <% end %>
+      </tr>
+    <% end %>
     </tbody>
   </table>
 </div>
diff --git a/app/views/simple_calendar/_week_calendar.html.erb b/app/views/simple_calendar/_week_calendar.html.erb
@@ -1,27 +1,32 @@
 <div class="simple-calendar">
-  <div class="calendar-heading">
-    <span class="calendar-title">
-      <%= t('simple_calendar.week', default: 'Week') %>
-      <%= calendar.week_number %>
-      <% if calendar.number_of_weeks > 1 %>
-        - <%= calendar.end_week %>
-      <% end %>
+  <div class="flex justify-between items-center border-b p-4 bg-stone-100">
+    <span class="text-xl font-bold text-stone-800">
+      <time datetime="<%= start_date.strftime('%Y-%m') %>">
+        <%= start_date.year %>
+      </time>
     </span>
 
-    <nav>
-      <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view %>
-      <%= link_to t('simple_calendar.today', default: 'Today'), calendar.url_for_today_view %>
-      <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view %>
+    <nav class="space-x-4">
+      <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view,
+                  class: 'text-stone-500 hover:underline' %>
+      <%= link_to t('simple_calendar.today', default: 'Today'), calendar.url_for_today_view,
+                  class: 'text-stone-500 hover:underline' %>
+      <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view,
+                  class: 'text-stone-500 hover:underline' %>
     </nav>
   </div>
 
-  <table class="table table-striped">
+  <table class="w-full table-fixed border-collapse">
     <tbody>
     <% date_range.each do |day| %>
-      <tr>
-        <th><%= t('date.abbr_day_names')[day.wday] %></th>
-        <td>
-          <%= content_tag :td, class: calendar.td_classes_for(day) do %>
+      <tr class="border-t">
+        <th class="text-left p-4 w-1/4 text-lg font-semibold text-stone-500 align-top">
+          <span class="text-stone-800"><%= day.strftime('%-m月%-d日') %></span>
+          <%= t('date.abbr_day_names')[day.wday] %>
+        </th>
+
+        <td class="p-4 w-3/4 align-top">
+          <%= content_tag :div, class: calendar.td_classes_for(day) do %>
             <% instance_exec(day, calendar.sorted_events_for(day).first, &passed_block) %>
           <% end %>
         </td>