動画投稿ページでログイン状態とログアウト状態でレイアウトが崩れてしまう

Railsで動画投稿ページでサイドメニュー欄が崩れてしまいます

期待される状態

今の状態

これらを期待される状態にしたいです。

#問題のソースコード
動画一覧ページのHTML

HTML
1<div class="content-wrapper">
2    <div class="content-block">
3        <% @movies.each do |movie| %>
4        <div class="content">
5         <div class="user-about">
6             <div class="image">
7             <% if movie.user.image.attached? %>
8             <%= image_tag movie.user.image %>
9                <% else %>
10            <%= image_tag 'no.user.png' %>
11                <% end %>
12             </div>
13
14          <div class="profile">
15            <div class="name-history">
16                    <div class="name">
17                        <%= movie.user.nickname %>
18                    </div>
19                    <div class="mania-histry">
20                        <%= "趣味歴:#{movie.user.mania_histry}年" %>
21                    </div>
22             </div>
23             <div class="enjoy-point">
24             <%= "楽しいポイント#{movie.user.enjoy_point}"%>
25             </div>
26         </div>
27       </div>
28
29       <div class="text">
30                 <h2><%= truncate(movie.title, length:15) %></h2><%= link_to "コメントor続きをよむ", "/movies/#{movie.id}" %>
31                 <h3><%= truncate(movie.introduction, length:15) %></h3>
32                <video src=<%= rails_blob_path(movie.movie) %> , controls>
33        </div>
34        
35        <div class="action-menu">
36            <div id="movie_<%= movie.id %>">
37                <%= render 'movie', movie: movie %>
38            </div>
39                <% if user_signed_in?%>
40                    <div class='user-action'>
41                        <% if current_user.id == movie.user.id %>
42                            <%= link_to "編集", edit_movie_path(movie) %>
43                            <%= link_to "削除", movie_path(movie), method: :delete %>
44                        <% end %>
45                      </div>
46                  <% end %>
47                </div>
48              </div>
49            <% end %>
50          </div>
51            <div class="sidebar">
52                 <%= render 'shared/menu'%>
53            </div> 
54        </div> 
55      </div>
56

動画ページのCSS

CSS
1// Place all the styles related to the movies controller here.
2// They will automatically be included in application.css.
3// You can use Sass (SCSS) here: http://sass-lang.com/
4#movies-new,#movies-index{
5    .content-wrapper{
6        display: flex;
7        justify-content: space-between;
8      .content-block{
9          border: 2px solid #000;
10          padding: 20px;
11          width: 60%;
12      
13         .content{
14          border: 2px solid #000;
15          padding: 15px;
16          margin-bottom: 10px;
17           .user-about{
18            display: flex;
19      
20 
21          .profile{
22            margin-left: 10px;
23            
24            .name-history{
25              margin-bottom: 3px;
26                display: flex;
27                width: 100%;
28                .name{ 
29                  font-weight: bold;
30                 }
31               
32                  .mania-histry{
33                   margin-left: 20px;            
34                  }
35               }
36       
37            .enjoy-point{
38                width: 100%;
39                font-size: 13px;
40            }
41          }
42           
43          }     
44      }
45      }
46        .sidebar{
47         width: 20%;
48         border: 2px solid #000;
49         padding: 20px;
50      }
51      .box{
52          width: 100px;
53          height: 100px;
54          background-color: #000;
55          margin: 10px auto;
56      }
57    }
58}
59
60video{
61  max-width: 100%;
62}
63.text p{
64  margin: 0px;
65}
66
67.user-action{
68  margin-top: 18px;
69}
70
71#movies-show{
72  .content{
73    border: 2px solid #000;
74    padding: 15px;
75    margin-bottom: 10px;
76     .user-about{
77      display: flex;
78
79      .image{ 
80         width: 10%; 
81    }
82    
83    .profile{
84      margin-left: 10px;
85      
86      .name-history{
87        margin-bottom: 3px;
88          display: flex;
89          width: 100%;
90          .name{ 
91            font-weight: bold;
92           }
93         
94            .mania-histry{
95             margin-left: 20px;            
96            }
97         }
98 
99      .enjoy-point{
100          width: 100%;
101          font-size: 13px;
102      }
103    }
104}
105}
106}
107
108.comment-buttom{
109background-color: #333;
110color: #fff;
111padding: 5px;
112text-decoration: none;
113
114}
115
116h3{
117margin-bottom: 9px;
118}
119.submit-block{
120  display: flex;
121  align-items: center;
122  justify-content: center;
123  margin: 15px 0;
124  .button {
125      display       : inline-block;
126      border-radius : 5%;          /* 角丸       */
127      font-size     : 18pt;        /* 文字サイズ */
128      text-align    : center;      /* 文字位置   */
129      cursor        : pointer;     /* カーソル   */
130      padding       : 12px 12px;   /* 余白       */
131      background    : #333;     /* 背景色     */
132      color         : #ffffff;     /* 文字色     */
133      line-height   : 1em;         /* 1行の高さ  */
134      transition    : .3s;         /* なめらか変化 */
135      box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
136      border        : 2px solid #333;    /* 枠の指定 */
137    }
138    .button:hover {
139      box-shadow    : none;        /* カーソル時の影消去 */
140      color         : #333;     /* 背景色     */
141      background    : #ffffff;     /* 文字色     */
142    }
143}
144

今回崩れてしまっているサイドバーのHTML

