add mobile support css media query and touch events

src/ui/css/style.scss

@@ -55,6 +55,11 @@ body {
     padding: 46px 15px;
     width: 314px;
 
+    /* Landscape phone to portrait tablet */
+    @media (max-width: 767px) {
+        width: 100%;
+    }
+
     ul {
         list-style-type: none;
     }
@@ -69,7 +74,7 @@ body {
 
     @mixin read-bubble {
         position: absolute;
-        margin-top: 1.85em;
+        margin-top: 1.95em;
         margin-left: 0.5em;
         width: 0.9em;
         height: 0.9em;
@@ -138,4 +143,3 @@ body {
         }
     }
 }
-

src/ui/index.html

@@ -23,37 +23,37 @@
       <ul>
         <li class="selected">
           <div class="unread"></div>
-          <p class="from">Max Mustermann</p>
+          <p class="from">Whiteout Support</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
           <div class="unread"></div>
-          <p class="from">Max Mustermann</p>
+          <p class="from">Whiteout Support</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
           <div class="read"></div>
-          <p class="from">Max Mustermann</p>
+          <p class="from">Whiteout Support</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
           <div class="read"></div>
-          <p class="from">Max Mustermann</p>
+          <p class="from">Whiteout Support</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
           <div class="read"></div>
-          <p class="from">Max Mustermann</p>
+          <p class="from">Whiteout Support</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
           <div class="read"></div>
-          <p class="from">Max Mustermann</p>
+          <p class="from">Whiteout Support</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>

src/ui/js/message-list-view.js

@@ -7,10 +7,14 @@ $(document).ready(function() {
 function setListeners() {
     var li = $('li');
 
-    li.mousedown(function() {
+    if ("ontouchstart" in window) {
+        li.on('touchstart', select);
+    } else {
+        li.mousedown(select);
+    }
+
+    function select() {
         li.toggleClass('selected', false);
         $(this).toggleClass('selected');
-    });
+    }
-
-    li.mouseup(function() {});
 }