diff options
author | Zoltan Flamis <zoltan@innocraft.com> | 2021-04-08 02:12:39 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-08 02:12:39 +0300 |
commit | bdae345f0b677e556cc0b8ce3eab1de9e5c64510 (patch) | |
tree | 6c7c3ce5a68b7d3548d5741cca0f1271a24f7cd2 /plugins/CoreHome | |
parent | 54336d24fc371176c195e6ff079ce6564cc1224c (diff) |
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
Diffstat (limited to 'plugins/CoreHome')
-rw-r--r-- | plugins/CoreHome/angularjs/period-selector/period-selector.directive.html | 96 | ||||
-rw-r--r-- | plugins/CoreHome/angularjs/period-selector/period-selector.directive.less | 9 |
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 { |