Further organization of the browser scripts.
Moved server selection styles to launcher.css, as they are nearly finished. Moved overlay convenience functions to overlay.js. Moved launch area (landing.ejs) convenience functions to landing.js. Various cleanups and documentation also added.
This commit is contained in:
Daniel Scalzi
223
app/overlay.ejs
223
app/overlay.ejs
@@ -1,223 +1,3 @@
|
||||
<style text="text/css">
|
||||
#serverSelectContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
#serverSelectHeader {
|
||||
font-family: 'Avenir Medium';
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#serverSelectList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-height: 65%;
|
||||
min-height: 40%;
|
||||
}
|
||||
#serverSelectListScrollable {
|
||||
padding: 0px 5px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#serverSelectListScrollable::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
#serverSelectListScrollable::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
#serverSelectListScrollable::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
|
||||
}
|
||||
|
||||
.serverListing {
|
||||
border: none;
|
||||
padding: 0px;
|
||||
width: 375px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
opacity: 0.6;
|
||||
transition: 0.25s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: rgba(131, 131, 131, 0.25);
|
||||
}
|
||||
.serverListing[selected] {
|
||||
cursor: default;
|
||||
opacity: 1.0;
|
||||
}
|
||||
.serverListing:hover,
|
||||
.serverListing:focus {
|
||||
outline: none;
|
||||
opacity: 1.0;
|
||||
}
|
||||
#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
#serverSelectListScrollable > .serverListing:first-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#serverSelectListScrollable > .serverListing:last-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.serverListingImg {
|
||||
margin: 0px 10px 0px 5px;
|
||||
border: 1px solid #fff;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.serverListingDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.serverListingName {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.serverListingDescription {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#serverSelectActions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#serverSelectConfirm {
|
||||
background: none;
|
||||
border: 1px solid #ffffff;
|
||||
color: white;
|
||||
font-family: 'Avenir Medium';
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
padding: 0px 8.1px;
|
||||
cursor: pointer;
|
||||
transition: 0.25s ease;
|
||||
min-height: 20.67px;
|
||||
}
|
||||
#serverSelectConfirm:hover,
|
||||
#serverSelectConfirm:focus {
|
||||
box-shadow: 0px 0px 10px 0px #fff;
|
||||
outline: none;
|
||||
}
|
||||
#serverSelectConfirm:active {
|
||||
border-color: rgba(255, 255, 255, 0.75);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
#serverSelectCancel {
|
||||
font-family: 'Avenir Book';
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
padding-top: 2.5px;
|
||||
color: rgba(202, 202, 202, 0.75);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
#serverSelectCancel:hover {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
#serverSelectCancel:active {
|
||||
color: rgba(165, 165, 165, 0.75);
|
||||
}
|
||||
|
||||
.serverListingInfo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.serverListingVersion {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
font-family: 'Avenir Book';
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: rgba(31, 140, 11, 0.8);
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
.serverListingRevision {
|
||||
font-family: 'Avenir Book';
|
||||
color: #969696;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
#serverListingStarWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serverListingStarTooltip {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
width: 65px;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 130%;
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 10px;
|
||||
transition: visibility 0s linear 0.25s, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.serverListingStarTooltip::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%; /* To the left of the tooltip */
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
|
||||
}
|
||||
|
||||
#serverListingStarWrapper:hover .serverListingStarTooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay:0s;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="overlayContainer" style="display: none;">
|
||||
<div id="serverSelectContent">
|
||||
<span id="serverSelectHeader">Available Servers</span>
|
||||
@@ -231,7 +11,7 @@
|
||||
<div class="serverListingInfo">
|
||||
<div class="serverListingVersion">1.11.2</div>
|
||||
<div class="serverListingRevision">3.4.17</div>
|
||||
<div id="serverListingStarWrapper">
|
||||
<div class="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>
|
||||
@@ -292,4 +72,5 @@
|
||||
<a href="javascript:void(0);" id="overlayDismiss" style="display: none;">Dismiss</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./assets/js/scripts/overlay.js"></script>
|
||||
</div>
|
||||
Reference in New Issue
Block a user