Tweaking the server selection UI.
Removed divider. Moved star. Changed version tag back to green.pull/1/head
Daniel Scalzi
parent
e994f4c474
commit
9d04eb2227
|
|
@ -97,7 +97,6 @@ document.addEventListener('readystatechange', function(){
|
|||
let pVal = 'OFFLINE'
|
||||
|
||||
try {
|
||||
console.log(serv)
|
||||
const serverURL = new URL('my://' + serv.server_ip)
|
||||
const servStat = await ServerStatus.getStatus(serverURL.hostname, serverURL.port)
|
||||
if(servStat.online){
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
}
|
||||
|
||||
.serverListing {
|
||||
width: 350px;
|
||||
min-height: 65px;
|
||||
width: 375px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
line-height: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: rgb(174, 70, 66);
|
||||
background: rgba(31, 140, 11, 0.8);
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
|
|
@ -161,50 +161,45 @@
|
|||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.serverListingDivider {
|
||||
min-height: 1px;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
margin: 2px 0px;
|
||||
}
|
||||
|
||||
#starWrap {
|
||||
#serverListingStarWrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
left: 322px;
|
||||
top: 3px;
|
||||
cursor: pointer;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltiptext {
|
||||
.serverListingStarTooltip {
|
||||
visibility: hidden;
|
||||
width: 70px;
|
||||
background-color: black;
|
||||
opacity: 0;
|
||||
width: 65px;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 120%;
|
||||
left: 130%;
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 10px;
|
||||
transition: visibility 0s linear 0.25s, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.tooltiptext::after {
|
||||
.serverListingStarTooltip::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%; /* To the right of the tooltip */
|
||||
right: 100%; /* To the left of the tooltip */
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
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;
|
||||
opacity: 1;
|
||||
transition-delay:0s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -220,20 +215,19 @@
|
|||
<div class="serverListingInfo">
|
||||
<div class="serverListingVersion">1.11.2</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 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 class="serverListingDivider"></div>
|
||||
<div class="serverListing">
|
||||
<img class="serverListingImg" src="./assets/images/testserver.png"/>
|
||||
<div class="serverListingDetails">
|
||||
|
|
@ -245,7 +239,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serverListingDivider"></div>
|
||||
<div class="serverListing">
|
||||
<img class="serverListingImg" src="./assets/images/testserver.png"/>
|
||||
<div class="serverListingDetails">
|
||||
|
|
@ -257,7 +250,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serverListingDivider"></div>
|
||||
<div class="serverListing">
|
||||
<img class="serverListingImg" src="./assets/images/testserver.png"/>
|
||||
<div class="serverListingDetails">
|
||||
|
|
|
|||
Loading…
Reference in New Issue