Skip to content

Commit

Permalink
Update Travel Pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeeChen
SeeChen committed Nov 15, 2024
1 parent a95daca commit e58190f
Show file tree
Hide file tree
Showing 5 changed files with 512 additions and 168 deletions.
175 changes: 148 additions & 27 deletions CascadingStyleSheets/Travel/travel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,22 @@
--travel-ContentExpand-width: 1em;
--travel-ContentExpand-bottom: calc(2.2 * var(--travel-Traveled-List-font-size));

--travel-ContentExpand-Expanded-btn-right: 0;
--travel-ContentExpand-Expanded-btn-bottom: 0.25em;
--travel-ContentExpand-Expanded-TraveledList-top: 0.5em;

--travel-btn-MapsBack: 5em;

--travel-before-scale-top: 0;
--travel-before-scale-left: 0;
--travel-before-scale-width: 50vw;
--travel-before-scale-height: 50vh;

--travel-Country-Story-height: 50vh;

--travel-Story-Country-Name-font-size: var(--font-size-5em);
--travel-Story-Country-Name-top: 0.25em;

--travel-Story-Country-Desc-margin: 1em;

--travel-Story-Country-img-left: auto;
--travel-Story-Country-img-right: 0;
}

@media screen and (max-width: 750px) {
Expand All @@ -52,11 +58,32 @@
--travel-ContentExpand-width: 1em;
--travel-ContentExpand-bottom: calc(2.1 * var(--travel-Traveled-List-font-size));

--travel-ContentExpand-Expanded-btn-right: calc(100vw / 3);
--travel-ContentExpand-Expanded-btn-bottom: 0.5em;
--travel-ContentExpand-Expanded-TraveledList-top: 0.01em;

--travel-btn-MapsBack: 6em;

--travel-Country-Story-height: 30vh;

--travel-Story-Country-Name-font-size: var(--font-size-3em);
--travel-Story-Country-Name-top: 0.4em;

--travel-Story-Country-Desc-margin: 0.5em;

--travel-Story-Country-img-left: 0;
--travel-Story-Country-img-right: 0;
}
}

@keyframes travel_entrance_1 {

from {

transform: translateY(calc(1.5 * var(--home-my-name-margin)));
opacity: 0;
}

to {

transform: rotateY(0);
opacity: 1;
}
}

Expand Down Expand Up @@ -257,41 +284,130 @@
#box_TravelPage #travel_ContentExpand.contentExpand {

transform: rotateX(180deg) scaleX(3);
right: var(--travel-ContentExpand-Expanded-btn-right);
bottom: var(--travel-ContentExpand-Expanded-btn-bottom);

width: calc(100vw / 3);

box-sizing: border-box;

border-top: 0.15em solid #888;
border-bottom: 0.15em solid #888;
border-radius: 0.1em;
}

div:has(> #travel_ContentExpand) {

background: #FFFFFF00;

width: 100vw;
height: calc(100vh - var(--font-size-3em));
height: 99vh;

position: fixed;

top: calc(100vh - 1.1 * var(--font-size-3em));
top: 101vh;

transition: all 1s;
}

div:has(> #travel_ContentExpand.contentExpand) {

background: #FFFFFF80;
top: var(--font-size-3em);
top: 0;
}

div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList {
div:has(> #travel_ContentExpand) #travel_TraveledStory {

height: 90vh;
padding-top: var(--font-size-5em);
padding-bottom: var(--font-size-1em);

box-sizing: border-box;

overflow: hidden scroll;

transition: all 1s;
}

top: var(--travel-ContentExpand-Expanded-TraveledList-top);
div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {
display: none;
}

#traveled_World {
opacity: 1;

display: initial;
transition: 0.75s;
}

#traveled_World.traveled_WorldHide {
opacity: 0;
transition: 0.5s;
}

#travel_TraveledStory .travel_Country_Story {

position: relative;

height: var(--travel-Country-Story-height);
width: 95vw;

margin: auto;
margin-bottom: var(--font-size-1em);

border: 0.15em solid #CCC;

animation: travel_entrance_1 1s linear;
animation-timeline: view(95% 0);

overflow: hidden;

cursor: pointer;
}

#travel_TraveledStory .travel_Country_Story .travel_Story_Country_Name {

