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

feat: login component, icon svg symbols, project structure

Browse Source
This commit is contained in:
NGPixel
2017-12-30 02:00:49 -05:00
parent 2d5a3203db
commit 8b30d31457
37 changed files with 863 additions and 23300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/scss/app.scss
View File

@@ -3,7 +3,7 @@
$primary: 'indigo';
@import "base/variables";
@import "base/colors";
@import "base/material";
@import "base/reset";
@import "base/mixins";
@import "base/fonts";
@@ -21,9 +21,11 @@ $primary: 'indigo';
@import 'components/grid';
@import 'components/hero';
@import 'components/history';
@import 'components/login';
@import 'components/markdown-content';
@import 'components/modal';
@import 'components/nav';
@import 'components/navigator';
@import 'components/panel';
@import 'components/search';
@import 'components/setup';
@@ -32,9 +34,7 @@ $primary: 'indigo';
@import 'components/toggle';
@import 'components/typography';
@import 'libs/nucleo-icons';
@import 'libs/twemoji-awesome';
@import 'libs/jquery-contextmenu';
@import 'node_modules/highlight.js/styles/atom-one-dark';
@import 'node_modules/simplemde/dist/simplemde.min';
@import 'node_modules/diff2html/dist/diff2html.min';
@@ -45,6 +45,4 @@ $primary: 'indigo';
@import 'layout/_loader';
@import 'layout/_rtl';
@import 'pages/login';
@import 'base/print';

3
client/scss/base/base.scss
View File

@@ -12,12 +12,11 @@ html {
}
#app {
padding-bottom: 67px;
position: relative;
min-height: 100%;
&.is-fullscreen {
width: 100vw;
//width: 100vw;
height: 100vh;
}
}

2
client/scss/base/icons.scss
View File

@@ -13,7 +13,7 @@
fill: none;
}
@each $size in 16,18,20,24,48,64,96,128 {
@each $size in 16,18,20,24,32,48,64,96,128 {
&.is-#{$size} {
width: #{$size}px;
height: #{$size}px;

24
client/scss/base/colors.scss → client/scss/base/material.scss
View File

@@ -325,3 +325,27 @@ $material-colors: (
@function mc($color-name, $color-variant: '500') {
@return material-color($color-name, $color-variant);
}
@mixin md-elevation-0 {
box-shadow: none !important;
}
@mixin md-elevation-1 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
@mixin md-elevation-2 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
@mixin md-elevation-3 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
@mixin md-elevation-4 {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
@mixin md-elevation-5 {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}

113
client/scss/pages/_login.scss → client/scss/components/login.scss
View File

@@ -1,16 +1,22 @@
.login {
background-color: #0288d1;
background-color: mc('blue', '800');
background-image: url('../svg/login-bg-motif.svg');
background-repeat: repeat;
background-size: 30%;
background-size: 200px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
animation: loginBgReveal 20s linear infinite;
&.is-error {
background-image: linear-gradient(to right, mc('red', '400'), mc('red', '600'));
@include keyframes(loginBgReveal) {
0% {
background-position-y: 0;
}
100% {
background-position-y: -800px;
}
}
&::before {
@@ -23,6 +29,20 @@
left: 0;
width: 100vw;
height: 100vh;
@include until($tablet) {
display: none;
}
}
&::after {
content: '';
position: absolute;
background-image: linear-gradient(to bottom, rgba(mc('blue', '800'), 1) 0%, rgba(mc('blue', '800'), 0) 100%);
top: 0;
left: 0;
width: 100vw;
height: 25vh;
}
&-container {
@@ -32,6 +52,7 @@
align-items: stretch;
box-shadow: 0 14px 28px rgba(0,0,0,0.2);
border-radius: 6px;
animation: zoomIn .5s ease;
&.is-expanded {
width: 650px;
@@ -39,45 +60,23 @@
.login-frame {
border-radius: 0 6px 6px 0;
border-left: none;
@include until($tablet) {
border-radius: 0;
}
}
}
@include until($tablet) {
width: 350px;
width: 100%;
border-radius: 0;
&.is-expanded {
width: 400px;
width: 100%;
}
}
}
&-error {
position: absolute;
bottom: 105%;
width: 100%;
min-height: 50px;
background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 100%);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
border-radius: 6px;
color: mc('red', '800');
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
strong {
font-weight: 600;
text-transform: uppercase;
display: block;
padding: 0 1rem 0 0;
border-right: 1px solid mc('red', '200');
}
span {
padding: 0 0 0 1rem;
display: block;
}
}
&-providers {
display: flex;
flex-direction: column;
@@ -90,15 +89,18 @@
@include until($tablet) {
width: 50px;
border-radius: 0;
}
button {
flex: 1 1;
flex: 0 1 50px;
padding: 5px 15px;
border: none;
color: #FFF;
background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
border-top: 1px solid rgba(mc('light-blue', '900'), .5);
// background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
// border-top: 1px solid rgba(mc('light-blue', '900'), .5);
background: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .7));
border-top: 1px solid rgba(0,0,0, .2);
font-family: $core-font-standard;
font-weight: 600;
text-align: left;
@@ -117,7 +119,7 @@
}
&:hover {
background-color: mc('light-blue', '900');
background-color: rgba(0,0,0, .4);
}
&:first-child {
@@ -130,7 +132,7 @@
&.is-active {
background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,.77) 100%);
color: mc('light-blue', '700');
color: mc('grey', '800');
cursor: default;
&:hover {
@@ -138,7 +140,7 @@
}
svg path {
fill: mc('light-blue', '800');
fill: mc('grey', '800');
}
}
@@ -177,6 +179,11 @@
}
}
}
&-fill {
flex: 1 1 0;
background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
}
}
&-frame {
@@ -192,7 +199,9 @@
text-align: center;
@include until($tablet) {
width: 350px;
width: 100%;
border-radius: 0;
border: none;
}
h1 {
@@ -220,7 +229,7 @@
input[type=text], input[type=password] {
width: 100%;
border: 1px solid #FFF;
border: 1px solid rgba(mc('light-blue','500'), .5);
border-radius: 3px;
background-color: rgba(255,255,255,.9);
box-shadow: inset 0 0 0 3px rgba(255,255,255, .25);
@@ -237,12 +246,22 @@
outline: none;
border-color: mc('light-blue','500');
background-color: rgba(255,255,255,1);
box-shadow: inset 0 0 0 3px rgba(mc('light-blue','500'), .25);
box-shadow: inset 0 0 8px rgba(mc('light-blue','500'), .5);
color: mc('light-blue', '800');
}
}
.button {
background-image: linear-gradient(to top, mc('deep-orange', '400') 0%, mc('deep-orange', '400') 50%, mc('orange', '500') 100%);
background-repeat: no-repeat;
background-size: 100% 200%;
&:hover {
background-position-y: 100%;
}
}
}
&-copyright {
@@ -259,8 +278,16 @@
a {
font-weight: 600;
color: mc('light-blue', '500');
color: mc('blue', '500');
margin-left: .25rem;
@include until($tablet) {
color: mc('blue', '200');
}
}
@include until($tablet) {
color: mc('blue', '50');
}
}

