v.4.2.0（管理テーマ切り替え機能実装）以降のバージョンに対応

GUSSAN-BEEDAN · Apr 6, 2022 · 3fac5cb · 3fac5cb
1 parent 988acda
commit 3fac5cb
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -14,8 +14,9 @@ admin-third管理テーマについては、基本的にデフォルトのstyle.
 - スマホ対応 max-width:499px を追加。レイアウトが崩れない最小表示幅を350pxとして設計。
 
 対応バージョンは、baserCMS4系のみ。
-- v.4.5.0以降の動作は確認済みです。管理画面で個人的に利用していない機能のUIなど、デバッグが行き届いていませんがよければ試してみてください。
-v.4.4.8以前のバージョンでは、cssの内容が現状とはだいぶ違っていて（特にtoolbar.cssのfontawesomeの扱いなど）現状では表示が相当乱れてしまいます。今後、下位バージョンも対応できるように改修したいと思っています。
+- ~~v.4.5.0以降の動作は確認済みです。管理画面で個人的に利用していない機能のUIなど、デバッグが行き届いていませんがよければ試してみてください。~~
+~~v.4.4.8以前のバージョンでは、cssの内容が現状とはだいぶ違っていて（特にtoolbar.cssのfontawesomeの扱いなど）現状では表示が相当乱れてしまいます。今後、下位バージョンも対応できるように改修したいと思っています。~~
+- v.4.2.0（管理テーマ切り替え機能が初めて実装された）以降のバージョンに対応しました。管理画面で個人的に利用していない機能のUIなど、デバッグが行き届いていませんがよければ試してみてください。
 - なお、v.4.1.8以前は、管理テーマ切り替え機能自体が未実装ですが、admin-secondのレスポンシブ化のみ動作すると思います。
 
 
@@ -26,6 +27,11 @@ v.4.4.8以前のバージョンでは、cssの内容が現状とはだいぶ違
 4. admin-third管理テーマをレスポンシブ化させる場合は、有効にする にチェックを入れて保存してください。
 
 
+## アップデート
+1. 圧縮ファイルを解凍後、生成されたフォルダ名 AdminMakeResponsive［-masterやバージョン名］を AdminMakeResponsive にリネームし、既存の/app/Plugin/AdminMakeResponsive を上書きします。
+2. 管理画面のプラグイン管理に入り、表示されている AdminMakeResponsive プラグイン をアップデートして下さい。
+
+
 ## ご注意
 - 管理画面の改造などをされている場合は、画面が崩れる可能性があります。
 画面のレイアウトが崩れるなど表示かおかしい場合は、baserCMSおよびブラウザのキャッシュをクリアするなどしてみてください。

diff --git a/VERSION.txt b/VERSION.txt
@@ -1,7 +1,15 @@
-1.0.1
+1.0.2
+
 
 // Release Notes //
 
+[2022-04-06] AdminMakeResponsive-1.0.2
+- v.4.2.0（管理テーマ切り替え機能実装）以降のバージョンに対応。ユーザー画面表示時のadminツールバー表示の乱れを修正。
+- 各種一覧リストの下部、ページ移動のインデックスや表示件数変更のインデックスなどの表示エリアを左寄りにレイアウト変更など。
+- コメント一覧等で、コメントの文字数が多い場合、リストが縦に長くなってしまうのを抑制。
+- サイドバーのお気に入り内のタッチアクションを有効に変更。
+- クレジット画面のレイアウトを修正。
+
 [2022-04-03] AdminMakeResponsive-1.0.1
 - 配列のarray()を[]に変更
 - init.phpのinitDb修正

diff --git a/webroot/css/admin/addstyle_3rd.css b/webroot/css/admin/addstyle_3rd.css
@@ -2,7 +2,8 @@
 /**
  * admin-third管理テーマレスポンシブ対応
  */
