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

28
public/splash.html
View File

@ -1,6 +1,28 @@
<html style="margin:0 0 0 0;padding:0 0 0 0;overflow:hidden;"> <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;"> <head>
<img style="margin:0 0 0 0;padding:0 0 0 0;" width="900px" height="900px" src="./splash.png"/> <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> </body>
</html> </html>

2
src/components/RyzenAdjOptionForm.tsx
View File

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

4
src/components/RyzenAdjOptionLabel.tsx
View File

@ -29,9 +29,9 @@ class RyzenAdjOptionLabel extends React.PureComponent<RyzenAdjOptionLabelProps,
return ( return (
<RyzenControllerAppContext.Consumer> <RyzenControllerAppContext.Consumer>
{ryzenControllerAppContext => ( {ryzenControllerAppContext => (
<div className="uk-grid-small" uk-grid=""> <div className="uk-grid-small form-label" uk-grid="">
<div className="uk-width-expend"> <div className="uk-width-expend">
<h2> <h2 className="uk-flex uk-flex-middle">
<label className="uk-pointer"> <label className="uk-pointer">
<input <input
className="uk-margin-right uk-checkbox" 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> { class SettingForm extends React.PureComponent<SettingFormProps> {
render(): React.ReactNode { render(): React.ReactNode {
return ( 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} {this.props.setting.displayTitle ? <h4 className="uk-margin-top">{this.props.setting.name}</h4> : null}
<label className="uk-form-label uk-pointer"> <label className="uk-form-label uk-pointer">
{this.renderType(this.props.setting.type)} {this.props.setting.short_description} {this.renderType(this.props.setting.type)} {this.props.setting.short_description}

12
src/components/TopBar.tsx
View File

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

39
src/index.scss
View File

@ -24,7 +24,14 @@ html {
.uk-tab, .uk-tab,
.uk-card-title, .uk-card-title,
.uk-badge, .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; 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;
}
}
}
} }