133
client/scss/components/navigator.scss Normal file
View File

@@ -0,0 +1,133 @@
.navigator {
position: fixed;
top: 0;
left: 0;
width: 100%;
&-bar {
display: flex;
justify-content: flex-start;
align-items: stretch;
background-color: rgba(mc('grey', '900'), .7);
}
&-fab {
&-button {
width: 50px;
height: 50px;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .4s ease;
svg use {
transition: all .4s ease;
}
&:hover {
svg use {
color: mc('blue', '500');
fill: mc('blue', '500');
}
}
}
}
&-title {
background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
background-size: 200%;
background-repeat: no-repeat;
padding: 0 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .4s ease;
cursor: pointer;
&:hover {
background-position-y: -50px;
}
h1 {
font-size: 1.2rem;
color: #FFF;
font-weight: 500;
}
}
&-subtitle {
background-repeat: no-repeat;
background-position-x: -100vw;
color: #FFF;
flex: 1 1 auto;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 1rem;
transition: background-position-x 1s ease;
&.is-error {
background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
}
&.is-warning {
background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
}
&.is-success {
background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
}
&.is-info {
background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
}
&.is-active {
background-position-x: 0;
}
svg {
margin-right: .5rem;
animation: flash 1s linear;
use {
color: #FFF;
fill: #FFF;
stroke: #FFF;
transition: all .4s ease;
}
}
h2 {
font-size: 1rem;
font-weight: 400;
}
}
&-action {
display: flex;
justify-content: flex-end;
align-items: stretch;
&-item {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
cursor: pointer;
svg use {
color: #FFF;
fill: #FFF;
transition: all .4s ease;
}
&:hover {
svg use {
color: mc('blue', '500');
fill: mc('blue', '500');
}
}
}
}
}

131
client/scss/libs/jquery-contextmenu.scss
View File

