mirror of https://github.com/zulip/zulip.git
tooltips: Use <div> tags inside tooltip's inner content.
By replacing `<span>` tags with `<div>` tags inside the tooltip's inner content we remove the redundancy of having to use break tags to separate the tooltip's title and it's content. We also replace any `<p>` tags with `<div>` tags for the following reasons: - Since what we want to achieve are just block elements in order to avoid the break tags, using `<div>` tags provide use with a wider scope of use cases. - We don't want the pause, screen readers often introduce after reading the contents of a paragraph. - The `<p>` tag cannot contain tables and other block-level elements. - The semantic meaning of the <p> tag doesn't apply to the commonly used tooltip content.
This commit is contained in:
parent
456f3a0d94
commit
8d3f2baebf
|
@ -83,13 +83,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.narrow_to_compose_recipient_current_view_help {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.compose_table {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
<div class="buddy_list_tooltip_content">
|
||||
<span>
|
||||
<div>
|
||||
{{first_line}}
|
||||
{{#if show_you}}
|
||||
<span class="my_user_status">{{t "(you)" }}</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
{{#if second_line}}
|
||||
<br /><span class="tooltip-inner-content">{{second_line}}</span>
|
||||
<div class="tooltip-inner-content">{{second_line}}</div>
|
||||
{{/if}}
|
||||
{{#if third_line}}
|
||||
<br /><span class="tooltip-inner-content">{{third_line}}</span>
|
||||
<div class="tooltip-inner-content">{{third_line}}</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<div id="change_visibility_policy_button_tooltip">
|
||||
<strong>{{current_visibility_policy_str}}</strong>
|
||||
<br/>
|
||||
<span class="tooltip-inner-content italic">{{t 'Click to change notifications for this topic.' }}</span>
|
||||
<div class="tooltip-inner-content italic">{{t 'Click to change notifications for this topic.' }}</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<div>{{edited_notice_str}}</div>
|
||||
{{#if realm_allow_edit_history}}
|
||||
<i>{{t 'Click to view edit history.' }}</i>
|
||||
<div class="tooltip-inner-content italic">{{t 'Click to view edit history.' }}</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<div id="message_inline_image_tooltip">
|
||||
<strong>{{ title }}</strong>
|
||||
<br/>
|
||||
<span class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</span>
|
||||
<div class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</div>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div>
|
||||
<span>{{t 'Go to conversation' }}</span>
|
||||
<div>{{t "Go to conversation"}}</div>
|
||||
{{#if display_current_view}}
|
||||
<p class="narrow_to_compose_recipient_current_view_help tooltip-inner-content italic">{{display_current_view}}</p>
|
||||
<div class="tooltip-inner-content italic">{{display_current_view}}</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{tooltip_hotkey_hints "Ctrl" "."}}
|
||||
|
|
|
@ -55,8 +55,8 @@
|
|||
</template>
|
||||
<template id="add-global-time-tooltip">
|
||||
<div>
|
||||
<span>{{t "Add global time" }}</span><br/>
|
||||
<span class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</span>
|
||||
<div>{{t "Add global time" }}</div>
|
||||
<div class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="delete-draft-tooltip-template">
|
||||
|
@ -124,11 +124,11 @@
|
|||
{{tooltip_hotkey_hints "I"}}
|
||||
</template>
|
||||
<template id="star-message-tooltip-template">
|
||||
<span class="starred-status">{{t "Star this message" }}</span>
|
||||
<div class="starred-status">{{t "Star this message" }}</div>
|
||||
{{tooltip_hotkey_hints "Ctrl" "S"}}
|
||||
</template>
|
||||
<template id="unstar-message-tooltip-template">
|
||||
<span class="starred-status">{{t "Unstar this message" }}</span>
|
||||
<div class="starred-status">{{t "Unstar this message" }}</div>
|
||||
{{tooltip_hotkey_hints "Ctrl" "S"}}
|
||||
</template>
|
||||
<template id="search-query-tooltip-template">
|
||||
|
|
Loading…
Reference in New Issue