質問編集履歴

1

2022/02/14 22:30

投稿

umakichi
umakichi

スコア44

test CHANGED
File without changes
test CHANGED
@@ -17,3 +17,94 @@
17
17
  <li><a class="dropdown-item" href="#">Something else here</a></li>
18
18
  </ul>
19
19
  </div>
20
+
21
+ ```shared/header.html.erb
22
+
23
+ <div class="header_area">
24
+ <div class="lefterea">
25
+
26
+ <div class="header-box">
27
+ <h1>DOGRANsなび</h1>
28
+ </div>
29
+
30
+ <!---->
31
+ <div class="dropdown">
32
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
33
+ Dropdown button
34
+ </button>
35
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
36
+ <li><%= link_to "ドッグランを登録する", "/dogruns/new" ,class: "header-link"%></li>
37
+ <li><%= link_to "設定ページ", user_path(current_user) ,class: "header-link"%></li>
38
+ <li><%= link_to "登録済みドッグランページ", users_path ,class: "header-link"%></li>
39
+ <li><%= link_to "登録済みコメント", "/comments/" ,class: "header-link"%></li>
40
+ <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete,class: "header-link"%></li>
41
+ </ul>
42
+ </div>
43
+
44
+ <!--ドッグラン登録・ログアウト-->
45
+ <div class="header-top-ul">
46
+ <div class="user_icon">
47
+ <% if current_user.image.attached? %>
48
+ <%= image_tag current_user.image,class: 'header-user-image' %>
49
+ <% else %>
50
+ <%= image_tag 'no-image.user.png' ,class: 'header-user-image'%>
51
+ <% end %>
52
+ </div>
53
+
54
+ </div>
55
+
56
+ <!--検索-->
57
+
58
+
59
+ <!--ユーザー名-->
60
+ <div class="right_area">
61
+ <% if user_signed_in? %>
62
+ <div class="user_info">
63
+ <div class="user_name">
64
+ <%= current_user.name %>
65
+ </div>
66
+
67
+
68
+ </div>
69
+ <% end %>
70
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
71
+ </div>
72
+
73
+ </div>
74
+ </div>
75
+
76
+ ```
77
+
78
+ layoutsのコードはそれぞれcontrollerごとに分けて書いてますが、bootstrapの内容は下記と同じです。
79
+ ```layouts/dogrun.html.erb
80
+ <!DOCTYPE html>
81
+ <html>
82
+ <head>
83
+ <title>Dogrun210</title>
84
+ <meta name="viewport" content="width=device-width,initial-scale=1">
85
+ <%= csrf_meta_tags %>
86
+ <%= csp_meta_tag %>
87
+
88
+ <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
89
+ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
90
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
91
+ </head>
92
+
93
+ <body>
94
+ <header>
95
+ <%= render "shared/header" %>
96
+ </header>
97
+ <main>
98
+ <p class="notice"><%= notice %></p>
99
+ <p class="alert"><%= alert %></p>
100
+ <%= yield %>
101
+ </main>
102
+ <footer>
103
+ <%= render "shared/footer" %>
104
+ </footer>
105
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
106
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
107
+ </body>
108
+ </html>
109
+
110
+ ```