gabrielcsapo commented 4 years ago

Motivation

fixes #1149 which focuses on revamping the site design to look like https://getmdl.io/components/index.html.

Comparing two examples side by side we can see that having the example and code condensed together makes things easier to understand:

output

We can fit more examples in line to allow developers to play around with the variations without having to scroll the entire length of the page to see all iterations.

Todo

[x] Update all examples to have a layout like

examples rendered
[code snippet rendered underneath]

[x] Convert all sample code to octane
[x] update landing pages
[x] For some reason clicking on the TOC now redirects to index. This is probably related to the anchor tag pointing to a url with #, which ember interprets as a route since it is using locationType 'hash' for some reason?
[x] The toast example doesn't open any toast.
[x] I feel like the text pages should have a max-width and be centered. Otherwise they take all the page and be aligned left (especially weird in theme and addons pages, without a sidenav)
[ ] we need to have some kind of logo, even if really simple.

miguelcobain commented 4 years ago

@gabrielcsapo this looks great! Perhaps in the top nav we could use tabs instead of buttons? I also think the "logo" could fit in there, either on the left side of the tabs or above them in its own row (this would take more vertical space, though). This is identical to what https://getmdl.io/ has.

gabrielcsapo commented 4 years ago

@miguelcobain glad to hear!

Right now we are using LinkTo in the top nav instead of buttons. I was trying to use tabs but the problem is that they do not deal with subrouting correctly. So if you have tab that routes to component and then you are on component.autocomplete it doesn't select it as active.

I was trying to work with the logo but it doesn't seem like it fits as the vertical space is too much and the logo itself I tried to convert from image + text to just an image and it still feels out of place.

gabrielcsapo commented 4 years ago

@miguelcobain I updated the progress picture for one of the component pages!

Subtletree commented 4 years ago

Looking awesome!

For the tabs you can use the router service and have

activeTab: computed('router.currentRouteName', function() {
  return this.router.currentRouteName.startsWith('component.')
    ? 'component'
    : this.router.currentRouteName;
})

{{#paper-tabs selected=activeTab onChange=... as |tabs|}}
  {{#tabs.tab value="component"  href=(href-to "component")}}

(Need to add the router service to the controller and also needs ember-href-to addon)

miguelcobain commented 4 years ago

Right now we are using LinkTo in the top nav instead of buttons. I was trying to use tabs but the problem is that they do not deal with subrouting correctly. So if you have tab that routes to component and then you are on component.autocomplete it doesn't select it as active.

There is a way to have an is-active helper that you can use like @isSelected={{is-active "components"}} on the paper tab. This helper will return true whenever "components" or any child route is active.

I used to have my own helper, but I just found ember-router-helpers: https://github.com/rwjblue/ember-router-helpers

Regarding the logo, I guess we need to find an alternative.

@Subtletree That wouldn't work because we want the tab to be active for all components, not just a specific one.

Subtletree commented 4 years ago

@Subtletree That wouldn't work because we want the tab to be active for all components, not just a specific one.

Good point! In that case another option would be a helper selected=(tab-route currentRouteName) that does return currentRouteName.split('.')[0].

Since all the tabs are top level routes.

gabrielcsapo commented 4 years ago

@miguelcobain I updated, would you be able to review?

gabrielcsapo commented 3 years ago

@miguelcobain 👋 would you let me know if anything needs to be changed?

miguelcobain commented 3 years ago

@gabrielcsapo I updated the PR so that it uses paper-tabs for the main nav.

I still feel that there are some things off.

For some reason clicking on the TOC now redirects to index. This is probably related to the anchor tag pointing to a url with #, which ember interprets as a route since it is using locationType 'hash' for some reason?
The toast example doesn't open any toast.
I feel like the text pages should have a max-width and be centered. Otherwise they take all the page and be aligned left (especially weird in theme and addons pages, without a sidenav)
we need to have some kind of logo, even if really simple.

I'll try to work more on this.

gabrielcsapo commented 3 years ago

@miguelcobain just getting back to this as work is less busy. will fix the issues you described, will ping you in discord about the logo!

gabrielcsapo commented 3 years ago

@miguelcobain update the text pages so that they are centered and not oddly left aligned.

gabrielcsapo commented 3 years ago

I have fixed all outstanding issues except for the logo. @miguelcobain

gabrielcsapo commented 3 years ago

@miguelcobain any updates on how we should fix the logo suggestion?

gabrielcsapo commented 1 year ago

@miguelcobain if I rebase this and get it running would you be interested in merging it?

mansona commented 1 year ago

Hey @gabrielcsapo 👋 I'm mostly taking over maintenance of this project at the moment, I haven't had a chance to look at all of the open Issues and PRs yet but I would love to discuss this in more detail with you if you have the time? Are you on the Ember Community Discord? I'm real_ate#4200 on there if you want to reach out and we might arrange a call?

miguelcobain / ember-paper

[wip][docs] update docs site design #1152

Motivation

Todo