Address large font size edge cases
Fix some visual bugs occuring at large font size: * Contact names break onto the next line after their avatars in message detail screen * Settings menu font-size failed to scale * Handle Content overflow in modals. // FREEBIE
This commit is contained in:
parent
b330b80484
commit
3aa72d2244
5 changed files with 18 additions and 10 deletions
|
@ -10,7 +10,7 @@
|
||||||
<div class='global-menu menu'>
|
<div class='global-menu menu'>
|
||||||
<button class='hamburger' alt='signal menu'></button>
|
<button class='hamburger' alt='signal menu'></button>
|
||||||
<ul class='menu-list'>
|
<ul class='menu-list'>
|
||||||
<li class='settings'>{{ settings }}</li>
|
<li class='showSettings'>{{ settings }}</li>
|
||||||
<li class='show-debug-log'>{{ submitDebugLog }}</li>
|
<li class='show-debug-log'>{{ submitDebugLog }}</li>
|
||||||
<li class='restart-signal'>{{ restartSignal }}</li>
|
<li class='restart-signal'>{{ restartSignal }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
if (e.ctrlKey == true) {
|
if (e.ctrlKey == true) {
|
||||||
if (e.originalEvent.deltaY > 0) {
|
if (e.originalEvent.deltaY > 0) {
|
||||||
if (this.currentSize > this.minSize) {
|
if (this.currentSize > this.minSize) {
|
||||||
this.currentSize--
|
this.currentSize--;
|
||||||
this.render();
|
this.render();
|
||||||
}
|
}
|
||||||
} else if (e.originalEvent.deltaY < 0) {
|
} else if (e.originalEvent.deltaY < 0) {
|
||||||
|
@ -151,7 +151,7 @@
|
||||||
'click .conversation': 'focusConversation',
|
'click .conversation': 'focusConversation',
|
||||||
'click .global-menu .hamburger': 'toggleMenu',
|
'click .global-menu .hamburger': 'toggleMenu',
|
||||||
'click .show-debug-log': 'showDebugLog',
|
'click .show-debug-log': 'showDebugLog',
|
||||||
'click .settings': 'showSettings',
|
'click .showSettings': 'showSettings',
|
||||||
'select .gutter .conversation-list-item': 'openConversation',
|
'select .gutter .conversation-list-item': 'openConversation',
|
||||||
'input input.search': 'filterContacts',
|
'input input.search': 'filterContacts',
|
||||||
'click .restart-signal': 'reloadBackgroundPage',
|
'click .restart-signal': 'reloadBackgroundPage',
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
showSettings: function() {
|
showSettings: function() {
|
||||||
var view = new Whisper.SettingsView().render();
|
var view = new Whisper.SettingsView().render();
|
||||||
view.update();
|
view.update();
|
||||||
view.$el.insertAfter(this.el);
|
view.$el.appendTo(this.el);
|
||||||
},
|
},
|
||||||
filterContacts: function(e) {
|
filterContacts: function(e) {
|
||||||
this.searchView.filterContacts(e);
|
this.searchView.filterContacts(e);
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
min-height: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,7 +57,10 @@ body {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button { cursor: pointer; }
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
a { color: $blue; }
|
a { color: $blue; }
|
||||||
|
|
||||||
.inactive button.back {
|
.inactive button.back {
|
||||||
|
@ -305,7 +308,7 @@ $avatar-size: 44px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 0 0 $left-margin;
|
margin: 0 0 0 $left-margin;
|
||||||
width: calc(100% - #{$avatar-size} - #{$left-margin} - 4px);
|
width: calc(100% - #{$avatar-size} - #{$left-margin} - #{(4/14) + em});
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
@ -417,6 +420,7 @@ $avatar-size: 44px;
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -61,7 +61,8 @@ body {
|
||||||
outline: 0; }
|
outline: 0; }
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer; }
|
cursor: pointer;
|
||||||
|
font-size: inherit; }
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #2090ea; }
|
color: #2090ea; }
|
||||||
|
@ -276,7 +277,7 @@ img.emoji {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 0 0 8px;
|
margin: 0 0 0 8px;
|
||||||
width: calc(100% - 44px - 8px - 4px);
|
width: calc(100% - 44px - 8px - 0.28571em);
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
.contact-details p {
|
.contact-details p {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
@ -359,7 +360,8 @@ img.emoji {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
z-index: 100; }
|
z-index: 100;
|
||||||
|
overflow-y: auto; }
|
||||||
.modal .content {
|
.modal .content {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
|
@ -445,7 +447,8 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
|
||||||
.debug-log.modal .content textarea {
|
.debug-log.modal .content textarea {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none; }
|
resize: none;
|
||||||
|
min-height: 100px; }
|
||||||
.debug-log .submit {
|
.debug-log .submit {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: solid 1px #ccc;
|
border: solid 1px #ccc;
|
||||||
|
|
Loading…
Reference in a new issue