aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-20 14:16:32 +0100
committerChocobozzz <me@florianbigard.com>2018-02-20 14:16:32 +0100
commit8a44f8354e614ee24f4b749c4e1a3cf1fde2b4d4 (patch)
tree69328b182448781da4b84bf2ef876f3be2fed93d /client/src/app
parent54a932e82ae9c2ede48d2302a14f307d2e7908d6 (diff)
downloadPeerTube-8a44f8354e614ee24f4b749c4e1a3cf1fde2b4d4.tar.gz
PeerTube-8a44f8354e614ee24f4b749c4e1a3cf1fde2b4d4.tar.zst
PeerTube-8a44f8354e614ee24f4b749c4e1a3cf1fde2b4d4.zip
Fix instance name displaying with long text
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/app.component.html2
-rw-r--r--client/src/app/app.component.scss15
2 files changed, 13 insertions, 4 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index eda7cc4b6..dafc45266 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -6,7 +6,7 @@
6 6
7 <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage"> 7 <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
8 <span class="icon icon-logo"></span> 8 <span class="icon icon-logo"></span>
9 {{ instanceName }} 9 <span class="instance-name">{{ instanceName }}</span>
10 </a> 10 </a>
11 </div> 11 </div>
12 12
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index d502d63b5..24c4f66c7 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -31,11 +31,12 @@
31 display: flex; 31 display: flex;
32 32
33 .top-left-block { 33 .top-left-block {
34 width: $menu-width;
35 z-index: 1001; 34 z-index: 1001;
36 height: $header-height; 35 height: $header-height;
37 display: flex; 36 display: flex;
38 align-items: center; 37 align-items: center;
38 flex: 1;
39 min-width: 0;
39 40
40 .icon { 41 .icon {
41 @include icon(22px); 42 @include icon(22px);
@@ -47,13 +48,21 @@
47 } 48 }
48 49
49 #peertube-title { 50 #peertube-title {
51 @include disable-default-a-behaviour;
52 width: 100%;
50 font-size: 20px; 53 font-size: 20px;
51 font-weight: $font-bold; 54 font-weight: $font-bold;
52 color: inherit !important; 55 color: inherit !important;
53 display: flex; 56 display: flex;
54 align-items: center; 57 align-items: center;
58 overflow: hidden;
55 59
56 @include disable-default-a-behaviour; 60 .instance-name {
61 overflow: hidden;
62 text-overflow: ellipsis;
63 white-space: nowrap;
64 width: 100%;
65 }
57 66
58 .icon.icon-logo { 67 .icon.icon-logo {
59 display: inline-block; 68 display: inline-block;
@@ -76,8 +85,8 @@
76 height: $header-height; 85 height: $header-height;
77 display: flex; 86 display: flex;
78 align-items: center; 87 align-items: center;
79 flex-grow: 1;
80 justify-content: flex-end; 88 justify-content: flex-end;
89 white-space: nowrap;
81 } 90 }
82} 91}
83 92