Make layout responsive.

[avine]

i have done some work to make the layout responsive.
You can check the result at: http://esdoc.avine.fr/ https://avine.io/projects/esdoc/v1/
Just resize the window to see it in action...

[avine]

screenshot of the responsive menu:

and navigation:

[avine]

Note that on large screen, the layout-container's width is fixed (but it's completely optional):

@media (min-width: 1024px) {
  .layout-container {
    margin: 0 auto;
    width: 1024px; /* Comment this line to disable the feature */
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    border-width: 0 1px;
    border-style: solid;
    border-color: #ddd;
  }
}

[avine]

.table-wrapper class usage:

<div data-ice="properties">
  <h4 data-ice="title">Params:</h4>
  <div class="table-wrapper">
    <table class="params">
    ...

[avine]

Here is the new markup for the .search-box:

 <div class="search-box">
     <div><input class="search-input"/></div>
     <ul class="search-result"></ul>
 </div>

[avine]

[avine]

By the way, the free icons comes from:
https://www.iconfinder.com/iconsets/developer-set-3

[avine]

Here's the new .search-box markup:

<div class="search-box">
    <div class="search-input"><input/></div>
    <div class="search-result"><ul></ul></div>
</div>

And in search.js:

  var input = document.querySelector('.search-input').firstChild;
  var resultWrapper = document.querySelector('.search-result');
  var result = resultWrapper.firstChild;

Then, simply replace result.style.display by resultWrapper.style.display.

[avine]

Long list of results:

Short list of results:

No result:

[avine]

Hi,

First, I really like the amazing job you have done and I will be very happy if you are interested in my contribution.
It would be nice if you could give me a feedback on my work just to know if you like it.
If so, I will be able to go even further in the development.

The roadmap might be to split the CSS into something like:

• base.css (required - contains minimal styles)
• theme.css (optional - contains advanced styles for responsive design and more...)

This way, it will be super easy for anyone to just disable the theme.css in order to completely customize the interface in a different way (using the styles and scripts feature).

The configcould be:

{
  "includeTheme": true, // Include `theme.css` in the `layout.html`
  "styles": ["./path/to/style.css"],
  "scripts": ["./path/to/script.js"]
}

Best regards,

[avine]

Please check the result at: http://esdoc.avine.fr https://avine.io/projects/esdoc/v1/

[florianb]

👏 i ❤️ it! I hope it gets merged!

[avine]

Thanks. I hope too.

[h13i32maru]

Thank you ❤️
I will check this, please wait a little.

[avine]

Thanks in advance. Feel free to ask me any question. I will be pleased to explain the code if needed.

[h13i32maru]

Please check #379 (comment)

[h13i32maru]

Please check #379 (comment)