From 631afb25bbab7f159e05da197e0eba78ef6f39b2 Mon Sep 17 00:00:00 2001
From: Gauke Pieter Sietzema <gp@sterc.nl>
Date: Fri, 10 May 2019 11:13:58 +0200
Subject: [PATCH] Revert "MODX 3 styling and sort fix"

---
 assets/components/seopro/css/mgr23.css    | 42 ++++++++++++++---------
 assets/components/seopro/js/mgr/seopro.js | 16 ++++-----
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/assets/components/seopro/css/mgr23.css b/assets/components/seopro/css/mgr23.css
index e54e7f3..e4f4b12 100644
--- a/assets/components/seopro/css/mgr23.css
+++ b/assets/components/seopro/css/mgr23.css
@@ -15,14 +15,28 @@
     display: block;
 }
 .seopro-counter-wrap{
-    float: left;
-    margin-left: 5px;
+	background: #FBFBFB;
+	border: 1px #e4e4e4 solid;
+	border-bottom: none;
+	text-align: center;
+	border-radius: 8px 8px 0 0;
+	padding: 4px 11px 0 14px;
+	line-height: 18px;
+	float: left;
+	margin-left: 5px;
+    display: block;
 }
 
 #modx-resource-pagetitle, #modx-resource-longtitle, #modx-resource-description, #modx-resource-alias, #modx-resource-menutitle {
     border-top-right-radius: 0;
 }
 
+.x-form-focus + .seopro-counter .seopro-counter-wrap{
+    background-color: #FBFBFB;
+    border-color: #2d86b7;
+    border-bottom-color: #FBFBFB;
+}
+
 .x-form-invalid + .seopro-counter .seopro-counter-wrap{
     border-color: #be0000 !important;
 }
@@ -80,23 +94,16 @@
 .seopro-counter .green{
     color: #919191 !important;
 }
-
-.seopro-counter-chars {
-    position: absolute;
-    top: 29px;
-    float: none;
-    width: 50px;
-    right: 10px;
+.seopro-counter .red{
+    color: #707070 !important;
 }
-
-#modx-resource-pagetitle,
-#modx-resource-longtitle,
-#modx-resource-description {
-    padding-right: 60px;
+.seopro-counter-keywords.green{
+	background: url(../img/thumb-up.png) no-repeat 10px 3px #FBFBFB;
 }
-
-#seopro-resource-alias .seopro-counter-chars,
-#seopro-resource-menutitle .seopro-counter-chars{
+.seopro-counter-keywords.red{
+	background: url(../img/thumb-down.png) no-repeat 10px 4px #FBFBFB;
+}
+#seopro-resource-alias .seopro-counter-chars, #seopro-resource-menutitle .seopro-counter-chars{
 	display: none;
 }
 .seopro-counter-keywords{
@@ -128,6 +135,7 @@
 }
 
 .seopro-counter .allowed {
+    width: 21px;
     display: inline-block;
     text-align: left;
 }
diff --git a/assets/components/seopro/js/mgr/seopro.js b/assets/components/seopro/js/mgr/seopro.js
index 0548df8..de7faf7 100644
--- a/assets/components/seopro/js/mgr/seopro.js
+++ b/assets/components/seopro/js/mgr/seopro.js
@@ -52,7 +52,7 @@ Ext.extend(seoPro, Ext.Component, {
                 id: 'seopro-resource-' + field,
                 class: 'seopro-counter',
                 html: '<span class="seopro-counter-wrap seopro-counter-keywords" id="seopro-counter-keywords-' + field + '" title="' + _('seopro.keywords') + '"><strong>' + _('seopro.keywords') + ':&nbsp;&nbsp;</strong><span id="seopro-counter-keywords-' + field + '-current">0</span></span>\
-                        <span class="seopro-counter-wrap seopro-counter-chars" id="seopro-counter-chars-' + field + '" title="' + _('seopro.characters.allowed') + '"><span class="current" id="seopro-counter-chars-' + field + '-current">1</span>/<span class="allowed" id="seopro-counter-chars-' + field + '-allowed">' + seoPro.config.chars[field] + '</span></span>'
+                        <span class="seopro-counter-wrap seopro-counter-chars" id="seopro-counter-chars-' + field + '" title="' + _('seopro.characters.allowed') + '"><strong>' + _('seopro.characters') + ': </strong><span class="current" id="seopro-counter-chars-' + field + '-current">1</span>/<span class="allowed" id="seopro-counter-chars-' + field + '-allowed">' + seoPro.config.chars[field] + '</span></span>'
             });
             seoPro.count(field);
         }
@@ -85,13 +85,13 @@ Ext.extend(seoPro, Ext.Component, {
             text: _('seopro.focuskeywords_desc'),
             cls: 'desc-under'
         });
-        fp.insert(3, field);
-        fp.insert(4, fieldDesc);
+        fp.add(field);
+        fp.add(fieldDesc);
         fp.doLayout();
     },
     addPanel: function() {
         var fp = Ext.getCmp('modx-resource-main-left');
-        fp.insert(5, {
+        fp.add({
             xtype: 'panel',
             anchor: '100%',
             border: false,
@@ -170,15 +170,15 @@ Ext.extend(seoPro, Ext.Component, {
         maxKeywords = parseInt(maxKeywords);
 
         if (keywordCount > 0 && keywordCount <= maxKeywords) {
-            Ext.get('seopro-counter-keywords-' + field).removeClass('red');
+            Ext.get('seopro-counter-keywords-' + field).removeClass('red').addClass('green');
         } else {
-            Ext.get('seopro-counter-keywords-' + field).addClass('red');
+            Ext.get('seopro-counter-keywords-' + field).removeClass('green').addClass('red');
         }
 
         if (charCount > maxchars || charCount === 0) {
-            Ext.get('seopro-counter-chars-' + field).addClass('red');
+            Ext.get('seopro-counter-chars-' + field).removeClass('green').addClass('red');
         } else {
-            Ext.get('seopro-counter-chars-' + field).removeClass('red');
+            Ext.get('seopro-counter-chars-' + field).removeClass('red').addClass('green');
         }
     },
     changePrevBox: function(field) {