Skip to content

Instantly share code, notes, and snippets.

@dugite-code
Last active May 24, 2022
Embed
What would you like to do?
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;
}
}
@dugite-code
Copy link
Author

dugite-code commented Nov 29, 2017

2017/11/29

  • - Fixed loading image position
  • - Added highlight to The images have been blocked to protect your privacy.
  • - Fixed empty folder background image position
  • - Added resize to messages pane
  • - Changed subfolder background color from gradient to solid

2018/02/09

  • - Added indicator line to subfolder Parent
  • - Added indicator line and Bold text to open Parent Folder
  • - Added more specific selectors for the app-navigation changes to avoid conflicts with the news app in NC13
  • - Fixed Settings menu width
    - [x] - Forced Subfolders to new lines - No longer needed in Nextcloud 13

2018/02/12

  • - Fix empty folder mail icon location

2018/05/30

  • - Fixed special folder subfolder collapse

2018/09/27

  • - Nextcloud 14 structural changes

2018/10/17

-[x] - Fixed message list not filling screen with recent update

2019/11/07

-[x] - Fixed message list not filling screen with NC17
-[x] - Fixed message composer not filling screen with NC17

Tested with: Firefox 70.0.1 (64-bit) - Nextcloud 17.0.0

Buy me a Beer

Bitcoin Litecoin

image

image

Bitcoin Address: 155xGQ2sPt2BAbmLUp5myyfjLmAm3c8pPP Litecoin Address: LNiBt4ksgDgTqGq4BYcLS8vtNkdn1Lrmmh

Website: PeekRead.Info

@dugite-code
Copy link
Author

dugite-code commented Nov 30, 2017

2017-11-30_000036

@dugite-code
Copy link
Author

dugite-code commented Feb 8, 2018

Updated for Nextcloud 13 See the revisions page for Nextcloud 12

@dugite-code
Copy link
Author

dugite-code commented Sep 27, 2018

Updated for Nextcloud 14. Note: Not backwards compatible

@dugite-code
Copy link
Author

dugite-code commented Jan 29, 2019

Tested with Nextcloud 15

@DennisWilken
Copy link

DennisWilken commented Feb 13, 2021

Does the file still run on NC 20.7? I followed the instructions but don't see a difference. Thanks for your help!

@dugite-code
Copy link
Author

dugite-code commented Feb 15, 2021

Hi, Unfortunately I haven't been using the mail app for a few versions. I'll re-install it and give it a shot, if it's not too much work I'll do an update

@onclefranck
Copy link

onclefranck commented Feb 17, 2021

Exact same problem here using Nextcloud 20.0.7

@onclefranck
Copy link

onclefranck commented Feb 17, 2021

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

dugite-code commented Feb 18, 2021

@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.

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