yysun/apprun

SPA fails to show component links on small screens

jkleiser opened this issue · 3 comments

jkleiser commented

I just tested a SPA I have made (with npx apprun --init --spa) on an iPad, and noticed that the component links that normally appear to the right of the "Project Name", were not showing at all. Instead I got a burger-like menu element on the far right, but I did not get access to my components from that menu; it was not responding to clicks/taps. This can be observed in a freshly built AppRun SPA, e.g. in Chrome when selecting emulation of an iPad screen size in the developer tools.
I guess that this has something to do with Bootstrap. There may be some configuration details missing.

jkleiser commented

My solution this time will be to do entirely without Bootstrap. Others may be interested in a Bootstrap working on small screens. I have looked at some of the Bootstrap docs, but have yet not found a fix for the standard AppRun SPA.

yysun commented

I only include the Bootstrap CSS in the index.html. If you add jQuery, popper.js, and bootstrap.js, it will work.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>AppRun</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
  <div id="main"></div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <!-- <script src="https://unpkg.com/apprun@latest/dist/apprun-dev-tools.js"></script> -->
  <script src="./dist/app.js"></script>
</body>
</html>
jkleiser commented

Thanks. I prefer a very simple solution this time – AppRun and a dash of TypeScript. My main target is iPad and similar devices, so my nav-bar will not need to adapt to smaller screens like phones.