fix report ui issues

resources/www/_shared/styles/jquery-ui/dark-hive.scss

@@ -7,7 +7,7 @@ $uiLinkActiveColor: #eb8f00 !default;
 @import './shared';
 .ui-widget-content {
   border: 1px solid #555555;
-  background: #000000 url('#{$imagesPath}ui-bg_loop_25_000000_21x21.png') 50% 50% repeat;
+  background-color: #212121; // url('#{$imagesPath}ui-bg_loop_25_000000_21x21.png') 50% 50% repeat;
   color: $uiTextContentColor;
 }
 .ui-widget-content a {

resources/www/report/js/report.js

@@ -37,11 +37,11 @@ $(document).ready(function () {
     bindEvents();
 
     $("a.select-all").bind("click", function (e) {
-        $("ul.multiselect .coll-checkbox", $(this).closest('.form2')).attr("checked", true);
+        $("ul.multiselect .coll-checkbox", $(this).closest('.form2')).prop("checked", true);
     });
 
     $("a.deselect-all").bind("click", function (e) {
-        $("ul.multiselect .coll-checkbox", $(this).closest('.form2')).attr("checked", false);
+        $("ul.multiselect .coll-checkbox", $(this).closest('.form2')).prop("checked", false);
     });
 
     // toggle is deprecated:
@@ -51,12 +51,12 @@ $(document).ready(function () {
         if( hasMultiSelectionGroup === true) {
             var $this = $(this);
             var groupId = $this.data('group-id');
-            $(".checkbox-" + groupId, $this.closest('.form2')).attr("checked", false);
+            $(".checkbox-" + groupId, $this.closest('.form2')).prop("checked", false);
             hasMultiSelectionGroup = false;
         } else {
             var $this = $(this);
             var groupId = $this.data('group-id');
-            $(".checkbox-" + groupId, $this.closest('.form2')).attr("checked", true);
+            $(".checkbox-" + groupId, $this.closest('.form2')).prop("checked", true);
             hasMultiSelectionGroup = true;
         }
     });
@@ -92,7 +92,7 @@ function bindEvents() {
     //reload the content by pressing enter key, it concerns the number of result by report
     $('form .entersubmiter').bind('keypress', function (event) {
         if (event.keyCode == '13') {
-            $("#DOC-input").attr("checked", "checked").trigger('click');
+            $("#DOC-input").prop("checked", "checked").trigger('click');
         }
     });
     //action on table links

resources/www/report/styles/_tables.scss

@@ -44,7 +44,7 @@ form.report_form input[type=text] {
 
 .form_csv input[name=submit] {
 
-  background: url('#{$imagesPath}csv.gif') top right no-repeat;
+  background: url('#{$reportImagesPath}csv.gif') top right no-repeat;
   width: 15px;
   height: 16px;
   cursor: pointer;
@@ -107,7 +107,7 @@ iframe {
 }
 
 .answers {
-  background-color: #F6F2F1;
+  background-color: $reportBackgroundColor;
 }
 
 .report-table tr.odd {
@@ -130,7 +130,7 @@ iframe {
 #title_dash {
   float: left;
   font-size: 18px;
-  color: #f6f2f1;
+  color: $reportBackgroundColor;
 }
 
 #periode_dash {
@@ -178,7 +178,7 @@ iframe {
   font-weight: 900;
   padding: 2px;
   text-align: left;
-  background-color: #f6f2f1;
+  background-color: $reportBackgroundColor;
   color: #202020;
   border-bottom: 1px solid #9C9B99;
   border-top: 1px solid #9C9B99;
@@ -204,8 +204,8 @@ iframe {
   text-align: center;
   font-weight: bolder;
   font-size: small;
-  border-bottom: 3px solid #f6f2f1;
+  border-bottom: 3px solid $reportBackgroundColor;
-  border-top: 3px solid #f6f2f1;
+  border-top: 3px solid $reportBackgroundColor;
   background-color: #FF9000;
   min-width: 50px;
   width: auto;
@@ -305,7 +305,7 @@ table.center {
 }
 
 #dashboard.loading {
-  background: url('#{$imagesPath}dash-ajax-loader.gif') #696969 no-repeat center center;
+  background: url('#{$reportImagesPath}dash-ajax-loader.gif') #696969 no-repeat center center;
 }
 
 #dashboard-table table {
@@ -398,19 +398,17 @@ table.center {
   padding-top: 30px;
 }
 
-div.form_titre {
+.form_titre {
-  padding-bottom: 2px;
+  padding: 10px 5px;
-  font-size: large;
+  font-size: 15px;
-  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: left;
-  color: #f6f2f1;
+  color: $reportBackgroundColor;
   font-weight: bold;
-  border-bottom: 1px solid #323232;
+  // border-bottom: 1px solid #323232;
-  margin-bottom: 3px;
+  margin: 0;
-  margin-left: 10px;
-  margin-right: 10px;
 }
 
+/*
 .form1 {
   float: left;
   width: 140px;
@@ -430,6 +428,7 @@ div.form_titre {
   width: 420px;
   padding: 3px;
 }
+*/
 
 input {
   font-family: Verdana, sans-serif;
@@ -489,7 +488,7 @@ table.tablesorter tr th.SortDown {
 }
 
 .content {
-  margin: -1px 45px;
+  // margin: -1px 45px;
 }
 
 .onload {
@@ -512,22 +511,21 @@ table.tablesorter tr th.SortDown {
   overflow: auto;
 }
 
-.imgdash table {
+.imgdash  {
+  table {
     margin: auto;
     margin-top: 15px;
     margin-bottom: 15px;
     width: 100%;
-}
+  }
-
+  td, th {
-.imgdash td, .imgdash th {
     border: 1px solid #bbb;
     background: #ddd;
     text-align: center;
     border-radius: 0.5px;
-}
+  }
-
+  caption {
-.imgdash caption {
     font-weight: bold;
+  }
 }
 
-

resources/www/report/styles/jquery-ui/report-base.scss

@@ -1,169 +0,0 @@
-@import '../../vendors/jquery-ui/dark-hive';
-$reportImagesPath: '../images/report/jquery-ui-theme/report-base/images/';
-.ui-widget-content {
-  border: 1px solid #202020;
-  background: #555555 url('#{$reportImagesPath}ui-bg_flat_75_d2d1cf_40x100.png') 50% 50% repeat-x;
-  color: #ff9000;
-}
-.ui-widget-content a {
-  color: #ff9000;
-}
-.ui-widget-header {
-  border: 1px solid #202020;
-  background: #202020 url('#{$reportImagesPath}ui-bg_flat_75_d2d1cf_40x100.png') 50% 50% repeat-x;
-  color: #222222;
-  font-weight: bold;
-}
-.ui-widget-header a {
-  color: #222222;
-}
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
-  border: 1px solid #202020;
-  background: #313131 url('#{$reportImagesPath}ui-bg_flat_75_d2d1cf_40x100.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #ffffff;
-}
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited {
-  color: #ffffff;
-  text-decoration: none;
-}
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-  border: 1px solid #999999;
-  background: #dadada url('#{$reportImagesPath}ui-bg_glass_75_dadada_1x400.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #212121;
-}
-.ui-state-hover a,
-.ui-state-hover a:hover,
-.ui-state-hover a:link,
-.ui-state-hover a:visited {
-  color: #212121;
-  text-decoration: none;
-}
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-  border: 1px solid #202020;
-  background: #555555 url('#{$reportImagesPath}ui-bg_flat_75_d2d1cf_40x100.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #ff9000;
-}
-.ui-state-active a,
-.ui-state-active a:link,
-.ui-state-active a:visited {
-  color: #ff9000;
-  text-decoration: none;
-}
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
-  border: 1px solid #fcefa1;
-  background: #fbf9ee url('#{$reportImagesPath}ui-bg_glass_55_fbf9ee_1x400.png') 50% 50% repeat-x;
-  color: #363636;
-}
-.ui-state-highlight a,
-.ui-widget-content .ui-state-highlight a,
-.ui-widget-header .ui-state-highlight a {
-  color: #363636;
-}
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
-  border: 1px solid #cd0a0a;
-  background: #fef1ec url('#{$reportImagesPath}ui-bg_inset-soft_95_fef1ec_1x100.png') 50% bottom repeat-x;
-  color: #cd0a0a;
-}
-.ui-state-error a,
-.ui-widget-content .ui-state-error a,
-.ui-widget-header .ui-state-error a {
-  color: #cd0a0a;
-}
-.ui-state-error-text,
-.ui-widget-content .ui-state-error-text,
-.ui-widget-header .ui-state-error-text {
-  color: #cd0a0a;
-}
-
-.ui-icon,
-.ui-widget-content .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_222222_256x240.png');
-}
-.ui-widget-header .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_222222_256x240.png');
-}
-.ui-state-default .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_888888_256x240.png');
-}
-.ui-state-hover .ui-icon,
-.ui-state-focus .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_454545_256x240.png');
-}
-.ui-state-active .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_454545_256x240.png');
-}
-.ui-state-highlight .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_2e83ff_256x240.png');
-}
-.ui-state-error .ui-icon,
-.ui-state-error-text .ui-icon {
-  background-image: url('#{$reportImagesPath}ui-icons_cd0a0a_256x240.png');
-}
-
-/* Misc visuals
-----------------------------------*/
-
-/* Corner radius */
-.ui-corner-all,
-.ui-corner-top,
-.ui-corner-left,
-.ui-corner-tl {
-  border-top-left-radius: 4px;
-}
-.ui-corner-all,
-.ui-corner-top,
-.ui-corner-right,
-.ui-corner-tr {
-  border-top-right-radius: 4px;
-}
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-left,
-.ui-corner-bl {
-  border-bottom-left-radius: 4px;
-}
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-br {
-  border-bottom-right-radius: 4px;
-}
-
-/* Overlays */
-.ui-widget-overlay {
-  background: #aaaaaa url('#{$reportImagesPath}ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x;
-  opacity: .3;
-  filter: Alpha(Opacity=30);
-}
-.ui-widget-shadow {
-  margin: -8px 0 0 -8px;
-  padding: 8px;
-  background: #aaaaaa url('#{$reportImagesPath}ui-bg_flat_0_aaaaaa_40x100.png') 50% 50% repeat-x;
-  opacity: .3;
-  filter: Alpha(Opacity=30);
-  border-radius: 8px;
-}

resources/www/report/styles/jquery-ui/report-detailed.scss

@@ -1,4 +1,4 @@
-@import '../../vendors/jquery-ui/dark-hive';
+
 $reportImagesPath: '../images/jquery-ui-theme/report-detailed/images/';
 
 /* Component containers
@@ -18,16 +18,16 @@ $reportImagesPath: '../images/jquery-ui-theme/report-detailed/images/';
   font-size: 1em;
 }
 .answers .ui-widget-content {
-  border: 1px solid #f6f2f1;
+  border: 1px solid $reportBackgroundColor;
-  background: #f6f2f1 url('#{$reportImagesPath}ui-bg_flat_75_f6f2f1_40x100.png') 50% 50% repeat-x;
+  background-color: $reportBackgroundColor; // url('#{$reportImagesPath}ui-bg_flat_75_f6f2f1_40x100.png') 50% 50% repeat-x;
   color: #222222;
 }
 .answers .ui-widget-content a {
   color: #222222;
 }
 .answers .ui-widget-header {
-  border: 1px solid #f6f2f1;
+  border: 1px solid $reportBackgroundColor;
-  background: #f6f2f1 url('#{$reportImagesPath}ui-bg_flat_75_f6f2f1_40x100.png') 50% 50% repeat-x;
+  background: $reportBackgroundColor; // url('#{$reportImagesPath}ui-bg_flat_75_f6f2f1_40x100.png') 50% 50% repeat-x;
   color: #222222;
   font-weight: bold;
 }
@@ -40,7 +40,7 @@ $reportImagesPath: '../images/jquery-ui-theme/report-detailed/images/';
 .answers .ui-state-default,
 .answers .ui-widget-content .ui-state-default,
 .answers .ui-widget-header .ui-state-default {
-  border: 1px solid #f6f2f1;
+  border: 1px solid $reportBackgroundColor;
   background: #d2d1cf url('#{$reportImagesPath}ui-bg_flat_75_d2d1cf_40x100.png') 50% 50% repeat-x;
   font-weight: bold;
   color: #9c9b99;
@@ -72,7 +72,7 @@ $reportImagesPath: '../images/jquery-ui-theme/report-detailed/images/';
 .answers .ui-state-active,
 .answers .ui-widget-content .ui-state-active,
 .answers .ui-widget-header .ui-state-active {
-  border: 1px solid #f6f2f1;
+  border: 1px solid $reportBackgroundColor;
   background: #ff9000 url('#{$reportImagesPath}ui-bg_flat_65_ff9000_40x100.png') 50% 50% repeat-x;
   font-weight: bold;
   color: #ffffff;

resources/www/report/styles/main-print.scss

@@ -70,7 +70,7 @@ ul {
   font-weight: 900;
   padding: 5px, 5px, 2px, 5px;
   text-align: left;
-  background-color: #f6f2f1;
+  background-color: $reportBackgroundColor;
   /*color:#9C9B99;*/
   color: #202020;
   border-bottom: 1px solid #9C9B99;

resources/www/report/styles/main.scss

@@ -1,17 +1,40 @@
 $sharedIconPath: '../../../assets/common/images/icons/';
 @import '../../_shared/styles/main';
 @import '../../vendors/jquery-contextmenu/styles/jquery.contextmenu';
+@import '../../_shared/styles/jquery-ui/dark-hive';
 
-$imagesPath: '../images/';
+$reportBackgroundColor: #FFFFFF; //#F6F2F1;
+$reportImagesPath: '../images/';
 @import './tables';
 @import './jquery-cluetip';
-@import './jquery-ui/report-base';
 @import './jquery-ui/report-detailed';
 
-$mainMenuBackgroundColor: #c7c7c7; //BFBFBF;
+$mainMenuBackgroundColor: #3b3b3b;
-$mainMenuBottomBorder: 1px solid #c7c7c7;
+$mainMenuBottomBorder: none;
-$mainMenuLinkColor: #212121;
+$mainMenuLinkColor: #b1b1b1;
-$mainMenuLinkHoverColor: #BFBFBF;
+$mainMenuLinkHoverColor: #FFFFFF;
-$mainMenuLinkActiveColor: #BFBFBF;
+$mainMenuLinkActiveColor: #FFFFFF;
 // $mainMenuMarginBottom: 30px;
 @import '../../_shared/styles/main-menu';
+
+
+#mainTabs {
+  background-color: #212121;
+}
+
+#report-activite,
+#report-telechargement,
+#report-connexions {
+  background-color: #555555;
+}
+.ui-widget-content a {
+  &.btn {
+    color: #333;
+  }
+}
+.ui-modal {
+  background-color: #212121;
+  &.ui-widget-content{
+    background-color: #212121;
+  }
+}

