Add the comparator in Devices

src/css_composer/view/CssRulesView.js

@@ -3,9 +3,8 @@ const CssRuleView = require('./CssRuleView');
 const CssGroupRuleView = require('./CssGroupRuleView');
 const $ = Backbone.$;
 
-// % is not a valid character for classes
-const getBlockId = (pfx, widthMedia) =>
-  `${pfx}${widthMedia ? `-${widthMedia.replace('%', 'pc')}` : ''}`;
+const getBlockId = (pfx, order) =>
+  `${pfx}${order ? `-${parseFloat(order)}` : ''}`;
 
 module.exports = Backbone.View.extend({
   initialize(o) {
@@ -90,6 +89,7 @@ module.exports = Backbone.View.extend({
       // Try to find a specific container for the rule (if it
       // containes a media query), otherwise get the default one
       try {
+        console.log('try to find ID', blockId);
         contRules = container.querySelector(`#${blockId}`);
       } catch (e) {}
 
@@ -124,16 +124,9 @@ module.exports = Backbone.View.extend({
     this.em
       .get('DeviceManager')
       .getAll()
-      .map(model => model.get('widthMedia'))
-      .sort(
-        (left, right) =>
-          ((right && right.replace('px', '')) || Number.MAX_VALUE) -
-          ((left && left.replace('px', '')) || Number.MAX_VALUE)
-      )
-      .forEach(widthMedia => {
-        $(`<div id="${getBlockId(className, widthMedia)}"></div>`).appendTo(
-          frag
-        );
+      .pluck('priority')
+      .forEach(priority => {
+        $(`<div id="${getBlockId(className, priority)}"></div>`).appendTo(frag);
       });
 
     this.collection.each(model => this.addToCollection(model, frag));

src/device_manager/model/Device.js

@@ -14,12 +14,19 @@ module.exports = Backbone.Model.extend({
 
     // The width which will be used in media queries,
     // If empty the width will be used
-    widthMedia: null
+    widthMedia: null,
+
+    // Setup the order of media queries
+    priority: null
   },
 
   initialize() {
     if (this.get('widthMedia') == null) {
       this.set('widthMedia', this.get('width'));
     }
+
+    if (!this.get('priority')) {
+      this.set('priority', parseFloat(this.get('widthMedia')) || 0);
+    }
   }
 });

src/device_manager/model/Devices.js

@@ -2,5 +2,14 @@ import Backbone from 'backbone';
 var Device = require('./Device');
 
 module.exports = Backbone.Collection.extend({
-  model: Device
+  model: Device,
+
+  comparator: (left, right) => {
+    const max = Number.MAX_VALUE;
+    return (right.get('priority') || max) - (left.get('priority') || max);
+  },
+
+  getSorted() {
+    return this.sort();
+  }
 });