Set width for calendar (#17348)

* set width for calendar

* flex instead of table in period selector

* perios selector box css changes

* delete unused classes

* fix ui tests

2 files changed, 55 insertions, 50 deletions

diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html
index 88f1d72bc9..518b0355d0 100644
--- a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html
+++ b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html
@@ -12,58 +12,55 @@
         {{ periodSelector.getCurrentlyViewingText() }}
     </a>
     <div id="periodMore" class="dropdown">
-        <table>
-            <tr>
-                <td>
-                    <piwik-date-range-picker
-                        ng-show="periodSelector.selectedPeriod === 'range'"
-                        class="period-range"
-                        start-date="periodSelector.startRangeDate"
-                        end-date="periodSelector.endRangeDate"
-                        range-change="periodSelector.onRangeChange(start, end)"
-                        submit="periodSelector.onApplyClicked()"
-                    >
-                    </piwik-date-range-picker>
-                    <div
-                        class="period-date"
-                        ng-show="periodSelector.selectedPeriod !== 'range'"
+        <div class="flex">
+            <div>
+                <piwik-date-range-picker
+                    ng-show="periodSelector.selectedPeriod === 'range'"
+                    class="period-range"
+                    start-date="periodSelector.startRangeDate"
+                    end-date="periodSelector.endRangeDate"
+                    range-change="periodSelector.onRangeChange(start, end)"
+                    submit="periodSelector.onApplyClicked()"
+                >
+                </piwik-date-range-picker>
+                <div
+                    class="period-date"
+                    ng-show="periodSelector.selectedPeriod !== 'range'"
+                >
+                    <piwik-period-date-picker
+                        id="datepicker"
+                        period="periodSelector.selectedPeriod"
+                        date="periodSelector.periodValue === periodSelector.selectedPeriod ? periodSelector.dateValue : null"
+                        select="periodSelector.setPiwikPeriodAndDate(periodSelector.selectedPeriod, date)"
                     >
-                        <piwik-period-date-picker
-                            id="datepicker"
-                            period="periodSelector.selectedPeriod"
-                            date="periodSelector.periodValue === periodSelector.selectedPeriod ? periodSelector.dateValue : null"
-                            select="periodSelector.setPiwikPeriodAndDate(periodSelector.selectedPeriod, date)"
+                    </piwik-period-date-picker>
+                </div>
+            </div>
+
+            <div class="period-type">
+                <h6>{{ 'General_Period'|translate }}</h6>
+                <div id="otherPeriods">
+                    <p ng-repeat="period in periodSelector.periods">
+                        <label
+                            ng-attr-title="{{ period === periodSelector.periodValue ? '' : ('General_DoubleClickToChangePeriod'|translate) }}"
+                            ng-class="{'selected-period-label': period === periodSelector.selectedPeriod}"
+                            ng-dblclick="periodSelector.changeViewedPeriod(period)"
                         >
-                        </piwik-period-date-picker>
-                    </div>
-                </td>
-                <td>
-                    <div class="period-type">
-                        <h6>{{ 'General_Period'|translate }}</h6>
-                        <div id="otherPeriods">
-                            <p ng-repeat="period in periodSelector.periods">
-                                <label
-                                    ng-attr-title="{{ period === periodSelector.periodValue ? '' : ('General_DoubleClickToChangePeriod'|translate) }}"
-                                    ng-class="{'selected-period-label': period === periodSelector.selectedPeriod}"
+                            <input
+                                    type="radio"
+                                    name="period"
+                                    ng-attr-id="period_id_{{ period }}"
+                                    ng-model="periodSelector.selectedPeriod"
+                                    ng-checked="periodSelector.selectedPeriod == period"
+                                    ng-change="periodSelector.selectedPeriod = period"
                                     ng-dblclick="periodSelector.changeViewedPeriod(period)"
-                                >
-                                    <input
-                                            type="radio"
-                                            name="period"
-                                            ng-attr-id="period_id_{{ period }}"
-                                            ng-model="periodSelector.selectedPeriod"
-                                            ng-checked="periodSelector.selectedPeriod == period"
-                                            ng-change="periodSelector.selectedPeriod = period"
-                                            ng-dblclick="periodSelector.changeViewedPeriod(period)"
-                                    />
-                                    <span>{{ periodSelector.getPeriodDisplayText(period) }}</span>
-                                </label>
-                            </p>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </table>
+                            />
+                            <span>{{ periodSelector.getPeriodDisplayText(period) }}</span>
+                        </label>
+                    </p>
+                </div>
+            </div>
+        </div>
 
         <div class="compare-checkbox" ng-if="periodSelector.isComparisonEnabled()">
             <label>
@@ -84,6 +81,7 @@
                     ng-model="periodSelector.comparePeriodType"
                     full-width="true"
                     disabled="!periodSelector.isComparing"
+                    ng-style="{'visibility' : periodSelector.isComparing ? 'visible' : 'hidden'}"
             ></div>
         </div>
 
diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
index 167aadf052..45a8419fd6 100644
--- a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
+++ b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
@@ -20,6 +20,12 @@
 
   .compare-checkbox {
     margin-bottom: 20px;
+    label {
+        span {
+            padding-left:25px;
+            font-size: 14px;
+        }
+    }
   }
 
   .compare-date-range {
@@ -29,7 +35,7 @@
   #comparePeriodToDropdown {
     height: 30px;
     display: inline-block;
-    width: 60%;
+    width: 55%;
     transform: scale(.9);
     margin-left: -2%;
     margin-right: -5%;
@@ -46,6 +52,7 @@
 
     .input-field {
       margin-top: 0;
+      padding: 0 0 0 0.5rem;
     }
 
     .select-dropdown {