@@ -1,131 +0,0 @@
@charset "UTF-8";
/*!
* jQuery contextMenu - Plugin for simple contextMenu handling
*
* Version: v2.2.5-dev
*
* Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
* Web: http://swisnl.github.io/jQuery-contextMenu/
*
* Copyright (c) 2011-2016 SWIS BV and contributors
*
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
*
* Date: 2016-08-27T11:09:08.919Z
*/
.context-menu-icon {
display: list-item;
font-family: inherit;
}
.context-menu-icon::before {
position: absolute;
top: 50%;
left: 0;
width: 2em;
font-family: FontAwesome;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 1;
color: mc('blue', '500');
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.context-menu-icon.context-menu-hover:before {
color: #fff;
}
.context-menu-icon.context-menu-disabled::before {
color: #bbb;
}
.context-menu-list {
position: absolute;
display: inline-block;
min-width: 13em;
max-width: 26em;
padding: 0 0;
margin: .3em;
font-family: inherit;
font-size: 14px;
list-style-type: none;
background: #fff;
border: 1px solid mc('blue', '500');
border-radius: .2em;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}
.context-menu-item {
position: relative;
padding: 7px 2em;
color: #69707a;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
font-size: 14px;
text-align: left;
}
.context-menu-separator {
padding: 0;
margin: .35em 0;
border-bottom: 1px solid #e6e6e6;
}
.context-menu-item.context-menu-hover {
color: #fff;
cursor: pointer;
background-color: mc('blue', '500');
}
.context-menu-item.context-menu-disabled {
color: #bbb;
cursor: default;
background-color: #fff;
}
.context-menu-input.context-menu-hover {
cursor: default;
}
.context-menu-submenu:after {
position: absolute;
top: 50%;
right: .5em;
z-index: 1;
width: 0;
height: 0;
content: '';
border-color: transparent transparent transparent #2f2f2f;
border-style: solid;
border-width: .25em 0 .25em .25em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.context-menu-item > .context-menu-list {
top: .3em;
/* re-positioned by js */
right: -.3em;
display: none;
}
.context-menu-item.context-menu-visible > .context-menu-list {
display: block;
}
.context-menu-accesskey {
text-decoration: underline;
}

61
client/scss/libs/nucleo-icons-license.txt
View File

@@ -1,61 +0,0 @@
# Standard License - nucleoapp.com
Github repo: https://github.com/NucleoApp/license-standard
By purchasing Nucleo you are being granted a license to use Nucleo icons (including the custom Nucleo icons created through the Nucleo applications) for specific uses under certain conditions.
You have rights to use Nucleo icons in unlimited personal and commercial projects for yourself or a client. Even if you don't renew the Basic license, you can still use the source files for as many projects as you want.
For each project, you can use a maximum of 250 Nucleo icons (intended per unique style: for example if you're using the same icon in both the outline and glyph styles, or in 2 different sizes, you're using 2 icons).
By purchasing Nucleo, you have the right to:
- Use Nucleo icons in unlimited personal and commercial projects.
- Use Nucleo icons in application/website/print/mobile/logo design.
- Modify Nucleo icons to create you own icon variations.
You don't have the right to:
- Sublicense, resell, share, transfer, or otherwise redistribute Nucleo icons (even for free or within a more complex downloadable file).
- Use more than 250 Nucleo icons in a single project.
- Use Nucleo icons in a product that is directly competitive with Nucleo.
## Freelance Projects & Contracted work
If you’re working on one or more projects for a client, you can share with your client a maximum of 250 Nucleo icons per project. You can’t share Nucleo source files, unless the client purchases a Nucleo license.
If the End Product you (or the team you’ve been part of) have created for the client is a product offered for sale, and the Nucleo icons contribute to the core value of the product being sold/shared, your client will have to buy an Extended License.
## End Product Users
If you're using Nucleo icons in apps, installable items or online products/services, there's no limit to the number of users/customers that can use the product you're developing (e.g. if you're developing a web application and you're using Nucleo icons throughout the design, there's no limit to the number of active users of the application).
## Templates, Themes, UI Kits & Plugins
If you’re using Nucleo icons in templates, themes or plugins offered for sale, or for free, (e.g. UI kits, Wordpress Themes, HTML/CSS Templates), you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well.
The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated.
If Nucleo icons contribute to the core value of the template, theme or plugin sold/shared (e.g. a theme builder where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License.
## Open source projects
If you’re using Nucleo icons in open source projects, you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well.
The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated.
If Nucleo icons contribute to the core value of the open source project (e.g. a CMS where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License.
## Extended License
If you're interested in using Nucleo icons in items offered for sale (or for free) where the Nucleo icons contribute to the core value of the product being sold/shared, you will need an Extended License.
By purchasing an Extended License, you’re also granted the right to:
- Use up to 500 icons in a single project (the one you’re purchasing the Extended License for) if the users/customers can access Nucleo source files (e.g. Nucleo icons are stored in a folder inside the downloadable file).
- Use unlimited icons if the users/customers cannot access Nucleo source files (e.g. Nucleo icons are encrypted and user can only use icons throughout the application).
The downloadable source file has to include [Nucleo Standard License](https://github.com/NucleoApp/license-standard), as well as Nucleo Extended License.
Example of products offered for sale (or for free) where Nucleo contributes to the core value of the product being sold/shared:
- Logo builder application that combines Nucleo icons to create a logo
- Theme builder where users can browse Nucleo icons and pick the ones to include in their design.
- Application used to create presentations, where users can pick Nucleo icons through the built-in presentation builder.
If you’re still unclear about what is or isn’t allowed under this license, please contact us at info@nucleoapp.com.

6235
client/scss/libs/nucleo-icons.scss
View File

File diff suppressed because it is too large Load Diff