schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 10:35:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add stylelint and fix lint issues

Browse source
This commit is contained in:
Lukas Martinelli 2017-01-12 11:23:06 +01:00
parent 93c7f323fc
commit 69f2e12ea0
16 changed files with 133 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.travis.yml
View file

@ -18,4 +18,5 @@ script:
- mkdir public - mkdir public
- node --stack_size=100000 $(which npm) run build - node --stack_size=100000 $(which npm) run build
- npm run lint - npm run lint
- npm run lint-styles
- npm run test - npm run test

7
package.json
View file

@ -9,7 +9,8 @@
"test": "karma start --single-run", "test": "karma start --single-run",
"test-watch": "karma start", "test-watch": "karma start",
"start": "webpack-dev-server --progress --profile --colors --watch-poll", "start": "webpack-dev-server --progress --profile --colors --watch-poll",
"lint": "eslint --ext js --ext jsx {src,test}" "lint": "eslint --ext js --ext jsx {src,test}",
"lint-styles": "stylelint 'src/styles/*.scss'"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -63,6 +64,9 @@
"jshintConfig": { "jshintConfig": {
"esversion": 6 "esversion": 6
}, },
"stylelint": {
"extends": "stylelint-config-standard"
},
"eslintConfig": { "eslintConfig": {
"plugins": [ "plugins": [
"react" "react"
@ -116,6 +120,7 @@
"react-hot-loader": "^3.0.0-beta.6", "react-hot-loader": "^3.0.0-beta.6",
"sass-loader": "^4.0.1", "sass-loader": "^4.0.1",
"style-loader": "0.13.1", "style-loader": "0.13.1",
"stylelint-config-standard": "^15.0.1",
"transform-loader": "^0.2.3", "transform-loader": "^0.2.3",
"url-loader": "0.5.7", "url-loader": "0.5.7",
"webpack": "1.13.2", "webpack": "1.13.2",

9
src/styles/_base.scss
View file

@ -18,7 +18,9 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after { *,
*::before,
*::after {
box-sizing: inherit; box-sizing: inherit;
} }
@ -53,7 +55,8 @@ h4 {
margin-bottom: $margin-3; margin-bottom: $margin-3;
} }
input:focus, select:focus { input:focus,
select:focus {
color: $color-white !important; color: $color-white !important;
outline: #8e8e8e auto 1px !important; outline: #8e8e8e auto 1px !important;
} }
@ -63,7 +66,7 @@ label:hover {
} }
.clearfix { .clearfix {
&:after { &::after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;

19
src/styles/_components.scss
View file

@ -2,8 +2,8 @@
.maputnik-map { .maputnik-map {
position: fixed !important; position: fixed !important;
top: 40px; top: 40px;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
height: 100%; height: 100%;
width: 75%; width: 75%;
} }
@ -14,7 +14,7 @@
cursor: help; cursor: help;
} }
&-wrapper{ &-wrapper {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
font-size: $font-size-6; font-size: $font-size-6;
@ -32,7 +32,7 @@
font-size: 10px; font-size: 10px;
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 0px; left: 0;
width: 120px; width: 120px;
z-index: 3; z-index: 3;
} }
@ -68,11 +68,15 @@
.maputnik-icon-button { .maputnik-icon-button {
background-color: transparent; background-color: transparent;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
label, svg {
label,
svg {
cursor: pointer; cursor: pointer;
} }
svg { svg {
fill: $color-white; fill: $color-white;
} }
@ -102,6 +106,7 @@
display: inline-block; display: inline-block;
width: 43%; width: 43%;
} }
.maputnik-input-block-action { .maputnik-input-block-action {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
@ -111,14 +116,14 @@
// SPACE HELPER // SPACE HELPER
.maputnik-space { .maputnik-space {
flex-grow: 1; @include vendor-prefix(flex-grow, 1);
} }
// MESSAGE PANEL // MESSAGE PANEL
.maputnik-message-panel { .maputnik-message-panel {
padding: $margin-2; padding: $margin-2;
&-error { &-error {
color: $color-red; color: $color-red;
} }
} }

5
src/styles/_filtereditor.scss
View file

@ -54,6 +54,7 @@
margin-top: $margin-2; margin-top: $margin-2;
margin-bottom: $margin-2; margin-bottom: $margin-2;
} }
.maputnik-filter-editor-block-action { .maputnik-filter-editor-block-action {
display: inline-block; display: inline-block;
width: 6%; width: 6%;
@ -73,6 +74,7 @@
.maputnik-filter-editor-operator { .maputnik-filter-editor-operator {
display: inline-block; display: inline-block;
width: 17%; width: 17%;
.maputnik-select { .maputnik-select {
width: 100%; width: 100%;
} }
@ -82,7 +84,8 @@
display: inline-block; display: inline-block;
width: 54%; width: 54%;
.maputnik-string, .maputnik-number { .maputnik-string,
.maputnik-number {
width: 100%; width: 100%;
} }
} }

13
src/styles/_input.scss
View file

@ -24,20 +24,15 @@
//COLOR PICKER //COLOR PICKER
.maputnik-color { .maputnik-color {
@extend .maputnik-input; @extend .maputnik-input;
height: 26px; height: 26px;
} }
.maputnik-color-wrapper { .maputnik-color-wrapper {
position: relative; position: relative;
display: inline; display: inline;
} }
.maputnik-color-picker-offset {
}
.maputnik-color-picker-overlay {
}
// ARRAY // ARRAY
.maputnik-array { .maputnik-array {
@ -49,6 +44,7 @@
// SELECT // SELECT
.maputnik-select { .maputnik-select {
@extend .maputnik-input; @extend .maputnik-input;
height: 24px; height: 24px;
} }
@ -76,6 +72,7 @@
&-wrapper { &-wrapper {
@extend .maputnik-input; @extend .maputnik-input;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
position: relative; position: relative;
@ -116,7 +113,7 @@
overflow: auto; overflow: auto;
max-height: 50%; max-height: 50%;
background: $color-gray; background: $color-gray;
z-index: 3, z-index: 3;
} }
&-menu-item { &-menu-item {

43
src/styles/_layer.scss
View file

@ -1,13 +1,9 @@
// LAYER LIST // LAYER LIST
.maputnik-add-layer {
}
.maputnik-layer-list { .maputnik-layer-list {
&-header{ &-header {
padding: $margin-2; padding: $margin-2;
display: flex;
display: -ms-flexbox; @include flex-row;
@include vendor-prefix(flex-direction, row)
> * { > * {
vertical-align: middle; vertical-align: middle;
@ -32,7 +28,7 @@
font-weight: 400; font-weight: 400;
color: $color-lowgray; color: $color-lowgray;
font-size: $font-size-6; font-size: $font-size-6;
border-width: 0px 0px 1px; border-width: 0 0 1px;
border-style: solid; border-style: solid;
border-color: lighten($color-black, 0.1); border-color: lighten($color-black, 0.1);
user-select: none; user-select: none;
@ -43,24 +39,24 @@
padding: 5px 10px; padding: 5px 10px;
line-height: 1.3; line-height: 1.3;
max-height: 50px; max-height: 50px;
display: flex; opacity: 1;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
opacity: 1;
-webkit-transition: opacity 600ms, visibility 600ms; -webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms;
@include flex-row;
} }
&-icon-action svg { &-icon-action svg {
fill: $color-black; fill: $color-black;
} }
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected { .maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2); background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action svg { .maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5); fill: darken($color-lowgray, 0.5);
&:hover { &:hover {
fill: $color-white; fill: $color-white;
} }
@ -73,9 +69,9 @@
&-item-collapsed { &-item-collapsed {
position: absolute; position: absolute;
max-height: 0px; max-height: 0;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
@ -91,10 +87,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&-group {
//border-bottom: 2px solid $color-gray;
}
&-group-header { &-group-header {
font-size: $font-size-6; font-size: $font-size-6;
color: $color-lowgray; color: $color-lowgray;
@ -102,9 +94,8 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: $margin-2; padding: $margin-2;
display: flex;
display: -ms-flexbox; @include flex-row;
@include vendor-prefix(flex-direction, row)
svg { svg {
width: 14px; width: 14px;
@ -121,7 +112,6 @@
} }
} }
// FILTER EDITOR // FILTER EDITOR
.maputnik-layer-editor-group { .maputnik-layer-editor-group {
font-weight: bold; font-weight: bold;
@ -131,11 +121,10 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: $margin-2; padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
line-height: 20px; line-height: 20px;
@include flex-row;
&:hover { &:hover {
background-color: $color-gray; background-color: $color-gray;
} }

16
src/styles/_layout.scss
View file

@ -2,9 +2,9 @@
.maputnik-scroll-container { .maputnik-scroll-container {
overflow-x: visible; overflow-x: visible;
overflow-y: scroll; overflow-y: scroll;
bottom: 0px; bottom: 0;
left: 0px; left: 0;
right: 0px; right: 0;
top: 1px; top: 1px;
position: absolute; position: absolute;
} }
@ -16,18 +16,19 @@
&-list { &-list {
position: fixed; position: fixed;
bottom: 0px; bottom: 0;
height: 100%; height: 100%;
top: 40px; top: 40px;
left: 0px; left: 0;
z-index: 3; z-index: 3;
width: 200px; width: 200px;
overflow: hidden; overflow: hidden;
background-color: $color-black; background-color: $color-black;
} }
&-drawer { &-drawer {
position: fixed; position: fixed;
bottom: 0px; bottom: 0;
height: 100%; height: 100%;
top: 40px; top: 40px;
left: 200px; left: 200px;
@ -35,10 +36,11 @@
width: 350px; width: 350px;
background-color: $color-black; background-color: $color-black;
} }
&-bottom { &-bottom {
position: fixed; position: fixed;
height: 50px; height: 50px;
bottom: 0px; bottom: 0;
left: 550px; left: 550px;
z-index: 1; z-index: 1;
width: 100%; width: 100%;

7
src/styles/_mixins.scss
View file

@ -5,3 +5,10 @@
-o-#{$name}: #{$argument}; -o-#{$name}: #{$argument};
#{$name}: #{$argument}; #{$name}: #{$argument};
} }
@mixin flex-row {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
}

94
src/styles/_modal.scss
View file

@ -3,20 +3,22 @@
min-width: 350px; min-width: 350px;
max-width: 600px; max-width: 600px;
background-color: $color-black; background-color: $color-black;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
z-index: 3; z-index: 3;
} }
.maputnik-modal-section { .maputnik-modal-section {
padding-top: $margin-3; padding-top: $margin-3;
padding-bottom: $margin-3; padding-bottom: $margin-3;
} }
.maputnik-modal-header { .maputnik-modal-header {
background-color: $color-gray; background-color: $color-gray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
padding: $margin-3; padding: $margin-3;
@include flex-row;
} }
.maputnik-modal-header-title { .maputnik-modal-header-title {
font-size: $font-size-5; font-size: $font-size-5;
margin: 0; margin: 0;
@ -25,6 +27,7 @@
.maputnik-modal-header-toggle { .maputnik-modal-header-toggle {
cursor: pointer; cursor: pointer;
} }
.maputnik-modal-content { .maputnik-modal-content {
padding: $margin-3; padding: $margin-3;
} }
@ -35,33 +38,33 @@
//OVERLAY //OVERLAY
.maputnik-overlay-viewport { .maputnik-overlay-viewport {
position: fixed; position: fixed;
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
left: 0px; left: 0;
z-index: 2; z-index: 2;
opacity: 0.875; opacity: 0.875;
background-color: rgb(28, 31, 36); background-color: rgb(28, 31, 36);
} }
.maputnik-overlay { .maputnik-overlay {
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
left: 0px; left: 0;
position: fixed; position: fixed;
display: -ms-flexbox; align-items: center;
display: flex; justify-content: center;
@include vendor-prefix(flex-direction, column)
align-items: center; @include flex-row;
justify-content: center;
} }
//OPEN MODAL //OPEN MODAL
.maputnik-upload-button { .maputnik-upload-button {
@extend .maputnik-big-button; @extend .maputnik-big-button;
} }
.maputnik-public-style { .maputnik-public-style {
vertical-align: top; vertical-align: top;
margin-top: 10px; margin-top: 10px;
@ -72,6 +75,7 @@
font-size: $font-size-2; font-size: $font-size-2;
color: $color-lowgray; color: $color-lowgray;
} }
.maputnik-public-style-button { .maputnik-public-style-button {
background-color: $color-gray; background-color: $color-gray;
padding: $margin-3; padding: $margin-3;
@ -81,10 +85,9 @@
background-color: $color-midgray; background-color: $color-midgray;
} }
} }
.maputnik-public-style-header { .maputnik-public-style-header {
display: flex; @include flex-row;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
} }
.maputnik-public-style-thumbnail { .maputnik-public-style-thumbnail {
@ -93,38 +96,39 @@
max-width: 100%; max-width: 100%;
} }
.maputnik-add-layer{ .maputnik-add-layer {
@extend .clearfix; @extend .clearfix;
} }
//ADD MODAL //ADD MODAL
.maputnik-add-layer-button { .maputnik-add-layer-button {
@extend .maputnik-big-button;
margin-right: $margin-3; margin-right: $margin-3;
float: right; float: right;
display: inline-block; display: inline-block;
margin-top: 3; margin-top: 3;
margin-bottom: $margin-3; margin-bottom: $margin-3;
text-align: right; text-align: right;
@extend .maputnik-big-button;
} }
//SOURCE MODAL //SOURCE MODAL
.maputnik-public-source { .maputnik-public-source {
vertical-align: top; vertical-align: top;
margin-top: 1.5%; margin-top: 1.5%;
margin-right: 1.5%; margin-right: 1.5%;
background-color: $color-gray; background-color: $color-gray;
width: 48.5%; width: 48.5%;
display: inline-block; display: inline-block;
} }
.maputnik-public-source-select { .maputnik-public-source-select {
padding: $margin-3; padding: $margin-3;
font-size: $font-size-5; font-size: $font-size-5;
color: $color-lowgray; color: $color-lowgray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
background-color: transparent; background-color: transparent;
@include flex-row;
} }
.maputnik-public-source-name { .maputnik-public-source-name {
@ -138,14 +142,15 @@
.maputnik-active-source-type-editor { .maputnik-active-source-type-editor {
min-width: 500px; min-width: 500px;
} }
.maputnik-active-source-type-editor-header { .maputnik-active-source-type-editor-header {
background-color: $color-gray; background-color: $color-gray;
color: $color-lowgray; color: $color-lowgray;
padding: $margin-2; padding: $margin-2;
display: flex;
display: -ms-flexbox; @include flex-row;
@include vendor-prefix(flex-direction, row)
} }
.maputnik-active-source-type-editor-header-id { .maputnik-active-source-type-editor-header-id {
font-weight: 700; font-weight: 700;
line-height: 2; line-height: 2;
@ -153,10 +158,10 @@
} }
.maputnik-active-source-type-editor-content { .maputnik-active-source-type-editor-content {
border-color: $color-gray; border-color: $color-gray;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
padding: $margin-2; padding: $margin-2;
} }
.maputnik-add-source { .maputnik-add-source {
@ -165,6 +170,7 @@
.maputnik-add-source-button { .maputnik-add-source-button {
@extend .maputnik-big-button; @extend .maputnik-big-button;
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
margin-right: $margin-3; margin-right: $margin-3;

5
src/styles/_popup.scss
View file

@ -2,8 +2,6 @@
display: inline-block; display: inline-block;
color: $color-lowgray; color: $color-lowgray;
user-select: none; user-select: none;
padding-left: 0;
padding-right: $margin-1;
line-height: 1.2; line-height: 1.2;
padding-left: $margin-2; padding-left: $margin-2;
padding-right: $margin-2; padding-right: $margin-2;
@ -16,9 +14,6 @@
color: $color-white; color: $color-white;
} }
.maputnik-property-layer-popup {
}
.maputnik-feature-property-popup { .maputnik-feature-property-popup {
.maputnik-input-block { .maputnik-input-block {
margin: 0; margin: 0;

1
src/styles/_reset.scss
View file

@ -1,3 +1,4 @@
/* stylelint-disable */
html { html {
background-color: rgb(28, 31, 36); background-color: rgb(28, 31, 36);
} }

14
src/styles/_scrollbar.scss
View file

@ -1,12 +1,12 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: #26282e; background-color: #26282e;
width: 5px; width: 5px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #666; background-color: #666;
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }

3
src/styles/_toolbar.scss
View file

@ -17,7 +17,7 @@
height: $toolbar-height; height: $toolbar-height;
h1 { h1 {
display: inline; display: inline;
} }
img { img {
@ -37,6 +37,7 @@
cursor: pointer; cursor: pointer;
color: $color-white; color: $color-white;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: $color-midgray; background-color: $color-midgray;
} }

9
src/styles/_zoomproperty.scss
View file

@ -2,9 +2,10 @@
.maputnik-make-zoom-function { .maputnik-make-zoom-function {
background-color: transparent; background-color: transparent;
display: inline-block; display: inline-block;
padding-bottom: 0px; padding-bottom: 0;
padding-top: 0px; padding-top: 0;
vertical-align: middle; vertical-align: middle;
@extend .maputnik-icon-button; @extend .maputnik-icon-button;
} }
@ -28,6 +29,7 @@
vertical-align: top; vertical-align: top;
width: 16%; width: 16%;
margin-right: 3%; margin-right: 3%;
> * { > * {
width: 100%; width: 100%;
} }
@ -36,6 +38,7 @@
.maputnik-zoom-spec-property-stop-value { .maputnik-zoom-spec-property-stop-value {
display: inline-block; display: inline-block;
width: 81%; width: 81%;
> * { > * {
width: 100%; width: 100%;
} }
@ -43,11 +46,13 @@
.maputnik-delete-stop { .maputnik-delete-stop {
@extend .maputnik-icon-button; @extend .maputnik-icon-button;
vertical-align: top; vertical-align: top;
.maputnik-doc-wrapper { .maputnik-doc-wrapper {
width: auto; width: auto;
} }
.maputnik-doc-target { .maputnik-doc-target {
cursor: pointer; cursor: pointer;
} }

1
src/styles/index.scss
View file

@ -22,7 +22,6 @@ $toolbar-height: 40px;
@import 'mixins'; @import 'mixins';
@import 'reset'; @import 'reset';
@import 'base'; @import 'base';
@import 'components'; @import 'components';
@import 'scrollbar'; @import 'scrollbar';
@import 'picker'; @import 'picker';