Skip to content

Instantly share code, notes, and snippets.

@dugite-code
Last active August 28, 2023 03:58
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save dugite-code/ce068c75110e08cd669f016be65bf55e to your computer and use it in GitHub Desktop.
Nextcloud Mail App horizontal layout - For use in the custom css app
@media only screen and (min-width: 768px) {
.app-mail #app-navigation {
min-width: 250px !important;
}
#mail-new-message-fixed, #app-navigation-accounts, .app-mail #app #app-navigation #app-settings #app-settings-header, .app-mail #app #app-navigation #app-settings #app-settings-content {
width: 300px !important;
}
.app-mail #app-content {
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
flex-grow: 0;
overflow-x: hidden;
}
.app-mail #app-content #app-content-wrapper {
flex-direction: column;
overflow: hidden;
}
.app-mail #app-content #app-content-wrapper .app-content-list {
top: auto !important;
width: auto !important;
max-width: 100vw !important;
min-height: 10% !important;
height: 30%;
border-right: none !important;
border-bottom: 4px solid #ebebeb !important;
resize: vertical;
flex: unset;
}
.app-mail #app-content #app-content-wrapper .app-content-details {
max-height: 90% !important;
min-height: 20% !important;
flex: 1;
overflow-y: auto;
}
#mail-message, .app-content-details{
max-width: revert !important;
margin: revert !important;
}
#mail-message-header {
top: auto !important;
position: relative !important;
background: #ebebeb !important;
width: 100% !important;
}
#mail-message-header h2 {
font-weight: bold;
}
#mail-content, .mail-message-attachments {
margin: 10px 10px 50px 30px !important;
}
#emptycontent {
margin-top: 5vh;
}
#load-more-mail-messages {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.special-inbox.collapsible > .folder, .special-drafts.collapsible > .folder, .special-flagged.collapsible > .folder, .special-sent.collapsible > .folder {
flex: auto !important;
margin-left: 20px !important;
box-shadow: none !important;
}
.app-mail #app-navigation .collapsible:not(.open) .app-navigation-entry-utils{
border-bottom: #0082C9 solid 2px !important;
}
.app-mail #app-navigation .collapsible.open {
background-color: #ebebeb !important;
border-top: #fff 5px solid;
}
.app-mail #app-navigation .collapsible.open > .folder {
font-weight: bold;
border-bottom: #0082C9 solid 2px !important;
}
#mail-message-has-blocked-content {
border: 1px solid #ffd480 !important;
background: #ffff99 !important;
padding: 10px !important;
}
iframe table{
table-layout: inherit !important;
}
}
@onclefranck
Copy link

Exact same problem here using Nextcloud 20.0.7

@onclefranck
Copy link

Not sure if I did it right but I replaced #app-content selector by #app-content-vue everywhere in horizontal.css an it appeared to work properly. I might have some bias so please confirm I did it right.

@dugite-code
Copy link
Author

@onclefranck That's part of the fix, looks like the scroll on the content iframe and the reply container need tweaking as they are currently stuck

@sdfg2
Copy link

sdfg2 commented Mar 20, 2021

Thank you so much for coming up with this in the first place, and even now looking at it again. It seems such a fundamental thing I can't believe it's not baked in in the first place.

@pm-pm
Copy link

pm-pm commented May 24, 2022

Does it work with 23.0.x?
I have no luck to make it work.

@dugite-code
Copy link
Author

@pm-pm No it currently doesn't work in 23.0.x I'm planning on working to get it working as I've started using Nextcloud mail again

@dugite-code
Copy link
Author

@pm-pm On further inspection it appears this is no longer possible (at least with the flexible split panes) as the app is no longer using css for managing the pane sizing. The project is now using the https://github.com/antoniandre/splitpanes project and this breaks the method I was using quite completely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment