DateMath: Interactivity #2897

GuiltyDolphin · 2016-04-16T18:58:02Z

This adds interactivity to the DateMath Goodie through JavaScript.

Hide your eyes.

To-Do

Use a single line for the amount input, in the form Years: X Months: X etc. with support for changing the operation from addition to subtraction.

IA Page: https://duck.co/ia/view/date_math

daxtheduck · 2016-04-16T18:58:04Z

DateMath

Description: calculate the date with an offset

Example Query: Jan 1 2012 plus 32 days, 1/1/2012 plus 5 months, January first minus ten days, in 5 weeks, 2 weeks ago, 1 month from today, 3 seconds ago, time now + 16 minutes, 4 hours from now

Tab Name: Answer

Source:

These are the important fields from the IA page. Please check these for errors or missing information and update the IA page

This is an automated message which will be updated as changes are made to the IA page

GuiltyDolphin · 2016-04-24T20:01:36Z

@mintsoft Want to have a look over this? I think the functionality is all there; just a question of getting it to look nice.

I'll have another look pretty soon to make sure I've removed everything that should be, and clean up anything that requires it.

mintsoft · 2016-04-24T20:07:43Z

@GuiltyDolphin certainly can

mintsoft · 2016-04-24T20:18:29Z

Hmm so I'm a smidge confused by the GUI at first; I've just played with it and it made more sense once I could see how it reacted.

@abeyang Any design thoughts here?

GuiltyDolphin · 2016-04-24T20:19:25Z

@mintsoft Glad it made sense (eventually)! I'm no designer so any design review is appreciated.

mintsoft · 2016-04-24T20:26:01Z

@GuiltyDolphin Immediate things that I've noticed are that I think some labels might help?

It'd be nice to highlight the "start date"
The input boxes on the start bit are a little difficult to tell that you can edit them, because some bits you can, some you can't
Personally I dislike month first date formats; I'd prefer like Monday 25th April 2016 21:17:05

mintsoft · 2016-04-24T20:26:36Z

Also it doesn't give me the answer when I query? I have to tinker with it to get the answer out?

GuiltyDolphin · 2016-04-24T20:27:09Z

Oh lord @mintsoft yeah - forgot to turn that on!

GuiltyDolphin · 2016-04-24T20:27:59Z

@mintsoft Sure - I was using a random format suggested by moment.js. Probably best to go with the general 'DuckDuckGo' format (with weekday).

I would like locale formats but... moment.js seems to do things its own way, and doesn't currently support CLDR :/

mintsoft · 2016-04-24T20:28:32Z

Ah somehow I knew it'd be moment.js's fault; it's basically the reason why all date stuff is broken on the internet these days.

GuiltyDolphin · 2016-04-24T20:43:27Z

@mintsoft I've updated the date format and fixed the date not being initially calculated.

For the 'indication' that the fields are editable; I'm pretty happy with the current 'neutral' style for the date, so how about a popout or tooltip?

mintsoft · 2016-04-24T20:53:02Z

@GuiltyDolphin I think my confusion around the input boxes is because that line is small and you highlight things like the sunday it makes it look like it's just text. Maybe if you did user-select: none; (and all the prefixes for different browsers) it'd be more obvious? I dunno

mintsoft · 2016-04-24T21:04:21Z

Hmm maybe change them to <input type='number' /> ? Then they'll have little spinners on them too; makes it a bit clearer when you click it

GuiltyDolphin · 2016-04-25T13:13:04Z

@mintsoft I had that (spinners) before - it was pretty ugly.

There is the indication when you hover over (a caret); but I guess we could make the highlighting a bit more prominent - I'll see how it looks.

moollaza · 2016-06-02T18:57:57Z

Just looking over this. My initial reaction is that there's too much JS here. It looks like a lot of what you've implemented can be handled by the browser:

Changing the input type to number will and setting max=, min= will help a lot
That should force only acceptable inputs, meaning no more validation required
Our btn class should handle all the UI aspects of any buttons: https://duckduckgo.com/styleguide#buttons
Our grid classes should help with the layout -- though I suspect our design team will have thoughts on the overall UI

moollaza · 2016-06-02T18:59:12Z

share/goodie/date_math/date_math.js

