Merge pull request #381 from vuejs-jp/fix/style-panelist

jiyuujin · web-flow · commit 2f86df61c005 · 2024-10-17T07:16:40.000+09:00
Fix/ Update responsive styles for tablet and mobile devices
diff --git a/apps/web/app/components/event/PanelerList.vue b/apps/web/app/components/event/PanelerList.vue
@@ -43,13 +43,24 @@ const currentLocale = useLocaleCurrent().locale
     gap: calc(var(--unit) * 1);
     padding: calc(var(--unit) * 2);
   }
+
+  @media (--tablet) {
+    ::v-deep(.speaker-name) {
+      font-size: 0.875rem;
+      letter-spacing: 0.4px;
+    }
+
+    ::v-deep(.speaker-affiliation) {
+      font-size: 0.6875rem;
+    }
+  }
 }
 
 .eventcard-persons div {
   width: calc(calc(100% - 16px) / 2);
   height: 120px;
 
-  @media (--mobile) {
+  @media (--tablet) {
     width: 100%;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -43,13 +43,24 @@ const currentLocale = useLocaleCurrent().locale`
`43`	`43`	`gap: calc(var(--unit) * 1);`
`44`	`44`	`padding: calc(var(--unit) * 2);`
`45`	`45`	`}`
	`46`	`+`
	`47`	`+ @media (--tablet) {`
	`48`	`+ ::v-deep(.speaker-name) {`
	`49`	`+ font-size: 0.875rem;`
	`50`	`+ letter-spacing: 0.4px;`
	`51`	`+ }`
	`52`	`+`
	`53`	`+ ::v-deep(.speaker-affiliation) {`
	`54`	`+ font-size: 0.6875rem;`
	`55`	`+ }`
	`56`	`+ }`
`46`	`57`	`}`
`47`	`58`
`48`	`59`	`.eventcard-persons div {`
`49`	`60`	`width: calc(calc(100% - 16px) / 2);`
`50`	`61`	`height: 120px;`
`51`	`62`
`52`		`- @media (--mobile) {`
	`63`	`+ @media (--tablet) {`
`53`	`64`	`width: 100%;`
`54`	`65`	`}`
`55`	`66`	`}`