From b4e9a024d9f50c958a0e65bca33076502020952f Mon Sep 17 00:00:00 2001
From: Val Rudi <mail.valik@gmail.com>
Date: Fri, 6 Apr 2018 16:25:41 +0300
Subject: [PATCH] Applied fixes and improvements based on PR comments

---
 src/css_composer/view/CssRulesView.js        | 15 ++++++++---
 test/specs/css_composer/view/CssRulesView.js | 26 ++++++++++++++------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js
index 1a41cfe2e..c5ce97400 100644
--- a/src/css_composer/view/CssRulesView.js
+++ b/src/css_composer/view/CssRulesView.js
@@ -78,7 +78,10 @@ module.exports = require('backbone').View.extend({
   },
 
   getMediaWidth(mediaText) {
-    return mediaText && mediaText.replace('(max-width: ', '').replace(')', '');
+    return (
+      mediaText &&
+      mediaText.replace(`(${this.config.mediaCondition}: `, '').replace(')', '')
+    );
   },
 
   render() {
@@ -92,8 +95,14 @@ module.exports = require('backbone').View.extend({
     this.em
       .get('DeviceManager')
       .getAll()
-      .forEach(function(model) {
-        const blockId = pfx + 'rules-' + model.get('widthMedia');
+      .map(model => model.get('widthMedia'))
+      .sort(
+        (left, right) =>
+          ((right && right.replace('px', '')) || Number.MAX_VALUE) -
+          ((left && left.replace('px', '')) || Number.MAX_VALUE)
+      )
+      .forEach(widthMedia => {
+        const blockId = pfx + 'rules-' + widthMedia;
         $(`<div id="${blockId}"></div>`).appendTo(frag);
       });
 
diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js
index f80178bc6..5feeb93eb 100644
--- a/test/specs/css_composer/view/CssRulesView.js
+++ b/test/specs/css_composer/view/CssRulesView.js
@@ -9,14 +9,19 @@ module.exports = {
       const prefix = 'rules-';
       const devices = [
         {
-          name: 'Desktop',
-          width: '',
-          widthMedia: ''
+          name: 'Mobile portrait',
+          width: '320px',
+          widthMedia: '480px'
         },
         {
           name: 'Tablet',
           width: '768px',
           widthMedia: '992px'
+        },
+        {
+          name: 'Desktop',
+          width: '',
+          widthMedia: ''
         }
       ];
 
@@ -48,8 +53,17 @@ module.exports = {
         expect(obj.$el.html()).toExist();
         const foundStylesContainers = obj.$el.find('div');
         expect(foundStylesContainers.length).toEqual(devices.length);
+
+        const sortedDevicesWidthMedia = devices
+          .map(dvc => dvc.widthMedia)
+          .sort((left, right) => {
+            return (
+              ((right && right.replace('px', '')) || Number.MAX_VALUE) -
+              ((left && left.replace('px', '')) || Number.MAX_VALUE)
+            );
+          });
         foundStylesContainers.each(function($styleC, idx) {
-          expect($styleC.id).toEqual(prefix + devices[idx].widthMedia);
+          expect($styleC.id).toEqual(prefix + sortedDevicesWidthMedia[idx]);
         });
       });
 
@@ -61,9 +75,7 @@ module.exports = {
 
       it('Render new rule', () => {
         obj.collection.add({});
-        expect(
-          obj.$el.find(`#${prefix}${devices[0].widthMedia}`).html()
-        ).toExist();
+        expect(obj.$el.find(`#${prefix}`).html()).toExist();
       });
     });
   }