gkalpak / angular.js Goto Github PK

Screenshots

On screens > 1200px

---

On screens > 1200px ("Back to top" button hovered)

---

On screens > 1200px (scrolled all the way to the bottom; footer visible)

---

On screens > 1200px (with scrolled left sidenav & searching in the right sidenav)

---

On screens > 960px

---

On screens > 960px (with scrolled left sidenav & searching in the right sidenav)

---

On screens > 600px

---

On screens > 600px (with scrolled left sidenav & searching in the right sidenav)

---

On screens < 600px

---

On screens < 600px (with scrolled left sidenav)

---

On screens < 600px (with searching in the right sidenav)

_{AngularJS: v1.3.4 AngularMaterial: v0.6.0-rc3-master-98c3152}

This is my 1st attempt at creating "materialized" layout/UI for AngularJS's docs app (using Angular Material).

_{Note:
This is meant as a POC, so the implementation is not what it should be (e.g. no directives, everything in one controller for simplicity etc).
Bear with me, while this is still in progress 😃}

Resources:

• Screenshots
• Live-ish demo* (edit) _{(AngularJS: v1.3.4 | Angular Material: v0.6.0-rc3-master-98c3152)}

_{Current browser support: Works on **Chrome** **|** Works on **Firefox** (1-2 minor issues) **|** Almost works on **IE11** **|** Broken on **IE<11** *: Fun fact: Normally the demo preview has an annoying bar at the top that cripples the layout a bit. Opening the demo in a 2nd tab (i.e. opening it while it is already open in another tab), there is no bar !} ## #### Overview: - **Main content area:** Equivalent to the non-material version's main content area. - **Left sidenav:** Equivalent to the non-material version's left sidenav. It is "locked open" on larger screens and becomes a "normal" sidenav on smaler screens (brought up by a button in the top navbar). - **Right sidenav (search):** Contains the search-field and search results. It is "locked open" on large screens and becomes a "normal" sidenav on smaler screens (brought up by a fab (Floating Action Button)). - **Top navbar:** Contains the logo and the menu links/dropdowns (not implemented yet). ## #### "Highlights": - **Left sidenav:** - Adjusts to viewport size: - 20% / 25% / 33% on > 1200px / 960px / 600px respectively - hidden (+button) on < 600px - Section titles become "sticky" when scrolling. - **Right sidenav (search):** - Adjusts to viewport size: - locked-open on > 1200px - hidden (+fab) on < 1200px - **Logo:** - Adjusts to viewport size: - Full logo (large) on > 600px - Small logo (just the icon) on < 600px - **Color scheme**: - Attempts to make a visual reference to Angular's colors. ## #### Known issues: - The viewport size breakpoints need adjusting. - The colors need adjusting (e.g. a darker shade of gray might be more appropriate). - The right sidenav's backdrop does not cover the left sidenav. - The footer does not appear at the bottom, when the main content's height is less than the left sidenav's height. - Focusing the search-field (after clicking the search fab) is hacky and not reliable. - There is no animation, when showing/hiding/adjusting the sidenavs (as a result of viewport size changes). - On IE11: Some flexbox-specific properties do not seem to work (e.g. `align-items: center` (on `flex-direction: row`), `align-self: stretch`). - On IE<11: Broken (in many ways). _{**Note:** Most of the issues should be solvable. Some of them might be issues with Angular Material itself.} ## #### Todos: - Implement the version switcher. (Where ? What ? Ideas ?) - Implement the breadcrumb bar. - Implement the menu items dropdowns/submenus. - Support manually hiding/"locking open" the sidenavs. - Make the sections/subsections of the left sidenav collapsible. - Collapse the menu items on smaller viewport sizes. (Use BottomSheets instead of dropdowns on smaller sizes ?) - Test/Fix on more browsers (other than Chrome). - Test keyboard "navigability" / overall accessibility. - Add "material-design-ish" animations: - Top navbar: - Make the transition between large-logo / small logo more smooth (and "md-ish"). - Animate collapsing/expanding the menu items. - Left sidenav: - Make new view animate from point-of-click into the main content area. - Right sidenav (search): - Make new view animate from point-of-click into the main content area. - Animate the items entering/leaving the results list (as the user types into the search field). - Have the search fab morph into the search sidenav (and vice versa) the "Material Design way" ([example](https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)). - Search enhancements (e.g. as described [here](https://www.google.com/design/spec/patterns/search.html)): - Enabling voice search. - Providing historical search suggestions based on recent user queries. - Offering auto-completed search suggestions that match actual results in your application data ? _{Wondering: Would it be more appropriate to place the logo on left sidenav (when locked open); similar to how it's currently done on [material.angularjs.org](https://material.angularjs.org) ?}