UI: Improve side panel layout

[TtuxX]

Hi @marcelklehr !

Just sharing here some small layout changes for the side-panel I made on my instance.
Feel free to integrate only those you find interesting, if any.

Goals/changes (for me):

• Reduce preview darkening (shadow too important on the preview; just put a light and simple shadow in-between preview and website title),
• Adjust preview image to top as websites are being visited/browsed from top to bottom (site title & navbar were not always visible with centered previews),
• Reduce preview size to see more easily (on small screens or not) title, description & panel content in general,
• Reduce overall width of panel,
• Reduce padding to better use panel's visual space,
• Reduce bookmark title font size but underline it.

I don't know f you will find it relevant or not; you can test those changes by pasting CSS lines below directly in the Nextcloud custom CSS theming application.

Before:

After:

CSS changes:

.bookmark-detail {
width: 430px;
padding: 20px;
}

.bookmark-detail .preview {
background-position: top;
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.1);
height: 250px;
}

.bookmark-detail h1 {
font-size: 23px;
text-decoration: underline;
}

Edit: (2018.07.25 - 23:57)
This CSS is not optimised and breaks the side panel's close [x] button on Firefox mobile and Chromium mobile. The close button is not visible and this CSS should not be integrated as is as it needs rework/adaptation.

[marcelklehr]

This looks good. Thanks for sharing! I won't overtake the underline, because it feels odd to me. But other than that: 👍

I also see you've changed the background of the titles in the bookmark cards. I've also been pondering how to improve those...

[TtuxX]

Ok ! :)

I think I found some ideas :))

I just worked on it today; my CSS for the bookmarks cards is a bit buggy for the moment but I will open a new issue and share this right away with you then ! :)

[TtuxX]

Something that could also be nice (just for making user experience more entertaining) could be to make the side panel deploy smoothly, appearing sliding from right to left and disappearing sliding from left to right when clicking on a bookmark.

[TtuxX]

Making a reference to closed issue #534, with a very minor appearance glitch on websites that don't have titles: title field disappears between when you click on it and when you type some text.

[marcelklehr]

Just pushed my chcanges inspired by your modifications. :)

Edit:

Ah, the title editing glitch should be fixed. It only appears in firefox, so that's why I didn't notice it.

I also think adding the favicon to the details view would be nice. Plus it would be in accordance with nextcloud/server#10289 ;)

(Note to self: lose the white left border. It's ugly and unnecessary since the drop shadow was introduced)

[TtuxX]

Just pushed my chcanges inspired by your modifications. :)

Great :)

Ah, the title editing glitch should be fixed. It only appears in firefox, so that's why I didn't notice it.

Thank you, I confirm it is fixed!

I also think adding the favicon to the details view would be nice. Plus it would be in accordance with nextcloud/server#10289 ;)

Completely agree, standardisation is a good idea.

---

(self quoting from #535 (comment))

Something that could also be nice (just for making user experience more entertaining) could be to make the side panel deploy smoothly, appearing sliding from right to left and disappearing sliding from left to right when clicking on a bookmark.

Do you have any opinion on this ? :)

[marcelklehr]

Something that could also be nice (just for making user experience more entertaining) could be to make the side panel deploy smoothly, appearing sliding from right to left and disappearing sliding from left to right when clicking on a bookmark.

Yep, just pushed this :)

[TtuxX]

Thank you :)

However, when panel is opened and you click on another bookmark, it re-triggers the opening animation. Maybe if panel has already been opened, just display the new bookmark content without animation ?

[marcelklehr]

Ah, yes. Fixed now :)

[marcelklehr]

v0.12.0-rc4 released