新型CSSの形態調整
This commit is contained in:
parent
326cd60733
commit
0c10bcc339
@ -1421,57 +1421,70 @@ const setStrings = () =>{
|
|||||||
try {
|
try {
|
||||||
const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
|
const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
|
||||||
const setNewTrainItemUI = ()=>{
|
const setNewTrainItemUI = ()=>{
|
||||||
const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
|
const aaa = (x2,pos) => {
|
||||||
elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
|
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.display = 'flex';
|
||||||
e.style.height = "unset";
|
e.style.height = "unset";
|
||||||
e.style.flexDirection = 'row';
|
e.style.flexDirection = 'row';
|
||||||
//e.style.alignItems = "left";
|
|
||||||
e.style.justifyContent = 'center';
|
e.style.justifyContent = 'center';
|
||||||
const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
|
}
|
||||||
//x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
|
const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
|
||||||
const aaa = (x2,pos) => {
|
const elementNotBase = document.querySelectorAll('#disp > [id*="~"]');
|
||||||
x2.style.display = 'flex';
|
elementNotBase.forEach(e=>{
|
||||||
x2.style.flexDirection = 'row';
|
layoutBase(e);
|
||||||
if(pos == "right"){
|
const x = e.querySelectorAll(':scope > [id^="Up"], :scope > [id^="Id"], :scope > [id^="Down"]');//配下のdiv要素を選択
|
||||||
x2.style.alignItems = 'flex-start';
|
aaa(x[0],"left");
|
||||||
x2.style.justifyContent = 'flex-start';
|
aaa2(x[1]);
|
||||||
}else if(pos == "left"){
|
aaa(x[2],"right");
|
||||||
x2.style.alignItems = 'flex-end';
|
const upTrainCrossBarElement = e.querySelector(':scope > [id="upTrainCrossBar"]');
|
||||||
x2.style.justifyContent = 'flex-end';
|
if (upTrainCrossBarElement) {
|
||||||
}
|
upTrainCrossBarElement.style.left = '0px';
|
||||||
x2.style.flexWrap = 'wrap';
|
}
|
||||||
x2.style.width = '100%';
|
});
|
||||||
x2.style.height = "100%";
|
elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
|
||||||
|
layoutBase(e);
|
||||||
}
|
const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
|
||||||
const aaa2 = (x2) => {
|
//x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
|
||||||
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";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
aaa(x[0],"left");
|
aaa(x[0],"left");
|
||||||
aaa2(x[1]);
|
aaa2(x[1]);
|
||||||
aaa(x[2],"right");
|
aaa(x[2],"right");
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user