richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: Page now uses max height + new logo

pull/89/head
NGPixel 7 years ago
parent
6a734510d7
commit
08e695da7a
9 changed files with 48 additions and 41 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/images/logo.png
  2. 12
      client/scss/base/base.scss
  3. 8
      client/scss/components/footer.scss
  4. 4
      client/scss/components/panel.scss
  5. 2
      client/scss/components/sidebar.scss
  6. 6
      client/scss/configure.scss
  7. 51
      views/configure/index.pug
  8. 2
      views/pages/view.pug
  9. 4
      views/pages/welcome.pug

BIN
assets/images/logo.png
View File

Before After
Width: 375  |  Height: 108  |  Size: 22 KiB

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

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

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

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

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

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

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

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

6
client/scss/configure.scss
View File

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

51
views/configure/index.pug
View File

@ -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.<br />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

2
views/pages/view.pug
View File

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

4
views/pages/welcome.pug
View File

@ -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
Write Preview
Loading…
Cancel
Save