投稿リストスライダーブロックを追加

drill-lancer commented 1 month ago

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

https://github.com/vektor-inc/vk-blocks-pro/issues/1877

どういう変更をしたか？

投稿リストスライダーブロックを追加しました
編集画面ではうまく Swiper が動作しなかったので Infomation を追加しました。

スクリーンショットまたは動画

変更前 Before

変更後 After

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

[x] 複数の意図の変更（機能の不具合修正 + 別の機能追加など）を含んでいないか？
[x] Files changed (変更ファイル)の内容は目視で確認したか？
[x] readme.txt に変更内容は書いたか？
[x] 本当にちゃんと確認をしたか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。

[x] 書けそうなテストは書いたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

編集画面・公開画面で動作を確認しました。

レビュワーに回す前の確認事項

[x] 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー確認方法・確認内容など

編集画面・公開画面で動作を確認お願いします。

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

プルしたか？
ビルドしたか？
ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
npm install したか？
composer install したか？
キャッシュをクリアして確認したか？

mtdkei commented 1 month ago

こちらのCSS、調整してみます。

mtdkei commented 1 month ago

CSSを調整しました。スライダーブロックと共通のSCSSはcommon.scssに移してみました。こちらOpenします。

goutetsuguma commented 1 month ago

わたしの環境のせいかもしれないのですが（わたしのローカル、プッシュができなくて何かがおかしいようです、、）フロント画面で投稿が表示できなようでした。

どなたか別の方ご確認いただけますでしょうか？

goutetsuguma commented 1 month ago

@drill-lancer @mtdkei

すみません、、先のコメントでプッシュできないと言いましたができました、、iconをプッシュしました。

確認をしようと、 npm install 、composer install、npm run build をしました。固定ページにpost list slide ブロックを設置、投稿リストは投稿にチェックを入れて、保存してフロント画面を確認すると添付画像のように中身が見えていないようですわたしの見落としもあると思います。なにか設定箇所などありますでしょうか

スクリーンショット 2024-10-28 15 30 10

mtdkei commented 1 month ago

@goutetsuguma ありがとうございます。CSS調整前の状態もそんな感じでした。今確認したところ、そのような状態になる時とならないときがありました。ちょっと原因が不明ですが、探りつつ作業してみます。

mtdkei commented 1 month ago

@goutetsuguma Register Styleが異なっていたようなのでそれを直したら見えるようになりました。お手数ですが今一度ご確認いただけたらと思います。

goutetsuguma commented 1 month ago

@drill-lancer @mtdkei

実装ありがとうございます！

【相談】「Please check the actual behavior on the live site.」の注意書きがサイドの設定メニューに表示されますが、設定画面上で設定を進めていくと、スクロールして見えなくなるため、ユーザーが気づきにくいかもしれないと思いました。もし可能であればプレビュー画面の上か下あたりに表示できると気づきやすいかと思いましたがいかがでしょうか。無茶を言っていたらすみません！皆さんのご意見もお伺いしたいです。

▼イメージ画像ですスクリーンショット-2024-10-28-20 13 08

Lightningテーマで確認していますが、ブロックを「全幅」・「幅広」にすると編集画面、フロント画面で左にズレてしまうようでしたが治せそうでしょうか。わたしの環境や設定の問題でしたらすみません！

▼全幅時の画像ですスクリーンショット 2024-10-28 21 38 44

まだ動作確認中ですので追記するかもしれませんｍｍ

mtdkei commented 1 month ago

@goutetsuguma ご確認いただきありがとうございます。全幅、幅広の件はCSSの件なのでこちらで確認しました。スライダーブロックと比較してみたところ、全幅、幅広の調整はLightning側で調整されているようでした。

そのため、テーマ側での修正が必要そうです。 https://github.com/vektor-inc/lightning/blob/074986c5de0de61c1ed19317de3041a757b5da76/_g3/assets/_scss/block/_block_width.scss#L11

X-T9では全幅はこのような感じでした。

「Please check the actual behavior on the live site.」の注意書きが画面上にあるとよりわかりやすそうですね！

goutetsuguma commented 1 month ago

@drill-lancer @mtdkei

動作確認をしました。気になる箇所と相談部分がありましたので追記します。

動作確認

フェードが効かないかもしれません（使用頻度は低そうです）
ページネーションの種類を「スライドの枚数」にした場合に投稿と若干被るときがあるので、「標準」の時のように、できれば被らないようにすることはできますか。
「テキスト1カラム」の時にタイトル文字が.swiper-slide p に打ち消されているようでしたので、.postListText_title の14pxが適応されるようにするとバランスが良さそうです。

相談

