新型CSSの形態調整

This commit is contained in:
harukin-expo-dev-env 2025-07-18 15:18:33 +00:00
parent 326cd60733
commit 0c10bcc339

View File

@ -1421,57 +1421,70 @@ const setStrings = () =>{
try {
const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
const setNewTrainItemUI = ()=>{
const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
const aaa = (x2,pos) => {
x2.style.display = 'flex';
x2.style.flexDirection = 'row';
if(pos == "right"){
x2.style.alignItems = 'flex-start';
x2.style.justifyContent = 'flex-start';
}else if(pos == "left"){
x2.style.alignItems = 'flex-end';
x2.style.justifyContent = 'flex-end';
}
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "100%";
}
const aaa2 = (x2) => {
x2.style.display = 'flex';
x2.style.flexDirection = 'row';
x2.style.alignItems = 'center';
x2.style.justifyContent = 'center';
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "unset";
const x3 = x2.querySelectorAll(":scope > div");
x3.forEach(i=>{
i.style.position = "unset";
i.style.display = "flex";
i.style.flexDirection = "column";
i.style.flex = "1";
i.style.backgroundColor = "#00000000";
i.querySelectorAll(":scope > *").forEach(j=>{
j.style.width = "100%";
j.style.textAlign = "center";
j.style.margin = "5px";
j.style.padding = "5px";
});
});
}
const layoutBase = (e)=>{
e.style.display = 'flex';
e.style.height = "unset";
e.style.flexDirection = 'row';
//e.style.alignItems = "left";
e.style.justifyContent = 'center';
const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
//x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
const aaa = (x2,pos) => {
x2.style.display = 'flex';
x2.style.flexDirection = 'row';
if(pos == "right"){
x2.style.alignItems = 'flex-start';
x2.style.justifyContent = 'flex-start';
}else if(pos == "left"){
x2.style.alignItems = 'flex-end';
x2.style.justifyContent = 'flex-end';
}
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "100%";
}
const aaa2 = (x2) => {
x2.style.display = 'flex';
x2.style.flexDirection = 'row';
x2.style.alignItems = 'center';
x2.style.justifyContent = 'center';
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "unset";
const x3 = x2.querySelectorAll(":scope > div");
x3.forEach(i=>{
i.style.position = "unset";
i.style.display = "flex";
i.style.flexDirection = "column";
i.style.flex = "1";
i.style.backgroundColor = "#00000000";
i.querySelectorAll(":scope > *").forEach(j=>{
j.style.width = "100%";
j.style.textAlign = "center";
j.style.margin = "5px";
j.style.padding = "5px";
});
});
}
}
const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
const elementNotBase = document.querySelectorAll('#disp > [id*=""]');
elementNotBase.forEach(e=>{
layoutBase(e);
const x = e.querySelectorAll(':scope > [id^="Up"], :scope > [id^="Id"], :scope > [id^="Down"]');//配下のdiv要素を選択
aaa(x[0],"left");
aaa2(x[1]);
aaa(x[2],"right");
const upTrainCrossBarElement = e.querySelector(':scope > [id="upTrainCrossBar"]');
if (upTrainCrossBarElement) {
upTrainCrossBarElement.style.left = '0px';
}
});
elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
layoutBase(e);
const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
//x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
aaa(x[0],"left");
aaa2(x[1]);
aaa(x[2],"right");
});
}