yuzu-emu/liftinstall
1
0
Fork 0
mirror of https://github.com/yuzu-emu/liftinstall.git synced 2024-11-26 03:55:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Clean up positioning of buttons

Browse Source
This commit is contained in:
James 2018-09-19 12:22:40 +10:00
parent 9f32113f6b
commit 47f1c1aa38
4 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/main.css
View File

@ -36,6 +36,7 @@ pre {
.has-padding { .has-padding {
padding: 2rem; padding: 2rem;
position: relative;
} }
.clickable-box { .clickable-box {
@ -45,3 +46,30 @@ pre {
.clickable-box label { .clickable-box label {
pointer-events: none; pointer-events: none;
} }
.is-max-height {
height: 100%;
}
.is-bottom-floating {
position: absolute;
bottom: 0;
}
.is-right-floating {
position: absolute;
right: 0;
}
.has-padding .is-right-floating {
right: 1rem;
}
.is-left-floating {
position: absolute;
left: 0;
}
.has-padding .is-left-floating {
left: 1rem;
}

21
static/index.html
View File

@ -13,23 +13,26 @@
<link rel="stylesheet" href="/css/bulma.min.css" type="text/css"> <link rel="stylesheet" href="/css/bulma.min.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/main.css" type="text/css">
</head> </head>
<body> <body class="is-max-height">
<div id="app"> <div id="app" class="is-max-height">
<section class="section"> <section class="section is-max-height">
<div class="container"> <div class="container is-max-height">
<div class="columns"> <div class="columns is-max-height">
<div class="column is-one-third has-padding" v-if="!metadata.is_launcher"> <div class="column is-one-third has-padding" v-if="!metadata.is_launcher">
<img src="/logo.png" width="60%" /> <img src="/logo.png" width="60%" />
<h1 class="subtitle" v-if="!metadata.preexisting_install"> <br />
<br />
<h2 class="subtitle" v-if="!metadata.preexisting_install">
Welcome to the {{ attrs.name }} installer! Welcome to the {{ attrs.name }} installer!
</h1> </h2>
<h2 class="subtitle" v-if="!metadata.preexisting_install"> <h2 class="subtitle" v-if="!metadata.preexisting_install">
We will have you up and running in just a few moments. We will have you up and running in just a few moments.
</h2> </h2>
<h1 class="subtitle" v-if="metadata.preexisting_install"> <h2 class="subtitle" v-if="metadata.preexisting_install">
Welcome to the {{ attrs.name }} maintenance tool. Welcome to the {{ attrs.name }} maintenance tool.
</h1> </h2>
</div> </div>
<router-view></router-view> <router-view></router-view>

17
static/js/main.js
View File

@ -1,15 +1,17 @@
// Overwrite loggers with the logging backend // Overwrite loggers with the logging backend
window.onerror = function(msg, url, line) { if (window.external !== undefined && window.external.invoke !== undefined) {
window.onerror = function(msg, url, line) {
old_onerror(msg, url, line);
window.external.invoke(JSON.stringify({ window.external.invoke(JSON.stringify({
Log: { Log: {
kind: "error", kind: "error",
msg: msg + " @ " + url + ":" + line msg: msg + " @ " + url + ":" + line
} }
})); }));
}; };
// Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/ // Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/
function intercept(method){ function intercept(method){
console[method] = function(){ console[method] = function(){
var message = Array.prototype.slice.apply(arguments).join(' '); var message = Array.prototype.slice.apply(arguments).join(' ');
window.external.invoke(JSON.stringify({ window.external.invoke(JSON.stringify({
@ -19,11 +21,12 @@ function intercept(method){
} }
})); }));
} }
} }
var methods = ['log', 'warn', 'error']; var methods = ['log', 'warn', 'error'];
for (var i = 0; i < methods.length; i++) { for (var i = 0; i < methods.length; i++) {
intercept(methods[i]); intercept(methods[i]);
}
} }
// Disable F5 // Disable F5

45
static/js/views.js
View File

@ -96,7 +96,7 @@ const DownloadConfig = {
const SelectPackages = { const SelectPackages = {
template: ` template: `
<div class="column has-padding"> <div class="column has-padding">
<h4 class="subtitle">Select your preferred settings:</h4> <h4 class="subtitle">Select which packages you want to install:</h4>
<!-- Build options --> <!-- Build options -->
<div class="tile is-ancestor"> <div class="tile is-ancestor">
@ -129,16 +129,29 @@ const SelectPackages = {
</div> </div>
</div> </div>
<div class="is-pulled-right"> <div class="is-right-floating is-bottom-floating">
<a class="button is-dark" v-if="!$root.$data.metadata.preexisting_install && !advanced" <div class="field is-grouped">
<p class="control">
<a class="button is-medium" v-if="!$root.$data.metadata.preexisting_install && !advanced"
v-on:click="advanced = true">Advanced...</a> v-on:click="advanced = true">Advanced...</a>
<a class="button is-dark" v-if="!$root.$data.metadata.preexisting_install" </p>
<p class="control">
<a class="button is-dark is-medium" v-if="!$root.$data.metadata.preexisting_install"
v-on:click="install">Install</a> v-on:click="install">Install</a>
<a class="button is-dark" v-if="$root.$data.metadata.preexisting_install" </p>
<p class="control">
<a class="button is-dark is-medium" v-if="$root.$data.metadata.preexisting_install"
v-on:click="install">Modify</a> v-on:click="install">Modify</a>
</p>
</div> </div>
<a class="button is-pulled-left" v-if="$root.$data.metadata.preexisting_install" </div>
<div class="field is-grouped is-left-floating is-bottom-floating">
<p class="control">
<a class="button is-medium" v-if="$root.$data.metadata.preexisting_install"
v-on:click="go_back">Back</a> v-on:click="go_back">Back</a>
</p>
</div>
</div> </div>
`, `,
data: function() { data: function() {
@ -268,7 +281,11 @@ const ErrorView = {
<pre>{{ msg }}</pre> <pre>{{ msg }}</pre>
<a class="button is-primary is-pulled-right" v-if="remaining" v-on:click="go_back">Back</a> <div class="field is-grouped is-right-floating is-bottom-floating">
<p class="control">
<a class="button is-primary is-medium" v-if="remaining" v-on:click="go_back">Back</a>
</p>
</div>
</div> </div>
`, `,
data: function() { data: function() {
@ -301,7 +318,11 @@ const CompleteView = {
<h4 class="subtitle">{{ $root.$data.attrs.name }} has been uninstalled.</h4> <h4 class="subtitle">{{ $root.$data.attrs.name }} has been uninstalled.</h4>
</div> </div>
<a class="button is-dark is-pulled-right" v-on:click="exit">Exit</a> <div class="field is-grouped is-right-floating is-bottom-floating">
<p class="control">
<a class="button is-dark is-medium" v-on:click="exit">Exit</a>
</p>
</div>
</div> </div>
`, `,
data: function() { data: function() {
@ -322,19 +343,19 @@ const ModifyView = {
<div class="column has-padding"> <div class="column has-padding">
<h4 class="subtitle">Choose an option:</h4> <h4 class="subtitle">Choose an option:</h4>
<div class="field is-grouped"> <div class="field is-grouped is-bottom-floating">
<p class="control"> <p class="control">
<a class="button is-link" v-on:click="update"> <a class="button is-link is-medium" v-on:click="update">
Update Update
</a> </a>
</p> </p>
<p class="control"> <p class="control">
<a class="button" v-on:click="modify_packages"> <a class="button is-medium" v-on:click="modify_packages">
Modify Modify
</a> </a>
</p> </p>
<p class="control"> <p class="control">
<a class="button is-danger" v-on:click="prepare_uninstall"> <a class="button is-danger is-medium" v-on:click="prepare_uninstall">
Uninstall Uninstall
</a> </a>
</p> </p>