クリックアニメーションを追加、進行方向に合わせた配置の変更
This commit is contained in:
parent
45b41dcef0
commit
a305aa7202
@ -1247,9 +1247,10 @@ export const injectJavascriptData: InjectJavascriptData = (
|
|||||||
const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData;
|
const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData;
|
||||||
const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber;
|
const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber;
|
||||||
行き先情報.innerText = "";
|
行き先情報.innerText = "";
|
||||||
行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: black;'>" + returnText1 + "</p>");
|
行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + returnText1 + "</p>");
|
||||||
行き先情報.insertAdjacentHTML('beforebegin', "<div style='display:inline-flex;flex-direction:column;'><p style='font-size:10px;font-weight: bold;padding:0;color:black;'>" + (ToData ? ToData + "行 " : ToData) + "</p><p style='font-size:10px;padding:0;color:black;'>" + TrainNumber + (JRF ? "":"レ") + "</p></div>");
|
行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color:black;text-align:center;'>" + (ToData ? ToData + "行 " : ToData) + "</p>");
|
||||||
行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
|
行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p>");
|
||||||
|
行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -1265,16 +1266,27 @@ const setNewTrainItem = (element)=>{
|
|||||||
element.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
|
element.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
|
||||||
element.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
|
element.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
|
||||||
element.style.margin = '2px';
|
element.style.margin = '2px';
|
||||||
|
|
||||||
element.style.display = 'flex';
|
element.style.display = 'flex';
|
||||||
element.style.flexDirection = 'column';
|
|
||||||
element.style.alignItems = 'center';
|
element.style.alignItems = 'center';
|
||||||
element.style.justifyContent = 'center';
|
element.style.justifyContent = 'flex-end';
|
||||||
element.style.width = '52px';
|
element.style.width = '52px';
|
||||||
element.style.height = '80px';
|
element.style.height = '80px';
|
||||||
element.getElementsByTagName("p")[0].style.textAlign = "center";
|
|
||||||
element.getElementsByTagName("p")[0].style.fontSize = '8px';
|
|
||||||
element.getElementsByTagName("img")[0].style.float = 'unset';
|
element.getElementsByTagName("img")[0].style.float = 'unset';
|
||||||
|
element.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)';
|
||||||
|
element.style.transition = 'transform 0.1s ease-in-out';
|
||||||
|
element.addEventListener('touchstart', () => element.style.transform = 'scale(0.8)');
|
||||||
|
element.addEventListener('touchend', () => element.style.transform = 'scale(1)');
|
||||||
|
if(element.getAttribute("style").includes("left")){
|
||||||
|
// borderを使って五角形を生成 下り
|
||||||
|
element.style.borderRadius = '20% 20% 80% 80%';
|
||||||
|
element.style.flexDirection = 'column-reverse';
|
||||||
|
}
|
||||||
|
else if(element.getAttribute("style").includes("right")){
|
||||||
|
// borderを使って五角形を生成 上り
|
||||||
|
element.style.borderRadius = '80% 80% 20% 20%';
|
||||||
|
element.style.flexDirection = 'column';
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
//列番付与
|
//列番付与
|
||||||
const setStrings = () =>{
|
const setStrings = () =>{
|
||||||
|
Loading…
Reference in New Issue
Block a user