mirror of
https://github.com/zulip/zulip.git
synced 2025-10-29 19:13:53 +00:00
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:
@@ -83,13 +83,6 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.narrow_to_compose_recipient_current_view_help {
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose_table {
|
.compose_table {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<div class="buddy_list_tooltip_content">
|
<div class="buddy_list_tooltip_content">
|
||||||
<span>
|
<div>
|
||||||
{{first_line}}
|
{{first_line}}
|
||||||
{{#if show_you}}
|
{{#if show_you}}
|
||||||
<span class="my_user_status">{{t "(you)" }}</span>
|
<span class="my_user_status">{{t "(you)" }}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</span>
|
</div>
|
||||||
{{#if second_line}}
|
{{#if second_line}}
|
||||||
<br /><span class="tooltip-inner-content">{{second_line}}</span>
|
<div class="tooltip-inner-content">{{second_line}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if third_line}}
|
{{#if third_line}}
|
||||||
<br /><span class="tooltip-inner-content">{{third_line}}</span>
|
<div class="tooltip-inner-content">{{third_line}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<div id="change_visibility_policy_button_tooltip">
|
<div id="change_visibility_policy_button_tooltip">
|
||||||
<strong>{{current_visibility_policy_str}}</strong>
|
<strong>{{current_visibility_policy_str}}</strong>
|
||||||
<br/>
|
<div class="tooltip-inner-content italic">{{t 'Click to change notifications for this topic.' }}</div>
|
||||||
<span class="tooltip-inner-content italic">{{t 'Click to change notifications for this topic.' }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<div>{{edited_notice_str}}</div>
|
<div>{{edited_notice_str}}</div>
|
||||||
{{#if realm_allow_edit_history}}
|
{{#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}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<div id="message_inline_image_tooltip">
|
<div id="message_inline_image_tooltip">
|
||||||
<strong>{{ title }}</strong>
|
<strong>{{ title }}</strong>
|
||||||
<br/>
|
<div class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</div>
|
||||||
<span class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<span>{{t 'Go to conversation' }}</span>
|
<div>{{t "Go to conversation"}}</div>
|
||||||
{{#if display_current_view}}
|
{{#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}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{tooltip_hotkey_hints "Ctrl" "."}}
|
{{tooltip_hotkey_hints "Ctrl" "."}}
|
||||||
|
|||||||
@@ -55,8 +55,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<template id="add-global-time-tooltip">
|
<template id="add-global-time-tooltip">
|
||||||
<div>
|
<div>
|
||||||
<span>{{t "Add global time" }}</span><br/>
|
<div>{{t "Add global time" }}</div>
|
||||||
<span class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</span>
|
<div class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template id="delete-draft-tooltip-template">
|
<template id="delete-draft-tooltip-template">
|
||||||
@@ -124,11 +124,11 @@
|
|||||||
{{tooltip_hotkey_hints "I"}}
|
{{tooltip_hotkey_hints "I"}}
|
||||||
</template>
|
</template>
|
||||||
<template id="star-message-tooltip-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"}}
|
{{tooltip_hotkey_hints "Ctrl" "S"}}
|
||||||
</template>
|
</template>
|
||||||
<template id="unstar-message-tooltip-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"}}
|
{{tooltip_hotkey_hints "Ctrl" "S"}}
|
||||||
</template>
|
</template>
|
||||||
<template id="search-query-tooltip-template">
|
<template id="search-query-tooltip-template">
|
||||||
|
|||||||
Reference in New Issue
Block a user