resources/www/vendors/jquery-ui/dark-hive.scss

@@ -856,7 +856,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
   border: 1px solid #26b3f7;
-  background: #0972a5 url('#{$imagesPath}ui-bg_highlight-hard_20_0972a5_1x100.png') 50% 50% repeat-x;
+  background: #0972a5 url('#{$imagesPath}YAYui-bg_highlight-hard_20_0972a5_1x100.png') 50% 50% repeat-x;
   font-weight: normal;
   color: #ffffff;
 }

templates/web/report/form_date_and_base.html.twig

@@ -1,6 +1,6 @@
 
 {% block form_date_and_base %}
-    <div class="form1">
+    <div class="form1 span3">
         <div class="form_titre">{{ "report:: 1 - Periode" | trans }}</div>
         <div class="control-group">
             <label for="dmin">{{ "report:: Du (date)" | trans }}</label>
@@ -15,22 +15,22 @@
             </div>
         </div>
     </div>
-    <div class="form2">
+    <div class="form2 span5">
         <div class="form_titre">{{ "report:: 2 - Bases" | trans }}</div>
         <div id="select_one">
             <ul class="multiselect" style="max-height: 150px; overflow-y: auto; overflow-x: hidden;">
-                <li style="visibility: hidden">
+                <li>
-                    <a href="javascript:void(0);" class="select-all">
+                    <a href="javascript:void(0);" class="select-all btn btn-mini">
                         {% trans %}Select all{% endtrans %}
                     </a>
