2024年1月29日のMonday's Tipにて、ファセット検索のページの左にある検索条件（ファセット）を表示するパネルを、ドロワーのように表示と非表示を切り替える実装を紹介しています。
Monday's Tip for Oracle APEX
— Louis Moreaux (@moreaux_louis) January 29, 2024
Some time ago, I needed to save space in a faceted search page to display more columns in the report while keeping a large filter area.
Here's the result, read the thread to find out how 👇#orclAPEX #CSS
1/5 pic.twitter.com/0C3yrU9hOx
Xのポストを読んで実装しようとしたのですがうまくいかず、実装サンプルを参照してやっとXのポストの英語の説明が理解できました。
サンプルのアプリケーションのリンクは以下です。貼り付けるCSSコードは以下のアプリケーションよりコピペします。
サンプル・データセットのEMPをインストールすると作成できるアプリケーションを使って、少々、説明を補足しようと思います。ファセット検索のページはページ番号３に作成されています。
3番目のポストで作成しているリージョンFilterの設定です。
タイプが静的コンテンツのリージョンをLeft Columnの最上位に配置しています。外観のテンプレートとしてBlank with Attributes (No Grid)を選択し、余計な装飾を除いています。
ソースのHTMLコードに以下を記述します。fa-filterはフィルタのアイコン、fs-filter-iconクラスは、HTMLコードに記述しているspan要素を垂直方向に表示するためのCSSクラスです。ページに記述するCSSに、その定義が含まれています。
<span class="fa fa-filter fs-filter-icon">Filters</span>
リージョンの静的IDとしてtitle-regを設定しています。
後はサンプル・プログラムよりCSSのコードをコピーして、ページ・プロパティのCSSのインラインに記述します。
以上で実装完了です。
Lous Moreauxさんは、２番目のポストで「左側のパネルの幅はCSS変数の--ut-body-sidebar-widthで決められていることを覚えておいて。」と言っています。
この値は、ページごとに調整できます。
左側のパネルが閉じているときは、:root（ルート要素）で設定されている--ut-body-sidebar-widthの値が適用されます。今回の例では2.5emです。
左側のパネルが開いたときは、div#t_Body_side:hoverで設定されている--ut-body-sidebar-widthの値が適用されます。今回の例では25emです。
特に左側のパネルが開いた時の横幅は25emだと広すぎることがありそうなので、ファセットの選択肢の長さに合わせて調整するとよいと思います。
いいねと思ったら、リアクションはLouis MoreauxさんのXのポストにお願いします。
完
