8b4e6ba91b
* Small UI refactor that makes the stats page resonsive (to some degree) * Add import to scss file * Whoops * Implement feedback from review * Extract flex value into variable * Update app/javascript/analytics/dashboard.js Co-authored-by: Suzanne Aitchison <suzanne@forem.com> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
65 lines
1.9 KiB
Text
65 lines
1.9 KiB
Text
<div class="crayons-tabs crayons-tabs--analytics my-8">
|
|
<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">
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="readers-card" class="py-3"></div>
|
|
</div>
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="reactions-card" class="py-3"></div>
|
|
</div>
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="comments-card" class="py-3"></div>
|
|
</div>
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="followers-card" class="py-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="graphs my-5">
|
|
<div class="graphs__col crayons-card mx-5">
|
|
<h2 class="my-5">Readers Summary</h2>
|
|
<div class="charts-container">
|
|
<canvas id="readers-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="graphs__col crayons-card mx-5">
|
|
<h2 class="my-5">New Followers Summary</h2>
|
|
<div class="charts-container">
|
|
<canvas id="followers-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="graphs mb-5">
|
|
<div class="graphs__col crayons-card mx-5">
|
|
<h2 class="my-5">Reactions Summary ❤🦄🔖</h2>
|
|
<div class="charts-container">
|
|
<canvas id="reactions-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="graphs__col crayons-card mx-5">
|
|
<h2 class="my-5">Comments Summary 💬</h2>
|
|
<div class="charts-container">
|
|
<canvas id="comments-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-90 crayons-card mx-5 mb-5 p-5">
|
|
<h2 class="align-center mb-5">Traffic Source Summary 🚦</h2>
|
|
<table class="w-100 m-auto crayons-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-left">Source</th>
|
|
<th class="align-right">Views</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="referrers-container">
|
|
</tbody>
|
|
</table>
|
|
</div>
|