DF UI Issues | Foundry VTT | Page 1

shy rapids Apr 9, 2022, 5:14 PM

#

Hey, I'm just going to make a side thread here to chat. I just tried the modules with the DnD5e UI mod and everything seems to be ok.

last ferry Apr 9, 2022, 5:14 PM

#

So that leaves me to a style.css

shy rapids Apr 9, 2022, 5:15 PM

#

possibly, but I don't really see how a CSS file could cause this kind of issue

last ferry Apr 9, 2022, 5:15 PM

#

I have added custom css to update the login screen as you could visit the page you would see https://axis.kaytek.org/join

#

Ill add the code excerpt in a moment for you what I have added

shy rapids Apr 9, 2022, 5:16 PM

#

So the place that is breaking is this query:

const layers = document.querySelector<HTMLElement>('#ui-left > #controls > ol.main-controls.app.control-tools.flexcol');

last ferry Apr 9, 2022, 5:16 PM

#

/* NEW CONFIG AREA START HERE */


/* CONFIGURATION AREA */
#join-game,
.watermark {
  /* Replace "url(data:image...)" with "url("PATH_TO YOUR_IMAGE")".
     Keep as is if you don't want to add images. */
  /* --login-world-logo: url(https://i.imgur.com/R0GispZ.png); */
  --login-world-logo: url(../css/images/tyrany-of-dragons.png);
  --login-footer-logo: url(https://i.imgur.com/GoRxSrB.png);

  /* Change this to adjust the size of the footer logo */
  --login-footer-logo-height: 55px;

  /* Here you can change the base and hover color for the buttons
     on the login form. */
  --login-button-color: rgb(110, 45, 47);
  --login-button-color-hover: rgb(61, 8, 11);

  /* Change to "inherit" if you want to keep the text title.
     You then also need to remove the "World Logo" declaration. */
  --login-show-text-title: none;
}

/* World Logo - REMOVE THIS IF YOU WANT A TEXT TITLE */
#join-game #world-title {
  background: var(--login-world-logo);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  height: 350px !important;
  border: none;
  box-shadow: none;
  animation: zoomOut 1s .5s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}

/* Footer Logo */
body.vtt.players .watermark:before {
  display: block;
  content: "";
  background: var(--login-footer-logo);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: var(--login-footer-logo-height);
  margin-top: calc(calc(var(--login-footer-logo-height) * -1) - 5px);
  margin-bottom: 5px;
  background-size: contain;
  animation: zoomOut 1s .5s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}

/* Hide world description and session info */
#join-game .right.flexcol {
  display: inherit;
}

#join-game .app:not(#world-title) h1 {
  display: none;
}


#join-game .left.flexcol .app:nth-of-type(2) {
  display: none;
}


/* World title visibility */
#join-game #world-title h1 {
  display: var(--login-show-text-title);
}

/* Login mask width and position */
#join-game {
  width: 1280px !important;
  top: calc(35% - 300px) !important;
}

/* Restyle inputs */
#join-game input,
#join-game select,
#join-game button {
  min-height: 20px;
  padding: 10px !important;
  border: invert !important;
  font-size: 15px;
  width: 100%;
  border-radius: 3vh;
}

/* Restyle buttons */
#join-game button {
  background: var(--login-button-color);
  border: invert;
  color: rgb(255, 255, 255);
  border-radius: 3vh;
  margin-bottom: 4px !important;

}

#join-game button:hover {
  background: var(--login-button-color-hover);
  box-shadow: none;
}

/* Top align form labels */
#join-game .form-group {
  clear: both;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  margin-top: 0;
  overflow: hidden;
}

#join-game .form-group label {
  line-height: 31px;
  width: 100%;
}

/* Hide placeholder text */
#join-game input[type="password"]::placeholder {
  color: transparent;
}

/* Change login button icon */
#join-game button[name="join"] i.fas.fa-check {
  display: none;
}

#join-game button[name="join"]:after {
  content: "\1F846";
}


.vtt.players #setup .join-body {
  animation: zoomOut 1s .5s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}


body.vtt.players {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: blurFade 3s ease-out 1;
}


