teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

index.html.slim全体を追加しました。

2019/12/09 01:20

投稿

HIRO76
HIRO76

スコア9

title CHANGED
File without changes
body CHANGED
@@ -14,7 +14,103 @@
14
14
  Rails 5.2
15
15
  gem 'kaminari'(ページネーション用)
16
16
 
17
+ ```slim
18
+ / ヘッダーここから
19
+ .header-bg.sticky-top
20
+ .header.navbar
21
+ = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none"
22
+ ul.nav
23
+ - unless user_signed_in?
24
+ li.nav-item
25
+ = link_to "ログイン", new_user_session_path, class: "nav-link text-white"
26
+ li.nav-item
27
+ = link_to "新規登録", new_user_registration_path, class: "nav-link text-white"
28
+ - else
29
+ li.nav-item
30
+ = link_to "マイページ", user_path(current_user), class: "nav-link text-white"
31
+ li.nav-item
32
+ = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white"
33
+ / ヘッダーここまで
17
34
 
35
+
36
+ / コンテンツ ここから
37
+ .contents.d-flex.justify-content-end.vh-100
38
+ / leftcontents
39
+ .left-content.w-50
40
+ .article.card.h-100 id="append_to"
41
+ = image_tag @article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
42
+ .article-description.card-body.p-1
43
+ h5.card-title.m-0
44
+ = @article.title.truncate(10, omission: '…')
45
+ p.card-text.m-0
46
+ = @article.user.nickname
47
+ p.card-text
48
+ = @article.body.truncate(100, omission: '…')
49
+ = link_to "続きを読む", article_path(@article), class: "btn btn-outline-dark rounded-pill float-right"
50
+
51
+ / rightcontents
52
+ .right-content.w-50.overflow-auto.vh-100
53
+ - @articles.each do |article|
54
+ = link_to article_path(article), class: "text-dark text-decoration-none" do
55
+ .article-list.card.m-4.shadow-sm
56
+ .row
57
+ .article-list-img.col-4
58
+ - if article.images.count > 0
59
+ = image_tag article.images.first.variant(resize: "150x150").processed, class: "article-list-img"
60
+ .article-list-description.card-body
61
+ h5.card-title
62
+ = article.title
63
+ .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page"
64
+ = paginate(@articles)
65
+
66
+ .archive.m-5
67
+ h5 アーカイブ
68
+ ul.list-group.list-group-flush
69
+ = link_to "#", class: "text-dark text-decoration-none"
70
+ li.list-group-item 2019/10
71
+ = link_to "#", class: "text-dark text-decoration-none"
72
+ li.list-group-item 2019/9
73
+ = link_to "#", class: "text-dark text-decoration-none"
74
+ li.list-group-item 2019/8
75
+ = link_to "#", class: "text-dark text-decoration-none"
76
+ li.list-group-item 2019/7
77
+
78
+ .embed-responsive.embed-responsive-16by9.mb-5
79
+ iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0"
80
+
81
+ .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around
82
+ = link_to "#"
83
+ i.fab.fa-facebook-f.fa-lg.pt-4.text-muted
84
+ = link_to "#"
85
+ i.fab.fa-twitter.fa-lg.pt-4.text-muted
86
+ = link_to "#"
87
+ i.fab.fa-instagram.fa-lg.pt-4.text-muted
88
+ = link_to "#"
89
+ i.fab.fa-github.fa-lg.pt-4.text-muted
90
+ / コンテンツ ここまで
91
+
92
+
93
+ / フッターここから
94
+ .footer-bg
95
+ .footer.page-footer.font-small.pt-3.fixed-bottom
96
+ .container
97
+ ul.list-unstyled.list-inline.text-center.py-3.
98
+ li.list-inline-item.text-white
99
+ h5.mb-1.h5 enjoy fishing
100
+ li.list-inline-item.text-white
101
+ - if current_user
102
+ = link_to new_article_path do
103
+ .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
104
+ - else
105
+ = link_to new_user_session_path do
106
+ .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
107
+
108
+ .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright
109
+ / フッターここまで
110
+
111
+ ```
112
+
113
+
18
114
  ```slim
19
115
  / #index.html.slim
20
116
 

3

コード及び質問情報の修正

2019/12/09 01:20

投稿

HIRO76
HIRO76

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- 縦に2分割したページで画面だけページネーション
1
+ 縦に2分割したページで片ページネーションさせると、もう片方の画面が何も表示されなくなる
body CHANGED
@@ -18,43 +18,26 @@
18
18
  ```slim
