Quick links section looks ugly when sidebar is collapsed

[ChristianHeissing]

On new Gmail layout the Quick links section looks ugly when the Gmail sidebar (all the labels and main gmail folders) is collapsed:

I think it would be nice to have a compact quick links layout when the sidebar is collapsed and the normal layout when the sidebar is expanded.

This compact layout should include only the quick links itself. In other words: the following elements should be removed from the layout when the sidebar is collapsed:

• "i Quick Links" head line
• Button for delete
• Button for global/single
• "Add Quick Link"

The cut link texts would be OK from my point of view.

How does that grab you?

My environment: MacOS 10.13.6, Firefox 61.0.1 (64-Bit), Quick Links 0.3.2

[Zanatoo]

I use a Chrome extension called 'Stylebot' to restyle QuickLinks css. I haven't restyled it for a collapsed sidebar but it could be used for that.

If anyone else wants to style like this, here's the stylebot css. The delete 'X' is still there, just barely visible.

#listContainer {
margin-bottom: 30px;
}

#listContainer .clear {
display: none;
}

#listContainer div {
padding-left: 0px;
}

#listContainer div div {
border-radius: 0 14px 14px 0;
color: #cc37cc ;
font-family: Roboto ;
margin-right: 16px ;
padding-bottom: 3px ;
padding-left: 26px ;
padding-top: 4px ;
}

#listContainer div div:hover {
background-color: #f1f3f4;
}

.T-I.J-J5-Ji.T-I-KE.L3 {
visibility: hidden;
}

.T-I.J-J5-Ji.T-I-KE.L3:after {
background-color: #1a73e8 ;
border-radius: 4px ;
box-sizing: border-box ;
color: #fff ;
content: "New Mail";
font-weight: 500 ;
height: 30px ;
min-width: 80px ;
padding: 0 34px;
padding-top: 0 ;
position: absolute;
text-align: center ;
top: 2px;
visibility: visible;
}

.x7 {
background: #f7e69a;
color: #202124;
}

.z0 {
margin: 10px 10px 0px 30px;
}

.z0>.L3::before {
display: none;
}

.zA:hover {
background: #fef4ca;
box-shadow: none;
}

a.po {
background-image: url(https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png) ;
background-position: 0px ;
background-repeat: no-repeat ;
background-size: 20px ;
border-color: #202124 ;
color: #202124 ;
opacity: 1 ;
padding-left: 38px ;
text-decoration: none ;
}

a.po:hover {
color: #dc4d41 ;
}

a.sgn_bart_logo img {
display: none;
}

div.pU {
color: #dbdbdb;
font-size: 50%;
margin-bottom: 5px;
margin-right: 14px;
}

span.bqe {
background-color: #ffff00;
color: #000000;
}

span.glyph.circle {
display: none;
}

span.glyph.delete {
margin-right: 10px;
opacity: 0.03;
}

span.glyph.info {
display: none;
}

td.xY.bnk {
display: none;
}

[kevinwucodes]

I wonder if it makes sense to hide the quick links completely when the sidebar is collapsed. Would anyone object if this was done?

[Zanatoo]

I never use the sidebar collapsed so I don't really have an opinion on it.

[ChristianHeissing]

Hidden quick links completely when the side bar is collapsed would be cool.

[kevinwucodes]

When the sidebar is fully collapsed, Quick Links will now be hidden. This is available in v0.3.8