Extend build terminal in dashboard to full height of viewport

[humphd]

The build terminal (see https://dev.api.telescope.cdot.systems/v1/status/pages/build.html) is only occupying the top portion of the page. Let's have it extend to fill the available space vertically.

[Yoda-Canada]

@humphd I would like to work on this for release 0.4

[humphd]

@Yoda-Canada sounds good. NOTE: this isn't enough for 0.4, so look for some other things to pair it with.

[Yoda-Canada]

@humphd where is the code? I find the code in the webpage, but can't find it on GitHub.

[humphd]

https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/pages/build.html and https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/js/pages/build.js

[Yoda-Canada]

I only can find the id="terminal" and I try to "go to definition", but can't find anything.

[humphd]

Yes, it gets created dynamically by xterm.js at runtime. You need to stretch the #terminal parent element to fill the vertical space, and the terminal should fill it automatically.

[Yoda-Canada]

@humphd I try to use the following code to solve this issue, but it doesn't change. Then I check the container size and the main class size doesn't fit the whole screen. I changed the max-height, but it not useful. Could you give some clues?

<div id="terminal">
      <script>
        var term = new Terminal();
        var fitAddon = new FitAddon();
        term.loadAddon(fitAddon);
        term.open(document.getElementById('terminal'));
        fitAddon.fit();
      </script>
</div>

[humphd]

Short of solving this myself, I'm not sure. You need to do some research, work with your classmates to try and dig into things, etc. You can do this.

[HyperTHD]

Might be wrong on this as I'm not the best with css and styling in general but this is what you want right? I also had it align with the dashboard as well

2021-11-25.23-18-55.mp4

ll

[Yoda-Canada]

@HyperTHD I think it is right. Could you tell me how to do it? thx

[HyperTHD]

It's the height of the xterm-screen itself. I looked at the new status service related content and couldn't find out where it gets loaded into, but you'd basically want to increase the height of that, and add some border radius so that it ends up rounded at the bottom like the dashboard. Hope this helps @Yoda-Canada

[Andrewnt219]

Closed with #2556