From 7559985a2ed1974bac3d5c48ecf7698e4f3fc16b Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Feb 2020 11:32:58 +0000 Subject: [PATCH 1/4] Changed bracket matching color so it doesn't clash with cursor. --- src/codemirror-maputnik.css | 57 --------------------------- src/components/layers/JSONEditor.jsx | 1 - src/styles/_codemirror.scss | 58 ++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 58 deletions(-) delete mode 100644 src/codemirror-maputnik.css diff --git a/src/codemirror-maputnik.css b/src/codemirror-maputnik.css deleted file mode 100644 index b43c6c0f..00000000 --- a/src/codemirror-maputnik.css +++ /dev/null @@ -1,57 +0,0 @@ -.cm-s-maputnik.CodeMirror { - height: 100%; - font-size: 12px; -} - -.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters { - color: #8e8e8e; - border: none; -} - -.cm-s-maputnik.CodeMirror { - background: transparent; -} - -.cm-s-maputnik .CodeMirror-gutters { - background: #212328; -} - -.cm-s-maputnik .CodeMirror-cursor { - border-left: solid thin #f0f0f0 !important; -} - -.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected { - background: rgba(255, 255, 255, 0.10); -} - -.cm-s-maputnik .CodeMirror-line::selection, -.cm-s-maputnik .CodeMirror-line > span::selection, -.cm-s-maputnik .CodeMirror-line > span > span::selection { - background: rgba(255, 255, 255, 0.10); -} - -.cm-s-maputnik .CodeMirror-line::-moz-selection, -.cm-s-maputnik .CodeMirror-line > span::-moz-selection, -.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection { - background: rgba(255, 255, 255, 0.10); -} - -.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 { - color: #8f9d6a; -} -.cm-s-maputnik span.cm-number { color: #91675f; } -.cm-s-maputnik span.cm-property { color: #b8a077; } - -.cm-s-maputnik .CodeMirror-activeline-background { - background: rgba(255,255,255,0.1); -} - -.cm-s-maputnik .CodeMirror-matchingbracket { - background-color: #f0f0f0; - color: #565659 !important; -} - -.cm-s-maputnik .CodeMirror-nonmatchingbracket { - background-color: #bb0000; - color: white !important; -} diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index e0a99ec9..77b258c8 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -10,7 +10,6 @@ import 'codemirror/addon/lint/lint' import 'codemirror/addon/edit/matchbrackets' import 'codemirror/lib/codemirror.css' import 'codemirror/addon/lint/lint.css' -import '../../codemirror-maputnik.css' import jsonlint from 'jsonlint' // This is mainly because of this issue also the API has changed, see comment in file diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss index 14cb415a..f3f931a9 100644 --- a/src/styles/_codemirror.scss +++ b/src/styles/_codemirror.scss @@ -7,3 +7,61 @@ position: relative; overflow: auto; } + +.cm-s-maputnik.CodeMirror { + height: 100%; + font-size: 12px; +} + +.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters { + color: #8e8e8e; + border: none; +} + +.cm-s-maputnik.CodeMirror { + background: transparent; +} + +.cm-s-maputnik .CodeMirror-gutters { + background: #212328; +} + +.cm-s-maputnik .CodeMirror-cursor { + border-left: solid thin #f0f0f0 !important; +} + +.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected { + background: rgba(255, 255, 255, 0.10); +} + +.cm-s-maputnik .CodeMirror-line::selection, +.cm-s-maputnik .CodeMirror-line > span::selection, +.cm-s-maputnik .CodeMirror-line > span > span::selection { + background: rgba(255, 255, 255, 0.10); +} + +.cm-s-maputnik .CodeMirror-line::-moz-selection, +.cm-s-maputnik .CodeMirror-line > span::-moz-selection, +.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection { + background: rgba(255, 255, 255, 0.10); +} + +.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 { + color: #8f9d6a; +} +.cm-s-maputnik span.cm-number { color: #91675f; } +.cm-s-maputnik span.cm-property { color: #b8a077; } + +.cm-s-maputnik .CodeMirror-activeline-background { + background: rgba(255,255,255,0.1); +} + +.cm-s-maputnik .CodeMirror-matchingbracket { + background: hsla(223, 12%, 35%, 1); + color: $color-white !important; +} + +.cm-s-maputnik .CodeMirror-nonmatchingbracket { + background-color: #bb0000; + color: white !important; +} From c770b440c27580dbdbf3ad00cb26286a33dd48ae Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Feb 2020 11:47:37 +0000 Subject: [PATCH 2/4] Make background map container white to match html page default. --- src/styles/_components.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 4bcc11a7..f64fa17f 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -1,5 +1,6 @@ // MAP .maputnik-map__container { + background: white; display: flex; position: fixed !important; top: $toolbar-height + $toolbar-offset; From 97bdc93a39ec7c5d7a6a51864845bc0e1dfed66f Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Feb 2020 11:56:51 +0000 Subject: [PATCH 3/4] Fixed lint error. --- src/styles/_codemirror.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss index f3f931a9..4270311b 100644 --- a/src/styles/_codemirror.scss +++ b/src/styles/_codemirror.scss @@ -11,6 +11,7 @@ .cm-s-maputnik.CodeMirror { height: 100%; font-size: 12px; + background: transparent; } .cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters { @@ -18,10 +19,6 @@ border: none; } -.cm-s-maputnik.CodeMirror { - background: transparent; -} - .cm-s-maputnik .CodeMirror-gutters { background: #212328; } From f4c18fd91b68db96ca78693fef737bbf28e438e8 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 9 Feb 2020 17:23:50 +0000 Subject: [PATCH 4/4] Fixed error bar from overflowing. --- src/styles/_components.scss | 6 +----- src/styles/_layout.scss | 4 ++-- src/styles/_vars.scss | 4 ++++ 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/styles/_components.scss b/src/styles/_components.scss index f64fa17f..8a6ce103 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -7,11 +7,7 @@ right: 0; bottom: 0; height: calc(100% - #{$toolbar-height + $toolbar-offset}); - width: calc( - 100% - - 200px /* layer list */ - - 350px /* layer editor */ - ); + width: $layout-map-width; &--error { align-items: center; diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index e0f00ad7..f3db7eb1 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -40,9 +40,9 @@ position: fixed; height: 50px; bottom: 0; - left: 550px; + right: 0; z-index: 1; - width: 100%; + width: $layout-map-width; background-color: $color-black; } } diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss index 7cb3d178..4a9cc098 100644 --- a/src/styles/_vars.scss +++ b/src/styles/_vars.scss @@ -21,3 +21,7 @@ $font-family: Roboto, sans-serif; $toolbar-height: 40px; $toolbar-offset: 0; +$layout-list-width: 200px; +$layout-editor-width: 370px; +$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width}); +