-
+
+
 /* 意図しないオーバーフローを調整、等（768px以上を意図する） */
 body {
   min-width: initial;
@@ -62,22 +63,49 @@ body {
   flex: 1;
 }
 
+/* クレジット画面のレイアウトの修正 */
+#CreditScrollerInner {
+  width: auto;
+}
+#CreditScroller ul {
+  padding-left: 0;
+}
+
 /* コンテンツボックスを最大幅表示 */
 .bca-main__contents {
   margin: 0;
 }
 
+/* コンテンツ一覧等のパネルボックスのレイアウト調整 */
+.bca-panel-box__inline-fields-separator {
+  width: 2em;
+  background: none;
+  margin: 0;
+}
+.bca-panel-box__inline-fields-item {
+  align-items: start;
+  flex-direction: column;
+  margin-bottom: .5em;
+}
+.bca-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
 /* 各種リスト等のオーバーフローの横スクロール対応 */
-/* コメント一覧等で、コメントの文字数が多い場合、リストが縦に長くなってしまうのを防止。*/
 .bca-data-list {
-  width: max-content;
-  max-width: 900px;
   overflow-x: scroll;
 }
 .jstree-proton {
   overflow-x: scroll;
 }
 
+/* コメント一覧等で、コメントの文字数が多い場合、リストが縦に長くなってしまうのを防止。*/
+.bca-table-listup {
+  width: max-content;
+  max-width: 900px;
+}
+
 /* ウイジェット編集画面のレイアウト調整 */ 
 .bca-main__contents {
   overflow-x: scroll;
@@ -159,7 +187,7 @@ body {
 .bca-toolbar__tools-button a:hover {
   background: none !important;
 }
-/* 改良 */
+/* v4.4.8以前のバージョンに対応 */
 .bca-toolbar__tools-button-publish a::before {
   content: "\f06e";
   font-family: 'Font Awesome 5 Free';
@@ -178,17 +206,30 @@ height: initial !important;
   transition: all 0.5s ease;
 }
 
-/* 改良　ツールバーのロゴレイアウト調整 */
+/* ツールバーのロゴ周りレイアウト調整等 */
 .bca-toolbar .bca-toolbar__logo {
   padding: 0 12px 0 12px !important;
 }
+.bca-toolbar .bca-toolbar__logo-symbol {
+  border: none !important;
+  padding: 0 !important;
+  margin-right: 0 !important;
+}
 
-/* 改良　固定ページ編集　関連コンテンツ横スクロール */
+/* ツールバーのロゴテキストを非表示 */
+.bca-toolbar .bca-toolbar__logo-text {
+  display: none !important;
+}
+.bca-toolbar .bca-toolbar__logo-symbol {
+  border: none !important;
+}
+
+/* 固定ページ編集　関連コンテンツ横スクロール */
 .bca-collapse {
   overflow-x: scroll;
 }
 
-/* サイドバーお気に入り内のタッチアクション有効 */
+/* サイドメニューお気に入り内のタッチアクション有効 */
 .bca-nav-favorite-list-item {
   touch-action: initial !important;
 }
@@ -411,6 +452,26 @@ body.open {
 
 
 @media screen and (max-width: 499px) {
+/* 各種編集画面のアクションボタンレイアウト調整 */
+.bca-actions__main {
+  text-align: center;
+}
+
+/* テーマ設定レイアウト調整 */
+.bca-form-table__group {
+  display: flex;
+  flex-direction: column;
+}
+/* テーマ設定内サムネイル幅調整 */
+.photo {
+  max-width: 100%;
+}
+
+/* コンテンツ一覧等のパネルボックスのレイアウト調整 */
+.bca-radio-group {
+  display: block;
+}
+
 /* バルーンチップのウィンドウ幅調整（768px以上を含む） */
 .bt-content {
   max-width: 330px !important;
@@ -426,7 +487,7 @@ body.open {
   max-width: 330px !important;
 }
 .cke_dialog_contents_body {
-  max-width: 330px !important;
+  max-width: 310px !important;
   max-height: 400px !important;
 }
 .bca-search__input-list .bca-textbox {
@@ -527,12 +588,12 @@ margin: .5em 0;
   padding: 2px 12px !important;
 }
 
-/* ツールバーのロゴテキストを非表示 */
-.bca-toolbar .bca-toolbar__logo-text {
-  display: none !important;
+/* 追加 ロゴ周りマージン等の調整 */
+.bca-toolbar .bca-toolbar__logo {
+  padding: 0 12px 0 12px !important;
 }
-.bca-toolbar .bca-toolbar__logo-symbol {
-  border: none !important;
+.bca-toolbar__tools-edit a {
+  margin: 8px 0;
 }
 
 /* ツールバーの開発モード表示の簡素化 */
@@ -550,11 +611,4 @@ margin: .5em 0;
   padding: 3px 8px;
   border-radius: 11px;
 }
-
-/* ツールバーのシンボルロゴのマージン調整 */
-.bca-toolbar .bca-toolbar__logo-symbol {
-  border: none !important;
-  padding: 0 !important;
-  margin-right: 0 !important;
-}
 }
diff --git a/webroot/css/admin/addstyle_3rd_toolbar.css b/webroot/css/admin/addstyle_3rd_toolbar.css
@@ -13,6 +13,7 @@ body {
   min-height: calc(100vh - 40px) !important;
 }
 
+
 @media screen and (max-width: 768px) {
 /* gridレイアウトをflexレイアウトに変更 */
 .bca-app {
@@ -53,29 +54,23 @@ body {
 .bca-toolbar__tools-mode span {
   padding: 3px 8px !important;
 }
-
-/* ツールバーの編集する表示のアイコン化 */
-.bca-toolbar__tools-button a {
-  font-size: 0;
-  background: none !important;
-  transition: none;
-}
-.bca-toolbar__tools-button a:hover {
-  background: none !important;
-}
-.bca-toolbar__tools-button-edit a::before {
-  padding: 4px;
-  font-size: 10px !important;
-  color: #333;
-  background-color: #fff !important;
-  border-radius: 50%;
+
+/* ツールバーのロゴテキストを非表示 */
+.bca-toolbar .bca-toolbar__logo-text {
+  display: none !important;
 }
-.bca-toolbar__tools-button-edit a:hover::before {
-  background-color: #ccc !important;
-  transition: all 0.5s ease;
+.bca-toolbar .bca-toolbar__logo-symbol {
+  border: none !important;
 }
 
-/* ツールバーの「確認する」表示のアイコン化 */
+/* ツールバーのシンボルロゴのマージン調整 */
+.bca-toolbar .bca-toolbar__logo-symbol {
+  border: none !important;
+  padding: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* ツールバーの「編集する」表示のアイコン化 */
 .bca-toolbar__tools-button a {
   font-size: 0;
   background: none !important;
@@ -84,14 +79,14 @@ body {
 .bca-toolbar__tools-button a:hover {
   background: none !important;
 }
-.bca-toolbar__tools-button-publish a::before {
+.bca-toolbar__tools-button-edit a::before {
   padding: 4px;
   font-size: 10px !important;
   color: #333;
   background-color: #fff !important;
   border-radius: 50%;
 }
-.bca-toolbar__tools-button-publish a:hover::before {
+.bca-toolbar__tools-button-edit a:hover::before {
   background-color: #ccc !important;
   transition: all 0.5s ease;
 }
@@ -122,19 +117,12 @@ body {
   padding: 2px 12px !important;
 }
 
-/* ツールバーのロゴテキストを非表示 */
-.bca-toolbar .bca-toolbar__logo-text {
-  display: none !important;
-}
-.bca-toolbar .bca-toolbar__logo-symbol {
-  border: none !important;
+/* ツールバーのロゴ周りマージン等の調整 */
+.bca-toolbar .bca-toolbar__logo {
+  padding: 0 12px 0 12px !important;
 }
-
-/* ツールバーのシンボルロゴのマージン調整 */
-.bca-toolbar .bca-toolbar__logo-symbol {
-  border: none !important;
-  padding: 0 !important;
-  margin-right: 0 !important;
+.bca-toolbar__tools-edit a {
+  margin: 8px 0;
 }
 
 /* ツールバーの開発モード表示の簡素化 */