maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Analytics Dashboard time navigation to tabs (#13270)

Browse source 
* Move to crayons-tabs

* Update js logic to use crayon-tabs

* Remove toggle and add tab

The added code moved the tabs to the right hand side of the container (until mobile styles kick in then it will fill the container).
This commit is contained in:
Andrew Bone 2021-04-07 14:11:15 +01:00 • committed by GitHub
parent 6c749d1c9b
commit 6aae404c54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/assets/stylesheets/dashboard.scss
View file

@ -279,33 +279,8 @@
}
}
.toggles {
text-align: center;
}
.toggles button {
display: inline-block;
padding: 2px 8px;
margin: 8px;
font-size: 1.3em;
border-radius: 2px;
border: 1px solid transparent;
font-family: $helvetica-condensed;
font-stretch: condensed;
top: 18px;
font-weight: 600;
background-color: transparent;
&:focus {
outline: 0;
}
&.selected {
background: #cfd7ff;
color: #0a0a0a !important;
border: 1px solid #4e57ef;
box-shadow: 3px 4px 0px #4e57ef;
}
.crayons-tabs--analytics {
justify-content: flex-end;
}
.graphs {

6
app/javascript/analytics/dashboard.js
View file

@ -1,13 +1,13 @@
import { callHistoricalAPI, callReferrersAPI } from './client';
function resetActive(activeButton) {
const buttons = document.getElementsByClassName('timerange-button');
const buttons = document.querySelectorAll('.crayons-tabs--analytics .crayons-tabs__item');
for (let i = 0; i < buttons.length; i += 1) {
const button = buttons[i];
button.classList.remove('selected');
button.classList.remove('crayons-tabs__item--current');
}
activeButton.classList.add('selected');
activeButton.classList.add('crayons-tabs__item--current');
}
function sumAnalytics(data, key) {

8
app/views/shared/_stats.html.erb
View file

@ -1,7 +1,7 @@
<div class="toggles">
<button class="selected timerange-button" id="week-button">Week</button>
<button class="timerange-button" id="month-button">Month</button>
<button class="timerange-button" id="infinity-button">Infinity</button>
<div class="crayons-tabs crayons-tabs--analytics">
<button class="crayons-tabs__item crayons-tabs__item--current" id="week-button">Week</button>
<button class="crayons-tabs__item" id="month-button">Month</button>
<button class="crayons-tabs__item" id="infinity-button">Infinity</button>
</div>
<div class="summary-stats">