+            'Second', 'Minute', 'Hour',
+            'Day', 'Week', 'Month', 'Year'
+        ];
+        function pad(text, padChar, padWidth) {


Move private functions outside the build function definition

GuiltyDolphin · 2016-06-02T20:04:06Z

@moollaza

34ca44f - I was using number with min and max before; but I think it was causing some display issues; I'll check it out again.

I am using btn - but there's some overriding going on that made it a little painful and I had to add some custom stuff... Some design advice/feedback would be very welcome (I haven't really delved into front-end (CSS/design) before - it's very finickity)!

Thanks for the review 😄

GuiltyDolphin · 2016-06-02T20:15:11Z

@moollaza BTW, which (specifically) were you thinking should be switched to number? The day is supposed to allow inputs like 2nd, 3rd etc., the amount ends up looking like:

The times get really screwed up as well.

Am I missing something? It feels like there should be a way to not have it screw everything up and just have the input type; though looking at other IAs they've used things like tel and text inputs to bypass this.

Unfortunately I couldn't find a class for tx--10 (unless it is one of the named ones), so I've used tx--11 for now.

Use the plural version for modifier display names; possibly make it change according to whether the amount is 1?

And a bit o' a cleanup.

Using 'operation' and 'sign' rather than 'actions'. TODO: Update the tests to only have one possible action.

GuiltyDolphin · 2016-07-29T10:14:06Z

@tagawa I'll just revert the changes to the date input - they can't complain if it is a text field.

Hmm... Locally the boxes wrap for me, but on Beta it's fine, weird... (I'm on FF).

moollaza · 2016-08-04T20:21:28Z

share/goodie/date_math/content.handlebars

+    <p class="frm__desc pull--left tx--11">DURATION</p>
+    <span class="frm op--select">
+      <input type="number" class="frm__input input--op-amt g forty"/>
+      <span class="frm__select g fifty" style="height:2em">


use !important to override CSS -- inline styles shouldn't be necessary -- or give these another class and create a more specific selector than .frm .frm__select

@moollaza See my comment above - I've tried using CSS with multiple classes + id + tag etc. (with !important) to no avail - unless I'm missing something obvious it looks like I can't override them?

.zci--date_math .frm__select.g seems to work?

OR

.zci--date_math .frm__select.date--selection if you want it to be more precise

GuiltyDolphin · 2016-08-05T08:36:23Z

@moollaza Uhh, that appears to be missing the sign toggle?

On Midori it takes it from:

To:

