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

Login screen

Browse Source
This commit is contained in:
NGPixel 2016-10-23 19:41:02 -04:00
parent 6e65c63606
commit fa7391ea4b
13 changed files with 244 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

1
assets/css/login.css Normal file
View File

@ -0,0 +1 @@
#bg,#bg>div{width:100%;height:100%;top:0;left:0}#root,#root button,#root h1,a{color:#FFF}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}[v-cloak]{display:none}body{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px}a{transition:color .4s ease;text-decoration:none}a:hover{color:#FB8C00;text-decoration:underline}#bg{position:fixed;z-index:1;background-color:#000}#bg>div{background-size:cover;background-position:center center;position:absolute;opacity:0;visibility:hidden;transition:opacity 3s ease,visibility 3s;animation:bg 30s linear infinite}#copyright,#root{display:flex;left:10vw;z-index:2}#bg>div:nth-child(1){animation-delay:10s}#bg>div:nth-child(2){animation-delay:20s}#root h1,#root h2{animation:headerIntro 3s ease;padding:0}#root{position:fixed;top:15vh;flex-direction:column}#root h1{font-size:4rem;margin:0}#root h2{font-size:1.5rem;font-weight:400;color:rgba(255,255,255,.7);margin:0 0 25px}#root input[type=password],#root input[type=text]{width:350px;max-width:80vw;border:1px solid rgba(255,255,255,.3);border-radius:3px;background-color:rgba(0,0,0,.2);padding:0 15px;height:40px;margin:0 0 10px;color:#FFF;font-weight:700;font-size:14px;transition:all .4s ease}#root input[type=password]:focus,#root input[type=text]:focus{outline:0;border-color:rgba(255,255,255,.8)}#root button{background-color:#FB8C00;border:1px solid #ffa32f;border-radius:3px;height:40px;width:125px;padding:0;font-weight:700;margin:15px 0 0;transition:all .4s ease;cursor:pointer}#root button:focus{outline:0;border-color:#FFF}#root button:hover{background-color:#c87000}#copyright{align-items:center;justify-content:flex-start;position:absolute;bottom:10vh;color:rgba(255,255,255,.5);font-weight:700}#copyright .icon{font-size:1.2rem;margin:0 8px}#copyright a{opacity:.75}@-webkit-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-moz-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-o-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-webkit-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@-moz-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@-o-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@keyframes headerIntro{0%{opacity:0}100%{opacity:1}}

BIN
assets/images/bg_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
assets/images/bg_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
assets/images/bg_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

2
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/login.js Normal file
View File

@ -0,0 +1 @@
"use strict";jQuery(document).ready(function(u){u("#login-user").focus()});

7
client/js/login.js Normal file
View File

@ -0,0 +1,7 @@
"use strict";
jQuery( document ).ready(function( $ ) {
$('#login-user').focus();
});

4
client/scss/layout/_base.scss
View File

@ -5,10 +5,6 @@ html {
box-sizing: inherit;
}
#root {
padding-top: 52px;
}
[v-cloak] {
display: none;
}

4
client/scss/layout/_content.scss
View File

@ -1,4 +1,8 @@
#root {
padding-top: 52px;
}
#page-type-view > section {
transition: background-color .5s ease;

184
client/scss/login.scss Normal file
View File