19
19
  / #index.html.slim
20
20
 
21
+ / leftcontents 固定ページ
21
22
 
22
- / ヘッダーここから
23
- .header-bg.sticky-top
23
+ .left-content.w-50
24
- .header.navbar
24
+ .article.card.h-100 id="append_to"
25
- = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none"
25
+ = image_tag @article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
26
- ul.nav
27
- - unless user_signed_in?
26
+ .article-description.card-body.p-1
28
- li.nav-item
27
+ h5.card-title.m-0
29
- = link_to "ログイン", new_user_session_path, class: "nav-link text-white"
28
+ = @article.title.truncate(10, omission: '…')
29
+ p.card-text.m-0
30
+ = @article.user.nickname
30
- li.nav-item
31
+ p.card-text
31
- = link_to "新規登録", new_user_registration_path, class: "nav-link text-white"
32
+ = @article.body.truncate(100, omission: '…')
32
- - else
33
- li.nav-item
34
- = link_to "マイページ", user_path(current_user), class: "nav-link text-white"
33
+ = link_to "続きを読む", article_path(@article), class: "btn btn-outline-dark rounded-pill float-right"
35
- li.nav-item
34
+ ```
36
- = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white"
37
- / ヘッダーここまで
38
35
 
36
+ ```slim
37
+ / #index.html.slim
39
38
 
40
- / コンテンツ ここから
41
- .contents.d-flex.justify-content-end.vh-100
42
- / leftcontents
43
- .left-content.w-50
44
- - @articles.each_with_index do |article, i|
45
- .article.card.h-100 id="append_to"
46
- - if article.images.count > 0
47
- = image_tag article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
48
- .article-description.card-body
49
- h6.card-title.m-0
50
- = article.title.truncate(10, omission: '…')
51
- p.card-text.m-0
52
- = article.user.nickname
53
- p.card-text
54
- = article.body.truncate(100, omission: '…')
55
- = link_to "続きを読む", article_path(article), class: "btn btn-outline-dark rounded-pill float-right"
56
- - break
57
- / rightcontents
39
+ / rightcontents ページネーションページ
40
+
58
41
  .right-content.w-50.overflow-auto.vh-100
59
42
  - @articles.each do |article|
60
43
  = link_to article_path(article), class: "text-dark text-decoration-none" do
@@ -68,125 +51,20 @@
68
51
  = article.title
69
52
  .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page"
70
53
  = paginate(@articles)
71
-
72
- .archive.m-5
73
- h5 アーカイブ
74
- ul.list-group.list-group-flush
75
- = link_to "#", class: "text-dark text-decoration-none"
76
- li.list-group-item 2019/10
77
- = link_to "#", class: "text-dark text-decoration-none"
78
- li.list-group-item 2019/9
79
- = link_to "#", class: "text-dark text-decoration-none"
80
- li.list-group-item 2019/8
81
- = link_to "#", class: "text-dark text-decoration-none"
82
- li.list-group-item 2019/7
83
-
84
- .embed-responsive.embed-responsive-16by9.mb-5
85
- iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0"
86
-
87
- .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around
88
- = link_to "#"
89
- i.fab.fa-facebook-f.fa-lg.pt-4.text-muted
90
- = link_to "#"
91
- i.fab.fa-twitter.fa-lg.pt-4.text-muted
92
- = link_to "#"
93
- i.fab.fa-instagram.fa-lg.pt-4.text-muted
94
- = link_to "#"
95
- i.fab.fa-github.fa-lg.pt-4.text-muted
96
- / コンテンツ ここまで
97
-
98
-
99
- / フッターここから
100
- .footer-bg
101
- .footer.page-footer.font-small.pt-3.fixed-bottom
102
- .container
103
- ul.list-unstyled.list-inline.text-center.py-3.
104
- li.list-inline-item.text-white
105
- h5.mb-1.h5 enjoy fishing
106
- li.list-inline-item.text-white
107
- = link_to new_article_path do
108
- .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
109
-
110
- .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright
111
- / フッターここまで
112
-
113
-
114
54
  ```
115
55
 
116
56
  ```ruby
117
- # articles.controller
57
+ # articles_controller.rb
118
58
 
119
- class ArticlesController < ApplicationController
120
- before_action :set_article, only: [:show, :edit]
121
- before_action :move_to_index, except: [:index, :show]
122
-
123
- helper_method :images_destroy
124
-
125
-
126
59
  def index
127
60
  @articles = Article.includes(:user).order(created_at: :desc).page(params[:page]).per(10)
