docs(layouts): add layout examples #1039

iamcaleberic · 2016-12-16T10:16:16Z

TODO

Fixes #836

iamcaleberic · 2016-12-16T10:18:52Z

@levithomason Would like your thoughts on current implementation before i continue with the porting

issues currently having

Routing i.e in currently main routes file ? Do I need to change this for the layout examples
Showing source for layout examples

codecov-io · 2016-12-16T10:40:13Z

Codecov Report

Merging #1039 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1039   +/-   ##
=======================================
  Coverage   99.75%   99.75%           
=======================================
  Files         144      144           
  Lines        2463     2463           
=======================================
  Hits         2457     2457           
  Misses          6        6

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c194992...8ab0814. Read the comment docs.

levithomason · 2016-12-17T21:05:45Z

Here's what I'm thinking.

Structure

We put layout examples in /docs/app/layouts to keep them separate from the component examples. Then, we make the routes dynamic by creating a Webpack context of this directory.

I'm thinking the layouts need to render as a full page view without the sidebar in order to be effective. I'll need to rework some components to make this happen.

Showing source

Again, I think this needs to be done differently that in the current examples. What if we showed a circular floating button in one of the corners of the every layout, when clicked, we could show the source. Perhaps we would show source in a modal over the layout itself, or, we could toggle the entire page from the rendered view to the source editor and back.

I think the primary concern here is that the source will be very large so we'll likely need to take up the entire page, or at least most of it.

If you can move the layout to be in the directory structure proposed above, I'll come back to this PR and update it to handle the routes and showing source for layouts as soon as I can.

iamcaleberic · 2016-12-19T10:54:51Z

I agree on the layouts being full page view
I think we can toggle between the view and the source editor for showing source

levithomason · 2016-12-19T18:09:33Z

Great! If you want to take a stab at any of that, please do. Otherwise, I'll get to this as soon as I am able.

levithomason · 2017-01-24T01:21:50Z

docs/app/Views/Layouts.js

