Adding Responsiveness to this Project?

[gregarican]

This is a great sample app showing us the ropes! I wanted to add responsiveness to this, so that a mobile user (or a user who shrinks down their browser window) will see a straight-vertical line of all page elements.

Implementing Bootstrap and a resizing event handler, things are going pretty well. The only quirk is that the user's own camera view that appears in the right pane below the Settings elements doesn't appear when the page is full-screen. This is after the user creates a room and their camera is added to it. This camera view just disappears. While the preview did previously appear in the center of the screen.

Below is my reworked home.component.html file. Any suggestions? I know this is a bit OT, since it's outside the scope of the project itself. I am not an expert UI web dev, as I typically don't pretty things up too much :)

<div class="grid-container">
 <!--<div class="grid-bottom-right">
    <a href="https://twitter.com/davidpine7" target="_blank"><i class="fab fa-twitter"></i> @davidpine7</a>
</div>-->
<!--<div class="grid-top-right">-->
<div class="grid-top-right d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <a href="https://www.diamondcellar.com" target="_blank">
        <img src="assets/dcLogo_black.JPG" alt="Diamond Cellar Holdings" />
    </a>
</div>
<div class="grid-content d-block d-sm-block d-md-none d-lg-none d-xl-none">
    <app-rooms #rooms (roomChanged)="onRoomChanged($event)" [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-rooms>
    <app-camera #camera [style.display]="!!activeRoom ? 'none' : 'block'"></app-camera>
    <app-participants #participants
                      (leaveRoom)="onLeaveRoom($event)"
                      (participantsChanged)="onParticipantsChanged($event)"
                      [style.display]="!!activeRoom ? 'block' : 'none'"
                      [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-participants>
    <app-settings #settings (settingsChanged)="onSettingsChanged($event)"></app-settings>
</div>
<!--<div class="grid-left">-->
<div class="grid-left d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <app-rooms #rooms (roomChanged)="onRoomChanged($event)" [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-rooms>
</div>
<!--<div class="grid-content">-->
<div class="grid-content d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <app-camera #camera [style.display]="!!activeRoom ? 'none' : 'block'"></app-camera>
    <app-participants #participants
                      (leaveRoom)="onLeaveRoom($event)"
                      (participantsChanged)="onParticipantsChanged($event)"
                      [style.display]="!!activeRoom ? 'block' : 'none'"
                      [activeRoomName]="!!activeRoom ? activeRoom.name : null"></app-participants>
</div>
<!--<div class="grid-right">-->
<div class="grid-right d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <app-settings #settings (settingsChanged)="onSettingsChanged($event)"></app-settings>
</div>
<!--<div class="grid-top-left">-->
<div class="grid-top-left d-none d-sm-none d-md-block d-lg-block d-xl-block">
    <a href="https://www.twilio.com/video" target="_blank">
        <img src="assets/twilio-badge-red.png" alt="Powered by Twilio" />
    </a>
</div>

[IEvangelist]

In all honesty, I'm not much of a UI person either. I just mess around with things, doing trial and error until it comes out looking the way I'd like. I'd probably consider rewriting the app to use native camera controls for mobile, instead of being web based.

[gregarican]

That might be an option. We are looking to deploy something as a virtual retail presentation tool. The salesperson will have a full-size PC, while the customer might typically be on a mobile device. Hence my initial stab at trying to just utilize a standard web browser. I will need to bone up on Bootstrap and see where it leads me. Thanks for the quick reply!