Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Tweaking the server selection UI.

Browse Source 
Removed divider. Moved star. Changed version tag back to green.
This commit is contained in:
Daniel Scalzi 2018-04-18 23:50:26 -04:00
parent e994f4c474
commit 9d04eb2227
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
2 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/js/actionbinder.js
View File

@ -97,7 +97,6 @@ document.addEventListener('readystatechange', function(){
let pVal = 'OFFLINE' let pVal = 'OFFLINE'
try { try {
console.log(serv)
const serverURL = new URL('my://' + serv.server_ip) const serverURL = new URL('my://' + serv.server_ip)
const servStat = await ServerStatus.getStatus(serverURL.hostname, serverURL.port) const servStat = await ServerStatus.getStatus(serverURL.hostname, serverURL.port)
if(servStat.online){ if(servStat.online){

64
app/overlay.ejs
View File

@ -37,8 +37,8 @@
} }
.serverListing { .serverListing {
width: 350px; width: 375px;
min-height: 65px; min-height: 60px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -149,7 +149,7 @@
line-height: 12px; line-height: 12px;
height: 12px; height: 12px;
border-radius: 2px; border-radius: 2px;
background: rgb(174, 70, 66); background: rgba(31, 140, 11, 0.8);
padding: 0px 2px; padding: 0px 2px;
} }
@ -161,50 +161,45 @@
padding: 0px 5px; padding: 0px 5px;
} }
.serverListingDivider { #serverListingStarWrapper {
min-height: 1px;
width: 100%;
background: rgba(255, 255, 255, 0.4);
margin: 2px 0px;
}
#starWrap {
display: flex; display: flex;
position: absolute;
align-items: center; align-items: center;
left: 322px;
top: 3px;
cursor: pointer; cursor: pointer;
height: 12px;
position: relative;
} }
.tooltiptext { .serverListingStarTooltip {
visibility: hidden; visibility: hidden;
width: 70px; opacity: 0;
background-color: black; width: 65px;
background-color: rgba(0, 0, 0, 0.40);
color: #fff; color: #fff;
text-align: center; text-align: center;
padding: 5px 0;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
right: 120%; left: 130%;
font-family: 'Avenir Book'; font-family: 'Avenir Book';
font-size: 10px; font-size: 10px;
transition: visibility 0s linear 0.25s, opacity 0.25s ease;
} }
.tooltiptext::after { .serverListingStarTooltip::after {
content: " "; content: " ";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 100%; /* To the right of the tooltip */ right: 100%; /* To the left of the tooltip */
margin-top: -5px; margin-top: -5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: transparent transparent transparent black; border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
} }
#starWrap:hover .tooltiptext { #serverListingStarWrapper:hover .serverListingStarTooltip {
visibility: visible; visibility: visible;
opacity: 1;
transition-delay:0s;
} }
</style> </style>
@ -220,20 +215,19 @@
<div class="serverListingInfo"> <div class="serverListingInfo">
<div class="serverListingVersion">1.11.2</div> <div class="serverListingVersion">1.11.2</div>
<div class="serverListingRevision">3.4.17</div> <div class="serverListingRevision">3.4.17</div>
<div id="serverListingStarWrapper">
<svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
<defs>
<style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
</defs>
<path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
<circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
</svg>
<span class="serverListingStarTooltip">Main Server</span>
</div>
</div> </div>
</div> </div>
<div id="starWrap">
<svg id="Layer_1" viewBox="0 0 107.45 104.74" width="25px" height="25px">
<defs>
<style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
</defs>
<path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
<circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
</svg>
<span class="tooltiptext">Main Server</span>
</div>
</div> </div>
<div class="serverListingDivider"></div>
<div class="serverListing"> <div class="serverListing">
<img class="serverListingImg" src="./assets/images/testserver.png"/> <img class="serverListingImg" src="./assets/images/testserver.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">
@ -245,7 +239,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="serverListingDivider"></div>
<div class="serverListing"> <div class="serverListing">
<img class="serverListingImg" src="./assets/images/testserver.png"/> <img class="serverListingImg" src="./assets/images/testserver.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">
@ -257,7 +250,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="serverListingDivider"></div>
<div class="serverListing"> <div class="serverListing">
<img class="serverListingImg" src="./assets/images/testserver.png"/> <img class="serverListingImg" src="./assets/images/testserver.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">