diff --git a/TRANS_HYPE/components/rightPanel/setupMenu.css b/TRANS_HYPE/components/rightPanel/setupMenu.css index 2dd22a9..0a6a406 100644 --- a/TRANS_HYPE/components/rightPanel/setupMenu.css +++ b/TRANS_HYPE/components/rightPanel/setupMenu.css @@ -29,7 +29,7 @@ display: inline-flex; flex-direction: row-reverse; z-index: 2; - font-size: 1.2vh; + font-size: x-small; right: 0%; writing-mode: vertical-lr; transform: rotate(0.5turn); @@ -39,15 +39,11 @@ #menu > li { color: #ffffff; - width: 4vh; + width: 25px; height: 20%; text-align: center; - line-height: 4vh; + line-height: 25px; font-weight: 500; - - -webkit-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); - -ms-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); - transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); } #menu > li > a { diff --git a/TRANS_HYPE/pages/archive_list/index.css b/TRANS_HYPE/pages/archive_list/index.css index 075b519..9cf55ab 100644 --- a/TRANS_HYPE/pages/archive_list/index.css +++ b/TRANS_HYPE/pages/archive_list/index.css @@ -5,7 +5,7 @@ } body { - overflow: hidden; + /* overflow: hidden; */ background-color: black; } @@ -20,27 +20,27 @@ body { transition: color 500ms ease; } -#list_and_show { +/* #list_and_show { position: absolute; - width: 100%; - height: 85%; + width: calc(100% - 25px); + height: 100%; top: 15%; -} +} */ #area_list_container { - overflow: hidden; + /* overflow: hidden; */ position: absolute; width: 30%; height: 100%; color: white; z-index: 2; - left: 70%; + right: 0; list-style-type: none; -ms-overflow-style: none; /* border-left:solid 2px #FFFFFF; */ - background-color: #000000; + /* background-color: #000000; */ -webkit-transition: right 300ms cubic-bezier(0.6, 0, 0.4, 1); -ms-transition: right 300ms cubic-bezier(0.6, 0, 0.4, 1); @@ -54,15 +54,15 @@ body { #area_list { position: absolute; left: 0vh; - overflow: hidden; + /* overflow: hidden; */ overflow-y: scroll; width: 100%; height: 100%; list-style-type: none; -ms-overflow-style: none; - - background-color: black; + /* + background-color: black; */ } #area_list::-webkit-scrollbar { @@ -112,73 +112,15 @@ body { font-size: 1vw; } -#canvus_container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - .clickable { cursor: pointer; } -#hovering_canvas { - position: absolute; - width: 100%; - height: 100%; - z-index: 1; - top: 0; -} - -#virtual_map_2d { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - margin-top: auto; - margin-left: auto; - margin-bottom: auto; - margin-right: auto; - - width: 100%; - height: 100%; - z-index: 1; - opacity: 0.1; -} - -#virtual_map_2d > img { - top: 0; - bottom: 0; - left: 0; - right: 0; - - margin-top: auto; - margin-left: auto; - margin-bottom: auto; - margin-right: auto; - - position: absolute; - width: 100%; - height: 100%; - z-index: 1; - - filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(292deg) - brightness(108%) contrast(108%); - - -webkit-transition: opacity 100ms ease-out; - -ms-transition: opacity 100ms ease-out; - transition: opacity 100ms ease-out; -} - #show { position: absolute; - width: 70%; + width: 100%; height: 100%; - overflow: hidden; + /* overflow: hidden; */ overflow-y: scroll; line-height: 170%; @@ -189,41 +131,66 @@ body { display: none; } -#Place_info { +.place_info { position: absolute; font-size: 1.2vw; font-weight: 900; line-height: 170%; left: 5%; - width: 50%; + width: 40%; word-break: keep-all; z-index: 2; } -#discription { +.description { font-size: 2vw; font-weight: 900; line-height: 170%; } -#Place_photo { +.container { + /* margin-top: 15%; */ position: absolute; - right: 3%; - width: 80%; -} -#p01 { + display: flex; + flex-direction: column; + /* gap: 20px; */ width: 100%; - object-fit: contain; - opacity: 0.5; + height: 100%; + + overflow-y: scroll; +} + +::-webkit-scrollbar { + display: none; } -#p02 { +.photo_container { + position: relative; + display: flex; + flex-direction: row; width: 100%; + /* background: rgb(20, 20, 20); */ +} +.photo1 { + width: 50%; object-fit: contain; opacity: 0.5; + clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 50%); + transform: translateY(50%); + /* clip-path: polygon(100% 0, 100% 50%, 0 100%, 0 50%); */ + /* clip-path: polygon(100% 100%, 100% 50%, 0 0, 0 50%); */ + /* background-color: blueviolet; */ } -#p03 { - width: 100%; +.photo2 { + width: 50%; object-fit: contain; opacity: 0.5; + /* transform: translateY(150%); */ + clip-path: polygon(100% 0, 100% 50%, 0 100%, 0 0); + /* clip-path: polygon(100% 0, 100% 50%, 0 100%, 0 50%); */ + /* background-color: blueviolet; */ +} +.dummy { + width: 100%; + height: 1000px; } diff --git a/TRANS_HYPE/pages/archive_list/index.html b/TRANS_HYPE/pages/archive_list/index.html index 97618ea..5182571 100644 --- a/TRANS_HYPE/pages/archive_list/index.html +++ b/TRANS_HYPE/pages/archive_list/index.html @@ -14,7 +14,7 @@ -
+ -
- - - -
-
+
+ -
- -
-
+
+
+
+ diff --git a/TRANS_HYPE/pages/archive_list/index.js b/TRANS_HYPE/pages/archive_list/index.js index dbe315b..545801e 100644 --- a/TRANS_HYPE/pages/archive_list/index.js +++ b/TRANS_HYPE/pages/archive_list/index.js @@ -5,21 +5,48 @@ class App { constructor() { document.body.prepend(createHeader()); this.archivePicturesPath = "../../assets/archive_pictures/"; - this.title = document.querySelector("#title"); this.area_list = document.querySelector("#area_list"); this.area_list_container = document.querySelector("#area_list_container"); - this.area_list_container.addEventListener("mouseover", () => { - // this.area_list_container.style.right = "4vh" - }); - this.area_list_container.addEventListener("mouseout", () => { - // this.area_list_container.style.right = "-32vh" - }); + this.listElements = []; - this.virtual_map_2d = document.querySelector("#virtual_map_2d"); + this.container = document.querySelector(".container"); + + this.container.addEventListener("scroll", (e) => { + this.change_opacity(); + }); - this.listElements = []; for (let area_id in Place_table) { + // let wrapper = document.createElement("div"); + // let address_kr = document.createElement("div"); + // let address_eng = document.createElement("div"); + // let graffiti_size = document.createElement("div"); + // let graffiti_style = document.createElement("div"); + // let wall_size = document.createElement("div"); + // let description = document.createElement("div"); + // description.classList.add("description"); + // wrapper.classList.add("text"); + // wrapper.style.position = "absolute"; + // wrapper.append( + // address_kr, + // address_eng, + // graffiti_size, + // graffiti_style, + // wall_size, + // description + // ); + // wrapper.classList.add("place_info"); + + // address_kr.innerHTML = Place_table[area_id].address_kr; + // address_eng.innerHTML = Place_table[area_id].address_eng; + // graffiti_size.innerHTML = + // "Graffiti Size : " + Place_table[area_id].graffiti_size; + // graffiti_style.innerHTML = + // "Graffiti Style : " + Place_table[area_id].graffiti_style; + // wall_size.innerHTML = + // "Wall Size : " + Place_table[area_id].wall_size + "

"; + // description.innerHTML = Place_table[area_id].discription; + let li_elem = document.createElement("li"); let area_id_elem = document.createElement("div"); let area_info_elem = document.createElement("div"); @@ -43,6 +70,59 @@ class App { this.area_list.appendChild(li_elem); this.listElements.push(li_elem); + + const photoContainer = document.createElement("div"); + const photo1 = document.createElement("img"); + const photo2 = document.createElement("img"); + + photoContainer.classList.add("photo_container"); + photoContainer.appendChild(this.createDescription(area_id)); + photo1.classList.add("photo1"); + photo2.classList.add("photo2"); + + this.container.appendChild(photoContainer); + + photoContainer.append(photo1, photo2); + + photo1.src = + this.archivePicturesPath + "w320/" + Place_table[area_id].pic2; + + photo2.src = + this.archivePicturesPath + "w320/" + Place_table[area_id].pic3; + + // photo3.src = + // this.archivePicturesPath + "w320/" + Place_table[current_id].pic1; + + photo1.srcset = ` + ${this.archivePicturesPath + "w320/" + Place_table[area_id].pic2} 320w, + ${this.archivePicturesPath + "w640/" + Place_table[area_id].pic2} 640w, + ${ + this.archivePicturesPath + "w1024/" + Place_table[area_id].pic2 + } 1024w, + `; + + photo2.srcset = ` + ${this.archivePicturesPath + "w320/" + Place_table[area_id].pic3} 320w, + ${this.archivePicturesPath + "w640/" + Place_table[area_id].pic3} 640w, + ${ + this.archivePicturesPath + "w1024/" + Place_table[area_id].pic3 + } 1024w, + `; + + // photo3.srcset = ` + // ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic1} 320w, + // ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic1} 640w, + // ${ + // this.archivePicturesPath + "w1024/" + Place_table[current_id].pic1 + // } 1024w, + // `; + + photo1.sizes = + "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + photo2.sizes = + "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + // photo3.sizes = + // "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; } this.show = document.querySelector("#show"); @@ -55,93 +135,144 @@ class App { this.add_listPageEvent(); - this.container = document.querySelector("#canvus_container"); - - this.p01 = document.querySelector("#p01"); - this.p02 = document.querySelector("#p02"); - this.p03 = document.querySelector("#p03"); + // this.p01 = document.querySelector("#p01"); + // this.p02 = document.querySelector("#p02"); + // this.p03 = document.querySelector("#p03"); - this.show_palce("P01"); + // this.show_palce("P01"); window.onresize = this.resize.bind(this); this.resize(); + this.change_opacity(); + } + + createDescription(areaId) { + let wrapper = document.createElement("div"); + + let address_kr = document.createElement("div"); + let address_eng = document.createElement("div"); + let graffiti_size = document.createElement("div"); + let graffiti_style = document.createElement("div"); + let wall_size = document.createElement("div"); + let description = document.createElement("div"); + description.classList.add("description"); + wrapper.classList.add("text", "place_info"); + wrapper.append( + address_kr, + address_eng, + graffiti_size, + graffiti_style, + wall_size, + description + ); + + address_kr.innerHTML = Place_table[areaId].address_kr; + address_eng.innerHTML = Place_table[areaId].address_eng; + graffiti_size.innerHTML = + "Graffiti Size : " + Place_table[areaId].graffiti_size; + graffiti_style.innerHTML = + "Graffiti Style : " + Place_table[areaId].graffiti_style; + wall_size.innerHTML = + "Wall Size : " + Place_table[areaId].wall_size + "

"; + description.innerHTML = Place_table[areaId].discription; + return wrapper; + } + + createList(areaId) { + let li_elem = document.createElement("li"); + let area_id_elem = document.createElement("div"); + let area_info_elem = document.createElement("div"); + let address_kr_elem = document.createElement("div"); + let address_eng_elem = document.createElement("div"); + + li_elem.setAttribute("id", areaId); + + area_id_elem.classList.add("area_id"); + area_info_elem.classList.add("area_info"); + address_kr_elem.classList.add("address_kr"); + address_eng_elem.classList.add("address_eng"); + + area_id_elem.innerHTML = areaId; + address_kr_elem.innerHTML = Place_table[areaId].address_kr; + address_eng_elem.innerHTML = + Place_table[areaId].address_eng + " Republic of Korea"; + + area_info_elem.append(address_kr_elem, address_eng_elem); + li_elem.append(area_id_elem, area_info_elem); + + this.area_list.appendChild(li_elem); + this.listElements.push(li_elem); + } + change_opacity() { + const texts = this.container.querySelectorAll(".text, .photo1, .photo2"); + const target = this.container.getBoundingClientRect().height / 3; + texts.forEach((text) => { + text.style.opacity = + String(100 - Math.abs(target - text.getBoundingClientRect().top) / 3) + + "%"; + }); } add_listPageEvent() { for (let value of this.listElements) { - value.addEventListener("mouseover", () => { - value.children[0].style.opacity = 1; - value.children[1].style.opacity = 1; - // value.style.paddingTop = "2vh"; - // value.style.paddingBottom = "2vh"; - value.style.background = "#101010"; - // console.log(document.querySelector("#" + value.id + "_2d_map")) - }); - value.addEventListener("mouseout", () => { - value.children[0].style.opacity = 0.5; - value.children[1].style.opacity = 0.5; - // value.style.paddingTop = "1vh"; - // value.style.paddingBottom = "1vh"; - value.style.background = "#000000"; - }); value.addEventListener("click", (event) => { - this.show_palce(event.currentTarget.id); + // this.show_palce(event.currentTarget.id); }); } } - show_palce(current_id) { - this.show.scroll(0, 0); - this.address_kr.innerHTML = Place_table[current_id].address_kr; - this.address_eng.innerHTML = Place_table[current_id].address_eng; - this.graffiti_size.innerHTML = - "Graffiti Size : " + Place_table[current_id].graffiti_size; - this.graffiti_style.innerHTML = - "Graffiti Style : " + Place_table[current_id].graffiti_style; - this.wall_size.innerHTML = - "Wall Size : " + Place_table[current_id].wall_size + "

"; - this.discription.innerHTML = Place_table[current_id].discription; - - this.p01.src = - this.archivePicturesPath + "w320/" + Place_table[current_id].pic2; - - this.p02.src = - this.archivePicturesPath + "w320/" + Place_table[current_id].pic3; - - this.p03.src = - this.archivePicturesPath + "w320/" + Place_table[current_id].pic1; - - this.p01.srcset = ` - ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic2} 320w, - ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic2} 640w, - ${ - this.archivePicturesPath + "w1024/" + Place_table[current_id].pic2 - } 1024w, - `; - - this.p02.srcset = ` - ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic3} 320w, - ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic3} 640w, - ${ - this.archivePicturesPath + "w1024/" + Place_table[current_id].pic3 - } 1024w, - `; - - this.p03.srcset = ` - ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic1} 320w, - ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic1} 640w, - ${ - this.archivePicturesPath + "w1024/" + Place_table[current_id].pic1 - } 1024w, - `; - - this.p01.sizes = - "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; - this.p02.sizes = - "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; - this.p03.sizes = - "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; - } + // show_palce(current_id) { + // // this.show.scroll(0, 0); + // this.address_kr.innerHTML = Place_table[current_id].address_kr; + // this.address_eng.innerHTML = Place_table[current_id].address_eng; + // this.graffiti_size.innerHTML = + // "Graffiti Size : " + Place_table[current_id].graffiti_size; + // this.graffiti_style.innerHTML = + // "Graffiti Style : " + Place_table[current_id].graffiti_style; + // this.wall_size.innerHTML = + // "Wall Size : " + Place_table[current_id].wall_size + "

"; + // this.discription.innerHTML = Place_table[current_id].discription; + + // // this.p01.src = + // // this.archivePicturesPath + "w320/" + Place_table[current_id].pic2; + + // // this.p02.src = + // // this.archivePicturesPath + "w320/" + Place_table[current_id].pic3; + + // // // this.p03.src = + // // // this.archivePicturesPath + "w320/" + Place_table[current_id].pic1; + + // // this.p01.srcset = ` + // // ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic2} 320w, + // // ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic2} 640w, + // // ${ + // // this.archivePicturesPath + "w1024/" + Place_table[current_id].pic2 + // // } 1024w, + // // `; + + // // this.p02.srcset = ` + // // ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic3} 320w, + // // ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic3} 640w, + // // ${ + // // this.archivePicturesPath + "w1024/" + Place_table[current_id].pic3 + // // } 1024w, + // // `; + + // // // this.p03.srcset = ` + // // // ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic1} 320w, + // // // ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic1} 640w, + // // // ${ + // // // this.archivePicturesPath + "w1024/" + Place_table[current_id].pic1 + // // // } 1024w, + // // // `; + + // // this.p01.sizes = + // // "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + // // this.p02.sizes = + // // "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + // // // this.p03.sizes = + // // // "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + // } resize() { const width = this.container.clientWidth;