Skip to content

Instantly share code, notes, and snippets.

@dugite-code
Last active Mar 31, 2021
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

This comment has been minimized.

Copy link
Owner Author

@dugite-code 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

This comment has been minimized.

Copy link
Owner Author

@dugite-code dugite-code commented Nov 30, 2017

2017-11-30_000036

@dugite-code

This comment has been minimized.

Copy link
Owner Author

@dugite-code dugite-code commented Feb 8, 2018

Updated for Nextcloud 13 See the revisions page for Nextcloud 12

@dugite-code

This comment has been minimized.

Copy link
Owner Author

@dugite-code dugite-code commented Sep 27, 2018

Updated for Nextcloud 14. Note: Not backwards compatible

@dugite-code

This comment has been minimized.

Copy link
Owner Author

@dugite-code dugite-code commented Jan 29, 2019

Tested with Nextcloud 15

@DennisWilken

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

@dugite-code 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

This comment has been minimized.

Copy link

@onclefranck onclefranck commented Feb 17, 2021

Exact same problem here using Nextcloud 20.0.7

@onclefranck

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

@dugite-code 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

This comment has been minimized.

Copy link

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

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