-                    <a href="javascript:void(0);" class="deselect-all">
+                    <a href="javascript:void(0);" class="deselect-all  btn btn-mini">
                         {% trans %}Deselect all{% endtrans %}
                     </a>
                 </li>
                 {% for sbas_id,databox in granted_bases %}
                     <li><label data-group-id="{{ loop.index }}" class="multiselect-group"><b>{{ databox.name }}</b></label></li>
                     {% for collection in databox.collections %}
-                        <li style="visibility: hidden">
+                        <li >
                             <a href="javascript:void(0);">
                                 <label class="checkbox">
                                     <input name="popbases[]" checked="checked" type="checkbox" class="coll-checkbox checkbox-{{ loop.parent.loop.index }}" value="{{ sbas_id }}_{{ collection.id }}">

templates/web/report/panel_hide_button.html.twig

@@ -1,4 +1,8 @@
-<button class="hided" style="margin-left:3px;float:left;"></button>
+<div class="row-fluid">
-<button class="showed" style ="display:none;margin-left:3px;float:left;"></button>
+    <div class="span12">
-<button class="hided" style="margin-right:10px;float:right;"></button>
+        <button class="hided" style="margin-left:3px;float:left;"></button>
-<button class="showed" style ="display:none;margin-right:10px;float:right;"></button>
+        <button class="showed" style="display:none;margin-left:3px;float:left;"></button>
+        <button class="hided" style="margin-right:10px;float:right;"></button>
+        <button class="showed" style="display:none;margin-right:10px;float:right;"></button>
+    </div>
+</div>

