moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-08-13 16:43:47 -04:00
Code Issues Releases Wiki Activity

add mobile support css media query and touch events

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/ui/css/style.scss
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 {
}
}
}

12
src/ui/index.html
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>

12
src/ui/js/message-list-view.js
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() {});
}
}