drg_cms 0.6.0.8 → 0.6.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef26a547c0b8b4274cf351a0d479541cd2bfb10ebf1ba6405dcba87fa816d08d
-  data.tar.gz: 9e7c29e2d144e3b758972056359940a94baffb869cc18ee7f4483947f36be850
+  metadata.gz: bdd59e26395442cc8bec436e5a05940e762f373bfd30a83d5ddca87b443627a4
+  data.tar.gz: be25c10a78a2fc6ed37f5e02484cfbff1d28b8cadb8546432f5b67665578006f
 SHA512:
-  metadata.gz: '0918c545df0e262b8ca70f4a59451df888283374b0084f9fe14e554ed9a461fdadf749c89a02240d1898fde8c616dd272eec8fda39e1d8b255007859c71dbfa1'
-  data.tar.gz: 81f13601bafc13609e8c8f620d2511d9cc329bb82c0024eaaf6460639ea2102aaaf70f59860dfb33f75a647039440a30b9e388bc5094d433ec6c4fde25b0910a
+  metadata.gz: 838507481e4d09277049b1468ddbc18b2e40cc32b5fdcac38224169ab1b761aee445ebd93c0747c409db4f87298e986c9472552bc60d69f7d73031bea58a9c31
+  data.tar.gz: 41965e0a604a632d975d3081d85d4e1d775ccb01a7e6dbbfad49be732e89f1223b20376024897b13df742bd6b38eab8c4a8f541d5270f127660dfd23e5edd27e

data/app/assets/javascripts/drg_cms/drg_cms.js