61
+ @article = Article.last
128
62
  end
63
+ ```
129
64
 
130
- def show
131
- end
132
65
 
133
- def edit
134
- @images = @article.images
135
- end
136
-
137
- def update
138
- @article = Article.find(params[:id])
139
- if @article.update(article_params)
140
- redirect_to @article
141
- else
142
- render "edit"
66
+ 該当箇所のコードになります。一部修正しました。
143
- end
144
- end
145
-
146
- def new
147
- @article = Article.new
148
- end
149
-
150
- def create
151
- # @article = Article.create(title: article_params[:title], description: article_params[:description], body: article_params[:body], images: article_params[images: []])
152
- @article = Article.new(article_params)
153
- if @article.save
154
- redirect_to @article
155
- else
156
- render "new"
157
- end
158
- end
159
-
160
- def destroy
161
- article = Article.find(params[:id])
162
- if article.user_id === current_user.id
67
+ 実装方法としてはJavaScriptでやるというのが最適なのでしょうか?
163
- article.destroy
164
- redirect_to controller: "users", action: "show"
165
- end
166
- end
167
-
168
- # def images_destroy
169
- # # params[:album][:image_ids].each do |image_id|
170
- # # image = @album.images.find(image_id)
68
+ jQueryを少しかじった程度なのでいまいちイメージが湧きません。
171
- # # image.purge
172
- # # end
173
- # @images = @article.images
69
+ 参考記事等ございましたら紹介していただけると幸いです。
174
- # @images.purge
175
- # end
176
-
177
- private
178
-
179
- def move_to_index
180
- redirect_to root_path unless user_signed_in?
181
- end
182
-
183
- def set_article
184
- @article = Article.find(params[:id])
185
- end
186
-
187
- def article_params
188
- params.require(:article).permit(:title, :description, :body, images: []).merge(user_id: current_user.id)
189
- end
190
- end
191
- ```
192
- 他必要情報あれば随時更新します。
70
+ よろしくお願します。

2

該当ビューのイメージをコードに変更しました。

2019/12/08 16:17

投稿

HIRO76
HIRO76

スコア9

title CHANGED
File without changes
body CHANGED
@@ -15,9 +15,105 @@
15
15
  gem 'kaminari'(ページネーション用)
16
16
 
17
17
 
18
+ ```slim
18
- ![該当のビューになります](13ce0cde5bd906a4adb00c46bd420b75.png)
19
+ / #index.html.slim
19
20
 
21
+
22
+ / ヘッダーここから
23
+ .header-bg.sticky-top
24
+ .header.navbar
25
+ = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none"
26
+ ul.nav
27
+ - unless user_signed_in?
28
+ li.nav-item
29
+ = link_to "ログイン", new_user_session_path, class: "nav-link text-white"
30
+ li.nav-item
31
+ = link_to "新規登録", new_user_registration_path, class: "nav-link text-white"
32
+ - else
33
+ li.nav-item
34
+ = link_to "マイページ", user_path(current_user), class: "nav-link text-white"
35
+ li.nav-item
36
+ = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white"
37
+ / ヘッダーここまで
38
+
39
+
40
+ / コンテンツ ここから
41
+ .contents.d-flex.justify-content-end.vh-100
42
+ / leftcontents
43
+ .left-content.w-50
44
+ - @articles.each_with_index do |article, i|
45
+ .article.card.h-100 id="append_to"
46
+ - if article.images.count > 0
47
+ = image_tag article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm"
48
+ .article-description.card-body
49
+ h6.card-title.m-0
50
+ = article.title.truncate(10, omission: '…')
51
+ p.card-text.m-0
52
+ = article.user.nickname
53
+ p.card-text
54
+ = article.body.truncate(100, omission: '…')
55
+ = link_to "続きを読む", article_path(article), class: "btn btn-outline-dark rounded-pill float-right"
56
+ - break
57
+ / rightcontents
58
+ .right-content.w-50.overflow-auto.vh-100
59
+ - @articles.each do |article|
60
+ = link_to article_path(article), class: "text-dark text-decoration-none" do
61
+ .article-list.card.m-4.shadow-sm
62
+ .row
63
+ .article-list-img.col-4
64
+ - if article.images.count > 0
65
+ = image_tag article.images.first.variant(resize: "150x150").processed, class: "article-list-img"
66
+ .article-list-description.card-body
67
+ h5.card-title
68
+ = article.title
69
+ .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page"
70
+ = paginate(@articles)
71
+
72
+ .archive.m-5
73
+ h5 アーカイブ
74
+ ul.list-group.list-group-flush
75
+ = link_to "#", class: "text-dark text-decoration-none"
76
+ li.list-group-item 2019/10
77
+ = link_to "#", class: "text-dark text-decoration-none"
78
+ li.list-group-item 2019/9
79
+ = link_to "#", class: "text-dark text-decoration-none"
80
+ li.list-group-item 2019/8
81
+ = link_to "#", class: "text-dark text-decoration-none"
82
+ li.list-group-item 2019/7
83
+
84
+ .embed-responsive.embed-responsive-16by9.mb-5
85
+ iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0"
86
+
87
+ .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around
88
+ = link_to "#"
89
+ i.fab.fa-facebook-f.fa-lg.pt-4.text-muted
90
+ = link_to "#"
91
+ i.fab.fa-twitter.fa-lg.pt-4.text-muted
92
+ = link_to "#"
93
+ i.fab.fa-instagram.fa-lg.pt-4.text-muted
94
+ = link_to "#"
95
+ i.fab.fa-github.fa-lg.pt-4.text-muted
96
+ / コンテンツ ここまで
97
+
98
+
99
+ / フッターここから
100
+ .footer-bg
101
+ .footer.page-footer.font-small.pt-3.fixed-bottom
102
+ .container
103
+ ul.list-unstyled.list-inline.text-center.py-3.
104
+ li.list-inline-item.text-white
105
+ h5.mb-1.h5 enjoy fishing
106
+ li.list-inline-item.text-white
107
+ = link_to new_article_path do
108
+ .btn.btn-outline-light.btn-lg.rounded-pill 投稿する
109
+
110
+ .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright
111
+ / フッターここまで
112
+
113
+
20
114
  ```
