{"action":"created","issue":{"url":"https://api.github.com/repos/inaturalist/inaturalist/issues/957","repository_url":"https://api.github.com/repos/inaturalist/inaturalist","labels_url":"https://api.github.com/repos/inaturalist/inaturalist/issues/957/labels{/name}","comments_url":"https://api.github.com/repos/inaturalist/inaturalist/issues/957/comments","events_url":"https://api.github.com/repos/inaturalist/inaturalist/issues/957/events","html_url":"https://github.com/inaturalist/inaturalist/issues/957","id":146463550,"number":957,"title":"Add Observations Component","user":{"login":"joellebel","id":11527994,"avatar_url":"https://avatars.githubusercontent.com/u/11527994?v=3","gravatar_id":"","url":"https://api.github.com/users/joellebel","html_url":"https://github.com/joellebel","followers_url":"https://api.github.com/users/joellebel/followers","following_url":"https://api.github.com/users/joellebel/following{/other_user}","gists_url":"https://api.github.com/users/joellebel/gists{/gist_id}","starred_url":"https://api.github.com/users/joellebel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joellebel/subscriptions","organizations_url":"https://api.github.com/users/joellebel/orgs","repos_url":"https://api.github.com/users/joellebel/repos","events_url":"https://api.github.com/users/joellebel/events{/privacy}","received_events_url":"https://api.github.com/users/joellebel/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/inaturalist/inaturalist/labels/design","name":"design","color":"d4c5f9"},{"url":"https://api.github.com/repos/inaturalist/inaturalist/labels/features","name":"features","color":"fbca04"}],"state":"open","locked":false,"assignee":{"login":"pleary","id":48566,"avatar_url":"https://avatars.githubusercontent.com/u/48566?v=3","gravatar_id":"","url":"https://api.github.com/users/pleary","html_url":"https://github.com/pleary","followers_url":"https://api.github.com/users/pleary/followers","following_url":"https://api.github.com/users/pleary/following{/other_user}","gists_url":"https://api.github.com/users/pleary/gists{/gist_id}","starred_url":"https://api.github.com/users/pleary/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pleary/subscriptions","organizations_url":"https://api.github.com/users/pleary/orgs","repos_url":"https://api.github.com/users/pleary/repos","events_url":"https://api.github.com/users/pleary/events{/privacy}","received_events_url":"https://api.github.com/users/pleary/received_events","type":"User","site_admin":false},"milestone":null,"comments":19,"created_at":"2016-04-06T23:19:30Z","updated_at":"2016-04-27T17:46:07Z","closed_at":null,"body":"# Functional Spec\r\n\r\nhttps://docs.google.com/document/d/16XbwM2hQe3E160YMUehQjmw_uBOAW0Q8X0bKFnh5ITg/edit?usp=sharing\r\n\r\n\r\n# Prototype\r\n\r\nhttp://thinkmoredesign.com/inat/Add_Obs/start.html\r\n\r\n# Prototype Notation \r\n\r\n### Notes are indicated by this little icon...\r\n\r\n![image](https://cloud.githubusercontent.com/assets/11527994/14335564/201d9a06-fc11-11e5-999b-194439053a12.png)\r\n\r\n### Sitemap is featured on the left... \r\n![image](https://cloud.githubusercontent.com/assets/11527994/14335579/376c1dcc-fc11-11e5-9d8b-9dd90cd68f98.png)\r\n\r\n* Only the pages with \"(IX)\" in the title are for demonstrated interactions. \r\n* Make sure to click on the \"Page Notes\" tab for overall page notes\r\n* I was not able to make all interaction so please ask questions! Tried to make up for it in notation. \r\n* Please use all bootstrap css for now which means it does not all have to look exactly like the prototype or even close\r\n\r\n\r\n## Making a New Ob from an Ob with Multiple Photos:\r\n\r\nYou can drag a photo out of it's mini slider and situate it in between any of the ob snippets to create a new one. \r\n\r\n# Questions\r\n\r\n* Do we need some sort of sort filter? ...so you could sort obs by timestamp, species name, etc.\r\n* Please take a look at the photo enlargement of an ob with multiple photos and tell me what you think. I added a mini carousel and drag drop capability to reorder photos. (The drag dropping doesn't actually work in the prototype.)\r\n\r\n@pleary thanks for your patience! I am happy to walk you through the prototype again. \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/inaturalist/inaturalist/issues/comments/215168188","html_url":"https://github.com/inaturalist/inaturalist/issues/957#issuecomment-215168188","issue_url":"https://api.github.com/repos/inaturalist/inaturalist/issues/957","id":215168188,"user":{"login":"joellebel","id":11527994,"avatar_url":"https://avatars.githubusercontent.com/u/11527994?v=3","gravatar_id":"","url":"https://api.github.com/users/joellebel","html_url":"https://github.com/joellebel","followers_url":"https://api.github.com/users/joellebel/followers","following_url":"https://api.github.com/users/joellebel/following{/other_user}","gists_url":"https://api.github.com/users/joellebel/gists{/gist_id}","starred_url":"https://api.github.com/users/joellebel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joellebel/subscriptions","organizations_url":"https://api.github.com/users/joellebel/orgs","repos_url":"https://api.github.com/users/joellebel/repos","events_url":"https://api.github.com/users/joellebel/events{/privacy}","received_events_url":"https://api.github.com/users/joellebel/received_events","type":"User","site_admin":false},"created_at":"2016-04-27T17:46:06Z","updated_at":"2016-04-27T17:46:06Z","body":"# Design Specs\r\n\r\n@pleary Here's some html you grab where easy or necessary (I have all the elements exposed (delete button, captive label, etc) so you can see what they look like: http://thinkmoredesign.com/inat/Dashboard/add_obs_06.html\r\n\r\n![image](https://cloud.githubusercontent.com/assets/11527994/14860054/c14a361e-0c5b-11e6-9bc0-856b6cd2c6d1.png)\r\n\r\n\r\n## Punch List\r\n\r\n- [ ] Please remove the \"Submit\" button when there are no obs to upload\r\n- [ ] Main Nav: Please see above page for how the add obs nav should look; The current method used for making disabled states is fine\r\n\r\n### Cards\r\n- [ ] please make the the rotating loading gif 1/3rd its size as well as the hour glass icon\r\n- [ ] *Hover state for card:* 3px solid #74ac00 at 30%; Drag state:  3px solid #74ac00 at 100%; When dragging onto another card, the card being dragged onto should have a border of  5px solid #74ac00 at 100%\r\n- [ ] *Photo Drag:* While photo is being dragged, please give it a border of 2px solid  #74ac00\r\n- [ ] You can grab the Captive \"C\" label from above page\r\n- [ ] Cards are 220px wide (they can be about that if the varying borders on hover and grab screw with things; The idea is that they're close to 220px)\r\n- [ ] Cards input fields have the \"input-sm\"\r\n- [ ] The cards on Staging are not using the bootstrap default border. Please see the CSS I used for the cards (I tried to use as little custom as possible). I'm just using the default .thumbnail border. As you can see I used this [component] (http://getbootstrap.com/components/#thumbnails-custom-content) as a model\r\n- [ ] Cards have a margin-right of 15px\r\n- [ ] See CSS for photo border and dropshadow\r\n- [ ] I gave the input fields a top and bottom margin of 10px; The input fields are also within the \".caption\" div which give the form fields a left and right padding of 9px on top of the 4px they afforded by the \".thumbnail\" div\r\n- [ ] Photo Width: I have the photo width and height not going beyond 164px (but it doesn't have to perfect; that's what worked for me with my css)\r\n- [ ] See CSS used to create Remove round buttons. Please make them red on hover. The regular \"red\" is fine. \r\n- [ ] See CSS for regular and hover states for the magnifying glass; The hope was that the magnifying glass could always be in the lower left corner of the image\r\n- [ ] Please put the slideshow chevrons on the outside of the photo so there is no overlapping while still maintaining their left and right alignments with the text fields; I have the chevrons for their regular state at #555; .5 opacity is fine for their disabled state. Hover state can be black. \r\n\r\n\r\n### Columns\r\n\r\n- [ ] Please un-italicize the \"Editing # observations / Select Observations to edit...\" title in the left column\r\n- [ ] Fields in the left column do not have the additional \"input-sm\" class as they are default-sized\r\n- [ ] Please see what I did for columns. The left column has a fixed width of 290; The right column is fluid\r\n- [ ] See below margins for the columns\r\n \r\n\r\n![image](https://cloud.githubusercontent.com/assets/11527994/14861385/dfb15898-0c61-11e6-8cc5-fb5b64378662.png)\r\n\r\n\r\n\r\n## Notes:\r\n\r\n* I left out tagging styling. No worries on that. Think it looks ok. \r\n* Disregard the photo number count (ex. 1/2), if we're not doing them.\r\n\r\n# Questions\r\n\r\n* Are we leaving out the \"Add Photo\" button/link to a photo-less ob\r\n\r\n\r\nPlease let me know which of the above items are time consuming and/or what is not clear. \r\n\r\n "}}