HTML
1<div id="menu">
2      <div class="menu-link">
3        <ul id ='nav'>
4        <%if user_signed_in?%>
5            <li>
6               <%= link_to 'つぶやき投稿', new_post_path(@post) %>
7            </li>
8            
9            <li>
10            <%= link_to 'つぶやき一覧', root_path %>
11            </li>
12
13            <li>    
14            <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
15
16            </li>
17            
18            <li>
19            <%= link_to '動画投稿', new_movie_path %>
20            </li>
21
22            <li>
23            <%= link_to '動画一覧', movies_path %>
24            </li>
25
26            <li>
27            <%= link_to 'ブログ一覧', blogs_path %>
28            </li>
29
30            <li>
31            <%= link_to 'ブログ投稿', new_blog_path %>
32            </li>
33            
34            <% else %>
35            
36            <li>    
37            <%= link_to 'ログイン', new_user_session_path %>
38        </li>
39
40        <li>    
41            <%= link_to '新規登録', new_user_registration_path %>
42        </li>
43
44        <li>
45          <%= link_to '動画一覧', movies_path %>
46        </li>
47
48        <li>
49        <%= link_to 'ブログ一覧', blogs_path %>
50      </li>
51            <% end %>
52            
53
54            
55        </ul>
56    </div>
57  </div>
58

#やってみたこと

HTMLのcontent-blockの中に

   <div class="sidebar">
        <%= render 'shared/menu'%>
    </div>

の記述を入れてみたところログイン中は治ったのですが、ログアウトしてしまうと以上のように横ではなく縦の場所に並んでしまいます。
なぜなのか教えていただければ幸いです

K_3578

2021/04/12 02:46

Rails使ったことないので当てずっぽうですけど、ログイン前後で表示が変わるって事はログイン時のみメニューみたいなのをサイドバーの位置に移動させるようなコードになってるんじゃないかなと

kawasaki4563

2021/04/12 03:47

何がしたかったのか不明瞭だったので修正しました。

K_3578

2021/04/12 03:51

この画像だとログイン時と大分表示違うように見えますけどそれでいいんですかね。まぁ、私はRuby詳しくないので、あるとしたらログイン前後の処理でミスってそうだなーぐらいしか言えないですね。

kawasaki4563

2021/04/12 03:52

ログインしているか否かでメニューの数が違うのは大丈夫です、ただ位置まで変わってしまうのはだめなので修正したいという内容の質問です。わかりづらくてすいません

K_3578

2021/04/12 03:54

画像だとログイン、新規登録･･･みたいなメニューが2つに増えてますけど

kawasaki4563

2021/04/12 04:00

ログイン状態であろうがログアウト状態であろうがメニューの位置が変わってしまうのはだめで、メニューの数が変わるのは大丈夫です。

K_3578

2021/04/12 04:58 編集

ん？サイドの位置にメニューが来てれば下にもう一つ同じメニューが合っても良いんですか？

kawasaki4563

2021/04/12 05:03

それはだめです

K_3578

2021/04/12 05:05

提示の画像ではそのように見えますが･･･。

kawasaki4563

2021/04/12 05:19

了解です修正しました

K_3578

2021/04/12 07:37

この質問とは関係ないけど一個前の質問どうなったんですかね、解決したなら自己解決して欲しいですが

kawasaki4563

2021/04/12 08:51

はい今日解決したので今から自己解決にしに行きます

行動規範の内容に同意します

回答1件

ベストアンサー

ログインしているかの条件の内側に<div>があるのに、その条件より外側に</div>があるのが原因ではないかと思います。
（ログイン時は<div>～</div>が正しく組み合わせられているが、ログアウト時は</div>が一つ余分にある状態）

html
1<!-- 誤 -->
2        <div class="action-menu">
3          <div id="blog_<%= blog.id %>">
4            <%= render 'blog', blog: blog %>
5          </div>
6
7          <%if user_signed_in?%><!-- divより外にifがあるのに -->
8            <div class='user-action'>
9              <% if current_user.id == blog.user.id && user_signed_in? %>
10                <%= link_to "編集", edit_blog_path(blog) %>
11                <%= link_to "削除", blog_path(blog), method: :delete %>
12              <% end %>
13            <% end %><!-- divより内にendがあるのが原因？ -->
14          </div>
15        </div>

↓おそらくこう

html
1        <div class="action-menu">
2          <div id="blog_<%= blog.id %>">
3            <%= render 'blog', blog: blog %>
4          </div>
5
6          <%if user_signed_in?%>
7            <div class='user-action'>
8              <% if current_user.id == blog.user.id && user_signed_in? %>
9                <%= link_to "編集", edit_blog_path(blog) %>
10                <%= link_to "削除", blog_path(blog), method: :delete %>
11              <% end %>
12            </div>
13          <% end %>
14        </div>

サイドバーも</li>が一つ多いかも

html
1        <li>
2          <%= link_to '動画一覧', movies_path %>
3        </li>
4
5      </li><!-- これも余計では -->
6      <li>
7        <%= link_to 'ブログ一覧', blogs_path %>
8      </li>
9
10      <li>
11        <%= link_to 'ブログ投稿', new_blog_path %>
12      </li>
13
14    <% else %>
15
16      <li>
17        <%= link_to 'ログイン', new_user_session_path %>
18      </li>
19
20      <li>

投稿2021/04/12 07:35

dit.

総合スコア3235

kawasaki4563

2021/04/12 10:24 編集

ログアウトしているときは期待道理なのですがログインしているときは崩れてしまっていますやってみたのですが結果は変わりませんでした回答ありがとうございます

dit.

2021/04/13 01:18

一晩明けてみたら質問中のコードが大幅に変わっていたので驚いています。ログイン/ログアウトの差についての質問であり私もそれに関係しそうな部分しか確認していなかったため、おそらくこの回答だけでは不十分です。タグの開始・終了の組み合わせと、if,else,endの組み合わせがきちんと入子状になっているか確認してみてください。

行動規範の内容に同意します