thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Refactor pending/sent/delivered state markup & css

Browse source 
No need for separate elements since we only ever display one of these
states at a time.

// FREEBIE
This commit is contained in:
lilia 2015-10-28 14:12:40 -07:00
parent 2e575bfb49
commit cbc82a95f7
3 changed files with 21 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
background.html
View file

@ -78,9 +78,7 @@
<p class="content">{{ message }}</p>
<div class='meta'>
<span class='timestamp'>{{ timestamp }}</span>
<span class='sinewave hide'></span>
<span class='checkmark hide'></span>
<span class='double-checkmark hide'></span>
<span class='status hide'></span>
</div>
</div>
</script>

35
stylesheets/_conversation.scss
View file

@ -189,37 +189,26 @@
margin-right: 3px;
}
.sinewave {
background: url('/images/sinewave.png') repeat-x;
animation: backgroundScroll 0.5s linear infinite;
}
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -18px 0;}
}
.entry.sent .checkmark {
display: inline-block;
width: 18px;
height: 1em;
background: url('/images/check-white.png');
}
.entry.delivered {
.checkmark { display: none; }
.double-checkmark {
.outgoing.entry {
.status {
display: inline-block;
width: 18px;
height: 1em;
}
&.sent .status {
background: url('/images/check-white.png');
}
&.delivered .status {
background: url('/images/double-check-white.png');
width: 18px;
height: 1em;
}
}
.entry.pending {
.sinewave {
display: inline-block;
width: 18px;
height: 1em;
&.pending .status {
background: url('/images/sinewave.png') repeat-x;
animation: backgroundScroll 0.5s linear infinite;
}
.double-checkmark, .checkmark { display: none; }
}
.message-list {

29
stylesheets/manifest.css
View file

@ -673,35 +673,22 @@ input.search {
font-size: smaller;
margin-right: 3px; }
.sinewave {
background: url("/images/sinewave.png") repeat-x;
animation: backgroundScroll 0.5s linear infinite; }
@keyframes backgroundScroll {
from {
background-position: 0 0; }
to {
background-position: -18px 0; } }
.entry.sent .checkmark {
.outgoing.entry .status {
display: inline-block;
width: 18px;
height: 1em;
height: 1em; }
.outgoing.entry.sent .status {
background: url("/images/check-white.png"); }
.entry.delivered .checkmark {
display: none; }
.entry.delivered .double-checkmark {
display: inline-block;
background: url("/images/double-check-white.png");
width: 18px;
height: 1em; }
.entry.pending .sinewave {
display: inline-block;
width: 18px;
height: 1em; }
.entry.pending .double-checkmark, .entry.pending .checkmark {
display: none; }
.outgoing.entry.delivered .status {
background: url("/images/double-check-white.png"); }
.outgoing.entry.pending .status {
background: url("/images/sinewave.png") repeat-x;
animation: backgroundScroll 0.5s linear infinite; }
.message-list {
margin: 0;