liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Page now uses max height + new logo

Browse Source
This commit is contained in:
NGPixel 2017-04-22 19:46:20 -04:00
parent 6a734510d7
commit 08e695da7a
9 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

12
client/scss/base/base.scss
View File

@ -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 {

8
client/scss/components/footer.scss
View File

@ -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;

4
client/scss/components/panel.scss
View File

@ -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 {

2
client/scss/components/sidebar.scss
View File

@ -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;

6
client/scss/configure.scss
View File

@ -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;
} }

51
views/configure/index.pug
View File

@ -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

2
views/pages/view.pug
View File

@ -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

4
views/pages/welcome.pug
View File

@ -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