fix: update list starter app to account for dynamic font scaling (#1803)

ionic-team · Oct 27, 2023 · 5c0c697 · 5c0c697
1 parent db0d946
commit 5c0c697
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 24 deletions.
diff --git a/angular-standalone/official/list/src/app/message/message.component.scss b/angular-standalone/official/list/src/app/message/message.component.scss
@@ -11,6 +11,17 @@ ion-label {
 ion-item h2 {
   font-weight: 600;
   margin: 0;
+
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 ion-item p {
@@ -21,7 +32,6 @@ ion-item p {
 }
 
 ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -31,7 +41,7 @@ ion-item ion-icon {
 }
 
 ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 8px;
   font-weight: normal;
 }

diff --git a/angular-standalone/official/list/src/app/view-message/view-message.page.scss b/angular-standalone/official/list/src/app/view-message/view-message.page.scss
@@ -10,10 +10,20 @@ ion-label {
 
 ion-item h2 {
   font-weight: 600;
+
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -24,17 +34,17 @@ ion-item ion-icon {
 }
 
 ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 12px;
   font-weight: normal;
 }
 
 h1 {
   margin: 0;
   font-weight: bold;
-  font-size: 22px;
+  font-size: 1.4rem;
 }
 
 p {
-  line-height: 22px;
+  line-height: 1.4;
 }
diff --git a/angular/official/list/src/app/message/message.component.scss b/angular/official/list/src/app/message/message.component.scss
@@ -11,6 +11,17 @@ ion-label {
 ion-item h2 {
   font-weight: 600;
   margin: 0;
+
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 ion-item p {
@@ -21,7 +32,6 @@ ion-item p {
 }
 
 ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -31,7 +41,7 @@ ion-item ion-icon {
 }
 
 ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 8px;
   font-weight: normal;
 }

diff --git a/angular/official/list/src/app/view-message/view-message.page.scss b/angular/official/list/src/app/view-message/view-message.page.scss
@@ -10,10 +10,20 @@ ion-label {
 
 ion-item h2 {
   font-weight: 600;
+
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -24,17 +34,17 @@ ion-item ion-icon {
 }
 
 ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 12px;
   font-weight: normal;
 }
 
 h1 {
   margin: 0;
   font-weight: bold;
-  font-size: 22px;
+  font-size: 1.4rem;
 }
 
 p {
-  line-height: 22px;
+  line-height: 1.4;
 }
diff --git a/react-vite/official/list/src/components/MessageListItem.css b/react-vite/official/list/src/components/MessageListItem.css
@@ -11,6 +11,17 @@ ion-label {
 ion-item h2 {
   font-weight: 600;
   margin: 0;
+
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 ion-item p {
@@ -21,7 +32,6 @@ ion-item p {
 }
 
 ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -31,7 +41,7 @@ ion-item ion-icon {
 }
 
 ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 8px;
   font-weight: normal;
 }

diff --git a/react-vite/official/list/src/pages/ViewMessage.css b/react-vite/official/list/src/pages/ViewMessage.css
@@ -10,10 +10,20 @@
 
 #view-message-page ion-item h2 {
   font-weight: 600;
+
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 #view-message-page ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -24,17 +34,17 @@
 }
 
 #view-message-page ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 12px;
   font-weight: normal;
 }
 
 #view-message-page h1 {
   margin: 0;
   font-weight: bold;
-  font-size: 22px;
+  font-size: 1.4rem;
 }
 
 #view-message-page p {
-  line-height: 22px;
+  line-height: 1.4;
 }
diff --git a/vue-vite/official/list/src/components/MessageListItem.vue b/vue-vite/official/list/src/components/MessageListItem.vue
@@ -45,6 +45,17 @@ const isIos = () => {
 .list-item h2 {
   font-weight: 600;
   margin: 0;
+  
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .list-item p {
@@ -55,7 +66,6 @@ const isIos = () => {
 }
 
 .list-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -65,7 +75,7 @@ const isIos = () => {
 }
 
 .list-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 8px;
   font-weight: normal;
 }

diff --git a/vue-vite/official/list/src/views/ViewMessagePage.vue b/vue-vite/official/list/src/views/ViewMessagePage.vue
@@ -72,10 +72,20 @@ ion-label {
 
 ion-item h2 {
   font-weight: 600;
+  
+  /**
+   * With larger font scales
+   * the date/time should wrap to the next
+   * line. However, there should be
+   * space between the name and the date/time
+   * if they can appear on the same line.
+   */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 ion-item .date {
-  float: right;
   align-items: center;
   display: flex;
 }
@@ -86,18 +96,18 @@ ion-item ion-icon {
 }
 
 ion-item ion-note {
-  font-size: 15px;
+  font-size: 0.9375rem;
   margin-right: 12px;
   font-weight: normal;
 }
 
 h1 {
   margin: 0;
   font-weight: bold;
-  font-size: 22px;
+  font-size: 1.4rem;
 }
 
 p {
-  line-height: 22px;
+  line-height: 1.4;
 }
 </style>