UniqueSoft/serpbear
2
0
Fork 0
mirror of https://github.com/towfiqi/serpbear synced 2025-06-26 18:15:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(UI): Adds tooltip for Domain action icons.

Browse Source
This commit is contained in:
Towfiq
2022-12-04 20:34:26 +06:00
parent 8688f323a5
commit b450540d95
2 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/domains/DomainHeader.tsx
View File

@@ -19,6 +19,7 @@ const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, doma
const { mutate: refreshMutate } = useRefreshKeywords(() => {});
const buttonStyle = 'leading-6 inline-block px-2 py-2 text-gray-500 hover:text-gray-700';
const buttonLabelStyle = 'ml-2 text-sm not-italic lg:invisible lg:opacity-0';
return (
<div className='domain_kewywords_head flex w-full justify-between'>
<div>
@@ -45,26 +46,23 @@ const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, doma
lg:z-auto lg:relative lg:mt-0 lg:border-0 lg:w-auto lg:bg-transparent`}
style={{ display: showOptions ? 'block' : undefined }}>
<button
className={`${buttonStyle}`}
className={`domheader_action_button relative ${buttonStyle}`}
aria-pressed="false"
title='Export as CSV'
onClick={() => exportCsv()}>
<Icon type='download' size={20} /><i className='ml-2 text-sm not-italic lg:hidden'>Export as csv</i>
<Icon type='download' size={20} /><i className={`${buttonLabelStyle}`}>Export as csv</i>
</button>
<button
className={`${buttonStyle} lg:ml-3`}
className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
aria-pressed="false"
title='Refresh All Keyword Positions'
onClick={() => refreshMutate({ ids: [], domain: domain.domain })}>
<Icon type='reload' size={14} /><i className='ml-2 text-sm not-italic lg:hidden'>Reload All Serps</i>
<Icon type='reload' size={14} /><i className={`${buttonLabelStyle}`}>Reload All Serps</i>
</button>
<button
data-testid="show_domain_settings"
className={`${buttonStyle} lg:ml-3`}
className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
aria-pressed="false"
title='Domain Settings'
onClick={() => showSettingsModal(true)}><Icon type='settings' size={20} />
<i className='ml-2 text-sm not-italic lg:hidden'>Domain Settings</i></button>
<i className={`${buttonLabelStyle}`}>Domain Settings</i></button>
</div>
<button
data-testid="add_keyword"

35
styles/globals.css
View File

@@ -169,4 +169,39 @@ body {
opacity: 0;
transform: translateX(400px);
transition: all 300ms;
}
@media (min-width: 1024px) {
/* Domain Header Button Tooltips */
.domheader_action_button:hover i{
visibility: visible;
opacity: 1;
}
.domheader_action_button i{
display: block;
position: absolute;
width: 100px;
left: -40px;
top: -22px;
background: #222;
border-radius: 3px;
color: #fff;
font-size: 12px;
padding-bottom: 3px;
transition: all 0.2s linear;
}
.domheader_action_button i:after{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #222 transparent transparent transparent;
bottom: -5px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
}