templates/web/report/report_layout_child.html.twig

@@ -59,10 +59,11 @@
 
 {% block report_connexion_layout %}
     <div id="report-connexions" class="inside-container">
-        <form class="form clearfix" >
+
+        <form class="form row-fluid" >
             {% include "report/form_date_and_base.html.twig" %}
             {% block form_connexion %}
-                <div class="form3">
+                <div class="form3 span4">
                     <div class="form_titre">{{ "report:: 3 - Type de report" | trans }} </div>
                     {% if not anonymous %}
                         <div>
@@ -92,6 +93,8 @@
                 </div>
             {% endblock form_connexion %}
         </form>
+
+
                 {% include "report/panel_hide_button.html.twig" %}
         <div class="answers">
             <div class="content">
@@ -105,10 +108,10 @@
 
 {% block report_telechargement_layout %}
     <div id="report-telechargement" class="inside-container">
-        <form class="form"  >
+        <form class="form row-fluid"  >
             {% include "report/form_date_and_base.html.twig" %}
             {% block form_telechargement %}
-                <div  class="form3">
+                <div  class="form3 span4">
                     <div class="form_titre">{% trans %}report:: 3 - Type de report{% endtrans %}</div>
                     {% if anonymous %}
                         <div>
@@ -161,10 +164,10 @@
 
 {% block report_activite_layout %}
     <div id="report-activite" class="inside-container">
-        <form class="form"  >
+        <form class="form row-fluid"  >
             {% include "report/form_date_and_base.html.twig" %}
             {% block form_activite %}
-                <div class="form3">
+                <div class="form3 span4">
                     <div class="form_titre">{{ "report:: 3 - Type de report" | trans }} </div>
                     {% if anonymous %}
                         <input name="on" type="hidden" value="" checked="checked"/>

templates/web/setup/step2.html.twig

@@ -110,7 +110,7 @@
                 var callback = function(){
                     if(window.console)
                         console.log('Processing install....');
-                    $(this)..prop('disabled', true);
+                    $(this).prop('disabled', true);
                     var dialog = $('#install_wait');
                     dialog.dialog({
                         modal:true,