「テキスト1カラム」の場合、1件でスライドするので下のボーダーのデザインがが不要かもしれないと思いました（テキスト1カラムにすると設定項目からアイテムの複数表示設定が消えるのでおそらくスライドするのは1件のみになる）
投稿リストが必ず入るので高さの設定はいらないかもしれないと思いました（高さの設定も効いていないかもしれないので取ってしまっても良いかも）

@mtdkei

スライダーブロックと比較してみたところ、全幅、幅広の調整はLightning側で調整されているようでした

全幅・幅広の件はテーマ側とのことで承知しました。調査ありがとうございます！

mtdkei commented 1 month ago

@goutetsuguma (CC: @drill-lancer ) ご確認いただきありがとうございます。ご指摘いただいた以下の内容はCSSで調整できたので調整してみました。

ページネーションの種類を「スライドの枚数」にした場合に投稿と若干被るときがあるので、「標準」の時のように、できれば被らないようにすることはできますか。

「テキスト1カラム」の時にタイトル文字が.swiper-slide p に打ち消されているようでしたので、.postListText_title の14pxが適応されるようにするとバランスが良さそうです。

「テキスト1カラム」の場合、1件でスライドするので下のボーダーのデザインがが不要かもしれないと思いました（テキスト1カラムにすると設定項目からアイテムの複数表示設定が消えるのでおそらくスライドするのは1件のみになる）

goutetsuguma commented 4 weeks ago

@mtdkei @drill-lancer

調整ありがとうございます！アラートはプレビューの上に移動してくださったのですね。個人的にはこちらの方が見落としがなくて良いかと思いました。あと少しcssを微調整しました。

あとは、以下の2点が効いていないかもしれません。（わたしの環境の問題でしたらすみません）「高さ」に関しては設定そのものが不要かもしれないと感じていますが、もしかすると、この場合で必要そうとのご意見もありそうですので、一旦 2人目確認待ちにしましょうか？？

フェードが効かないかもしれません（使用頻度は低そうです）
投稿リストが必ず入るので高さの設定はいらないかもしれないと思いました（高さの設定も効いていないかもしれないので取ってしまっても良いかも）

高さの設定が必要なのかどうかのご意見もお伺いしたいので、いったん 2人目確認待ちにしておきます🙇

drill-lancer commented 4 weeks ago

@goutetsuguma フェードと高さについて調整しました。

goutetsuguma commented 4 weeks ago

@drill-lancer

調整ありがとうございます！フェードできるようになることを確認しました。「高さ」設定は外していただいたようで、こちらの方が変な迷いがなく使いやすいと感じました！

すみません、あと以下気になりました点です。お手隙の時にご確認いただけますとうれしいです。

動作確認

「スライド設定」　> 「ナビゲーションの位置」の「非表示」が効いていないかもしれないです。（表示されてしまう）

相談 / 機能追加要望

表示タイプが以下の設定でフェードにした場合、背景色がないため、フェードするときにテキストが透けて重なってしまいます。　- 表示タイプ：テキスト1カラム or カード（線なし）or メディア　　- スライド設定 > エフェクト：フェード　提案ですが、VK スライダーのスライダーアイテム設定のように、スライドアイテムの背景色の設定（背景画像の設定は不要）を追加するのはいかがでしょうか。（背景色を白などで設定してもらえれば、透けなくなるため）他に良さそうな方法があればそちらで良いと思います！ご検討ください

▼フェードで文字が重なってしまう

▼設定画面のイメージ スクリーンショット-2024-10-31-11 12 54

drill-lancer commented 4 weeks ago

@goutetsuguma ページネーションとナビゲーションの調整してみました。

goutetsuguma commented 4 weeks ago

@drill-lancer 「ナビゲーションの位置」の「非表示」が効いていることを確認できました！ありがとうございます！

少し相談です。できるかどうかの相談なのですが、「ナビゲーションの位置」を「非表示」にした時に、リストスライダーブロックの一番親になる div (vk_post_list_slider swiper vk_swiper などのクラス名があるdiv ) に何らかの追加クラスを付与することはできますか？「ナビゲーションの位置」が「非表示」になった際に、CSSでのカスタマイズがしたいと思い、お聞きしました。

もし難しい場合や複雑な仕組みになりそうな場合は、このままで大丈夫です。

ご確認よろしくお願いします。

drill-lancer commented 3 weeks ago

@goutetsuguma 背景とクラス名について調整してみました。

goutetsuguma commented 3 weeks ago

背景とクラス名、ありがとうございます！！すごく良い感じだと思いました！！確認しまして、OKでしたので2人目確認待ちにします。

vektor-inc / vk-blocks-pro