Board image appears cut in half?

[pj-paul]

Platform: Mac

[problemadder]

Hi, have a look at the last entry here: https://github.com/TowelSniffer/Anki-Chess-2.0/issues/22 works for me on MAC

[problemadder]

for my solution i changed the "back template" to:

and the CSS to:

body { margin: 0; height: 100vh; }

.mac iframe { height: min(550px, 100vw); width: min(550px, 100vw); border: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #94e2d5; border-radius: 4px; box-shadow: 0px 0px 4px 0px #94e2d5; }

/ iOS / .iphone iframe, .ipad iframe { height: 90vh !important; width: 100vw !important; }

.solution { width: min(400px)!important; height: min(520px, 100vw !important; }

[pj-paul]

Ok. This is what worked for me:

.mac iframe {
  height: 90vh;
  width: 80vw;
  border: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: px solid #94e2d5;
    border-radius: 4px;
  box-shadow: 0px 0px 4px 0px #94e2d5;
}

[pj-paul]

Closing this.

[TowelSniffer]

thanks @problemadder for the help.

So these inconsistencies on mac and IOS are a bit weird, but I am thinking the issue is with people having different resolution screens. I think I will just update the template so that both iframes span the entire page.

so update the back template to <iframe id="analysisBoard" allowtransparency="true"></iframe> and the css to:

.card {
  text-align: center;
  font-size: 20px;
  margin: 0 !important;
}

body {
  height: 100vh;
  width: 100vw;
  /* removes wierd overflow issues on different devices */
  overflow: hidden;
}

iframe {
  height: 100vh;
  width: 100%;
  border: 0;
}

This should be more consistent albeit a little less stylish

[TowelSniffer]

ok so I just pushed a release that I am happy with. It includes dynamic background coloring so the iframes will automatically style to your background color (this used to be easier when anki allowed transparent backgrounds for iframes). It works well for desktop and android, but i was hoping one of you could test for IOS

[problemadder]

Hi TowelSniffer, looks perfect on Mac 👍Front looks perfect on iPhone. Back not so much, Board is very good, but the notation is not complete and you cant swipe down to see the complete notation (only two lines are visible):

[TowelSniffer]

It looks like you are still using the old html files?

The updated template should match the background colour of anki

[TowelSniffer]

So this is what it should look like

[TowelSniffer]

As for the bottom being cut off, have you tested it with a larger pgn.

That's what I get, it still cuts off a bit at the bottom but does allow me to scroll. You just cant scroll by touching the board so it's a bit finiky. It should be easy to fix the bottom being cut off, but why it centres poorly on iPhone idk. This is what I get with a short pgn

I don't know why everything is shifted down on iPhone

[TowelSniffer]

Actually it looks like the html for iPhone includes the section under the buttons. It seems like the move list it desplayed underneath. And if you consider that then the board is centered. Ok with this in mind, I'm just not going to have the board center vertically. It's a she appearance wise but it should make compatability easier.

[problemadder]

Good morning. No I created an additional completely new deck and a new user. And than imported the new Anki file and the new html. With complete reupload to iphone

On Fri 27. Jan 2023 at 00:50, TowelSniffer @.***> wrote:

It looks like you are still using the old html files?

— Reply to this email directly, view it on GitHub https://github.com/TowelSniffer/Anki-Chess-2.0/issues/23#issuecomment-1405824764, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL44AO5533MYYCXFGWHRW5LWUMEU5ANCNFSM6AAAAAAUGLRBUE . You are receiving this because you were mentioned.Message ID: @.***>

[TowelSniffer]

Are you sure you downloaded the latest release? because your background color is set to #1E1E2E. This should not happen with the new template, unless that is anki mobiles default background color (which would be a crazy coincidence). can i ask if the background color is auto adjusting on desktop for you? because if so it must be using the old html file on mobile for some reason.

anyway Don't worry about this too much. I am just going to wait until I can obtain an iphone to test with. thanks again for the help

[problemadder]

you are right. i clicked the wrong link in my mails. I tried the newest release. now the background of the front card is white. but the "notification" problem is still the same. keep up the good work. i roll back to my manipulated version that works very fine for me 👍 have a nice weekend.