Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Abbreviates dates in the patient data charts and brings arrows in closer. #182

Merged
merged 7 commits into from Jan 13, 2015
Merged

Abbreviates dates in the patient data charts and brings arrows in closer. #182

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0ade49f
Abbreviates dates in the patient data charts and removes large block …
ursooperduper Jan 12, 2015
b5c6e9b
Adds year to abbreviated date and removes jiggle from arrow buttons.
ursooperduper Jan 12, 2015
cd652a6
Merge branch 'master' into sk/arrows-and-dates
ursooperduper Jan 13, 2015
bbd6385
Fixes veritcal width of chart header for all views.
ursooperduper Jan 13, 2015
bb26605
Merge branch 'master' into sk/arrows-and-dates
ursooperduper Jan 13, 2015
d0a79ad
Merge branch 'master' into sk/arrows-and-dates
ursooperduper Jan 13, 2015
09bec02
Removes commented out code.
ursooperduper Jan 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions app/components/chart/daily.js
View file
Open in desktop
@@ -1,16 +1,16 @@
/** @jsx React.DOM */
/*
/*
* == BSD2 LICENSE ==
* Copyright (c) 2014, Tidepool Project
*
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the associated License, which is identical to the BSD 2-Clause
* License as published by the Open Source Initiative at opensource.org.
*
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the License for more details.
*
*
* You should have received a copy of the License along with this program; if
* not, you can obtain one from Tidepool Project at tidepool.org.
* == BSD2 LICENSE ==
Expand Down Expand Up @@ -117,7 +117,7 @@ var Daily = React.createClass({
else {
timezone = timePrefs.timezoneName || 'UTC';
}
return sundial.formatInTimezone(datetime, timezone, 'dddd, MMMM Do');
return sundial.formatInTimezone(datetime, timezone, 'ddd, MMM D, YYYY');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to keep ordinal markers after the dates? e.g., 14th instead of 14?

This is a question as much for @skrugman and @brandonarbiter

If yes, everywhere or just daily view?

},
// handlers
handleClickModal: function(e) {
Expand Down
17 changes: 12 additions & 5 deletions app/components/chart/header.js
View file
Open in desktop
@@ -1,16 +1,16 @@
/** @jsx React.DOM */
/*
/*
* == BSD2 LICENSE ==
* Copyright (c) 2014, Tidepool Project
*
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the associated License, which is identical to the BSD 2-Clause
* License as published by the Open Source Initiative at opensource.org.
*
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the License for more details.
*
*
* You should have received a copy of the License along with this program; if
* not, you can obtain one from Tidepool Project at tidepool.org.
* == BSD2 LICENSE ==
Expand Down Expand Up @@ -53,6 +53,13 @@ var TidelineHeader = React.createClass({
'patient-data-subnav-hidden': this.props.chartType === 'no-data'
});

var dateLinkClass = cx({
'patient-data-subnav-text' : this.props.chartType === 'daily' || this.props.chartType === 'weekly' || this.props.chartType === 'modal',
'patient-data-subnav-dates-daily': this.props.chartType === 'daily',
'patient-data-subnav-dates-weekly': this.props.chartType === 'weekly',
'patient-data-subnav-dates-modal': this.props.chartType === 'modal'
});

var mostRecentLinkClass = cx({
'patient-data-subnav-active': !this.props.atMostRecent && !this.props.inTransition,
'patient-data-subnav-disabled': this.props.atMostRecent || this.props.inTransition,
Expand Down Expand Up @@ -93,7 +100,7 @@ var TidelineHeader = React.createClass({
</div>
<div className="grid-item one-whole large-one-half patient-data-subnav-center" id="tidelineLabel">
<a href="" className={backClass} onClick={this.props.onClickBack}><i className={this.props.iconBack}/></a>
<div className="patient-data-subnav-text patient-data-subnav-text-dates">
<div className={dateLinkClass}>
{this.props.title}
</div>
<a href="" className={nextClass} onClick={this.props.onClickNext}><i className={this.props.iconNext}/></a>
Expand Down
10 changes: 5 additions & 5 deletions app/components/chart/modal.js
View file
Open in desktop
@@ -1,16 +1,16 @@
/** @jsx React.DOM */
/*
/*
* == BSD2 LICENSE ==
* Copyright (c) 2014, Tidepool Project
*
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the associated License, which is identical to the BSD 2-Clause
* License as published by the Open Source Initiative at opensource.org.
*
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the License for more details.
*
*
* You should have received a copy of the License along with this program; if
* not, you can obtain one from Tidepool Project at tidepool.org.
* == BSD2 LICENSE ==
Expand Down Expand Up @@ -186,7 +186,7 @@ var Modal = React.createClass({
else {
timezone = timePrefs.timezoneName || 'UTC';
}
return sundial.formatInTimezone(datetime, timezone, 'MMMM Do');
return sundial.formatInTimezone(datetime, timezone, 'MMM D, YYYY');
},
getTitle: function(datetimeLocationEndpoints) {
// endpoint is exclusive, so need to subtract a day
Expand Down
10 changes: 5 additions & 5 deletions app/components/chart/weekly.js
View file
Open in desktop
@@ -1,16 +1,16 @@
/** @jsx React.DOM */
/*
/*
* == BSD2 LICENSE ==
* Copyright (c) 2014, Tidepool Project
*
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the associated License, which is identical to the BSD 2-Clause
* License as published by the Open Source Initiative at opensource.org.
*
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the License for more details.
*
*
* You should have received a copy of the License along with this program; if
* not, you can obtain one from Tidepool Project at tidepool.org.
* == BSD2 LICENSE ==
Expand Down Expand Up @@ -161,7 +161,7 @@ var Weekly = React.createClass({
},
formatDate: function(datetime) {
// even when timezoneAware, labels should be generated as if UTC; just trust me (JEB)
return sundial.formatInTimezone(datetime, 'UTC', 'MMMM Do');
return sundial.formatInTimezone(datetime, 'UTC', 'MMM D, YYYY');
},
getTitle: function(datetimeLocationEndpoints) {
return this.formatDate(datetimeLocationEndpoints[0]) + ' - ' + this.formatDate(datetimeLocationEndpoints[1]);
Expand Down
15 changes: 10 additions & 5 deletions app/pages/patientdata/patientdata.less
View file
Open in desktop
Expand Up @@ -33,16 +33,21 @@

.patient-data-subnav-text {
display: inline-block;
padding: @patient-data-subnav-vertical-padding @patient-data-subnav-horizontal-padding;
padding: @patient-data-subnav-vertical-padding 0 @patient-data-subnav-horizontal-padding 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a funny thing going one when the app is in the loading data state (title bar gets really vertically skinny), and I think this change might be the root?
screenshot 2015-01-13 10 19 44

To get a good long look at it you can use "mock" mode and and the URL http://localhost:3000/?api.patientdata.get.delay=5000#/patients/11/data (auth.skip in mock mode seems to be broken though...)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets get rid of the th after the #

*Sara Krugman *
Lead designer

*Tidepool *An open source, not-for-profit effort to build an open data
platform and better applications that reduce the burden of Type 1 Diabetes
and accelerate the commercialization of closed-loop systems.

Phone : 617 549 1483
*Email : *sara@tidepool.org
*Web : *Tidepool.org http://tidepool.org/

On Tue, Jan 13, 2015 at 10:24 AM, Jana Beck notifications@github.com
wrote:

In app/pages/patientdata/patientdata.less
#182 (diff):

@@ -33,16 +33,21 @@

.patient-data-subnav-text {
display: inline-block;

  • padding: @patient-data-subnav-vertical-padding @patient-data-subnav-horizontal-padding;
  • padding: @patient-data-subnav-vertical-padding 0 @patient-data-subnav-horizontal-padding 0;

There's a funny thing going one when the app is in the loading data state
(title bar gets really vertically skinny), and I think this change might be
the root?
[image: screenshot 2015-01-13 10 19 44]
https://cloud.githubusercontent.com/assets/1588547/5726139/f5f1965c-9b0d-11e4-859f-daa750ee84a0.png

To get a good long look at it you can use "mock" mode and and the URL
http://localhost:3000/?api.patientdata.get.delay=5000#/patients/11/data
(auth.skip in mock mode seems to be broken though...)

—
Reply to this email directly or view it on GitHub
https://github.com/tidepool-org/blip/pull/182/files#r22882329.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I definitely introduced that one! It's fixed in my latest commit. There was inconsistent padding on linked header items versus plain text. I've correct that and cleaned up a bit!


text-align: center;
}

.patient-data-subnav-text-dates {
width: 275px;
.patient-data-subnav-dates-daily {
width: 150px;
}

padding-left: 0;
padding-right: 0;
.patient-data-subnav-dates-weekly {
width: 220px;
}

.patient-data-subnav-dates-modal {
width: 275px;
}

.patient-data-subnav a {
Expand Down