diff options
| author | jpl | 2017-03-28 15:42:55 +0200 |
|---|---|---|
| committer | jpl | 2017-03-28 15:43:12 +0200 |
| commit | 90e2cea091b02e7c82da322f4f88c2a8ec33cfd3 (patch) | |
| tree | 8cf19fd50cc9ab3db7f30652975cf9c4dd40f37c | |
| parent | 619d073019c7b9384e64446abc03f5a5a9913bef (diff) | |
| download | chouette-core-90e2cea091b02e7c82da322f4f88c2a8ec33cfd3.tar.bz2 | |
Fixing long page-title and overflow
| -rw-r--r-- | app/assets/stylesheets/components/_main_nav.sass | 28 | ||||
| -rw-r--r-- | app/assets/stylesheets/components/_page_header.sass | 25 |
2 files changed, 51 insertions, 2 deletions
diff --git a/app/assets/stylesheets/components/_main_nav.sass b/app/assets/stylesheets/components/_main_nav.sass index 32a7617c1..cf0ed8eda 100644 --- a/app/assets/stylesheets/components/_main_nav.sass +++ b/app/assets/stylesheets/components/_main_nav.sass @@ -317,6 +317,7 @@ $menuW: 300px display: none .sticky-content + height: $menuH padding: 0 50px 0 75px margin-top: -4px @@ -325,9 +326,34 @@ $menuW: 300px &.sticky-ptitle width: 60% + height: $menuH h1 - margin: 0 + position: relative + line-height: 1.1 + white-space: nowrap + max-height: 1.1em + margin: 0 -1.4em 0 0 + padding: 0 1.4em 0 0 + overflow: hidden + + &:before + content: '[...]' + font-size: 0.65em + position: absolute + z-index: 5 + right: 0 + bottom: 4px + + &:after + content: '' + position: absolute + z-index: 4 + right: 0 + width: 1.4em + height: 1em + margin-top: 0.2em + background-color: $blue .small.fa color: #fff diff --git a/app/assets/stylesheets/components/_page_header.sass b/app/assets/stylesheets/components/_page_header.sass index 8ca9f3faa..18985083d 100644 --- a/app/assets/stylesheets/components/_page_header.sass +++ b/app/assets/stylesheets/components/_page_header.sass @@ -26,7 +26,30 @@ width: 100% h1 - margin: 0 + position: relative + line-height: 1.1 + max-height: 2.2em + margin: 0 -1.4em 0 0 + padding: 0 1.4em 0 0 + overflow: hidden + + &:before + content: '[...]' + font-size: 0.65em + position: absolute + z-index: 5 + right: 0 + bottom: 4px + + &:after + content: '' + position: absolute + z-index: 5 + right: 0 + width: 1.4em + height: 1em + margin-top: 0.2em + background-color: $blue .small.fa color: #fff |