/* Animations */
@keyframes zoomOut {
  0% {
    transform: scale(1.4);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blurFade {
  0% {
    backdrop-filter: brightness(0) blur(15px);
  }

  100% {
    backdrop-filter: brightness(1) blur(0px);
  }
}

/* ### BOOSTRAP INJECT */

.bs-example {
  margin: 20px;
}

shy rapids Apr 9, 2022, 5:16 PM

#

I'm using a regular CSS style query to grab that element

#

yeah that CSS wouldn't cause it.

last ferry Apr 9, 2022, 5:17 PM

#

hmm

shy rapids Apr 9, 2022, 5:17 PM

#

You tried the Find the Culprit?

last ferry Apr 9, 2022, 5:17 PM

#

Let me try it as well with only 5eui and df curvy walls

#

Yes, It didn't conclude exactly what was it

#

let me try again

#

#

currently only using curvy walls and dependencies for it

shy rapids Apr 9, 2022, 5:20 PM

#

hmm... do you have the latest for Curvy Walls?

last ferry Apr 9, 2022, 5:20 PM

#

two errors instantly when trying to draw a circle and toolbar seems not to work either to confirm, delete or even increase the wall count

#

v3.3.1

shy rapids Apr 9, 2022, 5:21 PM

#

yeah, that's really weird because you're seeing that red and green button which shouldn't be red and green anymore. Plus they're not aligned correctly.

#

You might need to reinstall Curvy Walls

last ferry Apr 9, 2022, 5:22 PM

#

I'll try to reinstall the module

#

Still the same

shy rapids Apr 9, 2022, 5:24 PM

#

🤨

#

And the Library: DF Module Buttons is version 1.2.1?

last ferry Apr 9, 2022, 5:25 PM

#

Sec, reloading all modules

#

v1.2.1

shy rapids Apr 9, 2022, 5:26 PM

#

ok, last thing I can think of is to try unloading all your modules except for Curvy Walls and its dependencies

last ferry Apr 9, 2022, 5:26 PM

#

That's what I did with the find the culprit, Only the culprit module was on with both DF curvy walls and it's dependencies

#

Everything else was off

shy rapids Apr 9, 2022, 5:28 PM

#

hmm.. so this is what it should look like if only Curvy and the dependencies are on

last ferry Apr 9, 2022, 5:28 PM

#

Ok now this is even weirder

#

#

Changed the toolbar position it completely wacked itself to the left top corner

#

but buttons work now

shy rapids Apr 9, 2022, 5:29 PM

#

Yeah, the positioning makes sense if the offset calculations are failing

last ferry Apr 9, 2022, 5:30 PM

#

On the right side, no additional controls are available except shape selection

#

shy rapids Apr 9, 2022, 5:32 PM

#

Could you try running this line in the console?

document.querySelector('#ui-left > #controls > ol.main-controls.app.control-tools.flexcol');

last ferry Apr 9, 2022, 5:32 PM

#

Top, same as the left alignment, and the bottom above the same as right alignment

#

returns null

shy rapids Apr 9, 2022, 5:33 PM

#

yeah, so for some reason that query is failing

last ferry Apr 9, 2022, 5:33 PM

#

As you said ID change prob of the var for one of the items in the UI that you use to align

shy rapids Apr 9, 2022, 5:33 PM

#

oh you know what, it's because you're on 249. They updated the UI for 255 🤦‍♂️

last ferry Apr 9, 2022, 5:34 PM

#

Don't tell me I should update now 😂

#

most of the modules gonna break 😂

shy rapids Apr 9, 2022, 5:34 PM

#

hahahaha well I can give you a curvy wall install link for the previous version

last ferry Apr 9, 2022, 5:34 PM

#

that would be awesome

#

I need to downgrade the UI I think too

shy rapids Apr 9, 2022, 5:35 PM

#

https://dragonflagon.cafe/mods/man/df-curvy-walls@3.3.0

last ferry Apr 9, 2022, 5:36 PM

#

I just wget the 9.255 to my host as separate fork and could try the modules

shy rapids Apr 9, 2022, 5:37 PM

#

So I would install that and then lock it so it doesn't update until you can safely update to the latest Foundry

#

sure, you can give it a shot to see if things work properly

last ferry Apr 9, 2022, 5:39 PM

#

loading in the game just spined up the node server

#

yeah 9.255 works fine

#

and your js query returns int 3

#

nvm

#

I entered manually smh

#

returns

<ol class="main-controls app control-tools flexcol ">
bala bla bla....

shy rapids Apr 9, 2022, 5:42 PM

#

awesome 👍

last ferry Apr 9, 2022, 5:45 PM

#

v3.0.3 works fine 🎉

#

Thanks Flame!

shy rapids Apr 9, 2022, 5:45 PM

#

np, I'm happy we got you sorted out 👍

last ferry Apr 9, 2022, 5:45 PM

#

Wrong sticker wanted to use this one

#

#DF UI Issues