diff options
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 5 | ||||
| -rw-r--r-- | src/mobile/MobileMenu.scss | 12 |
2 files changed, 14 insertions, 3 deletions
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 68fb8b28f..5acdc1dea 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -370,8 +370,9 @@ export class MobileInterface extends React.Component { <div className="item" key={index} - onClick={() => this.handleClick(doc)}>{doc.title} - <div className="type">{doc.type}</div> + onClick={() => this.handleClick(doc)}> + <div className="item-title"> {doc.title} </div> + <div className="item-type">{doc.type}</div> <FontAwesomeIcon className="right" icon="angle-right" size="lg" /> </div>); } diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 55c62f458..6304ff5e4 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -53,6 +53,8 @@ body { right: 50%; transform: translate(50%, -50%); font-size: 40; + font-weight: 700; + text-align: center; user-select: none; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; @@ -125,6 +127,7 @@ body { font-style: normal; font-weight: normal; user-select: none; + display: inline-flex; font-size: 35px; text-transform: uppercase; color: black; @@ -151,7 +154,7 @@ body { z-index: 200; } -.type { +.item-type { display: inline; text-transform: lowercase; margin-left: 20px; @@ -160,6 +163,13 @@ body { color: rgb(28, 28, 28); } +.item-title { + max-width: 70%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .right { margin-left: 20px; z-index: 200; |