status-im/fathom
2
0
Fork 0
mirror of https://github.com/status-im/fathom.git synced 2025-03-01 11:30:28 +00:00
Code Issues Projects Releases Wiki Activity

stretch totals sidebar to top, move chart to right area

Browse Source
This commit is contained in:
Danny 2018-05-23 09:24:55 +02:00
parent 11b4e5e5b3
commit c5b0d051a2
4 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/components/Table.js
View File

@ -86,7 +86,7 @@ class Table extends Component {
)}) : <div class="table-row">Nothing here, yet.</div>; )}) : <div class="table-row">Nothing here, yet.</div>;
return ( return (
<div data-total={state.total} class={"box box-pages animated fadeInUp delayed_04s " + (state.loading ? "loading" : '')}> <div class={(state.loading ? "loading" : '')}>
<div class="table-row header"> <div class="table-row header">
{props.headers.map((header, i) => { {props.headers.map((header, i) => {
let classes = i === 0 ? 'main-col cell' : 'cell'; let classes = i === 0 ? 'main-col cell' : 'cell';

22
assets/js/pages/dashboard.js
View File

@ -46,12 +46,6 @@ class Dashboard extends Component {
<DatePicker onChange={this.changePeriod} value={state.period} /> <DatePicker onChange={this.changePeriod} value={state.period} />
</nav> </nav>
<div class="boxes">
<div class="box box-graph">
<Chart before={state.before} after={state.after} />
</div>
</div>
<div class="boxes"> <div class="boxes">
<div class="box box-totals animated fadeInUp delayed_03s"> <div class="box box-totals animated fadeInUp delayed_03s">
<CountWidget title="Unique visitors" endpoint="stats/site/visitors" before={state.before} after={state.after} /> <CountWidget title="Unique visitors" endpoint="stats/site/visitors" before={state.before} after={state.after} />
@ -59,11 +53,19 @@ class Dashboard extends Component {
<CountWidget title="Avg time on site" endpoint="stats/site/duration" format="duration" before={state.before} after={state.after} /> <CountWidget title="Avg time on site" endpoint="stats/site/duration" format="duration" before={state.before} after={state.after} />
<CountWidget title="Bounce rate" endpoint="stats/site/bounces" format="percentage" before={state.before} after={state.after} /> <CountWidget title="Bounce rate" endpoint="stats/site/bounces" format="percentage" before={state.before} after={state.after} />
</div> </div>
<Table endpoint="stats/pages" headers={["Top pages", "Views", "Uniques"]} before={state.before} after={state.after} />
<Table endpoint="stats/referrers" headers={["Top referrers", "Views", "Uniques"]} before={state.before} after={state.after} showHostname="true" />
</div>
<div class="boxes-col">
<div class="box box-graph">
<Chart before={state.before} after={state.after} />
</div>
<div class="box box-pages animated fadeInUp delayed_04s">
<Table endpoint="stats/pages" headers={["Top pages", "Views", "Uniques"]} before={state.before} after={state.after} />
</div>
<div class="box box-referrers animated fadeInUp delayed_04s">
<Table endpoint="stats/referrers" headers={["Top referrers", "Views", "Uniques"]} before={state.before} after={state.after} showHostname="true" />
</div>
</div>
</div>
</section> </section>
<footer class="section"></footer> <footer class="section"></footer>

4
assets/sass/chart.scss
View File

@ -20,12 +20,12 @@ g.visitors {
} }
line { line {
stroke: rgb(218, 218, 218); stroke: rgba(218, 218, 218, 0.5);
} }
text { text {
font-size: 12px; font-size: 12px;
fill: #6c7680; fill: #98a0a6;
} }
} }

29
assets/sass/styles.scss
View File

@ -22,6 +22,7 @@ font size 12, 16, 64
::-moz-selection { background: #a0ffd1; } ::-moz-selection { background: #a0ffd1; }
html, body, #root { height: 100%; } html, body, #root { height: 100%; }
body { overflow-y: scroll; }
html {} html {}
body { body {
@ -48,18 +49,21 @@ body {
stretch; width: 100%; stretch; width: 100%;
} }
.boxes-col {
width: 100%;
}
.box { .box {
border-radius: 4px; border-radius: 4px;
margin-bottom: 8px; margin-bottom: 8px;
box-shadow: 0 2px 8px 0 rgba(70,73,77,.16); box-shadow: 0 2px 8px 0 rgba(70,73,77,.16);
padding: 24px 0; padding: 16px;
flex: 1; flex: 1;
flex-basis: 100%; flex-basis: 100%;
min-width: 40px; min-width: 40px;
} }
.box-totals { background: #46494d; color: #fff; padding: 32px 16px 0 16px; } .box-totals { background: #46494d; color: #fff; }
.box-pages { background: #fff; } .box-pages, .box-referrers, .box-graph { background: #fff; }
.box-referrers { background: #fff; }
nav.main-nav ul { width: 100%; text-align: right; margin-top: 4px; margin-bottom: 0; padding: 0; } nav.main-nav ul { width: 100%; text-align: right; margin-top: 4px; margin-bottom: 0; padding: 0; }
nav li { display: inline-block; } nav li { display: inline-block; }
@ -146,8 +150,23 @@ body {
.boxes { justify-content: space-between; flex-wrap: nowrap; } .boxes { justify-content: space-between; flex-wrap: nowrap; }
.box { margin: 0 4px; } .box { margin: 0 4px; }
.boxes-col {
display: flex;
flex-wrap: wrap;
}
.box-graph {
margin: 0 0 4px 0;
}
.box-totals { max-width: 230px; margin-left: 0; } .box-totals { max-width: 230px; margin-left: 0; }
.box-referrers { margin-right: 0; } .box-pages {
flex-basis: 464px;
width: 50%;
margin: 0 2px 0 0;
}
.box-referrers {
flex-basis: 464px;
margin: 0 0 0 2px;
}
.totals-detail { width: 100%; } .totals-detail { width: 100%; }
.total-numbers { font-size: 64px; } .total-numbers { font-size: 64px; }