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:
parent
6dd58cd620
commit
47f388b5d4
7 changed files with 546 additions and 85 deletions
|
@ -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')
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue