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> <p class="content">{{ message }}</p>
<div class='meta'> <div class='meta'>
<span class='timestamp'>{{ timestamp }}</span> <span class='timestamp'>{{ timestamp }}</span>
<span class='sinewave hide'></span> <span class='status hide'></span>
<span class='checkmark hide'></span>
<span class='double-checkmark hide'></span>
</div> </div>
</div> </div>
</script> </script>

35
stylesheets/_conversation.scss
View file

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

29
stylesheets/manifest.css
View file

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