linkerd
/
linkerd2
mirror of https://github.com/linkerd/linkerd2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use menu links correctly (don't repeat icon and text links) (#953) 

This enables the removal of the inline-block display for links and
fixes menu items not showing up when sidebar is expanded on firefox

Problem
Previously we were linking the icon and expand text of the menu bar separately. 
This caused the clickable areas of the menus to be inconsistent, which we were 
fixing via css. This wasn't consistently displayed across browsers.

Fix
Linkify the whole Menu Item rather than linking the icon and text separately.
This enables the removal of the inline-block display for links and
fixes menu items not showing up when sidebar is expanded on firefox.
Additionally it makes the clicking of menu links way more consistent.
This commit is contained in:
Risha Mars 2018-05-14 18:11:12 -07:00 committed by GitHub
parent bcc4f9ec94
commit 12b520a55d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/css/sidebar.css
View File

@ -18,8 +18,6 @@
& a { & a {
color: white; color: white;
display: inline-block;
width: 100%;
} }
& .update { & .update {

43
web/app/js/components/Sidebar.jsx
View File

@ -92,39 +92,54 @@ export default class Sidebar extends React.Component {
selectedKeys={[normalizedPath]}> selectedKeys={[normalizedPath]}>
<Menu.Item className="sidebar-menu-item" key="/servicemesh"> <Menu.Item className="sidebar-menu-item" key="/servicemesh">
<Icon><ConduitLink to="/servicemesh"><Icon type="home" /></ConduitLink></Icon> <ConduitLink to="/servicemesh">
<span><ConduitLink to="/servicemesh">Service mesh</ConduitLink></span> <Icon type="home" />
<span>Service mesh</span>
</ConduitLink>
</Menu.Item> </Menu.Item>
<Menu.Item className="sidebar-menu-item" key="/namespaces"> <Menu.Item className="sidebar-menu-item" key="/namespaces">
<Icon><ConduitLink to="/namespaces"><Icon>N</Icon></ConduitLink></Icon> <ConduitLink to="/namespaces">
<span><ConduitLink to="/namespaces">Namespaces</ConduitLink></span> <Icon>N</Icon>
<span>Namespaces</span>
</ConduitLink>
</Menu.Item> </Menu.Item>
<Menu.Item className="sidebar-menu-item" key="/deployments"> <Menu.Item className="sidebar-menu-item" key="/deployments">
<Icon><ConduitLink to="/deployments"><Icon>D</Icon></ConduitLink></Icon> <ConduitLink to="/deployments">
<span><ConduitLink to="/deployments">Deployments</ConduitLink></span> <Icon>D</Icon>
<span>Deployments</span>
</ConduitLink>
</Menu.Item> </Menu.Item>
<Menu.Item className="sidebar-menu-item" key="/replicationcontrollers"> <Menu.Item className="sidebar-menu-item" key="/replicationcontrollers">
<Icon><ConduitLink to="/replicationcontrollers"><Icon>R</Icon></ConduitLink></Icon> <ConduitLink to="/replicationcontrollers">
<span><ConduitLink to="/replicationcontrollers">Replication Controllers</ConduitLink></span> <Icon>R</Icon>
<span>Replication Controllers</span>
</ConduitLink>
</Menu.Item> </Menu.Item>
<Menu.Item className="sidebar-menu-item" key="/pods"> <Menu.Item className="sidebar-menu-item" key="/pods">
<Icon><ConduitLink to="/pods"><Icon>P</Icon></ConduitLink></Icon> <ConduitLink to="/pods">
<span><ConduitLink to="/pods">Pods</ConduitLink></span> <Icon>P</Icon>
<span>Pods</span>
</ConduitLink>
</Menu.Item> </Menu.Item>
<Menu.Item className="sidebar-menu-item" key="/docs"> <Menu.Item className="sidebar-menu-item" key="/docs">
<Icon><Link to="https://conduit.io/docs/" target="_blank"><Icon type="solution" /></Link></Icon> <Link to="https://conduit.io/docs/" target="_blank">
<span><Link to="https://conduit.io/docs/" target="_blank">Documentation</Link></span> <Icon type="solution" />
<span>Documentation</span>
</Link>
</Menu.Item> </Menu.Item>
{ this.state.isLatest ? null : { this.state.isLatest ? null :
<Menu.Item className="sidebar-menu-item" key="/update"> <Menu.Item className="sidebar-menu-item" key="/update">
<Icon><Link to="https://versioncheck.conduit.io/update" target="_blank"><Icon type="exclamation-circle-o" className="update" /></Link></Icon> <Link to="https://versioncheck.conduit.io/update" target="_blank">
<span><Link to="https://versioncheck.conduit.io/update" target="_blank">Update Conduit</Link></span> <Icon type="exclamation-circle-o" className="update" />
<span>Update Conduit</span>
</Link>
</Menu.Item> </Menu.Item>
} }
</Menu> </Menu>