1
0
mirror of https://github.com/moparisthebest/mail synced 2024-12-23 15:58:49 -05:00

add mobile support css media query and touch events

This commit is contained in:
Tankred Hase 2013-09-03 18:33:30 +02:00
parent 62ff544934
commit 06033604a7
3 changed files with 20 additions and 12 deletions

View File

@ -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 {
}
}
}

View File

@ -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>

View File

@ -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() {});
}
}