@ -0,0 +1,184 @@
@import './layout/_base';
@import './layout/_mixins';
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
}
a {
color: #FFF;
transition: color 0.4s ease;
text-decoration: none;
&:hover {
color: #FB8C00;
text-decoration: underline;
}
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
> div {
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 3s ease, visibility 3s;
animation: bg 30s linear infinite;
&:nth-child(1) {
animation-delay: 10s;
}
&:nth-child(2) {
animation-delay: 20s;
}
}
}
#root {
position: fixed;
top: 15vh;
left: 10vw;
z-index: 2;
color: #FFF;
display: flex;
flex-direction: column;
h1 {
font-size: 4rem;
color: #FFF;
padding: 0;
margin: 0;
animation: headerIntro 3s ease;
}
h2 {
font-size: 1.5rem;
font-weight: normal;
color: rgba(255,255,255,0.7);
padding: 0;
margin: 0 0 25px 0;
animation: headerIntro 3s ease;
}
input[type=text], input[type=password] {
width: 350px;
max-width: 80vw;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 3px;
background-color: rgba(0,0,0,0.2);
padding: 0 15px;
height: 40px;
margin: 0 0 10px 0;
color: #FFF;
font-weight: bold;
font-size: 14px;
transition: all 0.4s ease;
&:focus {
outline: none;
border-color: rgba(255,255,255,0.8);
}
}
button {
background-color: #FB8C00;
color: #FFF;
border: 1px solid lighten(#FB8C00, 10%);
border-radius: 3px;
height: 40px;
width: 125px;
padding: 0;
font-weight: bold;
margin: 15px 0 0 0;
transition: all 0.4s ease;
cursor: pointer;
&:focus {
outline: none;
border-color: #FFF;
}
&:hover {
background-color: darken(#FB8C00, 10%);
}
}
}
#copyright {
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute;
left: 10vw;
bottom: 10vh;
z-index: 2;
color: rgba(255,255,255,0.5);
font-weight: bold;
.icon {
font-size: 1.2rem;
margin: 0 8px;
}
a {
opacity: 0.75;
}
}
@include keyframes(bg) {
0% {
@include prefix(transform, scale(1,1));
visibility: visible;
opacity: 0;
},
5% {
opacity: 0.5;
},
33% {
opacity: 0.5;
},
38% {
@include prefix(transform, scale(1.2, 1.2));
opacity: 0;
},
39% {
visibility: hidden;
}
100% {
visibility: hidden;
opacity: 0;
}
}
@include keyframes(headerIntro) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

6
gulpfile.js
View File

@ -39,7 +39,7 @@ var paths = {
'!./node_modules/ace-builds/src-min-noconflict/mode-markdown.js'
],
scriptapps: [
'./client/js/app.js'
'./client/js/*.js'
],
scriptapps_watch: [
'./client/js/**/*.js'
@ -50,7 +50,7 @@ var paths = {
'./node_modules/simplemde/dist/simplemde.min.css'
],
cssapps: [
'./client/scss/app.scss'
'./client/scss/*.scss'
],
cssapps_watch: [
'./client/scss/**/*.scss'
@ -115,7 +115,6 @@ gulp.task("scripts-app", function () {
return gulp.src(paths.scriptapps)
.pipe(plumber())
.pipe(concat('app.js'))
.pipe(include({ extensions: "js" }))
.pipe(babel())
.pipe(uglify())
@ -148,7 +147,6 @@ gulp.task("css-app", function () {
return gulp.src(paths.cssapps)
.pipe(plumber())
.pipe(sass())
.pipe(concat('app.css'))
.pipe(cleanCSS({ keepSpecialComments: 0 }))
.pipe(plumber.stop())
.pipe(gulp.dest("./assets/css"));

44
views/auth/login.pug
View File

@ -1 +1,43 @@
DUDE
doctype html
html
head
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
meta(name='theme-color', content='#009688')
meta(name='msapplication-TileColor', content='#009688')
meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
title= appconfig.title
// Favicon
each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
each favsize in [32, 96, 16]
link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
link(rel='manifest', href='/manifest.json')
// CSS
link(type='text/css', rel='stylesheet', href='/css/libs.css')
link(type='text/css', rel='stylesheet', href='/css/login.css')
// JS
script(type='text/javascript', src='/js/libs.js')
script(type='text/javascript', src='/js/login.js')
body
#bg
each bg in [1, 2, 3]
div(style="background-image:url(/images/bg_" + bg + ".jpg);")
#root
h1= appconfig.title
h2 Login required
input#login-user(type='text', placeholder='Email address')
input#login-pass(type='password', placeholder='Password')
button Log In
#copyright
= t('footer.poweredby') + ' '
a.icon(href='https://github.com/Requarks/wiki')
i.fa.fa-github
a(href='https://github.com/Requarks/wiki') Requarks Wiki