115
+
116
+ ```ruby
21
117
  # articles.controller
22
118
 
23
119
  class ArticlesController < ApplicationController

1

該当ビュー、コントローラー追記しました。

2019/12/07 07:35

投稿

HIRO76
HIRO76

スコア9

title CHANGED
File without changes
body CHANGED
@@ -12,4 +12,85 @@
12
12
  ### 補足情報(FW/ツールのバージョンなど)
13
13
 
14
14
  Rails 5.2
15
- gem 'kaminari'(ページネーション用)
15
+ gem 'kaminari'(ページネーション用)
16
+
17
+
18
+ ![該当のビューになります](13ce0cde5bd906a4adb00c46bd420b75.png)
19
+
20
+ ```
21
+ # articles.controller
22
+
23
+ class ArticlesController < ApplicationController
24
+ before_action :set_article, only: [:show, :edit]
25
+ before_action :move_to_index, except: [:index, :show]
26
+
27
+ helper_method :images_destroy
28
+
29
+
30
+ def index
31
+ @articles = Article.includes(:user).order(created_at: :desc).page(params[:page]).per(10)
32
+ end
33
+
34
+ def show
35
+ end
36
+
37
+ def edit
38
+ @images = @article.images
39
+ end
40
+
41
+ def update
42
+ @article = Article.find(params[:id])
43
+ if @article.update(article_params)
44
+ redirect_to @article
45
+ else
46
+ render "edit"
47
+ end
48
+ end
49
+
50
+ def new
51
+ @article = Article.new
52
+ end
53
+
54
+ def create
55
+ # @article = Article.create(title: article_params[:title], description: article_params[:description], body: article_params[:body], images: article_params[images: []])
56
+ @article = Article.new(article_params)
57
+ if @article.save
58
+ redirect_to @article
59
+ else
60
+ render "new"
61
+ end
62
+ end
63
+
64
+ def destroy
65
+ article = Article.find(params[:id])
66
+ if article.user_id === current_user.id
67
+ article.destroy
68
+ redirect_to controller: "users", action: "show"
69
+ end
70
+ end
71
+
72
+ # def images_destroy
73
+ # # params[:album][:image_ids].each do |image_id|
74
+ # # image = @album.images.find(image_id)
75
+ # # image.purge
76
+ # # end
77
+ # @images = @article.images
78
+ # @images.purge
79
+ # end
80
+
81
+ private
82
+
83
+ def move_to_index
84
+ redirect_to root_path unless user_signed_in?
85
+ end
86
+
87
+ def set_article
88
+ @article = Article.find(params[:id])
89
+ end
90
+
91
+ def article_params
92
+ params.require(:article).permit(:title, :description, :body, images: []).merge(user_id: current_user.id)
93
+ end
94
+ end
95
+ ```
96
+ 他必要情報あれば随時更新いたします。