feat: archive list page style update1

Jian-Nam · Dec 9, 2024 · 8360fb0 · 8360fb0
1 parent 8360820
commit 8360fb0
Show file tree

Hide file tree

Showing 4 changed files with 276 additions and 186 deletions.
diff --git 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
@@ -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
@@ -14,7 +14,7 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <div id="list_and_show">
+    <!-- <div id="list_and_show">
       <div id="show" class="text">
         <div id="Place_info">
           <div id="address_kr"></div>
@@ -23,19 +23,15 @@
           <div id="graffiti_style"></div>
           <div id="wall_size"></div>
           <div id="discription"></div>
-        </div>
+        </div> -->
 
-        <div id="Place_photo">
-          <img id="p01" />
-          <img id="p02" />
-          <img id="p03" />
-        </div>
-      </div>
+    <div class="container"><div class="dummy"></div>
+    <!-- </div> -->
 
-      <div id="area_list_container">
-        <ul id="area_list" class="text"></ul>
-      </div>
-      <div id="canvus_container"></div>
+    <div id="area_list_container">
+      <ul id="area_list" class="text"></ul>
     </div>
+    <div id="canvus_container"></div>
+    <!-- </div> -->
   </body>
 </html>