Fix mobile view (codex-team#650)

* Update postcss config

* Rebuild editor

bump version

* Update CHANGELOG.md

* Update .postcssrc.yml

.postcssrc.yml

@@ -0,0 +1,39 @@
+plugins:
+  # Consumes files by @import rule
+  # https://github.com/postcss/postcss-import
+  postcss-import: {}
+
+  # Apply custom property sets via @apply rule
+  # https://github.com/pascalduez/postcss-apply
+  postcss-apply: {}
+
+  # Convert modern CSS into something most browsers can understand
+  # https://github.com/csstools/postcss-preset-env
+  postcss-preset-env:
+    # Polyfill CSS features
+    # https://github.com/csstools/postcss-preset-env#stage
+    #
+    # List of features with levels: https://cssdb.org/
+    stage: 0
+
+    # Define polyfills based on browsers you are supporting
+    # https://github.com/csstools/postcss-preset-env#browsers
+    browsers:
+      - 'last 2 versions'
+      - '> 1%'
+
+    # Instruct all plugins to omit pre-polyfilled CSS
+    # https://github.com/csstools/postcss-preset-env#preserve
+    preserve: false
+
+  # Nested rules unwrapper
+  # https://github.com/postcss/postcss-nested
+  #
+  # As you know 'postcss-preset-env' plugin has an ability to process
+  # 'postcss-nesting' feature but it does not work with BEM
+  # Report: https://github.com/csstools/postcss-preset-env/issues/40
+  postcss-nested: {}
+
+  # Compression tool
+  # https://github.com/cssnano/cssnano
+  cssnano: {}

dist/editor.licenses.txt

@@ -173,30 +173,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
-css-loader
-MIT
-Copyright JS Foundation and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-
 html-janitor
 Apache License
                            Version 2.0, January 2004

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.11.10
+
+- `Fix` - Fix editor view on mobile devices
+
 ### 2.11.9
 
 - `Fix` - Fix inline toolbar buttons margin. Update dependencies list. Update tools for example page. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.11.9",
+  "version": "2.11.10",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",
@@ -49,21 +49,11 @@
     "html-janitor": "^2.0.4",
     "license-webpack-plugin": "^2.1.1",
     "postcss-apply": "^0.12.0",
-    "postcss-color-hex-alpha": "^5.0.2",
-    "postcss-color-mod-function": "^3.0.3",
-    "postcss-cssnext": "^3.1.0",
-    "postcss-custom-media": "^7.0.7",
-    "postcss-custom-properties": "^8.0.9",
-    "postcss-custom-selectors": "^5.1.2",
-    "postcss-font-family-system-ui": "^4.1.0",
-    "postcss-font-variant": "^4.0.0",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-media-minmax": "^4.0.0",
     "postcss-nested": "^4.1.2",
     "postcss-nested-ancestors": "^2.0.0",
-    "postcss-nesting": "^7.0.0",
     "postcss-preset-env": "^6.6.0",
-    "postcss-smart-import": "^0.7.6",
     "raw-loader": "^1.0.0",
     "rimraf": "^2.6.3",
     "stylelint": "^9.10.1",

src/styles/variables.css

@@ -1,3 +1,6 @@
+@custom-media --mobile (width <= 650px);
+@custom-media --not-mobile (width >= 651px);
+
 :root {
   /**
    * Selection color
@@ -50,9 +53,6 @@
    */
   --color-confirm: #E24A4A;
 
-  @custom-media --mobile (max-width: 650px);
-  @custom-media --not-mobile (min-width: 651px);
-
   --overlay-pane: {
     position: absolute;
     background-color: #FFFFFF;

webpack.config.js

@@ -89,13 +89,6 @@ module.exports = (env, argv) => {
           test: /\.css$/,
           exclude: /node_modules/,
           use: [
-            {
-              loader: 'css-loader',
-              options: {
-              // minimize: 1,
-                importLoaders: 1
-              }
-            },
             'postcss-loader'
           ]
         },