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

Convert server/account select overlay css from px to rem (#109).

Browse Source
This commit is contained in:
Daniel Scalzi 2020-09-13 19:24:27 -04:00
parent 043f85c0dc
commit 9793c4072d
No known key found for this signature in database
GPG Key ID: D18EA3FB4B142A57
2 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/components/Application.tsx
View File

@ -74,7 +74,7 @@ type InternalApplicationProps = ApplicationProps & typeof mapDispatch
class Application extends React.Component<InternalApplicationProps, ApplicationState> { class Application extends React.Component<InternalApplicationProps, ApplicationState> {
private static readonly logger = LoggerUtil.getLogger('ApplicationTSX') private static readonly logger = LoggerUtil.getLogger('Application')
private mojangStatusInterval!: NodeJS.Timeout private mojangStatusInterval!: NodeJS.Timeout
private serverStatusInterval!: NodeJS.Timeout private serverStatusInterval!: NodeJS.Timeout
@ -257,6 +257,13 @@ class Application extends React.Component<InternalApplicationProps, ApplicationS
}) })
return return
} else { } else {
// For debugging display.
// for(let i=0; i<10; i++) {
// rawDisto.servers.push(rawDisto.servers[1])
// }
const distro = new HeliosDistribution(rawDisto) const distro = new HeliosDistribution(rawDisto)
// TODO TEMP USE CONFIG // TODO TEMP USE CONFIG
// TODO TODO TODO TODO // TODO TODO TODO TODO

81
src/renderer/components/overlay/shared-select/SharedSelect.css
View File

@ -16,10 +16,10 @@
#serverSelectHeader, #serverSelectHeader,
#accountSelectHeader { #accountSelectHeader {
font-family: 'Avenir Medium'; font-family: 'Avenir Medium';
font-size: 20px; font-size: 1.25rem;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
margin-bottom: 25px; margin-bottom: 1.5rem;
} }
/* Wrapper div for the list of available servers. */ /* Wrapper div for the list of available servers. */
@ -36,12 +36,12 @@
/* Scrollable div which lists the available servers. */ /* Scrollable div which lists the available servers. */
#serverSelectListScrollable, #serverSelectListScrollable,
#accountSelectListScrollable { #accountSelectListScrollable {
padding: 0px 5px; padding: 0 0.25rem;
overflow-y: scroll; overflow-y: scroll;
} }
#serverSelectListScrollable::-webkit-scrollbar, #serverSelectListScrollable::-webkit-scrollbar,
#accountSelectListScrollable::-webkit-scrollbar { #accountSelectListScrollable::-webkit-scrollbar {
width: 2px; width: 0.3125rem;
} }
#serverSelectListScrollable::-webkit-scrollbar-track, #serverSelectListScrollable::-webkit-scrollbar-track,
#accountSelectListScrollable::-webkit-scrollbar-track { #accountSelectListScrollable::-webkit-scrollbar-track {
@ -50,15 +50,15 @@
#serverSelectListScrollable::-webkit-scrollbar-thumb, #serverSelectListScrollable::-webkit-scrollbar-thumb,
#accountSelectListScrollable::-webkit-scrollbar-thumb { #accountSelectListScrollable::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50); box-shadow: inset 0 0 0.625rem rgba(255, 255, 255, 0.50);
} }
/* Content container for a server listing. */ /* Content container for a server listing. */
.serverListing { .serverListing {
border: none; border: none;
padding: 0px; padding: 0;
width: 375px; width: 23.5rem;
min-height: 60px; min-height: 3.75rem;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -82,8 +82,8 @@
color: white; color: white;
border: 1px solid rgba(126, 126, 126, 0.57); border: 1px solid rgba(126, 126, 126, 0.57);
border-radius: 3px; border-radius: 3px;
padding: 5px 45px; padding: 0.3125rem 2.8125rem;
width: 250px; width: 15.625rem;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -107,29 +107,29 @@
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding-left: 10px; padding-left: 0.625rem;
} }
/* Add spacing between server listings. */ /* Add spacing between server listings. */
#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child), #serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child),
#accountSelectListScrollable > .accountListing:not(:first-child):not(:last-child) { #accountSelectListScrollable > .accountListing:not(:first-child):not(:last-child) {
margin: 5px 0px; margin: 0.3125rem 0;
} }
#serverSelectListScrollable > .serverListing:first-child, #serverSelectListScrollable > .serverListing:first-child,
#accountSelectListScrollable > .accountListing:first-child { #accountSelectListScrollable > .accountListing:first-child {
margin-bottom: 5px; margin-bottom: 0.3125rem;
} }
#serverSelectListScrollable > .serverListing:last-child, #serverSelectListScrollable > .serverListing:last-child,
#accountSelectListScrollable > .accountListing:last-child { #accountSelectListScrollable > .accountListing:last-child {
margin-top: 5px; margin-top: 0.3125rem;
} }
/* Server listing image. */ /* Server listing image. */
.serverListingImg { .serverListingImg {
margin: 0px 10px 0px 5px; margin: 0 0.625rem 0 0.3125rem;
border: 1px solid #fff; border: 1px solid #fff;
height: 50px; height: 3.125rem;
width: 50px; width: 3.125rem;
} }
/* Content container for the server listing's details. */ /* Content container for the server listing's details. */
@ -138,19 +138,19 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
height: 50px; height: 3.125rem;
} }
/* The name of the server listing. */ /* The name of the server listing. */
.serverListingName { .serverListingName {
font-size: 14px; font-size: 0.875rem;
font-weight: bold; font-weight: bold;
} }
/* Description for the server listing. */ /* Description for the server listing. */
.serverListingDescription { .serverListingDescription {
font-size: 10px; font-size: 0.625rem;
line-height: 10px; line-height: 0.625rem;
font-weight: bold; font-weight: bold;
} }
@ -163,24 +163,24 @@
/* The minecraft version of the server listing. */ /* The minecraft version of the server listing. */
.serverListingVersion { .serverListingVersion {
font-size: 10px; font-size: 0.625rem;
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
line-height: 12px; line-height: 0.75rem;
height: 12px; height: 0.75rem;
border-radius: 2px; border-radius: 2px;
background: rgba(31, 140, 11, 0.8); background: rgba(31, 140, 11, 0.8);
padding: 0px 2px; padding: 0 0.125rem;
} }
/* The revision version of the server's manifest. */ /* The revision version of the server's manifest. */
.serverListingRevision { .serverListingRevision {
color: #969696; color: #969696;
font-size: 10px; font-size: 0.625rem;
line-height: 12px; line-height: 0.75rem;
padding: 0px 5px; padding: 0 0.3125rem;
} }
/* Star which indicates the default (main) server. */ /* Star which indicates the default (main) server. */
@ -188,21 +188,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
height: 12px; height: 0.75rem;
position: relative; position: relative;
} }
/* Tooltip which displays when hovering over the star. */ /* Tooltip which displays when hovering over the star. */
.serverListingStarTooltip { .serverListingStarTooltip {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
width: 65px; width: 4.0625rem;
background-color: rgba(0, 0, 0, 0.40); background-color: rgba(0, 0, 0, 0.40);
text-align: center; text-align: center;
border-radius: 4px; border-radius: 0.25rem;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: 130%; left: 130%;
font-size: 10px; font-size: 0.625rem;
transition: visibility 0s linear 0.25s, opacity 0.25s ease; transition: visibility 0s linear 0.25s, opacity 0.25s ease;
} }
.serverListingStarTooltip::after { .serverListingStarTooltip::after {
@ -210,8 +210,8 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 100%; /* To the left of the tooltip */ right: 100%; /* To the left of the tooltip */
margin-top: -5px; margin-top: -0.3125rem;
border-width: 5px; border-width: 0.3125rem;
border-style: solid; border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent; border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
} }
@ -228,7 +228,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 25px; margin-top: 1.5625rem;
} }
/* Server selection confirm button styles. */ /* Server selection confirm button styles. */
@ -240,16 +240,17 @@
font-family: 'Avenir Medium'; font-family: 'Avenir Medium';
font-weight: bold; font-weight: bold;
border-radius: 2px; border-radius: 2px;
padding: 0px 8.1px; padding: 0 0.5rem;
cursor: pointer; cursor: pointer;
transition: 0.25s ease; transition: 0.25s ease;
min-height: 20.67px; min-height: 1.25rem;
font-size: 0.875rem;
} }
#serverSelectConfirm:hover, #serverSelectConfirm:hover,
#serverSelectConfirm:focus, #serverSelectConfirm:focus,
#accountSelectConfirm:hover, #accountSelectConfirm:hover,
#accountSelectConfirm:focus { #accountSelectConfirm:focus {
box-shadow: 0px 0px 10px 0px #fff; box-shadow: 0 0 0.625rem 0 #fff;
outline: none; outline: none;
} }
#serverSelectConfirm:active, #serverSelectConfirm:active,
@ -262,9 +263,9 @@
#serverSelectCancel, #serverSelectCancel,
#accountSelectCancel { #accountSelectCancel {
font-weight: bold; font-weight: bold;
font-size: 10px; font-size: 0.625rem;
text-decoration: none; text-decoration: none;
padding-top: 2.5px; padding-top: 0.15625rem;
color: rgba(202, 202, 202, 0.75); color: rgba(202, 202, 202, 0.75);
transition: 0.25s ease; transition: 0.25s ease;
background: none; background: none;