+import { Header, Segment, Container, Divider, Card } from 'semantic-ui-react'
+
+const LayoutsExample = () => (
+  <Container as='div'>


Heads up, the default component class is div so we can remove all as='div' props since it is redundant.

levithomason · 2017-01-24T01:22:21Z

docs/app/Views/Layouts.js

+
+const LayoutsExample = () => (
+  <Container as='div'>
+    <Segment masthead vertical>


There is no masthead prop, let's remove that.

levithomason · 2017-01-24T01:23:27Z

docs/app/Views/Layouts.js

+        <Divider hidden />
+      </Container>
+    </Segment>
+    <Container as='div' className='main intro'>


Let's also remove className='main intro', we shouldn't have any extra classNames on the layouts as we have no additional styles to apply. If the layouts require additional custom styling on top of the default theme, then we'll have to reconsider how we go about that.

levithomason · 2017-01-24T01:26:23Z

docs/app/Views/Layouts.js

+    <Segment masthead vertical>
+      <Container as='div'>
+        <Header as='h1'> Layouts
+          <div className='sub header'>Examples of using Semantic UI React</div>


Here we can use <Header.Subheader /> instead of className.

levithomason · 2017-01-24T01:37:09Z

I'm adding route support for the view ATM, I'll address some of the other issues as well.

levithomason · 2017-01-24T02:27:18Z

OK, I've stubbed out the routes and layout files themselves. I also included a back button automatically for the layout views. You should be good to simply update the layout files. Let me know if you run into any issues 👍

iamcaleberic · 2017-01-24T07:07:46Z

@levithomason thanks alot

levithomason · 2017-01-24T19:22:31Z

No problem, ping me when the other layouts are in and I'll make sure to get the full page source and editor going.

iamcaleberic · 2017-04-20T11:22:36Z

@levithomason I was updating the stream from master but alot has changed quite significantly and I have alot of conflicts.
Tried fixing some but am a bit stuck now. Please assist.

levithomason · 2017-04-20T18:47:40Z

Yep, I'll label this issue for assistance and @layershifter or myself will get to it soon.

iamcaleberic · 2017-06-13T14:27:42Z

@layershifter managed to get all the layouts up but without styling

…-React into layout_examples

…antic-UI-React into layout_examples

…React into layout_examples # Conflicts: # docs/app/Components/DocsLayout.js

layershifter

Updated all examples, fixed styling and merge conflicts. @levithomason we're ready for initial review there

BTW, @iamcaleberic thanks for your work there!

iamcaleberic · 2017-07-12T14:38:23Z

@layershifter thanks for the assist in completing this....

levithomason · 2017-07-18T03:22:07Z

Thank you @iamcaleberic and @layershifter for pushing this one over the finish line!

levithomason · 2017-07-25T05:13:42Z

Released in [email protected]

jjwilliams42 · 2017-08-20T02:24:32Z

This is awesome! Thank you so much for this contribution, I've been looking for full blown layout examples. I was wondering, I noticed the "Home Page" example on regular SUI has a responsive hamburger menu, does SUI React not support this?

snekse · 2018-01-11T19:14:24Z

Yeah, I think @jackjwilliams found a bug.

https://semantic-ui.com/examples/homepage.html
vs.
https://react.semantic-ui.com/layouts/homepage

levithomason added the ready for review label Dec 16, 2016

levithomason requested changes Jan 24, 2017

View reviewed changes

levithomason reviewed Jan 24, 2017

View reviewed changes

levithomason approved these changes Jan 24, 2017

View reviewed changes

levithomason removed the ready for review label Jan 24, 2017

levithomason changed the title ~~Layout examples~~ docs(layouts): add layout examples Jan 25, 2017

levithomason mentioned this pull request Mar 11, 2017

New Basic Usage Example: semantic-ui-react-todos #1426

Closed

levithomason added the needs engineering label Apr 20, 2017

iamcaleberic added 11 commits June 1, 2017 12:34

Added layouts to sidebar menu

75bdba7

Added Layouts Example Component

ffd926e

Added starter cards

0c4d5d3

Added pages cards

5738181

Cleaned up classnames

684b945

Make cards stackable

b16ee29

Removed unused folder

4c94904

Added new layouts component

e5ea614

Added layouts examples and Login Form component

5256a1f

Removed examples index file

6b8125e

Modified login form component

99efd7c

iamcaleberic added 3 commits June 13, 2017 14:38

docs(Layout): homepage layout complete without styling

d6e7ad5

docs(Layout): sticky layout complete without styling

067a540

docs(Layout): make menu fixed to top in fixed menu layout

33c41ac

Alexander Fedyashov and others added 10 commits June 14, 2017 12:11

docs(layout): finish AttachedContent example

27728a9

docs(layout): finish BootstrapMigration example

a5b3edd

docs(Layouts): Fix lint errors in homepage

bd35f41

docs(Layout): fix lint errors in sticky layout

31aab1c

Merge branch 'layout_examples' of github.com:iamcaleberic/Semantic-UI…

dd00555

…-React into layout_examples

docs(layout): finish FixedMenu example

c155feb

Merge branch 'layout_examples' of https://github.com/iamcaleberic/Sem…

a356851

…antic-UI-React into layout_examples

docs(layout): finish Homepage example

c97e144

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

8af3271

…React into layout_examples # Conflicts: # docs/app/Components/DocsLayout.js

style(Layouts): finish StickLayout

f86131f

layershifter reviewed Jul 5, 2017

View reviewed changes

layershifter added ready for review and removed needs author feedback labels Jul 5, 2017

levithomason added 6 commits July 17, 2017 19:49

feat(Layouts): add link to source

4944aa9

feat(Layouts): scroll to top on view change

43ae94a

refactor(GridLayout): cleanup inline styles

299bebd

code

5842734

refactor(Layouts): use consistent import style

6443de6

refactor(ThemingLayout): remove comments, fix formatting

8ab0814

levithomason merged commit 292c595 into Semantic-Org:master Jul 18, 2017

Semantic-Org locked as resolved and limited conversation to collaborators Jan 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(layouts): add layout examples #1039

docs(layouts): add layout examples #1039

iamcaleberic commented Dec 16, 2016 •

edited by levithomason

Loading

iamcaleberic commented Dec 16, 2016 •

edited

Loading

codecov-io commented Dec 16, 2016 •

edited

Loading

levithomason commented Dec 17, 2016

iamcaleberic commented Dec 19, 2016

levithomason commented Dec 19, 2016

levithomason Jan 24, 2017

levithomason Jan 24, 2017

levithomason Jan 24, 2017

levithomason Jan 24, 2017

levithomason commented Jan 24, 2017

levithomason commented Jan 24, 2017

iamcaleberic commented Jan 24, 2017

levithomason commented Jan 24, 2017

iamcaleberic commented Apr 20, 2017 •

edited

Loading

levithomason commented Apr 20, 2017

iamcaleberic commented Jun 13, 2017

layershifter left a comment •

edited

Loading

iamcaleberic commented Jul 12, 2017

levithomason commented Jul 18, 2017

levithomason commented Jul 25, 2017

jjwilliams42 commented Aug 20, 2017

snekse commented Jan 11, 2018

docs(layouts): add layout examples #1039

docs(layouts): add layout examples #1039

Conversation

iamcaleberic commented Dec 16, 2016 • edited by levithomason Loading

TODO

iamcaleberic commented Dec 16, 2016 • edited Loading

issues currently having

codecov-io commented Dec 16, 2016 • edited Loading

Codecov Report

levithomason commented Dec 17, 2016

Structure

Showing source

iamcaleberic commented Dec 19, 2016

levithomason commented Dec 19, 2016

levithomason Jan 24, 2017

Choose a reason for hiding this comment

levithomason Jan 24, 2017

Choose a reason for hiding this comment

levithomason Jan 24, 2017

Choose a reason for hiding this comment

levithomason Jan 24, 2017

Choose a reason for hiding this comment

levithomason commented Jan 24, 2017

levithomason commented Jan 24, 2017

iamcaleberic commented Jan 24, 2017

levithomason commented Jan 24, 2017

iamcaleberic commented Apr 20, 2017 • edited Loading

levithomason commented Apr 20, 2017

iamcaleberic commented Jun 13, 2017

layershifter left a comment • edited Loading

Choose a reason for hiding this comment

iamcaleberic commented Jul 12, 2017

levithomason commented Jul 18, 2017

levithomason commented Jul 25, 2017

jjwilliams42 commented Aug 20, 2017

snekse commented Jan 11, 2018

iamcaleberic commented Dec 16, 2016 •

edited by levithomason

Loading

iamcaleberic commented Dec 16, 2016 •

edited

Loading

codecov-io commented Dec 16, 2016 •

edited

Loading

iamcaleberic commented Apr 20, 2017 •

edited

Loading

layershifter left a comment •

edited

Loading