gabrielkheisa/ryzen-controller
1
0
Fork 0
mirror of https://gitlab.com/ryzen-controller-team/ryzen-controller.git synced 2024-12-22 10:03:28 +07:00
Code Issues Projects Releases Wiki Activity

style: Updated some visual aspects for better understanding.

Browse Source
This commit is contained in:
Torsten Simon 2021-08-30 07:59:10 +00:00 committed by Quentin “Storm1er” Decaunes
parent 98383a6a76
commit 117c52acbb
6 changed files with 78 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/splash.html
View File

@ -1,6 +1,28 @@
<html style="margin:0 0 0 0;padding:0 0 0 0;overflow:hidden;">
<head></head>
<body style="margin:0 0 0 0;padding:0 0 0 0;overflow:hidden;">
<img style="margin:0 0 0 0;padding:0 0 0 0;" width="900px" height="900px" src="./splash.png"/>
</body>
<head>
<script>
document.onreadystatechange=(e) => {
// use set timeout, otherwise css animation not triggering
setTimeout(() => document.body.classList.add('sharp'),450);
};
</script>
<style>
body {
transition: all 1.5s ease-in;
filter:blur(30px);
}
body.sharp{
filter: blur(0);
}
</style>
</head>
<body style="margin:0;padding:0;overflow:hidden;width:900px;height:900px;">
<div
style="position:absolute; width:900px; height: 500px; top: 200px; margin:0;padding:0; background:radial-gradient(rgba(0,0,0,.35), transparent 40%);filter:blur(50px);"
></div>
<img style="position:absolute; margin:0;padding:0;width:900px;height:900px" src="./splash.png" />
</body>
</html>

2
src/components/RyzenAdjOptionForm.tsx
View File

@ -30,7 +30,7 @@ class RyzenAdjOptionForm extends React.PureComponent<RyzenAdjOptionFormProps, Ry
}
return (
<div className="uk-grid-small" uk-grid="">
<div className="uk-grid-small form-range" uk-grid="">
<div className="uk-width-1-6">
<input
onChange={onChange(ryzenControllerAppContext).bind(this)}

4
src/components/RyzenAdjOptionLabel.tsx
View File

@ -29,9 +29,9 @@ class RyzenAdjOptionLabel extends React.PureComponent<RyzenAdjOptionLabelProps,
return (
<RyzenControllerAppContext.Consumer>
{ryzenControllerAppContext => (
<div className="uk-grid-small" uk-grid="">
<div className="uk-grid-small form-label" uk-grid="">
<div className="uk-width-expend">
<h2>
<h2 className="uk-flex uk-flex-middle">
<label className="uk-pointer">
<input
className="uk-margin-right uk-checkbox"

5
src/components/SettingForm.tsx
View File

@ -18,7 +18,10 @@ type SettingFormProps = {
class SettingForm extends React.PureComponent<SettingFormProps> {
render(): React.ReactNode {
return (
<div uk-tooltip={this.props.setting.description || ""} className="uk-form-controls uk-form-controls-text">
<div
uk-tooltip={this.props.setting.description || ""}
className="uk-form-controls uk-form-controls-text settings-element"
>
{this.props.setting.displayTitle ? <h4 className="uk-margin-top">{this.props.setting.name}</h4> : null}
<label className="uk-form-label uk-pointer">
{this.renderType(this.props.setting.type)} {this.props.setting.short_description}

14
src/components/TopBar.tsx
View File

@ -10,7 +10,7 @@ const discordText = getTranslation("topbar.discord", "Join our new discord serve
function TopBar() {
return (
<header>
<header className="app-header">
<div
style={{
width: "96px",
@ -21,19 +21,19 @@ function TopBar() {
<img src={logo} alt="Ryzen Controller" style={{ padding: "10px" }} />
</div>
<Badge
className="uk-margin-left"
className="uk-margin-left badge"
value={AppVersion.semver}
onClick={openExternal("https://gitlab.com/ryzen-controller-team/ryzen-controller/releases")}
background="#EE0000"
/>
<Badge
className="uk-margin-left"
className="uk-margin-left badge"
value={beerText}
onClick={openExternal("https://www.patreon.com/ryzencontrollerteam")}
background="#888888"
/>
<Badge
className="uk-margin-left"
className="uk-margin-left badge"
value={discordText}
onClick={openExternal("https://discord.gg/M3hVqnT4pQ")}
background="#888888"
@ -41,7 +41,7 @@ function TopBar() {
<LightModeContext.Consumer>
{mode => (
<Badge
className="uk-margin-left"
className="uk-margin-left badge"
value={mode.mode === "dark" ? "🌙 Dark" : "☀️ Light"}
onClick={mode.switch}
background={mode.mode === "dark" ? "#888888" : "#888888"}
@ -49,7 +49,7 @@ function TopBar() {
)}
</LightModeContext.Consumer>
<Badge
className="uk-margin-left"
className="uk-margin-left badge"
value="🌐 Language"
onClick={() => {
require("uikit")
@ -73,4 +73,4 @@ function openExternal(url: string) {
};
}
export default TopBar;
export default TopBar;

39
src/index.scss
View File

@ -24,7 +24,14 @@ html {
.uk-tab,
.uk-card-title,
.uk-badge,
.uk-button, h1, h2, h3, h4, h5, h6, html {
.uk-button,
h1,
h2,
h3,
h4,
h5,
h6,
html {
font-family: Arial, Helvetica, sans-serif;
}
@ -58,4 +65,34 @@ html {
}
}
}
// custom app related styles
.app-header {
background-color: rgba(128, 128, 128, 0.15);
.badge {
height: 35px;
padding: 5px 10px !important;
}
}
.settings-element {
h4 {
font-size: 125%;
}
}
.form-range {
display: flex;
align-items: center;
> div {
padding: 2px 20px;
}
}
.form-label {
h2 {
font-size: 130%;
margin: 10px 10px 0 10px;
> label {
flex-grow: 1;
}
}
}
}