New display type to be closer to Pinboard

[gingerbeardman]

Is your feature request related to a problem? Please describe.
I have come from using pinboard for 11 years so my usage patterns are embedded in muscle memory.

My expectations are that the same sort of information should be viewable in the same sort of footprint.

Currently "list with many" means few bookmarks are visible.
And "list with less" does not show all information.

Describe the solution you'd like

• ideally a new list type that shows the same information as Pinboard, in a similar footprint
• or that could be:
  • "list with less details" but with tags
  • "list with many details" but without images
  • separate thumbnail toggle

Describe alternatives you've considered

• pinboard
• linkding (it was easy to add URL display to the default list style)
• Shaarli (needed some heavy editing or custom theme to get a good display)

Additional context

Pinboard

• private/read (using colour only)
• star
• title
• url
• description
• tags
• date
• edit/delete
• (everything being left aligned is a perfect reading experience)

LinkAce "list with less details"

• private/read (using icon only)
• site icon
• title
• url
• (mix of left/right alignment makes a difficult reading experience)

LinkAce "list with many details"

• image
• private/read (using icon only)
• site icon
• title
• url
• description
• tags
• date
• edit/delete
• (mix of left/right alignment makes a difficult reading experience)

Related issues

• Support for starring/favourite bookmarks #430
• Support for more visual differentiation of private/read-later bookmarks #431
• Option to disable icons #434
• Option to disable thumbnails #435

[gingerbeardman]

Using the tip in #436

A tremendous hack, but this is what I have:

CSS

<style>
:root, body {
--bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6.d-sm-flex.align-items-sm-center.justify-content-sm-end.flex-wrap > div.btn-group.mt-1.ms-md-2 svg,
#app > main > section > div > div > div > div > div.d-flex.me-2.mw-100.order-2.order-md-1 > div.me-2.me-lg-3,
.text-pale,
.card-body > div > div:nth-child(1) > div,
.link-thumbnail-list-holder {
display: none;
}

.row > div {
width: 100%;
}

.row .justify-content-sm-end {
justify-content: flex-start !important;
}

.link-wrapper .mb-4 {
margin-bottom: -1px !important;
}

.card-body {
padding-bottom: 0;
}

.card-body.py-2 {
padding-top: 0 !important;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) .btn-light {
background: none !important;
border: none !important;
white-space: nowrap; 
overflow: hidden;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) > a:nth-child(1).btn-light {
width: 2.5rem;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) > a:nth-child(2).btn-light {
width: 1.9rem;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) > button.btn-light {
width: 2.9rem;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6.d-sm-flex.align-items-sm-center.justify-content-sm-end.flex-wrap > div.text-xs {
padding-top: 0.25rem;
}
</style>

Screenshot

[gingerbeardman]

Even more like Pinboard.

CSS

<style>
:root, body {
--bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

header.d-flex {
display: none !important;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6.d-sm-flex.align-items-sm-center.justify-content-sm-end.flex-wrap > div.btn-group.mt-1.ms-md-2 svg,
#app > main > section > div > div > div > div > div.d-flex.me-2.mw-100.order-2.order-md-1 > div.me-2.me-lg-3,
.text-pale,
.card-body > div > div:nth-child(1) > div,
.link-thumbnail-list-holder {
display: none;
}

.row > div {
width: 100%;
}

.row .justify-content-sm-end {
justify-content: flex-start !important;
}

.link-wrapper .mb-4 {
margin-bottom: -1px !important;
}

.card-body {
padding-bottom: 0;
}

.card-body.py-2 {
padding-top: 0 !important;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) .btn-light {
background: none !important;
border: none !important;
white-space: nowrap; 
overflow: hidden;
}

#app > main > section > div > div > div.card-body.py-2 > div > div:nth-child(1) > .btn-xs {
color: #000 !important;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) > a:nth-child(1).btn-light {
width: 2.5rem;
display: none;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) > a:nth-child(2).btn-light {
width: 1.9rem;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6 > div:nth-child(2) > button.btn-light {
width: 2.9rem;
}

#app > main > section > div > div > div.card-body.py-2 > div > div.col-12.col-sm-6.d-sm-flex.align-items-sm-center.justify-content-sm-end.flex-wrap > div.text-xs {
padding-top: 0.25rem;
}

.card {
border: none;
}

.card-body {
padding: 1rem 0 0 0;
}

.my-4 {
margin-top: 0 !important;
}

#app > main > section > div > div > div:nth-child(1) > div > div.d-flex.me-2.mw-100.order-2.order-md-1 > div:nth-child(2) > div:nth-child(1) {
line-height: 1rem;
}

.text-muted {
color: #888 !important;
}
</style>

Screenshot

[gingerbeardman]

I'm happy to offer my services, for free, to add such a new style officially.

[Kovah]

I guess the styling options will be completely redone in the next big version. I am not happy with the current versions.

[powellc]

Oh, this is a tremendous hack while the styles are redone. Thank you @gingerbeardman and thank you @Kovah for a great project!

[Kovah]

Should be completed with #553