(I've played around with it a bit).

I'm not 100% sure what the issue is - on FF it looks screwed up locally, but on Beta it's fine. Could it just be something to do with slightly different styles on Beta and what DuckPAN receives?

moollaza · 2016-08-06T13:33:34Z

Uhh, that appears to be missing the sign toggle?

@GuiltyDolphin looks like your pictures didn't upload in that last comment?

on FF it looks screwed up locally, but on Beta it's fine.

I'll take a look at FF...

Could it just be something to do with slightly different styles on Beta and what DuckPAN receives?

Shouldn't be. If any, it would only be minor and temporary (once Beta is updated internally). AFAIK we haven't made any changes to CSS lately.

moollaza · 2016-08-06T13:42:46Z

share/goodie/date_math/content.handlebars

+    <span class="frm op--select">
+      <input type="number" class="frm__input input--op-amt g forty"/>
+      <span class="frm__select g fifty" style="height:2em">
+        <select class="input--op-type" style="height:2em"/>


can use .frm__select select.input--op-type with !important here.

Our existing DDG style has !important so we need to make our selector more specific first, then force it with !important

You'll want to also remove the padding on the select as the span already adds some, forcing the seconds option to overlap with the dropdown

moollaza · 2016-08-06T14:04:43Z

@GuiltyDolphin if you reduce the padding-left on the .time--input .frm__input then it should prevent the wrapping on FF.

It may be wrapping due to some kind of calculation bug in FF... Not sure why the math isn't adding up there.

GuiltyDolphin · 2016-08-06T17:39:04Z

@moollaza Everything just seems... Bigger, locally:

(Beta/Local)

Changing anything just seems to screw it up more (locally); @tagawa was that screenshot with the wrapping on FF on beta or local?

mintsoft · 2017-08-15T22:01:25Z

I'm going to close this for now until we decide what we want to do with it, feel free to re-open if you disagree

GuiltyDolphin added Improvement Status: Needs Community Review Status: Work In Progress Needs Design Review Maintainer Submitted labels Apr 16, 2016

GuiltyDolphin removed the Status: Work In Progress label Apr 24, 2016

GuiltyDolphin assigned mintsoft Apr 24, 2016

moollaza reviewed Jun 2, 2016
View reviewed changes

GuiltyDolphin added the Status: Work In Progress label Jun 2, 2016

GuiltyDolphin force-pushed the gd/date-math-js branch from 15a2ceb to ec439ef Compare June 2, 2016 20:29

GuiltyDolphin mentioned this pull request Jun 2, 2016

New Duration Calculator Goodie #3143

Closed

GuiltyDolphin added 14 commits July 29, 2016 11:13

Add button for operation sign

0e9d0d2

Update text sizes

6dbc36d

Unfortunately I couldn't find a class for tx--10 (unless it is one of the named ones), so I've used tx--11 for now.

Pluralize modifiers

fdc862a

Use the plural version for modifier display names; possibly make it change according to whether the amount is 1?

Add Pikaday date picker

1db1016

Ensure operation is correctly initialized

ec418e2

Remove unused code

1c071f9

And a bit o' a cleanup.

Ensure time gets initialized

43aee4f

Ensure amount is validated (result date in range)

4785201

Ensure start date is initialized

33cc396

Ensure changing operator type recalculates date

4b835b5

Add operational functionality to sign

2860cca

Update tests

3028239

Using 'operation' and 'sign' rather than 'actions'. TODO: Update the tests to only have one possible action.

Update design per @moollaza's suggestions

7dab264

Fix result date color for dark backgrounds

9abb0df

GuiltyDolphin force-pushed the gd/date-math-js branch from 0d73ebf to 9abb0df Compare July 29, 2016 10:13

daxtheduck deployed to beta.duckduckgo.com August 4, 2016 18:53 Active

moollaza reviewed Aug 4, 2016
View reviewed changes

moollaza reviewed Aug 6, 2016
View reviewed changes

moollaza added Difficulty: Low Priority: Low Design and removed Difficulty: Low labels Apr 11, 2017

mintsoft closed this Aug 15, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DateMath: Interactivity #2897

DateMath: Interactivity #2897

GuiltyDolphin commented Apr 16, 2016 •

edited

daxtheduck commented Apr 16, 2016 •

edited

GuiltyDolphin commented Apr 24, 2016

mintsoft commented Apr 24, 2016

mintsoft commented Apr 24, 2016

GuiltyDolphin commented Apr 24, 2016

mintsoft commented Apr 24, 2016

mintsoft commented Apr 24, 2016

GuiltyDolphin commented Apr 24, 2016

GuiltyDolphin commented Apr 24, 2016 •

edited

mintsoft commented Apr 24, 2016 •

edited

GuiltyDolphin commented Apr 24, 2016

mintsoft commented Apr 24, 2016

mintsoft commented Apr 24, 2016

GuiltyDolphin commented Apr 25, 2016

moollaza commented Jun 2, 2016

moollaza Jun 2, 2016

GuiltyDolphin commented Jun 2, 2016 •

edited

GuiltyDolphin commented Jun 2, 2016 •

edited

GuiltyDolphin commented Jul 29, 2016

moollaza Aug 4, 2016 •

edited

GuiltyDolphin Aug 5, 2016

moollaza Aug 6, 2016 •

edited

GuiltyDolphin commented Aug 5, 2016 •

edited

moollaza commented Aug 6, 2016

moollaza Aug 6, 2016 •

edited

moollaza Aug 6, 2016 •

edited

moollaza commented Aug 6, 2016

GuiltyDolphin commented Aug 6, 2016

mintsoft commented Aug 15, 2017

DateMath: Interactivity #2897

DateMath: Interactivity #2897

Conversation

GuiltyDolphin commented Apr 16, 2016 • edited

To-Do

daxtheduck commented Apr 16, 2016 • edited

DateMath

GuiltyDolphin commented Apr 24, 2016

mintsoft commented Apr 24, 2016

mintsoft commented Apr 24, 2016

GuiltyDolphin commented Apr 24, 2016

mintsoft commented Apr 24, 2016

mintsoft commented Apr 24, 2016

GuiltyDolphin commented Apr 24, 2016

GuiltyDolphin commented Apr 24, 2016 • edited

mintsoft commented Apr 24, 2016 • edited

GuiltyDolphin commented Apr 24, 2016

mintsoft commented Apr 24, 2016

mintsoft commented Apr 24, 2016

GuiltyDolphin commented Apr 25, 2016

moollaza commented Jun 2, 2016

moollaza Jun 2, 2016

Choose a reason for hiding this comment

GuiltyDolphin commented Jun 2, 2016 • edited

GuiltyDolphin commented Jun 2, 2016 • edited

GuiltyDolphin commented Jul 29, 2016

moollaza Aug 4, 2016 • edited

Choose a reason for hiding this comment

GuiltyDolphin Aug 5, 2016

Choose a reason for hiding this comment

moollaza Aug 6, 2016 • edited

Choose a reason for hiding this comment

GuiltyDolphin commented Aug 5, 2016 • edited

moollaza commented Aug 6, 2016

moollaza Aug 6, 2016 • edited

Choose a reason for hiding this comment

moollaza Aug 6, 2016 • edited

Choose a reason for hiding this comment

moollaza commented Aug 6, 2016

GuiltyDolphin commented Aug 6, 2016

mintsoft commented Aug 15, 2017

GuiltyDolphin commented Apr 16, 2016 •

edited

daxtheduck commented Apr 16, 2016 •

edited

GuiltyDolphin commented Apr 24, 2016 •

edited

mintsoft commented Apr 24, 2016 •

edited

GuiltyDolphin commented Jun 2, 2016 •

edited

GuiltyDolphin commented Jun 2, 2016 •

edited

moollaza Aug 4, 2016 •

edited

moollaza Aug 6, 2016 •

edited

GuiltyDolphin commented Aug 5, 2016 •

edited

moollaza Aug 6, 2016 •

edited

moollaza Aug 6, 2016 •

edited