mirror of
https://github.com/Mastermindzh/tidal-hifi.git
synced 2024-11-22 13:32:42 +01:00
Restyled settings menu to include version number and useful links on the about page. fixes #275
This commit is contained in:
parent
d8e4a493b9
commit
a962029b0b
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -16,5 +16,9 @@
|
||||
"tracklist",
|
||||
"widevine",
|
||||
"xesam"
|
||||
]
|
||||
],
|
||||
"sonarlint.connectedMode.project": {
|
||||
"connectionId": "public-sonarcloud",
|
||||
"projectKey": "Mastermindzh_tidal-hifi"
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Fixes the last.fm bug.
|
||||
- Added settings to customize the Discord rich presence information
|
||||
- Discord settings are now also collapsible like the ListenBrainz ones are
|
||||
- Restyled settings menu to include version number and useful links on the about page
|
||||
|
||||
## [5.6.0]
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link rel="stylesheet" href="./settings.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
|
||||
<body class="settings-window">
|
||||
@ -380,21 +381,24 @@
|
||||
|
||||
<section id="about-section" class="tabs__section about-section">
|
||||
<img alt="tidal icon" class="about-section__icon" src="./icon.png" />
|
||||
<p class="about-section__text">
|
||||
<a class="external-link" data-url="https://github.com/Mastermindzh/tidal-hifi">TIDAL Hi-Fi</a>
|
||||
is made by
|
||||
<a class="external-link" data-url="https://www.rickvanlieshout.com">
|
||||
Rick van Lieshout</a>. <br />It uses
|
||||
<a class="external-link" data-url="https://castlabs.com/">Castlabs'</a>
|
||||
version of Electron for widevine support.
|
||||
</p>
|
||||
<h4>TIDAL Hi-Fi</h4>
|
||||
<div class="about-section__version">
|
||||
<a href="">5.7.0</a>
|
||||
</div>
|
||||
<div class="about-section__links">
|
||||
<a href="https://github.com/mastermindzh/tidal-hifi/" class="about-section__button">Github <i
|
||||
class="fa fa-external-link"></i></a>
|
||||
<a href="https://github.com/Mastermindzh/tidal-hifi/issues" class="about-section__button">Report an issue <i
|
||||
class="fa fa-external-link"></i></a>
|
||||
<a href="https://github.com/Mastermindzh/tidal-hifi/graphs/contributors"
|
||||
class="about-section__button">Contributors <i class="fa fa-external-link"></i></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="footer__note">
|
||||
Some settings may require a restart of TIDAL Hi-Fi. To do so, click the button below:
|
||||
<strong>Note</strong>: some settings may require a restart of TIDAL Hi-Fi.
|
||||
</p>
|
||||
<button class="footer__button" id="restart">Restart TIDAL Hi-Fi</button>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -8,6 +8,7 @@ $tidal-grey: #72777f;
|
||||
$tidal-grey-darker: #404248;
|
||||
$tidal-grey-darker-focus: #55585f;
|
||||
$tidal-grey-darkest: #242528;
|
||||
$tidal-grey-darkest-focus: #2e2f33;
|
||||
|
||||
// --- Fonts ---
|
||||
|
||||
@ -309,26 +310,75 @@ html {
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding-top: 120px;
|
||||
padding-top: 40px;
|
||||
text-align: center;
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: block;
|
||||
max-width: 350px;
|
||||
margin: 20px auto 0;
|
||||
max-width: 500px;
|
||||
margin: -15px auto 0;
|
||||
}
|
||||
&__table {
|
||||
width: 120px;
|
||||
margin: 0 auto 0;
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&__version {
|
||||
margin: -10px 0px 30px 0px;
|
||||
a {
|
||||
background-color: $tidal-grey-darker;
|
||||
border: none;
|
||||
color: $tidal-blue;
|
||||
padding: 8px 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&__links {
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
a {
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
color: $white;
|
||||
padding: 10px 10px 10px 20px;
|
||||
margin: 8px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
justify-content: space-between;
|
||||
background-color: $tidal-grey-darkest;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
line-height: 30px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tidal-grey-darkest-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Footer ---
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: sticky;
|
||||
top: calc(100% - 120px);
|
||||
height: 100px;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
@ -63,8 +63,8 @@ const settingsModule = {
|
||||
|
||||
export const createSettingsWindow = function () {
|
||||
settingsWindow = new BrowserWindow({
|
||||
width: 700,
|
||||
height: 600,
|
||||
width: 650,
|
||||
height: 700,
|
||||
resizable: true,
|
||||
show: false,
|
||||
transparent: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user