@@ -47,16 +47,16 @@ dumpAttributes = function(obj) {
  * selected tab and triggers iframe reload.
  *******************************************************************/
 update_embedded_on_tab_select = function(div_name) {
-  var iframes = $(div_name).find("iframe");
+  let iframes = $(div_name).find("iframe");
   $.each(iframes, function(index, iframe) {
     // delayed load
-    var src_delay = iframe.getAttribute('data-src-delay'); 
+    let src_delay = iframe.getAttribute('data-src-delay');
     if (src_delay != null && src_delay != '') {
       iframe.setAttribute('data-src-delay', '');
       iframe.setAttribute('src', src_delay);
     }
     // always load on tab select
-    var src_always = iframe.getAttribute('data-src-always');
+    let src_always = iframe.getAttribute('data-src-always');
     if (src_always != null) {
       iframe.setAttribute('src', src_always);
     }    
@@ -184,7 +184,7 @@ $(function() {
  *******************************************************************/
 
 process_json_result = function(json) {
-  var i,w,operation,selector, msg_div, field;
+  var i, w, operation, selector, msg_div, field;
   $.each(json, function(key, value) {
     i = key.search('_');
     if (i > 1) {
@@ -194,16 +194,13 @@ process_json_result = function(json) {
       operation = key;
       selector  = '';
     }
-//  
+
     switch (operation) {
       
 /**** update fields on form ****/
     case 'record':
-//      field = $('#'+key);
-      var name = key.replace('record_','record[') + ']';
+      let name = key.replace('record_','record[') + ']';
       field = $('[name="' + name + '"]');
-      console.log(field.attr('type'));
-      console.log(field.is('select'));
       // checkbox field
       if (field.is(':checkbox')) {
         field.prop('checked', value);
@@ -231,19 +228,21 @@ process_json_result = function(json) {
 
 /**** display message ****/
     case 'msg': 
-      msg_div = 'dc-form-' + selector;
-      if ( $('.'+msg_div).length == 0 ) {
+      let msg_div = 'dc-form-' + selector;
+      if ( $('.' + msg_div).length == 0 ) {
         value = '<div class="' + msg_div + '">' + value + '</div>';
         $('.dc-title').after(value);
       } else {
-        $('.'+msg_div).html(value);
+        $('.' + msg_div).html(value);
+        $('.' + msg_div).show();
       }
       break;
       
 /**** display popup message ****/
-    case 'popup':
+      case 'popup':
       $('#popup').html(value);
-      $('#popup').bPopup({ speed: 650, transition: 'slideDown' });            
+      $('#popup').bPopup({ speed: 650, transition: 'slideUp'});
+      break;
 
 /**** update div ****/
     case '#div+':
@@ -274,7 +273,8 @@ process_json_result = function(json) {
       break;
     case 'window':
       if (value == 'close') { window.close(); 
-      } else if (value == 'reload') { location.reload(); 
+      } else if (value == 'reload') {
+        location.reload();
       } else {
         w = window.open(value, selector);
         w.focus();
@@ -292,11 +292,12 @@ process_json_result = function(json) {
       eval (value);
       break; 
     case 'reload':
+      value = value.toString();
       if (value == 'parent') {
         parent.location.reload();
 /*** this would be current window (reload: true) ****/
       } else if (value.length < 5) {
-        window.location.href = window.location.href;
+        location.reload();
 /*** reload iframe ****/
       } else {
         $( '#' + value ).attr('src', $( '#' + value ).attr('src'));
@@ -344,17 +345,38 @@ $.fn.dc_scroll_view = function () {
  * Updates single field on parent iframe form of embedded form.
  *******************************************************************/
 process_parent_form_updates = function(element) {
-  var field = element.getAttribute("data-field");
-  var value = element.getAttribute("data-value");
-  if ( window.parent.$('#'+field).length > 0 ) {
-    if (field.substring(0,3) === 'td_') {   // readonly field
-      window.parent.$('#'+field+' > div').html(value);
-    } else { // input field
-      window.parent.$('#'+field).val(value);
+  let field = element.getAttribute("data-field");
+  let value = element.getAttribute("data-value");
+  let selector = '#' + field;
+
+  // update record
+  if (field.match(/record/)) {
+    if (window.parent.$(selector).length > 0) {
+      if (field.substring(0, 3) === 'td_') {   // readonly field
+        window.parent.$(selector + ' > div').html(value);
+      } else { // input field
+        window.parent.$(selector).val(value);
+      }
+    }
+  // any div
+  } else {
+    if (window.parent.$(selector).length > 0) {
+      window.parent.$(selector).html(value);
     }
   }
 };
 
+/*****************************************************************
+ * Toggle show and hide div
+ ******************************************************************/
+dc_toggle_div = function(div) {
+  if ($(div).is(":visible")) {
+    $(div).slideUp();
+  } else {
+    $(div).slideDown();
+  }
+};
+
 /*******************************************************************
  * 
  *******************************************************************/
@@ -443,7 +465,7 @@ $(document).ready( function() {
   *******************************************************************/
   $('.dc-form-li').on('click', function(e) { 
     // find li with dc-form-li-selected class. This is our old tab
-    var old_tab_id = null;
+    let old_tab_id = null;
     $(e.target).parents('ul').find('li').each( function() {
       if ($(this).hasClass('dc-form-li-selected')) {
         // when not already selected toggle dc-form-li-selected class and save old tab
@@ -461,11 +483,11 @@ $(document).ready( function() {
       $('#data_' + e.target.getAttribute("data-div")).toggleClass('div-hidden');
       
       // resize parent iframe to fit selected tab size
-//      var div_height = document.getElementById('data_' + e.target.getAttribute("data-div")).clientHeight + 130;
-//      var div_height = document.getElementById('cmsform').clientHeight + 50;
-      var div_height = document.body.scrollHeight;
-      window.frameElement.style.height = div_height.toString() + 'px';
-// it would be too easy      $('#cmsform :input:enabled:visible:first').focus();
+      let div_height = document.body.scrollHeight;
+      let frame = window.frameElement
+      if (frame === null) frame = document.body;
+      frame.style.height = div_height.toString() + 'px';
+
       select_first_input_field('#data_' + e.target.getAttribute("data-div"));
       update_embedded_on_tab_select('#data_' + e.target.getAttribute("data-div"));
     }
@@ -476,10 +498,10 @@ $(document).ready( function() {
  * unless on initial display.
  *******************************************************************/
   $('#iframe_cms').on('load', function() {
-    new_height = this.contentWindow.document.body.offsetHeight + 50;
+    let new_height = this.contentWindow.document.body.offsetHeight + 50;
     if (new_height < 500 && new_height > 60) new_height = 500;
     this.style.height = new_height + 'px'; 
-// scroll to top
+    // scroll to top
     $('#iframe_cms').dc_scroll_view();
   });
 
@@ -488,14 +510,28 @@ $(document).ready( function() {
  * unless on initial display with no data 
  *******************************************************************/
   $('#iframe_edit').on('load', function() {
-//    console.log(this.contentWindow.document.body.offsetHeight);
     if (this.contentWindow.document.body.offsetHeight > 10) {
       this.style.height = (this.contentWindow.document.body.offsetHeight + 30) + 'px'; 
-// scroll to top
+
       $('#iframe_edit').dc_scroll_view();
     }
   });
-  
+
+  /*******************************************************************
+   * Same goes for iframe_embedded. Resize it + 30px
+   *******************************************************************/
+  $('.iframe_embedded').on('load', function() {
+    let embedded_height = this.contentWindow.document.body.offsetHeight;
+    // workaround. It gets tricky when embedded field is on tab
+    if (embedded_height == 0) embedded_height = 500;
+    this.style.height = (embedded_height + 30) + 'px';
+    // resize parent iframe window too
+    let parentWindow = this.contentWindow.parent;
+    let parent_height = (parentWindow.document.body.offsetHeight + 30) + 'px';
+    //parentWindow.frameElement.setAttribute('style', 'height:' + parent_height);
+    parentWindow.frameElement.style.height = parent_height;
+  });
+
 /*******************************************************************
  * Process Ajax call on cmsedit form actions
  *******************************************************************/
@@ -508,7 +544,7 @@ $(document).ready( function() {
       $("form")[0].reportValidity();
       return false;
     }
-    var req = this.getAttribute("data-request");
+    let req = this.getAttribute("data-request");
     // Get values from elements on the page:
     if (req == "script") {
       eval (this.getAttribute("data-script"));
@@ -521,10 +557,13 @@ $(document).ready( function() {
       data = {}; 
       req = 'get'; // by default
     }
-    
-    $('.dc-spinner').show();   
+
+    let url = this.getAttribute("data-url");
+    if (url.length < 5) return false;
+
+    $('.dc-spinner').show();
     $.ajax({
-      url: this.getAttribute("data-url"),
+      url: url,
       type: req,
       dataType: "json",
       data: data,
@@ -532,8 +571,7 @@ $(document).ready( function() {
         process_json_result(data);
         $('.dc-spinner').hide();
       }
-      
-    });  
+    });
   });
   
 /*******************************************************************
@@ -636,8 +674,8 @@ $(document).ready( function() {
   * data from with text_autocomplete and data doesn't exist in belongs_to table.
   *******************************************************************/
   $('.in-edit-add').on('click', function(e) { 
-    url = '/cmsedit/new?table=' + this.getAttribute("data-table");
-/* I know. It doesn't work as expected. But it will do for now. */
+    let url = '/cmsedit/new?table=' + this.getAttribute("data-table");
+    // I know. It doesn't work as expected. But it will do for now.
     w = window.open(url, '', 'chrome=yes,width=800,height=600,resizable,scrollbars=yes,status=1,centerscreen=yes,modal=yes');
     w.focus();    
   });  
@@ -648,13 +686,9 @@ $(document).ready( function() {
  **********************************************************************/
   $('#filter_field').on('change', function() {
     if (this.value.length > 0) { 
-      name = 'filter_' + this.value;
+      let name = 'filter_' + this.value;
       $(this).parents('form').find('span').each( function() {
-/*
-element = $(this).find(':first').attr('id');
- sometimes it is the second element         
-        if (element == nil) { element = $(this).find(':first').next().attr('id');}
- */   
+
         if ($(this).attr('id') == name) {
           if ( $(this).hasClass('div-hidden') ) { $(this).toggleClass('div-hidden'); }
         } else {
@@ -736,8 +770,8 @@ element = $(this).find(':first').attr('id');
   * Fire action (by default show document) when doubleclicked on result row
   *******************************************************************/
   $('.dc-result tr').on('dblclick', function(e) {
-    url = String( this.getAttribute("data-dblclick") );
-// prevent when data-dblclick not set
+    let url = String( this.getAttribute("data-dblclick") );
+    // prevent when data-dblclick not set
     if (url.length > 5) { 
       e.preventDefault();
       location.href = url;
@@ -748,8 +782,8 @@ element = $(this).find(':first').attr('id');
   * Fire action (by default show document) when doubleclicked on result row
   *******************************************************************/
   $('.dc-result-data').on('dblclick', function(e) {
-    url = String( this.getAttribute("data-dblclick") );
-// prevent when data-dblclick not set
+    let url = String( this.getAttribute("data-dblclick") );
+    // prevent when data-dblclick not set
     if (url.length > 5) { 
       e.preventDefault();
       location.href = url;
@@ -1002,8 +1036,8 @@ element = $(this).find(':first').attr('id');
       return;
     }
     // retrieve name of current field and set it in popup
-    var header = $(this).closest('.th');
-    var field_name = header.attr("data-name");    
+    let header = $(this).closest('.th');
+    let field_name = header.attr("data-name");
     $('.filter-popup').attr('data-name', field_name);
     // change popup position and show
     $('.filter-popup').css({'top':e.pageY+5,'left':e.pageX, 'position':'absolute'});
@@ -1015,15 +1049,23 @@ element = $(this).find(':first').attr('id');
   * filter on action.
   *******************************************************************/
   $('.filter-popup li').click( function(e) {
-    var url      = $(this).data('url')
-    var operator = $(this).data('operator');
-    var parent   = $(this).closest('.filter-popup')
-    var field_name = parent.data("name");
+    let url = $(this).data('url');
+    let operator = $(this).data('operator');
+    let parent = $(this).closest('.filter-popup');
+    let field_name = parent.data("name");
     
     url = url + '&filter_field=' + field_name + '&filter_oper=' + operator;
     window.location.href = url;
   });
 
+  /*****************************************************************
+   * Toggle div
+   ******************************************************************/
+  $(".dc-handle").click(function() {
+    let div = this.getAttribute("data-div");
+    dc_toggle_div(div);
+  });
+
 });
 
 /*******************************************************************

data/app/assets/stylesheets/drg_cms/drg_cms.css

@@ -95,7 +95,7 @@ textarea, input, select {
 color: #000;
 padding: 6px 4px;
 margin-left: 1px;
-border: solid 1px #ccc;;
+border: 1px dashed #888;;
 border-radius: 2px;
 font: 14px Exo,arial,sans-serif;
 max-width: 100%;
@@ -117,6 +117,7 @@ input[type=submit]:focus {
 
 textarea[readonly], input[readonly], select[readonly] {
   background-color: #eee !important;
+  border: 1px solid #ddd !important;
 }
 
 input.file {
@@ -167,17 +168,17 @@ img { vertical-align:bottom; }
 .dc-link a:link, .dc-link a:active, .dc-link a:visited, 
 .dc-animate a:link, .dc-animate a:active, .dc-animate a:visited, 
 .dc-result a:link, .dc-result a:active, .dc-result a:visited { 
-color: #666;
-font-weight: 600;
-text-decoration: none; 
-background: transparent;
-padding: 7px;
+  color: #666;
+  font-weight: 600;
+  text-decoration: none;
+  background: transparent;
+  padding: 7px;
 }
 
 .dc-link a:hover, .dc-animate a:hover, .dc-result a:hover  { 
-background: #f8f8f8;
-transition: 0.3s;
-color: #000;
+  background: #f8f8f8;
+  transition: 0.3s;
+  color: #000;
 }
 
 a.dc-animate:hover { color: #000; background: transparent;}
@@ -205,7 +206,7 @@ width: 99.9%;
 padding:  0;
 border-spacing:  0;
 border-radius: 1px;  
-background-color: #f9f9f9;
+/*background-color: #f9f9f9;*/
 }
 
 .dc-result i { 
@@ -227,7 +228,7 @@ padding: 0;
 
 .dc-result-header {
   display: flex;
-  background: linear-gradient(to bottom, #eee 0%, #e2e2e2 100%); 
+  /* background: linear-gradient(to bottom, #eee 0%, #e2e2e2 100%); */
 }
 .dc-result-data {
   display: flex;
@@ -239,11 +240,15 @@ padding: 0;
 }
 
 .dc-result-header .th {
-  padding: 8px 2px;
+  padding: 4px 3px;
   white-space: nowrap;
   overflow: hidden;
   font-weight: 600;
-  color: #222;
+  color: #fff;
+  background-color: #666;
+}
+.dc-result-header .th:last-child {
+  flex-grow: 1;
 }
 
 .dc-result-header .spacer, .dc-result-data .spacer {
@@ -256,12 +261,14 @@ padding: 0;
 /*  border-left: 1px solid #ccc;*/
 }
 
-.dc-result-header a:link {
+.dc-result-header a:link, .dc-result-header a:visited {
   padding-left: 0;
+  color: #fff;
+  font-weight: 500;
 }
 
 .dc-result-data .td {
-  padding: 5px 2px;
+  padding: 5px 3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -277,6 +284,11 @@ padding: 0;
   white-space: nowrap;
 }
 
+.dc-result-header .actions {
+  background-color: #666;
+}
+
+
 .dc-result-data .dc-link, .dc-result-data .dc-link-ajax {
   background: none;
   border: 1px solid transparent;
@@ -323,7 +335,7 @@ display: inline-table;
 font-weight: 600;
 color: #666;
 text-align: center;
-border-radius: 2px;
+border-radius: 3px;
 background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%);
 border: 1px solid #ddd;
 }
@@ -350,17 +362,18 @@ border: 1px solid #ddd;
   font-weight: 600;
   padding: 7px;
   vertical-align: bottom;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  color: #888;
-  background: #eee !important;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  color: #777;
+  text-shadow: 1px 1px #fff;
+  background: #ddd !important;
 }
 
 .dc-link-ajax {
   text-align: left;
   font-weight: 600;
   padding: 8px 8px 6px;
-  border-radius: 2px;
+  border-radius: 3px;
   color: #666;
   background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
   border: 1px solid #ddd;
@@ -403,7 +416,7 @@ transition: 0.3s;
 
 .dc-link-icon {
 padding: 3px;
-border-radius: 2px;
+border-radius: 3px;
 background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
 border: solid 1px #ccc;;
 }
@@ -427,7 +440,7 @@ border: solid 1px #ccc;;
   padding: 5px 4px 4px;
   background: #fff;
   border: 2px solid #222;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .dc-inline-link:hover {
@@ -439,7 +452,7 @@ border: solid 1px #ccc;;
   text-align: center;
   border:1px solid #888;
   padding:1px 4px 1px 4px;
-  border-radius: 5px;
+  border-radius: 3px;
   box-shadow: 2px 2px 5px #aaa;
   width: 13px; 
   margin-left: 350px;
@@ -464,7 +477,7 @@ border: solid 1px #ccc;;
   padding: 1px 8px 0.5px; 
 /* Exo  padding: 0 8px; */
   
-  border-radius: 2px;
+  border-radius: 3px;
   background-color: #eee;
   background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
   border: 1px solid #ddd;
@@ -531,7 +544,7 @@ color: #aaa;
 }
 .dc-paginate .pagination span a {
   display: block;
-  color: #888;
+  color: #666;
   padding: 4px 6px 3px 7px;
   text-decoration: none;
 }
@@ -550,13 +563,12 @@ color: #aaa;
 }
 
 .dc-paginate .pagination .current {
-  background: #888;
+  background: #666;
   color: #fff;
-  border: 1px solid #888;
+  border: 1px solid #666;
 }
 
 .dc-paginate .pagination .current:hover  {
-  border: solid 1px #888;
   outline: none;
 }
 
@@ -576,6 +588,15 @@ color: #aaa;
   font-size: 0.8em;
 }
 
+.dc-title .dc-help {
+  float:right;
+  padding: 4px 0 0 4px;
+  font-size: 1.1em;
+  height: 1em;
+  border: none;
+  background: none;
+}
+
 .dc-form-frame {
   width: 99.9%;
   margin:  0;
@@ -587,7 +608,7 @@ color: #aaa;
   padding: 4px 0 0;
   border: 1px solid #eee;
   border-radius: 2px; 
-  background-color: #fcfcfc;
+  /*background-color: #fcfcfc; */
 }
 
 .dc-form .row-div {
@@ -655,6 +676,9 @@ color: #aaa;
   padding: 3px 5px;
 }
 
+.dc-form-label.dc-color-odd, .dc-form-label.dc-color-even {background-color: transparent;}
+.dc-form-field.dc-color-odd, .dc-form-field.dc-color-even {background-color: transparent;}
+
 .dc-align-left {
   text-align: left;
 }
@@ -682,7 +706,7 @@ color: #aaa;
   font-weight: normal;
   color: #222;
   padding: 6px 4px;
-  border: solid 1px #ccc;;
+  border: solid 1px #ddd;;
   background-color: #eee;
   border-radius: 2px;
 }
@@ -720,8 +744,8 @@ margin-bottom: -3px;
 .dc-form-li {
   display:inline-block; 
   white-space: nowrap;
-  list-style:none;
-  color: #666;
+  list-style: none;
+  color: #fff;
   text-decoration: none;
   text-align: center;
   font-weight: 600;
@@ -729,6 +753,7 @@ margin-bottom: -3px;
 
   padding:4px 15px;
   background: #e8e8e8;
+  background: #666;
   margin-right: 2px;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
@@ -806,6 +831,15 @@ display: flex;
   color: lightcoral;
 }
 
+.dc-handle:before {
+  font-family: 'FontAwesome';
+  content: '\f0dc\20';
+  color: #000;
+  cursor: pointer;
+  padding-top: 2px;
+  font-size: 1.1em;
+}
+
 #cmsedit-div {
 font-family: Exo,Arial, sans-serif;
 font-size: 13px;
@@ -940,6 +974,11 @@ display: none;
   position: relative;
 }
 
+.dc-text-autocomplete input {
+  border: 1px dashed #555;
+}
+
+
 .dc-text-autocomplete input+span:before {
   font-family: 'FontAwesome';
   content: '\f002';
@@ -972,11 +1011,16 @@ color: #000;
 .ui-autocomplete-border {
   display: inline-block;
   border-radius: 2px;
-  border: solid 1px #ccc;;
+  border: dashed 1px #555;;
   padding: 8px;
   background-color: #fff;
 }
 
+.ui-autocomplete-border .dc-text-autocomplete {
+  margin-left: 4px;
+}
+
+
 .dc-red { color: #d99;}
 .dc-red:hover { color: #e66;}
 .dc-green { color: #9c9;}
@@ -1041,7 +1085,7 @@ padding:  0;
 padding: 4px;
 background-image: none;
 border-radius: 2px;
-border: 1px solid #669;
+border: 2px solid #666;
 background-color: #fff;
 }
 
@@ -1082,11 +1126,11 @@ white-space: nowrap;
 list-style:none;
 padding: 7px;
 margin-right: 4px;
-border-radius:2px;
+border-radius: 3px;
 z-index: 1;
 
 background: transparent linear-gradient(to bottom, #fff 0%, #e2e2e2 100%) repeat scroll 0% 0%;
-border: 1px solid #ddd;
+/*border: 1px solid #ddd; */
 }
 
 .dc-action-menu ul {
@@ -1133,7 +1177,6 @@ color: #222;
 .dc-action-menu li:hover ul li:hover {
 border:  0;
 background: #eee;
-border-radius: 2px;
 }
 
 .menu-filter {
@@ -1169,6 +1212,94 @@ background-color: transparent;
   cursor: pointer;
   color: #ccc;
 }
+
+#popup {
+  min-width: 50%;
+}
+
+#popup .dc-help {
+  background: #fff;
+  padding: 8px;
+  max-height: 700px;
+  overflow-y: auto;
+  max-width: 800px;
+}
+
+#popup .dc-help h1 {
+  background: darkred;
+  color: #fff;
+  font-weight: 700;
+  padding: 4px
+}
+
+#popup .dc-help h2 {
+  font-size: 1.4em;
+  font-weight: 600;
+}
+
+#popup .dc-help h3 {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+#popup .dc-help .help-body {
+  padding: 4px
+}
+
+/*
+#popup .dc-help .help-tab {
+  display: table;
+  padding-top: 4px;
+  border-bottom: 3px solid #000;
+  margin: 8px 0;
+  font-weight: 600;
+}
+*/
+#popup .dc-help .help-tab {
+  display: table;
+  margin: 8px 0 0;
+  padding: 3px 12px;
+  color: #fff;
+  background: #444;
+  border-radius: 5px 5px 0 0;
+  font-weight: 600;
+}
+
+#popup .dc-help .help-tab-help {
+  font-weight: 600;
+  color: #fff;
+  background: #666;
+  padding: 3px 12px;
+}
+
+#popup .dc-help .help-field {
+  display: flex;
+  background-color: #eee;
+  padding: 3px;
+}
+
+#popup .dc-help .help-field:nth-child(odd) {
+  background-color: #f8f8f8;
+}
+
+#popup .dc-help .help-label {
+  width: 25%;
+}
+
+#popup .dc-help .help-text {
+  max-width: 75%;
+}
+
+#popup .dc-help .help-body {
+  margin-top: 8px;
+  border-top: 1px solid #222;
+  padding-top: 8px;
+}
+
+#popup .dc-help .dc-link {
+  display: inline-flex;
+}
+
 .filter-popup {
   background-color: #fff;
   box-shadow: 2px 2px 5px #666;
@@ -1207,6 +1338,7 @@ cursor: pointer;
 #dc-document-info-popup {
 text-align: left;
 padding:4px;
+font-size: 0.9em;
 position:absolute;
 background-color: #f8f8f8;
 border: solid 1px #ccc;;
@@ -1220,7 +1352,7 @@ z-index: 100;
   width: 80px;
   padding: 1px;
 }
-#dc-document-info-popup div span:last-child {font-weight: bold;}
+#dc-document-info-popup div span:last-child {font-weight: 600;}
 
 
 /************************** filter popup *************************/
@@ -1252,16 +1384,18 @@ color: #669;
   max-width: 50%;
   background-color: #fff;
   padding: 10px;
-  border: solid 1px #ccc;;
+  border: dashed 1px #666;
+  margin-left: 1px;
 }
 
 /**  Radio button input field **/
 
 .dc-radio {
-  background-color: #fff;
-/*  border: solid 1px #ccc;;*/
-  padding: 5px 0 7px 0;
+  padding: 6px 0 12px 0;
   display: inline-table;
+  border: 1px dashed #666;
+  margin-left: 1px;
+  background-color: #fff;
 }
 .dc-radio div {
   font-size: 1.1em;