diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2017-11-16 18:28:25 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2017-11-16 18:28:25 +0300 |
commit | 67db42e99d9a7939785e1de5447d40aa7ceecfa1 (patch) | |
tree | 584b9ed8472a0c75a0f7b348f9547d3d16ad4cb4 | |
parent | 7310c698de582684f65081e3d0523c8b9ac27bc0 (diff) |
Add app content list
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
-rw-r--r-- | core/css/apps.scss | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index 8f49df7fdaf..a730d383699 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -906,3 +906,158 @@ kbd { } } + + +#app-content-wrapper { + display: flex; +} +.app-content-list { + width: 300px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + border-right: 1px solid nc-darken($color-main-background, 8%); + display: flex; + flex-direction: column; + transition: transform 250ms ease-in-out; + + .app-content-list-item { + position: relative; + height: 68px; + border-top: 1px solid nc-darken($color-main-background, 8%); + cursor: pointer; + padding: 10px 7px; + display: flex; + flex-wrap: wrap; + align-items: center; + + &:hover, &:focus, + &.active { + background-color: nc-darken($color-main-background, 6%); + } + + .app-content-list-item-icon { + position: absolute; + left: 6px; + top: 14px; + display: inline-block; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + color: #fff; + text-align: center; + font-size: 1.5em; + text-transform: capitalize; + object-fit: cover; + user-select: none; + } + + .app-content-list-item-star { + position: absolute; + display: none; /* change to inline-block when we implement it */ + left: 16px; + top: 28px; + padding: 20px; + background-size: 16px; + z-index: 100; + } + + .app-content-list-item-line-one, + .app-content-list-item-line-two { + display: block; + padding-left: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + order: 1; + flex: 1 1 0; + padding-right: 10px; + } + + .app-content-list-item-line-two { + opacity: .5; + order: 3; + flex: 1 0 calc(100% - 24px); + } + + .app-content-list-item-details { + order: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + opacity: 0.5; + user-select: none; + } + + [class^='icon-'], + [class*=' icon-'] { + order: 4; + width: 24px; + height: 24px; + opacity: 0.3; + &:hover, &:focus { + opacity: 0.7; + } + } + } +} +/* App content */ +.app-content-detail { + width: 70%; + + #app-navigation-toggle-back { + display: none; + } +} + +/* Mobile width < 768px */ +@media only screen and (max-width: 768px) { + + /* full width for message list on mobile */ + .app-content-list { + width: 100%; + background: $color-main-background; + position: relative; + z-index: 100; + } + + /* overlay message detail on top of message list */ + .app-content-detail { + background: $color-main-background; + width: 100%; + left: 0; + height: 100%; + top: 0; + box-shadow: 0 0 100px rgba(100, 100, 100, .9); + position: absolute; + } + + /* Show app details page */ + #app-content.showdetails { + #app-navigation-toggle { + transform: translateX(-44px); + } + #app-navigation-toggle-back { + position: fixed; + display: inline-block !important; + top: 45px; + left: 0; + width: 44px; + height: 44px; + z-index: 149; + background-color: rgba(255, 255, 255, .7); + cursor: pointer; + opacity: .6; + transform: rotate(90deg); + } + .app-content-list { + transform: translateX(-100%); + } + } + + /* end of media query */ +} |