Skip to content

Commit

Permalink
Trying to fix buttons being displayed wrongly
Browse files Browse the repository at this point in the history
  • Loading branch information
@FaserF
FaserF authored Mar 18, 2021
1 parent bf5d3fb commit ffdc41b
Show file tree
Hide file tree
Showing 2 changed files with 353 additions and 407 deletions.
206 changes: 102 additions & 104 deletions dist/remotes/ccwgtv/remote-html-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,71 +38,92 @@ function getRemoteStyle_ccwgtv(config) {
list-style-type: none
}
#power a,
#source a,
#volumeup a,
#volumedown a,
#top a,
#bottom a,
#ok a {
position: absolute;
display: block
},
#clickleft a,
#clickright a,
#mute a,
#volumeup a,
#volumedown a,
#back a,
#assistant a,
#mute a,
#youtube a,
#netflix a,
#info a,
#home a,
#back a,
#top a,
#bottom a,
#ok a {
position: absolute;
display: block
#power a,
#source a
#remote-control-ccwgtv li#top a {
left: 69px;
top: 20px;
width: 29px;
height: 29px;
background: url(${base_url}/top.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#power a {
left: 30px;
top: 390px;
width: 30px;
height: 27px;
background: url(${base_url}/power.png) no-repeat
#remote-control-ccwgtv li#top a:hover {
background: url(${base_url}/top_over.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#power a:hover {
background-image: url(${base_url}/power_over.png);
background-repeat: no-repeat;
background-position: 0 0px
#remote-control-ccwgtv li#bottom a {
left: 68px;
top: 117px;
width: 29px;
height: 29px;
background: url(${base_url}/bottom.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#source a {
left: 105px;
top: 390px;
width: 30px;
height: 27px;
background: url(${base_url}/source.png) no-repeat
#remote-control-ccwgtv li#bottom a:hover {
background: url(${base_url}/bottom_over.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#source a:hover {
background-image: url(${base_url}/source_over.png);
#remote-control-ccwgtv li#ok a {
left: 68px;
top: 68px;
width: 29px;
height: 29px;
background: url(${base_url}/ok.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#ok a:hover {
background: url(${base_url}/ok_over.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#clickleft a {
left: 21px;
top: 64px;
width: 29px;
height: 29px;
background: url(${base_url}/clickleft.png) no-repeat
}
#remote-control-ccwgtv li#clickleft a:hover {
background-image: url(${base_url}/clickleft_over.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-ccwgtv li#assistant a {
left: 105px;
top: 150px;
width: 47px;
height: 41px;
background: url(${base_url}/assistant.png) no-repeat
#remote-control-ccwgtv li#clickright a {
left: 116px;
top: 64px;
width: 29px;
height: 29px;
background: url(${base_url}/clickright.png) no-repeat
}
#remote-control-ccwgtv li#assistant a:hover {
background-image: url(${base_url}/assistant_over.png);
#remote-control-ccwgtv li#clickright a:hover {
background-image: url(${base_url}/clickright_over.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-ccwgtv li#volumeup a {
left: 155px;
left: 120px;
top: 120px;
width: 29px;
height: 30px;
Expand All @@ -116,7 +137,7 @@ function getRemoteStyle_ccwgtv(config) {
}
#remote-control-ccwgtv li#volumedown a {
left: 155px;
left: 120px;
top: 150px;
width: 29px;
height: 30px;
Expand All @@ -129,30 +150,28 @@ function getRemoteStyle_ccwgtv(config) {
background-position: 0 0px
}
#remote-control-ccwgtv li#clickleft a {
left: 21px;
top: 64px;
width: 29px;
height: 29px;
background: url(${base_url}/clickleft.png) no-repeat
#remote-control-ccwgtv li#back a {
left: 22px;
top: 170px;
width: 28px;
height: 29px;
background: url(${base_url}/go_back.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#clickleft a:hover {
background-image: url(${base_url}/clickleft_over.png);
background-repeat: no-repeat;
background-position: 0 0px
#remote-control-ccwgtv li#back a:hover {
background: url(${base_url}/go_back_over.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#clickright a {
left: 116px;
top: 64px;
width: 29px;
height: 29px;
background: url(${base_url}/clickright.png) no-repeat
#remote-control-ccwgtv li#assistant a {
left: 105px;
top: 150px;
width: 47px;
height: 41px;
background: url(${base_url}/assistant.png) no-repeat
}
#remote-control-ccwgtv li#clickright a:hover {
background-image: url(${base_url}/clickright_over.png);
#remote-control-ccwgtv li#assistant a:hover {
background-image: url(${base_url}/assistant_over.png);
background-repeat: no-repeat;
background-position: 0 0px
}
Expand All @@ -165,6 +184,10 @@ function getRemoteStyle_ccwgtv(config) {
background: url(${base_url}/home.png) no-repeat 0px 0
}
#remote-control-ccwgtv li#home a:hover {
background: url(${base_url}/home_over.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#mute a {
left: 105px;
top: 248px;
Expand All @@ -179,14 +202,6 @@ function getRemoteStyle_ccwgtv(config) {
background-position: 0 0px
}
#remote-control-ccwgtv li#back a {
left: 22px;
top: 170px;
width: 28px;
height: 29px;
background: url(${base_url}/go_back.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#youtube a {
left: 22px;
top: 220px;
Expand Down Expand Up @@ -215,58 +230,41 @@ function getRemoteStyle_ccwgtv(config) {
background-position: 0 0px
}
#remote-control-ccwgtv li#top a {
left: 69px;
top: 20px;
width: 29px;
height: 29px;
background: url(${base_url}/top.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#bottom a {
left: 68px;
top: 117px;
width: 29px;
height: 29px;
background: url(${base_url}/bottom.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#ok a {
left: 68px;
top: 68px;
width: 29px;
height: 29px;
background: url(${base_url}/ok.png) no-repeat 0px 0px
}
#remote-control-ccwgtv li#home a:hover {
background: url(${base_url}/home_over.png) no-repeat 0px 0px
#remote-control-ccwgtv li#power a {
left: 30px;
top: 390px;
width: 30px;
height: 27px;
background: url(${base_url}/power.png) no-repeat
}
#remote-control-ccwgtv li#back a:hover {
background: url(${base_url}/go_back_over.png) no-repeat 0px 0px
#remote-control-ccwgtv li#power a:hover {
background-image: url(${base_url}/power_over.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-ccwgtv li#top a:hover {
background: url(${base_url}/top_over.png) no-repeat 0px 0px
#remote-control-ccwgtv li#source a {
left: 105px;
top: 390px;
width: 30px;
height: 27px;
background: url(${base_url}/source.png) no-repeat
}
#remote-control-ccwgtv li#bottom a:hover {
background: url(${base_url}/bottom_over.png) no-repeat 0px 0px
#remote-control-ccwgtv li#source a:hover {
background-image: url(${base_url}/source_over.png);
background-repeat: no-repeat;
background-position: 0 0px
}
#remote-control-ccwgtv li#ok a:hover {
background: url(${base_url}/ok_over.png) no-repeat 0px 0px
}
`;
}

function getRemoteHtml_ccwgtv(config){
const template = config.remote_template;
return `
<div class="container">
<div style="text-align:center">
<h1>${config.name}</h1>
Expand All @@ -287,7 +285,7 @@ function getRemoteHtml_ccwgtv(config){
<li id="netflix" class="myButton-${template}"><a href="#" title="Start Netflix"><span>netflix</span></a></li>
<li id="source" class="myButton-${template}"><a href="#" title="Select Input Source"><span>source</span></a></li>
<li id="clickleft" class="myButton-${template}"><a href="#" title="clickleft"><span>clickleft</span></a></li>
<li id="clickright" class="myButton-${template}"><a href="#" title="clickright"><span>clickright</span></a></li>
<li id="clickright" class="myButton-${template}"><a href="#" title="clickright"><span>clickright</span></a></li>
</ul>
Expand Down
Loading

0 comments on commit ffdc41b

Please sign in to comment.