github.com
/
verdaccio
mirror of https://github.com/verdaccio/verdaccio.git
1
0
Fork 0
Code Releases Wiki Activity

Merge branch 'master' into feat-webui-scope

This commit is contained in:
Juan Picado @jotadeveloper 2018-07-29 21:59:47 +02:00 committed by GitHub
parent 7c3a617d79 b894235bd2
commit d916f3d7cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 262 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/webui/app.js
View File

@ -7,13 +7,13 @@ i18n.use(locale);
import Route from './router';
import './styles/global.scss';
import './styles/main.scss';
import 'normalize.css';
export default class App extends React.Component {
render() {
return (
<Route/>
<Route />
);
}
}

18
src/webui/components/Footer/footer.scss
View File

@ -1,17 +1,19 @@
@import '../../styles/variable';
@import '../../styles/variables';
@import '../../styles/mixins';
.wrap {
margin-top: auto;
border-top: 1px solid $border-color;
background: #f9f9f9;
background: $snow;
@include border(top, 1px, solid, $greyGainsboro);
}
footer.footer {
display: flex;
margin-top: 0;
padding: 20px 0;
font-size: 14px;
font-size: $font-size-sm;
height: 18px;
color: #999;
color: $nobel-01;
span {
display: inline-block;
@ -25,7 +27,7 @@ footer.footer {
position: relative;
margin-top: -2px;
height: 20px;
background: #d3dddd;
background: $greyAthens;
padding: 1px 4px;
border-radius: 2px;
transform: scaleX(0);
@ -33,14 +35,14 @@ footer.footer {
transform-origin: left;
&:before {
content: '';
position: absolute;
top: 3px;
left: -7px;
display: block;
content: '';
width: 7px;
height: 15px;
background: #d3dddd;
background: $greyAthens;
background-image: linear-gradient(45deg, white, white 30%, transparent 30%), linear-gradient(-225deg, white, white 30%, transparent 30%);
}

18
src/webui/components/Header/header.scss
View File

@ -1,4 +1,5 @@
@import '../../styles/variable';
@import '../../styles/variables';
@import '../../styles/mixins';
.header {
display: flex;
@ -6,20 +7,19 @@
width: 100%;
align-items: center;
background: $primary-color;
color: #fff;
color: $white;
figure {
margin: 0 0 0 10px;
font-size: 14px;
line-height: 18px;
font-size: $font-size-sm;
line-height: $line-height-sm;
padding: 8px 0;
}
.headerWrap {
display: flex;
align-items: center;
@include container-size();
@include container-size;
}
.headerRight {
@ -32,13 +32,13 @@
.headerButton {
color: inherit;
border-color: #fff;
border-color: $white;
background-color: transparent;
&:hover, &:focus {
color: $primary-color;
border-color: #f7f8f6;
background-color: #f7f8f6;
border-color: $saltpan;
background-color: $saltpan;
}
}
}

13
src/webui/components/Help/help.scss
View File

@ -1,22 +1,25 @@
@import '../../styles/variables';
@import '../../styles/mixins';
.help {
.noPkg {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
font-size: 20px;
color: #9f9f9f;
font-size: $font-size-lg;
color: $nobel-02;
.noPkgTitle {
margin: 1em 0;
padding: 0;
font-size: 24px;
font-size: $font-size-xl;
}
.noPkgIntro {
line-height: 1.5;
line-height: $line-height-xxs;
margin: 0 auto;
font-size: 14px;
font-size: $font-size-sm;
}
code {

11
src/webui/components/NotFound/404.scss
View File

@ -1,14 +1,15 @@
@import '../../styles/variable';
@import '../../styles/variables';
@import '../../styles/mixins';
.notFound {
width: 100%;
font-size: 18px;
line-height: 30px;
font-size: $font-size-md;
line-height: $line-height-xl;
border: none;
border-bottom: 1px solid lightgrey;
outline: none;
@include border-bottom-default($grey-light);
&:focus {
border-bottom: 1px solid grey;
@include border-bottom-default($grey);
}
}

27
src/webui/components/Package/package.scss
View File

@ -1,4 +1,5 @@
@import '../../styles/variable';
@import '../../styles/variables';
@import '../../styles/mixins';
.package {
.header {
@ -12,15 +13,15 @@
p.description {
width: 100%;
margin-bottom: 0;
font-size: 14px;
color: darkgray;
font-size: $font-size-sm;
color: $grey-dark;
}
}
.details {
display: flex;
font-size: 80%;
color: $description_color;
color: $grey-light;
padding-top: 5px;
.license {
width: 20%;
@ -45,7 +46,7 @@
width: 100%;
h1 {
font-size: 18px;
font-size: $font-size-md;
margin: 0;
:global {
@ -57,7 +58,7 @@
}
.author {
color: $description_color;
color: $grey-light;
font-size: inherit;
width: 30%;
text-align: right;
@ -65,25 +66,21 @@
&:hover {
&::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
content: '';
display: block;
background: rgba(255, 255, 255, 0.7);
@include fullSize;
}
&::after {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
left: 0;
text-align: center;
font-size: 18px;
transform: translateY(-50%);
font-size: $font-size-md;
}
}
}

9
src/webui/components/PackageDetail/packageDetail.scss
View File

@ -1,12 +1,13 @@
@import '../../styles/variable';
@import '../../styles/variables';
@import '../../styles/mixins';
.pkgDetail {
.title {
font-size: 26px;
border-bottom: 1px solid $border-color;
font-weight: 600;
font-size: $font-size-xxl;
font-weight: $font-weight-semibold;
margin: 0 0 40px;
padding-bottom: 5px;
@include border-bottom-default($greyGainsboro);
}
.readme {

9
src/webui/components/PackageList/packageList.scss
View File

@ -1,9 +1,12 @@
@import '../../styles/variables';
@import '../../styles/mixins';
.pkgContainer {
margin: 0;
padding: 0;
li {
border-bottom: 1px solid #e4e8f1;
@include border-bottom-default($paleNavy);
list-style: none;
&:last-child {
@ -12,8 +15,8 @@
}
.listTitle {
font-weight: normal;
font-size: 24px;
font-weight: $font-weight-regular;
font-size: $font-size-xl;
margin-top: 30px;
margin-bottom: 0;
}

15
src/webui/components/PackageSidebar/Module/style.scss
View File

@ -1,4 +1,5 @@
@import '../../../styles/variable';
@import '../../../styles/variables';
@import '../../../styles/mixins';
.module {
@ -7,17 +8,17 @@
.moduleTitle {
display: flex;
align-items: flex-end;
font-size: 21px;
font-size: $font-size-lg;
margin: 0 0 10px;
padding: 5px 0;
font-weight: 600;
border-bottom: 1px solid $border-color;
font-weight: $font-weight-semibold;
@include border-bottom-default($greyGainsboro);
span { // description
font-size: 14px;
color: $text-grey;
font-size: $font-size-sm;
color: $greyChateau;
margin-left: auto;
font-weight: lighter;
font-weight: $font-weight-light;
}
}
}

6
src/webui/components/PackageSidebar/ModuleContentPlaceholder/style.scss
View File

@ -1,8 +1,8 @@
@import '../../../styles/variable';
@import '../../../styles/variables';
.emptyPlaceholder {
text-align: center;
margin: 20px 0;
font-size: 16px;
color: $text-grey;
font-size: $font-size-base;
color: $greyChateau;
}

6
src/webui/components/PackageSidebar/modules/Dependencies/style.scss
View File

@ -1,10 +1,10 @@
@import '../../../../styles/variable';
@import '../../../../styles/variables';
.dependenciesModule {
li {
display: inline-block;
font-size: 14px;
line-height: 1.5;
font-size: $font-size-sm;
line-height: $line-height-xxs;
a {
color: inherit;

11
src/webui/components/PackageSidebar/modules/Infos/style.scss
View File

@ -1,17 +1,16 @@
@import '../../../../styles/variable';
@import '../../../../styles/variables';
@import '../../../../styles/mixins';
.infosModule {
li {
display: flex;
font-size: 14px;
line-height: 2;
font-size: $font-size-sm;
line-height: $line-height-xs;
a {
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
@include ellipsis;
}
a:last-child,

7
src/webui/components/PackageSidebar/modules/LastSync/style.scss
View File

@ -1,8 +1,11 @@
@import '../../../../styles/variables';
.releasesModule {
li {
display: flex;
font-size: 14px;
line-height: 2;
font-size: $font-size-sm;
line-height: $line-height-xs;
span:last-child {
margin-left: auto;
}

17
src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/style.scss
View File

@ -1,7 +1,9 @@
@import '../../../../../styles/variables';
@import '../../../../../styles/mixins';
.maintainer {
$mine-height: 30px;
display: flex;
line-height: $mine-height;
line-height: $line-height-xl;
cursor: default;
&:not(:last-child) {
@ -9,19 +11,16 @@
}
img {
width: $mine-height;
height: $mine-height;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 100%;
flex-shrink: 0;
}
span {
font-size: 14px;
font-size: $font-size-sm;
flex-shrink: 1;
white-space: nowrap;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
@include ellipsis;
}
}

4
src/webui/components/PackageSidebar/modules/Maintainers/style.scss
View File

@ -1,4 +1,4 @@
@import '../../../../styles/variable';
@import '../../../../styles/variables';
.maintainersModule {
.showAllContributors {
@ -6,7 +6,7 @@
width: 100%;
background: none;
border: none;
font-size: 14px;
font-size: $font-size-sm;
text-align: center;
padding: 10px 0;
}

14
src/webui/components/Readme/readme.scss
View File

@ -1,14 +1,6 @@
@import '../../styles/variable';
@import '../../styles/mixins';
.searchBox {
width: 100%;
font-size: 18px;
line-height: 30px;
border: none;
border-bottom: 1px solid lightgrey;
outline: none;
&:focus {
border-bottom: 1px solid grey;
}
@include searchBox;
}

13
src/webui/components/Search/search.scss
View File

@ -1,14 +1,5 @@
@import '../../styles/variable';
@import '../../styles/mixins';
.searchBox {
width: 100%;
font-size: 18px;
line-height: 30px;
border: none;
border-bottom: 1px solid lightgrey;
outline: none;
&:focus {
border-bottom: 1px solid grey;
}
@include searchBox;
}

5
src/webui/modules/detail/detail.scss
View File

@ -1,7 +1,8 @@
@import '../../styles/variable';
@import '../../styles/variables';
@import '../../styles/mixins';
.twoColumn {
@include container-size();
@include container-size;
margin: auto 10px;
display: flex;

1
src/webui/modules/home/home.scss
View File

@ -1 +0,0 @@
@import '../../styles/variable';

10
src/webui/modules/home/index.js
View File

@ -9,8 +9,6 @@ import API from '../../utils/api';
import PackageList from '../../components/PackageList';
import Search from '../../components/Search';
import classes from './home.scss';
export default class Home extends React.Component {
static propTypes = {
@ -101,9 +99,9 @@ export default class Home extends React.Component {
render() {
return (
<div className={ classes.container }>
{ this.renderSearchBar() }
{ this.state.loading ? this.renderLoading() : this.renderPackageList() }
<div>
{this.renderSearchBar()}
{this.state.loading ? this.renderLoading() : this.renderPackageList()}
</div>
);
}
@ -112,7 +110,7 @@ export default class Home extends React.Component {
if (this.isTherePackages() && this.state.fistTime) {
return;
}
return <Search handleSearchInput={ this.handleSearchInput } />;
return <Search handleSearchInput={this.handleSearchInput} />;
}
renderLoading() {

22
src/webui/styles/core.scss Normal file
View File

@ -0,0 +1,22 @@
@import "variables";
html,
body {
height: 100%;
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
color: $text-color;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
strong {
font-weight: $font-weight-semibold;
}

19
src/webui/styles/global.scss
View File

@ -1,22 +1,11 @@
@import "variable";
body {
font-family: $font;
font-size: 12px;
color: $text-black;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
@import "variables";
@import "mixins";
:global {
.container {
margin-top: $space-lg;
@include container-size();
@include container-size;
.el-loading-spinner {
margin-top: 0 !important;
@ -43,6 +32,6 @@ ul {
}
.el-dialog__headerbtn:hover .el-dialog__close {
color: $text-black;
color: $eclipse;
}
}

2
src/webui/styles/main.scss Normal file
View File

@ -0,0 +1,2 @@
@import "core";
@import "global";

48
src/webui/styles/mixins.scss Normal file
View File

@ -0,0 +1,48 @@
@import "variables";
@mixin border($direction, $width, $style, $color) {
border-#{$direction}: $width $style $color;
}
@mixin border-bottom-default($color) {
border-bottom: 1px solid $color;
}
@mixin searchBox {
width: 100%;
font-size: $font-size-md;
line-height: $line-height-xl;
border: none;
@include border-bottom-default($grey-light);
outline: none;
&:focus {
@include border-bottom-default($grey);
}
}
@mixin ellipsis {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin fullSize {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@mixin container-size {
margin-left: auto;
margin-right: auto;
width: 100%;
min-width: 400px;
max-width: $break-sm;
@media screen and (min-width: $break-lg) {
max-width: $break-lg;
}
}

27
src/webui/styles/variable.scss
View File

@ -1,27 +0,0 @@
/* Variables */
$break-small: 800px;
$break-large: 1240px;
$description_color: lightgrey;
@mixin container-size {
margin-left: auto;
margin-right: auto;
width: 100%;
min-width: 400px;
max-width: $break-small;
@media screen and (min-width: $break-large) {
max-width: $break-large;
}
}
$space-lg: 30px;
// Font family from Bootstrap v4 Reboot.css
$font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* Colors */
$primary-color: #4b5e40;
$border-color: #e3e3e3;
$text-black: #3c3c3c;
$text-grey: #95989A;

64
src/webui/styles/variables.scss Normal file
View File

@ -0,0 +1,64 @@
// Verdaccio
// -------------------------
$black: #000;
$white: #fff;
$grey: #808080;
$grey-light: #d3d3d3;
$grey-dark: #a9a9a9;
$greyChateau: #95989a;
$greyGainsboro: #e3e3e3;
$greyAthens: #d3dddd;
$eclipse: #3c3c3c;
$paleNavy: #e4e8f1;
$saltpan: #f7f8f6;
$snow: #f9f9f9;
$nobel-01: #999999;
$nobel-02: #9f9f9f;
// Main colors
// -------------------------
$primary-color: #4b5e40;
$seconday-color:#20232a;
// Scaffolding
// -------------------------
$body-bg: $white;
$text-color: $eclipse;
// Typography
// -------------------------
// Font Family from Bootstrap v4 Reboot.css
$font-family-reboot: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-base: $font-family-reboot;
$font-size-xxl: 26px;
$font-size-xl: 24px;
$font-size-lg: 21px;
$font-size-md: 18px;
$font-size-base: 16px;
$font-size-sm: 14px;
$line-height-xl: 30px;
$line-height-sm: 18px;
$line-height-xs: 2;
$line-height-xxs: 1.5;
$font-weight-light: 400;
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$break-sm: 800px;
$break-lg: 1240px;
// Spacing
// -------------------------
$space-lg: 30px;