css upadate

MIZOGUCHIKoki · Dec 22, 2023 · c37d791 · c37d791
1 parent fd82a4d
commit c37d791
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 19 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -22,6 +22,7 @@
 
     width: 920px;
     background:radial-gradient(#fff, #00abc5); 
+    font-size: 15px;
  }
  .center {
     text-align: center;
@@ -32,14 +33,25 @@
  .flex-field {
     justify-content: space-around;
     display: flex;
+    background-color: #0067C0;
+   border-radius: 10px;
  }
  .block-field {
    justify-content: space-around;
    display: block;
+
+   width: 300px;
+   margin: 0 auto;
+   padding: 20px;
+   background-color: #ffffff;
+   border: 1px solid #ccc;
+   border-radius: 5px;
  }
  table {
     margin: auto;
     padding: 50px;
+    border-color: #930403;
+    border: 3px;
  }
  .box {
    margin: 20px;
@@ -51,6 +63,31 @@
    width: 120px;
    border-radius: 20px;
    background-color: rgb(185, 255, 127);
+   margin-bottom: 10px;
+ }
+ .signin-button {
+   height: 30px;
+   width: 100px;
+   border-radius: 20px;
+   background-color: rgb(127, 200, 255);
+ }
+
+ /*header*/
+ .header {
+   display: flex;
+   width: auto;
+   height: 100px;
+   background-color: red;
+   align-items: center;
+   border-radius: 10px;
+ }
+ .list-item {
+   list-style: none;
+   display: inline-block;
+   border: 2px solid;
+   border-color: #bcdfff;
+   border-radius: 10px;
+   margin-right: 20px;
  }
 
  /*エラーメッセージ表示の際，勝手に新しいクラスが生成され，Viewを壊すようである．

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -1,17 +1,19 @@
 ---start of header---
-<ul>
+<div class="header">
   <% if signed_in? %>
-    サインイン中のユーザ：<%= current_user.name %>，<%= current_user.email %>，管理者[<%= current_user.admin %>]
+    
     <% if current_user.admin %>
-      <li><%= link_to "ユーザ一覧", users_path %></li>
-      <li><%= link_to "管理者の情報", user_path(current_user) %>
+      <ul class="nav">
+        <li class="list-item"><%= link_to "ユーザ一覧", users_path %></li>
+        <li class="list-item"><%= link_to "管理者の情報", user_path(current_user) %>
       <% else %>
-        <li><%= link_to "楽譜一覧", home_path(current_user) %></li>
-        <li><%= link_to "ユーザ情報", user_path(current_user) %></li>
+        <li class="list-item"><%= link_to "楽譜一覧", home_path(current_user) %></li>
+        <li class="list-item"><%= link_to "ユーザ情報", user_path(current_user) %></li>
       <% end %>
-      <li><%= link_to "ログアウト", signout_path , data:{ "turbo-method": :delete } %>
+      <li class="list-item"><%= link_to "ログアウト", signout_path , data:{ "turbo-method": :delete } %>
       <% else %>
-        <li><%= link_to "サインイン", signin_path %></li>
+        <li class="list-item"><%= link_to "サインイン", signin_path %></li>
       <% end %>
     </ul>
-    ---end of header---
+</div>
+---end of header---
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
@@ -1,25 +1,25 @@
 <body>
   <div class="center">
-    <div class="left">
+
       <h2>サインイン</h2>
-    </div>
+
     <div class="block-field">
       <%= form_with(url: signin_path, scope: :session) do |f| %>
         <div class="box">
-          <%= f.label :email, "Eメールアドレス" %>
-          <%= f.email_field :email %>
+
+          <%= f.email_field :email, :placeholder => "Enter your email..." %>
         </div>
         <div class="box">
-          <%= f.label :password, "パスワード" %>
-          <%= f.password_field :password %>
+
+          <%= f.password_field :password, :placeholder => "Enter your password..." %>
           <%= f.label :remember_me do %>
           </div>
           <div class="box">
             <%= f.check_box :remember_me %>
-            <span> サインイン情報を記録する </span>
+             サインイン情報を記録する 
           </div>
         <% end %>
-        <%= f.submit "サインイン" %>
+        <%= f.submit "サインイン", {class: "signin-button"} %>
       <% end %>
     </div>
   </div>

diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
@@ -1,7 +1,7 @@
 <body>
 <div class="center">
   <div class="left">
-    <h1>UsersController#index</h1>
+    <h1>ユーザ一覧</h1>
   </div>
     <%= form_with(scope: :user_search, method: :get, local: true) do |form| %>
       <div class="flex-field">
@@ -17,7 +17,7 @@
       <%= button_to "検索", user_path(form), {class: "search-button"} %>
     <% end %>
 
-  <table cellspacing="15" frame="box">
+  <table cellspacing="15" >
     <tr>
       <th>ユーザ名</th><th>ユーザID</th>
     </tr>