PokCoder
diff --git a/‎src/demos/api/refresher/index.html‎
Lines changed: 26 additions & 17 deletions b/‎src/demos/api/refresher/index.html‎
Lines changed: 26 additions & 17 deletions
@@ -12,20 +12,29 @@
       --ion-safe-area-top: 20px;
       --ion-safe-area-bottom: 22px;
     }
+
+    ion-content {
+      user-select: none;
+    }
+
+    ion-item {
+      --padding-start: 8px;
+    }
+
     .unread {
       width: 10px;
       height: 10px;
       border-radius: 10px;
       background-color: #3684ff;
-      position: absolute;
-      left: 0;
-      margin-top: 0.4em;
+      margin-top: 15px;
+      margin-right: 8px;
+      align-self: start;
     }
-  
+
     ion-item h2 {
       font-weight: 500 !important;
     }
-    
+
     ion-item h3 {
       color: #777;
     }
@@ -41,15 +50,15 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content>
       <ion-refresher slot="fixed" id="refresher">
         <ion-refresher-content></ion-refresher-content>
       </ion-refresher>
-      
+
       <ion-list></ion-list>
     </ion-content>
   </ion-app>
-  
+
   <script>
     const refresher = document.getElementById('refresher');
     const names = [
@@ -67,27 +76,27 @@
       'Rachel Rabbit',
       'Ted Turtle'
     ];
-    
+
     refresher.addEventListener('ionRefresh', () => {
       setTimeout(() => {
         prependMessages(5, true);
         refresher.complete();
       }, 2000);
-    })   
-    
+    })
+
     const list = document.querySelector('ion-list');
     appendMessages(5);
-    
+
     function chooseRandomName() {
       return names[Math.floor(Math.random() * names.length)];
     }
-    
+
     function appendMessages(numMessages = 1, unread) {
       for (let i = 0; i < numMessages; i++) {
         list.appendChild(createMessage(unread));
       }
     }
-    
+
     function prependMessages(numMessages = 1, unread) {
       for (let i = 0; i < numMessages; i++) {
         list.insertBefore(createMessage(unread), list.firstChild);
@@ -97,13 +106,13 @@
     function createMessage(unread = false) {
       let item = document.createElement('ion-item');
       item.innerHTML = `
-        <ion-label text-wrap>
-          <div class="${(unread) ? 'unread' : 'read'}"></div>
+        <div slot="start" class="${(unread) ? 'unread' : 'read'}"></div>
+        <ion-label class="ion-text-wrap">
           <h2>${chooseRandomName()}</h2>
           <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
         </ion-label>
       `;
-      
+
       return item;
     }
   </script>