Skip to content
This repository was archived by the owner on May 4, 2022. It is now read-only.

fix(ui): Fix clipping app options on small screens #713

Merged
thevoiceofzeke merged 2 commits into from
Sep 29, 2017
Merged

fix(ui): Fix clipping app options on small screens #713

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4c3b69
fix(ui): Fix clipping app options on small screens
thevoiceofzeke Sep 28, 2017
7a1d30c
fix: Add aria-label to add to home
thevoiceofzeke Sep 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions web/src/main/webapp/my-app/layout/partials/app-header-options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,16 @@
<div ng-if="renderMe">
<!-- MEDIUM AND LARGE SCREENS -->
<div layout="row" layout-align="end center" hide-xs>
<md-button ng-href="apps" class="md-primary">
<md-button ng-href="apps" class="md-primary" aria-label="Add more apps to home">
Copy link
Contributor

@apetro apetro Sep 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about aria-label="Browse app directory" so that the same aria-label makes sense whether in guest mode or not?

<span ng-if="GuestMode">
<md-icon>explore</md-icon> Browse {{ portal.theme.title }}
</span>
<span ng-if="!GuestMode">
<span ng-if="!GuestMode" hide-sm>
<md-icon>add</md-icon> Add more to home
</span>
<span ng-if="!GuestMode" hide-gt-sm>
<md-icon>add</md-icon> Add more
Copy link
Contributor

@apetro apetro Sep 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need some kind of ARIA treatment so that a non-visual user will understand what it is inviting the user to add more of?

</span>
</md-button>
<md-switch class="md-accent app-header-toggle" ng-model="expandedMode" ng-controller="ToggleController"
aria-label="Toggle expanded widget layout" ng-change="toggleMode(expandedMode)"
Expand All @@ -39,27 +42,27 @@

<!-- SMALL SCREENS -->
<md-menu md-position-mode="target-right bottom" hide-gt-xs>
<md-button aria-label="Open options menu" class="md-primary link-div" ng-click="$mdOpenMenu($event)">
<md-button aria-label="Open options menu" class="link-div" ng-click="$mdOpenMenu($event)">
<span layout="row" layout-align="center center"><md-icon>settings</md-icon></span>
<md-tooltip class="top-bar-tooltip" md-direction="bottom" md-delay="500">Options</md-tooltip>
</md-button>
<md-menu-content width="5">
<md-menu-item>
<md-button ng-href="apps" class="md-primary">
<span ng-if="GuestMode">
<md-icon>explore</md-icon> Browse {{ portal.theme.title }}
</span>
<span ng-if="!GuestMode">
<md-icon>add</md-icon> Add more to home
</span>
<md-button ng-href="apps" ng-if="GuestMode">
<md-icon>explore</md-icon>
<span>Browse {{ portal.theme.title }}</span>
</md-button>
<md-button ng-href="apps" ng-if="!GuestMode" aria-label="Add more apps to home">
<md-icon>add</md-icon>
<span>Add more to home</span>
</md-button>
</md-menu-item>
<md-menu-item>
<md-switch class="md-accent app-header-toggle" ng-model="expandedMode" ng-controller="ToggleController"
aria-label="Toggle expanded widget layout" ng-change="toggleMode(expandedMode)"
style="margin-top:0;margin-bottom:0;color:#fff;">
<span>Expand widgets</span>
</md-switch>
<md-menu-item ng-controller="ToggleController">
<md-button ng-click="toggleMode(!expandedMode)">
<md-icon>widgets</md-icon>
<span ng-if="!expandedMode">Show expanded widgets</span>
<span ng-if="expandedMode">Show compact widgets</span>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Expand Down