position: absolute;

text-shadow: 1px 1px 2px var(--bg-color);

font-family: var(--fontface-title);
font-size: var(--travel-Story-Country-Name-font-size);
color: var(--font-color-title);

top: var(--travel-Story-Country-Name-top);
left: var(--travel-Story-Country-Name-top);
}

#travel_TraveledStory .travel_Country_Story .travel_Story_Country_Desc {

position: absolute;

width: 80%;
text-align: right;

text-shadow: 1px 1px 2px var(--bg-color);

color: var(--font-color-title);
font-size: var(--font-size-normal);
font-family: var(--fontface-art-2);

right: var(--travel-Story-Country-Desc-margin);
bottom: var(--travel-Story-Country-Desc-margin);
}

#travel_TraveledStory .travel_Country_Story img {

position: absolute;

width: 100%;
height: 100%;

object-fit: cover;
object-position: center;

filter: grayscale(0) blur(0);

margin: auto;

transition: filter 0.5s, transform 1s;
}

#travel_TraveledStory .travel_Country_Story:hover img {

filter: grayscale(1) blur(0.15em);

transform: scale(1.1);
}

#box_TravelPage #travel_TraveledList {
Expand All @@ -300,7 +416,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList {

box-sizing: border-box;

position: absolute;
position: fixed;
display: flex;

font-size: var(--travel-Traveled-List-font-size);
Expand All @@ -311,7 +427,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList {
padding: 0 0.25em;
overflow-x: scroll;

top: var(--travel-ContentExpand-Expanded-TraveledList-top);
bottom: 0;

left: 0;
right: 0;
Expand Down Expand Up @@ -339,7 +455,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList {

cursor: pointer;

transition: 0.25s;
transition: all 1s;
}

#box_TravelPage #travel_TraveledList span.span_LoadingToShow {
Expand Down Expand Up @@ -386,12 +502,16 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList {
position: absolute;

left: var(--travel-Traveled-List-Selected-Span-left);;
transition: left 1s;
transition: left 1s, background 1s, color 1s;
}

#box_TravelPage #travel_TraveledList span.areaSelected {

left: 0 !important;

color: var(--bg-color);
background: var(--font-color-normal);

}

#box_TravelPage #travel_TraveledList_title {
Expand Down Expand Up @@ -429,6 +549,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList {
transition: left 1s;

cursor: pointer;
z-index: 15;
}

#travel_btn_MapsBack::before {
Expand Down
34 changes: 33 additions & 1 deletion Data/Travel/TraveledList.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,38 @@
{
"CN": {
"BeiJing": {},
"BeiJing": {
"img": [{
"src": "",
"alt": "",
"city": "_city0_",
"labels": ["_test0_", "_test1_", "_test2_", "_test3_"]
}, {
"src": "",
"alt": "",
"city": "_city1_",
"labels": ["_test0_", "_test2_", "_test4_", "_test6_"]
}, {
"src": "",
"alt": "",
"city": "_city2_",
"labels": ["_test1_", "_test3_", "_test5_", "_test7_"]
}, {
"src": "",
"alt": "",
"city": "_city0_",
"labels": ["_test1_", "_test4_", "_test7_", "_test9_"]
}, {
"src": "",
"alt": "",
"city": "_city1_",
"labels": ["_test2_", "_test1_", "_test4_", "_test6_"]
}, {
"src": "",
"alt": "",
"city": "_city2_",
"labels": ["_test2_", "_test4_", "_test6_", "_test8_"]
}]
},
"ChongQing": {},
"FuJian": {},
"GuangDong": {},
Expand Down
6 changes: 4 additions & 2 deletions JavaScript/Index/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ window.webpages = {
window.myData = {

travel: {
TravelList: {}
TravelList: {},
LabelsMap: {},
CityName: {}
}
}

Expand All @@ -66,7 +68,7 @@ window.onload = async function() {
await SeeChen_TravelPage.init();
SeeChen_TravelPage.registerEvents();

window.webpages.loadingPage.updateProgress(50);
window.webpages.loadingPage.updateProgress(99);

document.title = window.globalValues.translateData.idx[window.globalValues.language]._title_;

Expand Down
Loading

0 comments on commit e58190f

Please sign in to comment.