スマートフォンレイアウトで、サイドのレイアウトにブロックを配置するとフロント画面に表示されない

[okazy]

概要(Overview)

スマートフォンレイアウトで、サイドのレイアウトにブロックを配置するとフロント画面に表示されない。
下記の59行目で display: none; に設定されているために非表示になっている。
こちらを消すとブロックが表示されるが、表示が崩れてしまう状態となる。

ec-cube/html/template/default/assets/scss/project/_11.2.header.scss

Lines 57 to 64 in ee0c1ab

	& &__left,
	& &__right {
	display: none;
	@include media_desktop() {
	display: block;
	width: 25%;
	}
	}

期待する内容(Expect) or 要望 (Requirement)

こちらは正しい挙動でしょうか？
どのような意図で非表示となっているのか知りたいです。
レスポンシブデザインなので、メインコンテンツの上か下に表示させるのが良いのではと思いました。
ご意見いただけますでしょうか。

再現手順(Procedure)

• レイアウト管理にて #side_left or #side_right にブロックを配置する。
• スマートフォンでフロント画面を表示

環境 (environment)

• EC-CUBE: 4.0.2
• PHP: x.x.x
• DB:
  • PostgreSQL x.x.x
  • MySQL x.x.x

関連情報 (Ref)

[ghost]

@okazy さん

再現手順に記載されていた手順で任意のブロックを配置し
該当のCSSの記述のdisplay: none;を消すとレイアウトが崩れたことを確認いたしました。

修正方法としましては一部のCSSの記述をdesktopの時だけに適用させることで
desktopや他のレイアウトにできるだけ影響が出ることなく表示ができるかと思います。

具体的には

display: flex;とflex-wrap: nowrap;はdesktopの時だけ適用してあげる

ec-cube/html/template/default/assets/scss/project/_11.2.header.scss

Lines 33 to 41 in ee0c1ab

	& &__contents {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	max-width: 1150px;
	display: flex;
	flex-wrap: nowrap;
	}

を

 & &__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1150px;
    @include media_desktop() {
      display: flex;
      flex-wrap: nowrap;
    }

  }

スマホ用の display: none; は削除

ec-cube/html/template/default/assets/scss/project/_11.2.header.scss

Lines 57 to 64 in ee0c1ab

	& &__left,
	& &__right {
	display: none;
	@include media_desktop() {
	display: block;
	width: 25%;
	}
	}

を

& &__left,
  & &__right {
    @include media_desktop() {
      display: block;
      width: 25%;
    }
  }

また、以下の期待する内容(Expect) or 要望 (Requirement)について

こちらは正しい挙動でしょうか？
どのような意図で非表示となっているのか知りたいです。
レスポンシブデザインなので、メインコンテンツの上か下に表示させるのが良いのではと思いました。
ご意見いただけますでしょうか。

個人的な見解としましては、2カラム、3カラムの場合のサイドバーはカテゴリやバナーが入ることを想定されていたのではないでしょうか？
スマホの場合デザインによってはもちろん違いますが、まだメニューバーの中に入れることが多い傾向にあるので重複してしまったコンテンツを非表示としたのではないかと考えます。

したがって想定したターゲットユーザーさんができるだけHTMLやCSSを触らないように想定されているのではないでしょうか。

[chihiro-adachi]

個人的な見解としましては、2カラム、3カラムの場合のサイドバーはカテゴリやバナーが入ることを想定されていたのではないでしょうか？
スマホの場合デザインによってはもちろん違いますが、まだメニューバーの中に入れることが多い傾> 向にあるので重複してしまったコンテンツを非表示としたのではないかと考えます。

はい、そのとおりです。
サイドカラムに表示しているコンテンツは、スマホサイズでは非表示としています。もしハンバーガーメニューに配置したい場合は、レイアウトの#drawerセクションを使っていただく形になります

[okazy]

ありがとうございます！
現状の仕様と意図を理解しました。

こちらの説明を、ツールチップなど埋め込めたらと思ったのですが、EC-CUBE本体というよりテンプレートの仕様となり、管理画面にツールチップを埋め込むと逆に分かりにくくなるかもしれませんね。。。

疑問は解決しましたのでこちらのissueはクローズとさせていただきます。