darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-10 18:22:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

Line up linked message in viewport

Browse Source 
We anchor link to the relevant message in a thread. Which is good, but
it leaves the messages hard against the top edge of the viewport. This
looks sloppy. So this commit:

- makes each message focusable
- shifts the focused message with CSS to sit away from the viewport
This commit is contained in:
Chris Hill-Scott
2017-06-10 12:03:10 +01:00
parent f6d8e55579
commit e7ed1c1cfe
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/components/sms-message.scss
+10
View File
@@ -63,3 +63,13 @@ $tail-angle: 20deg;
.sms-message-status-outbound { .sms-message-status-outbound {
text-align: right; text-align: right;
} }
.sms-message-row {
&:focus {
outline: none;
padding-top: 20px;
margin-top: -20px;
}
}
app/templates/views/conversations/conversation.html
+1 -1
View File
@@ -14,7 +14,7 @@
</h1> </h1>
</div> </div>
{% for message in conversation %} {% for message in conversation %}
<div class="grid-row" id="n{{ message.id }}"> <div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
{% if message.inbound %} {% if message.inbound %}
<div class="column-two-thirds sms-message-inbound"> <div class="column-two-thirds sms-message-inbound">
{{ message.content | string }} {{ message.content | string }}