style: update (#46)

pingcap-inc · Nov 25, 2024 · d7e25e0 · d7e25e0
1 parent 7aac882
commit d7e25e0
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 5 deletions.
diff --git a/pingcap-jp/acf/acf-banner.php b/pingcap-jp/acf/acf-banner.php
@@ -621,6 +621,25 @@
 			'readonly' => 0,
 			'disabled' => 0,
 		),
+		array(
+			'key' => 'field_' . $acf_group . '_side_image_align_center',
+			'label' => 'Center the image inside the container',
+			'name' => $acf_group . '_side_image_align_center',
+			'type' => 'true_false',
+			'instructions' => '',
+			'required' => 0,
+			'conditional_logic' => 0,
+			'wrapper' => array(
+				'width' => '50',
+				'class' => '',
+				'id' => '',
+			),
+			'message' => '',
+			'ui' => 1,
+			'ui_on_text' => 'Yes',
+			'ui_off_text' => 'No',
+			'default_value' => 0,
+		),
 
 		/**
 		 * Tab: Side Form

diff --git a/pingcap-jp/css/blocks/icon-grid.scss b/pingcap-jp/css/blocks/icon-grid.scss
@@ -4,7 +4,6 @@
 	}
 
 	&__item {
-		text-align: center;
 		h5 {
 			color: var(--color-blue-dark);
 		}

diff --git a/pingcap-jp/css/components/banners/banner-default.scss b/pingcap-jp/css/components/banners/banner-default.scss
@@ -252,6 +252,11 @@
       @include media-min($large) {
         right: -62px;
       }
+      &--center {
+        @include media-min($large) {
+          right: 62PX;
+        }
+      }
     }
   }
 

diff --git a/pingcap-jp/css/templates/summary.scss b/pingcap-jp/css/templates/summary.scss
@@ -179,6 +179,10 @@
             color: #000;
             width: max-content;
         }
+        .tip{
+            color: #fff;
+            margin-top: 16px;
+        }
     }
     &__carousel {
         width: 100%;

diff --git a/pingcap-jp/grav-blocks/case/block.php b/pingcap-jp/grav-blocks/case/block.php
@@ -31,7 +31,7 @@
                     <?php Images::safe_image_output($image); ?>
                     <div class="case-card__title"><?php echo  $title; ?></div>
                     <p><?php echo  $desc; ?></p>
-                    <span class="button-link">Read More<i class="button__arrow"></i></span>
+                    <span class="button-link">詳細を見る<i class="button__arrow"></i></span>
                 </a>
             </div>
         <?php } ?>

diff --git a/pingcap-jp/inc/PingCAP/Components/Banners/BannerDefault.php b/pingcap-jp/inc/PingCAP/Components/Banners/BannerDefault.php
@@ -133,6 +133,14 @@ class BannerDefault implements IComponent
 	 */
 	public bool $side_image_pull_up = false;
 
+	/**
+	 * Flag indicating that the side image should be center
+	 * on large displays
+	 *
+	 * @var boolean
+	 */
+	public bool $side_image_align_center = false;
+
 	/**
 	 * Flag indicating that the side image should cover the entire image container
 	 *
@@ -445,6 +453,16 @@ public function __construct(array $params)
 					]
 				)
 			);
+
+			$this->side_image_align_center = Arrays::get_value_as_bool(
+				$params,
+				'side_image_align_center',
+				fn() => ACF::get_field_bool(
+					$this->acf_prefix . '_side_image_align_center',
+					$this->post_id,
+					['default' => false]
+				)
+			);
 		}
 
 		$this->side_video_bg = Arrays::get_value_as_bool(
@@ -779,6 +797,10 @@ public function render(): void
 						$image_container_classes[] = 'banner-default__image-container--pull-up';
 					}
 
+					if($this->side_image_align_center) {
+						$image_container_classes[] = 'banner-default__image-container--center';
+					}
+
 				?>
 					<div class="<?php echo esc_attr(implode(' ', $image_container_classes)); ?>">
 						<?php

diff --git a/pingcap-jp/inc/PingCAP/Components/HeaderSummary.php b/pingcap-jp/inc/PingCAP/Components/HeaderSummary.php
@@ -41,7 +41,7 @@ public function render(): void
                             </div>
                         </div>
                     </div>
-                    <a class="button" href="/tidb-user-day/jul-2024/">アーカイブ動画を視聴する</a>
+                    <a class="button" href="/tidb-user-day/jul-2024/">TiUD2024アーカイブ動画を見る</a>
                 </nav>
                 <div class="navbar-toggle">
                     <span></span>
@@ -76,7 +76,7 @@ public function render(): void
                         </div>
                     </div>
                 </div>
-                <a class="button" href="/tidb-user-day/jul-2024/">アーカイブ動画を視聴する</a>
+                <a class="button" href="/tidb-user-day/jul-2024/">TiUD2024アーカイブ動画を見る</a>
             </nav>
         </header>
 <?php

diff --git a/pingcap-jp/js/App.js b/pingcap-jp/js/App.js
@@ -198,6 +198,21 @@ class App {
 		const bannerAnimateEls = Array.from(document.querySelectorAll('.banner-animate'));
 
 		bannerAnimateEls.forEach((el) => el.classList.remove('banner-animate'));
+
+		document.addEventListener('click', function (event) {
+			const target = event.target.closest('[data-href]');
+			if (target) {
+				const url = target.getAttribute('data-href');
+				const isExternal =
+					new URL(url, window.location.origin).origin !== window.location.origin;
+
+				if (isExternal) {
+					window.open(url, '_blank');
+				} else {
+					window.location.href = url;
+				}
+			}
+		});
 	}
 
 	async initComponents() {

diff --git a/pingcap-jp/templates/page-tidb-user-day-summary.php b/pingcap-jp/templates/page-tidb-user-day-summary.php
@@ -12,7 +12,8 @@
 <main class="tmpl-summary__content">
     <div class="contain">
         <h1 class="tmpl-summary__content-title">NewSQLデータベースは<br>もう冒険じゃない</h1>
-        <a class="button" href="/tidb-user-day/jul-2024/">アーカイブ動画を視聴する</a>
+        <a class="button" href="/tidb-user-day/jul-2024/">TiUD2024アーカイブ動画を見る</a>
+        <P class="tip">次回のイベントは2025年10月3日(金)に開催します</P>
     </div>
 </main>
 <section class="bg-black block-container block-columns" id="about">
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,6 @@ @@
     	}
     	&__item {
-    		text-align: center;
     		h5 {
     			color: var(--color-blue-dark);
     		}
@@ Expand Down @@