Giter VIP home page Giter VIP logo

Comments (12)

InnovateAsterisk avatar InnovateAsterisk commented on May 21, 2024

Yes, this is a know issue with video calls, its better to use a more narrow screen, possibly portrait, as this makes the video smaller and allows the text area to be shown. If you use this app on a something like a tablet, it's better to use portrait. On a desktop PC, it's reasonable to expect that users have a higher than 1024x768 screen resolution.

from browser-phone.

vieridipaola avatar vieridipaola commented on May 21, 2024

I've tested it on a laptop with a 1920x1080 screen resolution, and the text input section vanishes way below my desktop view. Correct me if I'm wrong if I state that it's because of the remote video element taking up full width? If so, I'll try to limit it to, say, 80% and see what happens.
Anyway, not a major issue.
Thanks

from browser-phone.

InnovateAsterisk avatar InnovateAsterisk commented on May 21, 2024

Yes, it's because the idea is to fit: your preview, their video, the button controls, and text, and even some history in a single view. It may be worth reviewing this.

from browser-phone.

vieridipaola avatar vieridipaola commented on May 21, 2024

There are differences between Chrome and Firefox. If the buddy list is long, Chrome allows to scroll vertically, and that works fine. However, the scroll bar is not available in Firefox, and you can only view the first buddies that fit on the screen.

from browser-phone.

vieridipaola avatar vieridipaola commented on May 21, 2024

The scroll in Firefox now works properly. Thanks!
I still haven't tested the video size/text message issue.
I was wondering if one could "setItem" a different/custom value for the left panel where the buddy list is loaded. OR maybe even set the height of each buddy element/display so that there is no overlapping when the "full name" is wrapped around in a second line.

from browser-phone.

InnovateAsterisk avatar InnovateAsterisk commented on May 21, 2024

I still haven't tested the video size/text message issue.

I'm still busy with that.

I was wondering if one could "setItem" a different/custom value for the left panel where the buddy list is loaded. OR maybe even set the height of each buddy element/display so that there is no overlapping when the "full name" is wrapped around in a second line.

Can you show me a screenshot of the issue here?

from browser-phone.

vieridipaola avatar vieridipaola commented on May 21, 2024

image

You can see how the presence status of the second buddy is somewhat hidden under buddy #3.

from browser-phone.

vieridipaola avatar vieridipaola commented on May 21, 2024

There's another issue related to the UI, but it's a bit stretching it because it only occurs when I customize my HTML...

Take this simple example:

    <body>
        <div id=Header>
            <p>Some header.</p>
        </div>
        <div id=Phone></div>
        <div id=Footer>
            <p>Footer.</p>
        </div>
    </body>

The footer is invisible.

In this other example, I can see the footer, but the Browser-Phone is "squashed":

     <body>
        <div id=World style="display:table;">
            <div id=Header style="display:table-row;vertical-align:top;">
                <p>Some header.</p>
            </div>
            <div id=Phone style="display:table-row;vertical-align:middle;"></div>
            <div id=Footer style="display:table-row;vertical-align:bottom;">
                <p>Footer.</p>
            </div>
        </div>
    </body>

I know this is my fault because I need to rewrite my CSS, but I was wondering if there are any caveats I should take into account.

EDIT:
I also tried the following:

    <body>
        <div id=World style="display:table;width:100%;height:100%;overflow:auto">
            <div id=Header style="display:table-row;vertical-align:top;">
                <p>Some header.</p>
            </div>
            <div id=Phone style="display:block;vertical-align:middle;height:1500px;overflow:auto"></div>
            <div id=Footer style="display:table-row;vertical-align:bottom;">
                <p>Footer.</p>
            </div>
        </div>
    </body>

This doesn't "squash" the Phone element, but if 'height' is too big for a display then I can't scroll down to see the footer (or the rest of Phone).

Yes, I believe this is a tad off-topic and out of Browser-Phone's scope, so it's OK to just ignore this post if you don't have enough spare time for this.

Thanks

EDIT 2:

  <body style="overflow:auto;">
       <div id=World style="display:table;width:100%;height:100%;overflow:auto;">
           <div id=Header style="display:table-row;vertical-align:top;">
               <p>Some header.</p>
           </div>
           <div id=Phone style="display:block;vertical-align:middle;height:1200px;overflow:auto;"></div>
           <div id=Footer style="display:table-row;vertical-align:bottom;">
               <p>Footer.</p>
           </div>
       </div>
   </body>

I believe 'overflow:auto;' in the body tag does the trick. However, do you know if there's a way to make 'Phone' use up all of the available height between 'Header' and 'Footer'? Not specifying 'height:?px' renders the Phone div as somewhat "squashed".

from browser-phone.

InnovateAsterisk avatar InnovateAsterisk commented on May 21, 2024

The scroll in Firefox now works properly. Thanks!
I still haven't tested the video size/text message issue.
I was wondering if one could "setItem" a different/custom value for the left panel where the buddy list is loaded. OR maybe even set the height of each buddy element/display so that there is no overlapping when the "full name" is wrapped around in a second line.

This is fixed

from browser-phone.

InnovateAsterisk avatar InnovateAsterisk commented on May 21, 2024

I believe 'overflow:auto;' in the body tag does the trick. However, do you know if there's a way to make 'Phone' use up all of the available height between 'Header' and 'Footer'? Not specifying 'height:?px' renders the Phone div as somewhat "squashed".

The easiest way to pull the phone into an existing design will be to IFRAME it. This way the original UI can perform as is, and because you can host both sets of code, you will not get any cross-site-scripting or CORS issues.

Take a look: https://www.innovateasterisk.com/phone/popup.html

from browser-phone.

vieridipaola avatar vieridipaola commented on May 21, 2024

Thank you very much for the demo. I like the "open window" method best. The iframe is nice but I can't seem to automatically use up the whole height of the client view. I guess I can only use a specific px height and hope it will be ok in most cases.
Anyway, great solution, thanks.

from browser-phone.

InnovateAsterisk avatar InnovateAsterisk commented on May 21, 2024

I guess I can only use a specific px height and hope it will be ok in most cases.
Anyway, great solution, thanks.

Nope, you can just pop the iframe in a div, and style anyway you like. Try this:

<!DOCTYPE html>
<html>
    <head>
        <title>My Own Site</title>
        <style>
            html, body{
                margin: 0px;
                padding: 0px;
                height: 100%;
                background-color: #222222;
            }
            .container{
                max-width: 1024px;
                margin-left: auto;
                margin-right: auto;
                height: 100%;
            }
            .topSection{
                height: 80px;
                text-align: center;
                color: #F3F3F3;
                font-size: 16px;
                font-family: Arial, Helvetica, sans-serif;
            }
            .mainSection{
                height: calc(100% - 80px);
            }
        </style>
    </head>

    <body>
        <div class=container>
            <div class=topSection>This is a sample of how the phone can be loaded into you own web site.</div>
            <div class=mainSection><iframe src="index.html" style="width:100%; height:100%; border: none;"></iframe></div>
        </div>
    </body>
</html>

from browser-phone.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.