1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-06-24 21:25:23 +00:00

Receivers: Added responsive UI design

This commit is contained in:
Michael Hollister 2025-04-24 16:25:56 -05:00
parent 6dd58cd620
commit 47f388b5d4
7 changed files with 546 additions and 85 deletions

View file

@ -155,8 +155,6 @@ export class Main {
Main.playerWindow = new BrowserWindow({
fullscreen: true,
autoHideMenuBar: true,
minWidth: 515,
minHeight: 290,
icon: path.join(__dirname, 'icon512.png'),
webPreferences: {
preload: path.join(__dirname, 'player/preload.js')
@ -295,8 +293,6 @@ export class Main {
fullscreen: Main.startFullscreen,
autoHideMenuBar: true,
icon: path.join(__dirname, 'icon512.png'),
minWidth: 1100,
minHeight: 800,
webPreferences: {
preload: path.join(__dirname, 'main/preload.js')
}

View file

@ -3,6 +3,7 @@
<head>
<title>FCast Receiver</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../assets/fonts/outfit.css" />
<link rel="stylesheet" href="../assets/fonts/inter.css" />
<link rel="stylesheet" href="./common.css" />
@ -61,8 +62,8 @@
<div id="app-download" class="non-selectable app-download">Need a sender app?<br>Download Grayjay at <a href="https://grayjay.app" target="_blank">https://grayjay.app</a></div>
<br />
<div class="non-selectable card-title">Connection Details</div>
<div class="card-title-separator"></div>
<div id="connection-details" class="non-selectable card-title">Connection Details</div>
<div id="connection-details-separator" class="card-title-separator"></div>
<div>
<div id="ips">
<div id="ips-iface-icon"></div>

View file

@ -2,12 +2,10 @@
display: inline-block;
align-items: center;
justify-content: center;
padding: 16px;
gap: 6px;
flex: 1 0 0;
flex: 1 0 30%;
border-radius: 6px;
margin: 20px 10px;
cursor: pointer;
user-select: none;
}
@ -36,15 +34,14 @@
background: #3E3E3E;
}
#update-text {
margin-top: 20px;
width: 320px;
}
#update-view {
display: none;
}
#update-button {
margin-left: -4%;
}
#restart-button {
display: none;
}
@ -52,12 +49,12 @@
#update-button-container {
display: flex;
flex-direction: row;
margin: auto;
}
#progress-bar {
display: none;
width: 320px;
height: 40px;
margin-top: 20px;
border-radius: 50px;
@ -82,3 +79,53 @@
background-position: 0 0;
}
}
/* Display scaling (Minimum supported resolution is 960x540) */
@media only screen and ((min-width: 2560px) or (min-height: 1440px)) {
.button {
padding: 12px 35px;
margin: 20px;
margin-top: 25px;
margin-bottom: 15px;
}
#update-text {
margin-top: 20px;
}
}
@media only screen and ((max-width: 2559px) or (max-height: 1439px)) {
.button {
padding: 12px 30px;
margin: 20px 15px;
margin-bottom: 10px;
}
#update-text {
margin-top: 20px;
}
}
@media only screen and ((max-width: 1919px) or (max-height: 1079px)) {
.button {
padding: 8px 25px;
margin: 20px 10px;
margin-bottom: 10px;
}
#update-text {
margin-top: 10px;
}
}
@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
.button {
padding: 8px 20px;
margin: 15px 10px;
margin-bottom: 5px;
}
#update-text {
margin-top: 10px;
}
}

View file

@ -3,6 +3,7 @@
<head>
<title>FCast Receiver</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../assets/fonts/inter.css" />
<link rel="stylesheet" href="./common.css" />
<link rel="stylesheet" href="./style.css" />