diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 00000000..489e3f83 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/client/scss/base/base.scss b/client/scss/base/base.scss index 5bb51ad1..ed39b57d 100644 --- a/client/scss/base/base.scss +++ b/client/scss/base/base.scss @@ -1,6 +1,7 @@ html { box-sizing: border-box; font-family: $core-font-standard; + height: 100%; } *, *:before, *:after { box-sizing: inherit; @@ -10,12 +11,19 @@ html { display: none; } +#root { + padding-bottom: 67px; + position: relative; + min-height: 100%; +} + body { - background-color: mc('blue-grey','100'); + background-color: lighten(mc('blue-grey','50'), 5%); + height: 100%; } main { - background-color: #FFF; + background-color: lighten(mc('blue-grey','50'), 5%); } a { diff --git a/client/scss/components/footer.scss b/client/scss/components/footer.scss index 63332902..0fcf7c3e 100644 --- a/client/scss/components/footer.scss +++ b/client/scss/components/footer.scss @@ -1,13 +1,17 @@ .footer { background-color: mc('blue-grey','50'); - border-bottom: 5px solid mc('blue-grey','100'); display: flex; justify-content: space-between; align-items: center; - padding: 25px; + padding: 0 25px; + height: 70px; font-size: 13px; font-weight: 500; color: mc('blue-grey','500'); + position: absolute; + right: 0; + bottom: 0; + left: 0; ul { padding: 0; diff --git a/client/scss/components/panel.scss b/client/scss/components/panel.scss index b6ce48fd..de90ac3e 100644 --- a/client/scss/components/panel.scss +++ b/client/scss/components/panel.scss @@ -32,8 +32,8 @@ &.is-featured { border-top-left-radius: 4px; border-top-right-radius: 4px; - background-color: mc('indigo', '300'); - border-bottom-color: mc('indigo', '400'); + background-color: mc($primary, '400'); + border-bottom-color: mc($primary, '500'); color: #FFF; > i::before { diff --git a/client/scss/components/sidebar.scss b/client/scss/components/sidebar.scss index aab858d2..61661eab 100644 --- a/client/scss/components/sidebar.scss +++ b/client/scss/components/sidebar.scss @@ -4,7 +4,7 @@ color: mc('blue-grey', '50'); width: 250px; max-width: 250px; - min-height: 80vh; + min-height: calc(100vh - 120px); aside { padding: 1px 0 15px 0; diff --git a/client/scss/configure.scss b/client/scss/configure.scss index 91f4d8b1..af786b8d 100644 --- a/client/scss/configure.scss +++ b/client/scss/configure.scss @@ -22,13 +22,9 @@ $primary: 'indigo'; .welcome { text-align: center; - padding: 25px 0 0; + padding: 50px 0 15px 0; color: mc('grey', '700'); - h1 { - margin-top: 5px; - } - h2 { margin: 0; } diff --git a/views/configure/index.pug b/views/configure/index.pug index 4d2c8449..44540b50 100644 --- a/views/configure/index.pug +++ b/views/configure/index.pug @@ -26,10 +26,9 @@ html(data-logic='configure') main .container transition(name='tst-welcome') - .welcome(style={'padding-bottom': '5px'}, v-if='state === "welcome" || state === "restart"') - img(src='/favicons/android-icon-96x96.png', alt='Wiki.js') - h1 Welcome to Wiki.js! - h2(style={'margin-bottom': 0}) A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown + .welcome(v-if='state === "welcome" || state === "restart"') + img(src='/images/logo.png', alt='Wiki.js') + h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown .content(v-cloak) //- ============================================== @@ -39,14 +38,14 @@ html(data-logic='configure') template(v-if='state === "welcome"') .panel h2.panel-title.is-featured - span Introduction + span Welcome! i(v-if='loading') .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 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 .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 @@ -68,9 +67,9 @@ html(data-logic='configure') p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] Error: {{ syscheck.error }} .panel-footer .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-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 @@ -111,8 +110,8 @@ html(data-logic='configure') span.desc Should the site be accessible (read only) without login. .panel-footer .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-indigo(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue + button.button.is-light-blue.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back + button.button.is-light-blue(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue //- ============================================== //- 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! .panel-footer .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-indigo(v-on:click='proceedToDb', v-bind:disabled='loading') Continue + button.button.is-light-blue.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back + button.button.is-light-blue(v-on:click='proceedToDb', v-bind:disabled='loading') Continue //- ============================================== //- 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.
You can also specify an environment variable as the connection string (e.g. $MONGO_URI). .panel-footer .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-indigo(v-on:click='proceedToDbcheck', v-bind:disabled='loading || errors.any("db")') Connect + button.button.is-light-blue.is-outlined(v-on:click='proceedToConsiderations', v-bind:disabled='loading') Back + button.button.is-light-blue(v-on:click='proceedToDbcheck', v-bind:disabled='loading || errors.any("db")') Connect //- ============================================== //- DATABASE CHECK @@ -184,9 +183,9 @@ html(data-logic='configure') p(v-if='!loading && !dbcheck.ok') #[i.icon-square-cross] Error: {{ dbcheck.error }} .panel-footer .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-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 @@ -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. .panel-footer .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-indigo(v-on:click='proceedToGit', v-bind:disabled='loading || errors.any("paths")') Continue + button.button.is-light-blue.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back + button.button.is-light-blue(v-on:click='proceedToGit', v-bind:disabled='loading || errors.any("paths")') Continue //- ============================================== //- GIT @@ -277,9 +276,9 @@ html(data-logic='configure') span.desc The email to use when pushing commits to the git repository. .panel-footer .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-indigo.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.is-outlined(v-on:click='proceedToPaths', v-bind:disabled='loading') Back + button.button.is-light-blue.is-outlined(v-on:click='conf.gitUseRemote = false; proceedToGitCheck()', v-bind:disabled='loading') Skip this step + button.button.is-light-blue(v-on:click='conf.gitUseRemote = true; proceedToGitCheck()', v-bind:disabled='loading || errors.any("git")') Continue //- ============================================== //- GIT CHECK @@ -301,9 +300,9 @@ html(data-logic='configure') p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] Error: {{ gitcheck.error }} .panel-footer .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-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 @@ -335,8 +334,8 @@ html(data-logic='configure') span.desc Verify your password again. .panel-footer .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-indigo(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue + button.button.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back + button.button.is-light-blue(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue //- ============================================== //- FINAL @@ -357,7 +356,7 @@ html(data-logic='configure') p(v-if='!loading && !final.ok') #[i.icon-square-cross] Error: {{ final.error }} .panel-footer .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-green(v-on:click='finish', v-if='loading || final.ok', v-bind:disabled='loading') Start diff --git a/views/pages/view.pug b/views/pages/view.pug index bdbd6715..60ad251c 100644 --- a/views/pages/view.pug +++ b/views/pages/view.pug @@ -28,7 +28,7 @@ block rootNavRight 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 .columns.is-gapless diff --git a/views/pages/welcome.pug b/views/pages/welcome.pug index cb97ebe6..b597deb6 100644 --- a/views/pages/welcome.pug +++ b/views/pages/welcome.pug @@ -10,7 +10,7 @@ block content #page-type-welcome .container .welcome - img(src='/favicons/android-icon-144x144.png', alt='Wiki.js') - h1 Welcome to your Wiki.js! + img(src='/images/logo.png', alt='Wiki.js') + h1 Welcome to your wiki! h2 Let's get started and create the home page. a.button.is-indigo(href='/create/home') Create Home Page