{"action":"closed","issue":{"url":"https://api.github.com/repos/alephdata/aleph/issues/340","repository_url":"https://api.github.com/repos/alephdata/aleph","labels_url":"https://api.github.com/repos/alephdata/aleph/issues/340/labels{/name}","comments_url":"https://api.github.com/repos/alephdata/aleph/issues/340/comments","events_url":"https://api.github.com/repos/alephdata/aleph/issues/340/events","html_url":"https://github.com/alephdata/aleph/issues/340","id":302087325,"number":340,"title":"Previews","user":{"login":"iaincollins","id":595695,"avatar_url":"https://avatars2.githubusercontent.com/u/595695?v=4","gravatar_id":"","url":"https://api.github.com/users/iaincollins","html_url":"https://github.com/iaincollins","followers_url":"https://api.github.com/users/iaincollins/followers","following_url":"https://api.github.com/users/iaincollins/following{/other_user}","gists_url":"https://api.github.com/users/iaincollins/gists{/gist_id}","starred_url":"https://api.github.com/users/iaincollins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/iaincollins/subscriptions","organizations_url":"https://api.github.com/users/iaincollins/orgs","repos_url":"https://api.github.com/users/iaincollins/repos","events_url":"https://api.github.com/users/iaincollins/events{/privacy}","received_events_url":"https://api.github.com/users/iaincollins/received_events","type":"User","site_admin":false},"labels":[{"id":434093556,"url":"https://api.github.com/repos/alephdata/aleph/labels/ui","name":"ui","color":"0e8a16","default":false}],"state":"closed","locked":false,"assignee":{"login":"iaincollins","id":595695,"avatar_url":"https://avatars2.githubusercontent.com/u/595695?v=4","gravatar_id":"","url":"https://api.github.com/users/iaincollins","html_url":"https://github.com/iaincollins","followers_url":"https://api.github.com/users/iaincollins/followers","following_url":"https://api.github.com/users/iaincollins/following{/other_user}","gists_url":"https://api.github.com/users/iaincollins/gists{/gist_id}","starred_url":"https://api.github.com/users/iaincollins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/iaincollins/subscriptions","organizations_url":"https://api.github.com/users/iaincollins/orgs","repos_url":"https://api.github.com/users/iaincollins/repos","events_url":"https://api.github.com/users/iaincollins/events{/privacy}","received_events_url":"https://api.github.com/users/iaincollins/received_events","type":"User","site_admin":false},"assignees":[{"login":"iaincollins","id":595695,"avatar_url":"https://avatars2.githubusercontent.com/u/595695?v=4","gravatar_id":"","url":"https://api.github.com/users/iaincollins","html_url":"https://github.com/iaincollins","followers_url":"https://api.github.com/users/iaincollins/followers","following_url":"https://api.github.com/users/iaincollins/following{/other_user}","gists_url":"https://api.github.com/users/iaincollins/gists{/gist_id}","starred_url":"https://api.github.com/users/iaincollins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/iaincollins/subscriptions","organizations_url":"https://api.github.com/users/iaincollins/orgs","repos_url":"https://api.github.com/users/iaincollins/repos","events_url":"https://api.github.com/users/iaincollins/events{/privacy}","received_events_url":"https://api.github.com/users/iaincollins/received_events","type":"User","site_admin":false}],"milestone":null,"comments":4,"created_at":"2018-03-04T13:51:18Z","updated_at":"2018-03-22T14:17:17Z","closed_at":"2018-03-22T14:17:17Z","author_association":"OWNER","body":"On Friday we came up with an approach we'd like to follow for previews in the search view.\r\n\r\nThis is an attempt to capture the specifics of the behaviour we want and to detail some of the tedious implementation details of the CSS/markup, to explain what we explored for posterity.\r\n\r\nThis is a bit stream of consciousness and I might tidy it up and trim it down later to be more concise, I just wanted to capture the out come of discussions on Friday (and over the weekend) around it.\r\n\r\n* When you select an entity or document a sidebar should appear.\r\n* The sidebar should slide in from the right.\r\n* It should overlay content on the search results, not reflow it.\r\n* It should have a close button that hides the Preview.\r\n* It should have an initial fixed with (~400px) but also a maximise button.\r\n* The maximise button should toggle between the small fixed with and ~50% of the window size (possibly with a max-width constraint of ~1024px).\r\n* When in a non-maximised state it should display summary information.\r\n* When maximised it should be able to display the actual document or entity being previewed.\r\n* It should be possible to use arrow keys / buttons to navigate to the next / previous document in a search result.\r\n* The item being previewed in the search result should be highlighted while the preview is open so it's clear to the user what happens when they select to preview the next document.\r\n* The component should be included at the Screen level (i.e. in Screen.jsx).\r\n* It should use URL reading and writing (of the # path) to determine if it is visible, what content it should display, what size it should display at if open and what tab is selected.\r\n* The # path schema is TBD but, for example: #preview:id=123&preview:type=entity&preview:size=maximised&preview:tab=overview\r\n\r\n# CSS Implementation\r\n\r\nI have built three prototypes now and think I have some idea about our options for CSS implementation.\r\n\r\n## Sticky Sidebar\r\n\r\nThe CSS layout option `position: sticky` could suit our needs, but has some limitations. Some of those are being worked on in the CSS spec (such as a selector for knowing when an stick element has reached the top of the screen and become 'sticky' so internal content can be reflowed).\r\n\r\nMost commonly, Javascript watchers are used to assist when rendering stick elements, including with libraries like Bootstrap which uses it for it's Navbar.\r\n\r\nExamples:\r\n\r\n* https://www.npmjs.com/package/react-sticky-el\r\n* https://www.npmjs.com/package/react-sticky\r\n* https://css-tricks.com/scroll-fix-content/ <- Older, but has good comments.\r\n\r\nPerhaps the best module for React + Sticky is one written by Yahoo!. It is much less popular than some of the others, but I think better engineered. It's README goes into the short falls of some of the existing implementations and the issues and the edge cases it addresses. These are relevant to us.\r\n\r\nThe other libraries are great for most use cases, which are much simpler than ours (in particular, which don't involve things like Flex boxes or auto-expanding results pages) but we would need to use something like the Yahoo! version if we went down this route.\r\n\r\n* https://github.com/yahoo/react-stickynode\r\n\r\n## Fixed Sidebar\r\n\r\nMy experiments with different sticky approaches led me to `position: fixed`.\r\n\r\nEssentially, I think it's the lesser of evils.\r\n\r\nThere are a several odd issues that pop up with position sticky, in particular with relation to using a flexbox layout. I think we could address these but it would complicate things significantly for maintenance and seems likely to be more fragile.\r\n\r\nThe Yahoo! library does a great job of abstracting the watchers and markup, but it still has to wrap all your components and does a lot of work behind the scenes.\r\n\r\nBased on creating three separate prototypes - and our requirements above - I lean towards Fixed positioning - with a small amount of JavaScript - for the Preview pane. \r\n\r\n* When displaying initially it would need to account for  the px height of the Navbar and Footer. This can be done in real time when the component is displayed, so will display correctly even if we change the height of the Navbar or Footer. \r\n\r\n* It would need a debounced watcher to check scroll position so it behaves like a sticky element when the Navbar scrolls off the screen (so it takes up the full height of the window and doesn't leave a gap at the top when the window is scrolled).\r\n\r\n* I think we can handle height resizing in CSS in this case (so I don't think we would need a resize event handler, but would have to see how it shakes out).\r\n\r\nI think position fixed would be the easiest thing to debug and have by far the least CSS, HTML and JS. I am always reticent to use JS to calculate positions for items, but I think it's unavoidable in this context and I think the positional JS we need would be very lightweight.\r\n\r\n# Thoughts\r\n\r\n* We all like the idea of document previews in search.\r\n* We are all agreed on the actual behaviour of what we are aiming for, as defined above.\r\n* We should acknowledge we are describing is actually quite complex behaviour for a web app.\r\n* If we have a solution that has clear limitations around it's implementation, that's okay and we shouldn't let that stop us from addressing the use case as captured above.\r\n* It contends with UX problems most web sites don't go near and is in the gray area of where it does 'app' like things, but in a 'browser', which creates it's own challenges with regard to user expectations (such as 'where to scroll bars go' in certain views). There are not always clear answers to these.\r\n* We should do user testing at the earliest opportunity."}}
{"actor":{"display_login":"iaincollins"}}