search

stoplightio / elements

Build beautiful, interactive API Docs with embeddable React or Web Components, powered by OpenAPI and Markdown.
https://stoplight.io/open-source/elements/
Apache License 2.0
1.79k stars 206 forks source link

Pages rendered are not responsive #1859

Open subalalithafl opened 2 years ago

subalalithafl commented 2 years ago

The pages rendered are not responsive. Is it something i am missing or currently responsiveness is not supported?

This can be replicated in the demo site as well. https://elements-demo.stoplight.io/

mnaumanali94 commented 2 years ago

@subalalithafl Responsiveness is not supported currently. We do have that in our back log. If you have thoughts on some quick wins, let us know! We'll be using this issue to track the progress on it.

subalalithafl commented 2 years ago

@mnaumanali94 Unfortunately there is no quick fix i think, at least to my knowledge. We need to change the layout to 3 col responsive grid and when we are in mobile we need to hide the side panel and make it as drop down menu or something similar. The 3rd column should align to the bottom of the text. All these change is not possible without rewriting the layout i think.

charlie-waddell commented 2 years ago

Majorly dirty hack but who cares I want that mobile friendly goodness! stacked layout is responsive, and I am just switching between the two layouts.


<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">

    <style>
        .desktop {
            display: none;
        }
        @media screen and (min-width: 767px) {
            .desktop {
                display: block;
            }
            .mobile {
                display: none;
            }
        }
    </style>
</head>
<body>
<div class="desktop">
    <elements-api
        logo="/img/logo.svg"
        apiDescriptionUrl="/v1/api-docs.json"
        router="hash"
    />
</div>
<div class="mobile">
    <elements-api
        logo="/img/logo.svg"
        apiDescriptionUrl="/v1/api-docs.json"
        router="hash"
        layout="stacked"
    />
</div>
</body>
</html>
hotrush commented 2 years ago

You can also change it dynamically with js

                const doc = document.getElementById('docs');
                const updateLayout = () => {
                    doc.layout = window.innerWidth >= 1280 ? 'sidebar' : 'stacked';
                }
                updateLayout();

                window.onresize = updateLayout;
dpashkevich commented 1 year ago

It was announced today that Stoplight docs are now responsive: https://roadmap.stoplight.io/c/162 Are these changes already in Stoplight Elements?