feat: Page now uses max height + new logo

pull/89/head
NGPixel 8 years ago
parent 6a734510d7
commit 08e695da7a

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

@ -1,6 +1,7 @@
html { html {
box-sizing: border-box; box-sizing: border-box;
font-family: $core-font-standard; font-family: $core-font-standard;
height: 100%;
} }
*, *:before, *:after { *, *:before, *:after {
box-sizing: inherit; box-sizing: inherit;
@ -10,12 +11,19 @@ html {
display: none; display: none;
} }
#root {
padding-bottom: 67px;
position: relative;
min-height: 100%;
}
body { body {
background-color: mc('blue-grey','100'); background-color: lighten(mc('blue-grey','50'), 5%);
height: 100%;
} }
main { main {
background-color: #FFF; background-color: lighten(mc('blue-grey','50'), 5%);
} }
a { a {

@ -1,13 +1,17 @@
.footer { .footer {
background-color: mc('blue-grey','50'); background-color: mc('blue-grey','50');
border-bottom: 5px solid mc('blue-grey','100');
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 25px; padding: 0 25px;
height: 70px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: mc('blue-grey','500'); color: mc('blue-grey','500');
position: absolute;
right: 0;
bottom: 0;
left: 0;
ul { ul {
padding: 0; padding: 0;

@ -32,8 +32,8 @@
&.is-featured { &.is-featured {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
background-color: mc('indigo', '300'); background-color: mc($primary, '400');
border-bottom-color: mc('indigo', '400'); border-bottom-color: mc($primary, '500');
color: #FFF; color: #FFF;
> i::before { > i::before {

@ -4,7 +4,7 @@
color: mc('blue-grey', '50'); color: mc('blue-grey', '50');
width: 250px; width: 250px;
max-width: 250px; max-width: 250px;
min-height: 80vh; min-height: calc(100vh - 120px);
aside { aside {
padding: 1px 0 15px 0; padding: 1px 0 15px 0;

@ -22,13 +22,9 @@ $primary: 'indigo';
.welcome { .welcome {
text-align: center; text-align: center;
padding: 25px 0 0; padding: 50px 0 15px 0;
color: mc('grey', '700'); color: mc('grey', '700');
h1 {
margin-top: 5px;
}
h2 { h2 {
margin: 0; margin: 0;
} }

@ -26,10 +26,9 @@ html(data-logic='configure')
main main
.container .container
transition(name='tst-welcome') transition(name='tst-welcome')
.welcome(style={'padding-bottom': '5px'}, v-if='state === "welcome" || state === "restart"') .welcome(v-if='state === "welcome" || state === "restart"')
img(src='/favicons/android-icon-96x96.png', alt='Wiki.js') img(src='/images/logo.png', alt='Wiki.js')
h1 Welcome to Wiki.js! h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
h2(style={'margin-bottom': 0}) A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
.content(v-cloak) .content(v-cloak)
//- ============================================== //- ==============================================
@ -39,14 +38,14 @@ html(data-logic='configure')
template(v-if='state === "welcome"') template(v-if='state === "welcome"')
.panel .panel
h2.panel-title.is-featured h2.panel-title.is-featured
span Introduction span Welcome!
i(v-if='loading') i(v-if='loading')
.panel-content.is-text .panel-content.is-text
p This installation wizard will guide you through the steps needed to get your wiki up and running in no time! p This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
p Detailed information about installation and usage can be found on the #[a(href='https://docs.wiki.requarks.io/') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project]. p Detailed information about installation and usage can be found on the #[a(href='https://docs.wiki.requarks.io/') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project].
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Start button.button.is-light-blue(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Start
//- ============================================== //- ==============================================
//- SYSTEM CHECK //- SYSTEM CHECK
@ -68,9 +67,9 @@ html(data-logic='configure')
p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] Error: {{ syscheck.error }} p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] Error: {{ syscheck.error }}
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back
button.button.is-teal(v-on:click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again button.button.is-teal(v-on:click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
button.button.is-indigo(v-on:click='proceedToGeneral', v-if='loading || syscheck.ok', v-bind:disabled='loading') Continue button.button.is-light-blue(v-on:click='proceedToGeneral', v-if='loading || syscheck.ok', v-bind:disabled='loading') Continue
//- ============================================== //- ==============================================
//- GENERAL //- GENERAL
@ -111,8 +110,8 @@ html(data-logic='configure')
span.desc Should the site be accessible (read only) without login. span.desc Should the site be accessible (read only) without login.
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue button.button.is-light-blue(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue
//- ============================================== //- ==============================================
//- CONSIDERATIONS //- CONSIDERATIONS
@ -142,8 +141,8 @@ html(data-logic='configure')
p The host URL you specified is localhost. Unless you are a developer running Wiki.js locally on your machine, this is not recommended! p The host URL you specified is localhost. Unless you are a developer running Wiki.js locally on your machine, this is not recommended!
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToDb', v-bind:disabled='loading') Continue button.button.is-light-blue(v-on:click='proceedToDb', v-bind:disabled='loading') Continue
//- ============================================== //- ==============================================
//- DATABASE //- DATABASE
@ -164,8 +163,8 @@ html(data-logic='configure')
span.desc The connection string to your MongoDB server. Leave the default localhost value if MongoDB is installed on the same server.<br />You can also specify an environment variable as the connection string (e.g. $MONGO_URI). span.desc The connection string to your MongoDB server. Leave the default localhost value if MongoDB is installed on the same server.<br />You can also specify an environment variable as the connection string (e.g. $MONGO_URI).
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToConsiderations', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToConsiderations', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToDbcheck', v-bind:disabled='loading || errors.any("db")') Connect button.button.is-light-blue(v-on:click='proceedToDbcheck', v-bind:disabled='loading || errors.any("db")') Connect
//- ============================================== //- ==============================================
//- DATABASE CHECK //- DATABASE CHECK
@ -184,9 +183,9 @@ html(data-logic='configure')
p(v-if='!loading && !dbcheck.ok') #[i.icon-square-cross] Error: {{ dbcheck.error }} p(v-if='!loading && !dbcheck.ok') #[i.icon-square-cross] Error: {{ dbcheck.error }}
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back
button.button.is-teal(v-on:click='proceedToDbcheck', v-if='!loading && !dbcheck.ok') Try Again button.button.is-teal(v-on:click='proceedToDbcheck', v-if='!loading && !dbcheck.ok') Try Again
button.button.is-indigo(v-on:click='proceedToPaths', v-if='loading || dbcheck.ok', v-bind:disabled='loading') Continue button.button.is-light-blue(v-on:click='proceedToPaths', v-if='loading || dbcheck.ok', v-bind:disabled='loading') Continue
//- ============================================== //- ==============================================
//- PATHS //- PATHS
@ -212,8 +211,8 @@ html(data-logic='configure')
span.desc The path where the local git repository will be created, used to store content in markdown files and uploads. span.desc The path where the local git repository will be created, used to store content in markdown files and uploads.
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToGit', v-bind:disabled='loading || errors.any("paths")') Continue button.button.is-light-blue(v-on:click='proceedToGit', v-bind:disabled='loading || errors.any("paths")') Continue
//- ============================================== //- ==============================================
//- GIT //- GIT
@ -277,9 +276,9 @@ html(data-logic='configure')
span.desc The email to use when pushing commits to the git repository. span.desc The email to use when pushing commits to the git repository.
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToPaths', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToPaths', v-bind:disabled='loading') Back
button.button.is-indigo.is-outlined(v-on:click='conf.gitUseRemote = false; proceedToGitCheck()', v-bind:disabled='loading') Skip this step button.button.is-light-blue.is-outlined(v-on:click='conf.gitUseRemote = false; proceedToGitCheck()', v-bind:disabled='loading') Skip this step
button.button.is-indigo(v-on:click='conf.gitUseRemote = true; proceedToGitCheck()', v-bind:disabled='loading || errors.any("git")') Continue button.button.is-light-blue(v-on:click='conf.gitUseRemote = true; proceedToGitCheck()', v-bind:disabled='loading || errors.any("git")') Continue
//- ============================================== //- ==============================================
//- GIT CHECK //- GIT CHECK
@ -301,9 +300,9 @@ html(data-logic='configure')
p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] Error: {{ gitcheck.error }} p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] Error: {{ gitcheck.error }}
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
button.button.is-teal(v-on:click='proceedToGitCheck', v-if='!loading && !gitcheck.ok') Try Again button.button.is-teal(v-on:click='proceedToGitCheck', v-if='!loading && !gitcheck.ok') Try Again
button.button.is-indigo(v-on:click='proceedToAdmin', v-if='loading || gitcheck.ok', v-bind:disabled='loading') Continue button.button.is-light-blue(v-on:click='proceedToAdmin', v-if='loading || gitcheck.ok', v-bind:disabled='loading') Continue
//- ============================================== //- ==============================================
//- ADMINISTRATOR ACCOUNT //- ADMINISTRATOR ACCOUNT
@ -335,8 +334,8 @@ html(data-logic='configure')
span.desc Verify your password again. span.desc Verify your password again.
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
button.button.is-indigo(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue button.button.is-light-blue(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue
//- ============================================== //- ==============================================
//- FINAL //- FINAL
@ -357,7 +356,7 @@ html(data-logic='configure')
p(v-if='!loading && !final.ok') #[i.icon-square-cross] Error: {{ final.error }} p(v-if='!loading && !final.ok') #[i.icon-square-cross] Error: {{ final.error }}
.panel-footer .panel-footer
.progress-bar: div(v-bind:style='{width: currentProgress}') .progress-bar: div(v-bind:style='{width: currentProgress}')
button.button.is-indigo.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back button.button.is-light-blue.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back
button.button.is-teal(v-on:click='proceedToFinal', v-if='!loading && !final.ok') Try Again button.button.is-teal(v-on:click='proceedToFinal', v-if='!loading && !final.ok') Try Again
button.button.is-green(v-on:click='finish', v-if='loading || final.ok', v-bind:disabled='loading') Start button.button.is-green(v-on:click='finish', v-if='loading || final.ok', v-bind:disabled='loading') Start

@ -28,7 +28,7 @@ block rootNavRight
block content block content
#page-type-view(data-entrypath=pageData.meta.path) #page-type-view.page-type-container(data-entrypath=pageData.meta.path)
.container.is-fluid.has-mkcontent .container.is-fluid.has-mkcontent
.columns.is-gapless .columns.is-gapless

@ -10,7 +10,7 @@ block content
#page-type-welcome #page-type-welcome
.container .container
.welcome .welcome
img(src='/favicons/android-icon-144x144.png', alt='Wiki.js') img(src='/images/logo.png', alt='Wiki.js')
h1 Welcome to your Wiki.js! h1 Welcome to your wiki!
h2 Let's get started and create the home page. h2 Let's get started and create the home page.
a.button.is-indigo(href='/create/home') Create Home Page a.button.is-indigo(href='/create/home') Create Home Page

Loading…
Cancel
Save