From 81139a3b1d8abf77dd7eec11813eb42b9f4e5c23 Mon Sep 17 00:00:00 2001 From: SeeChen Date: Wed, 11 Dec 2024 20:26:38 +0800 Subject: [PATCH] Update --- CascadingStyleSheets/About/about.css | 52 ++++++++++++++++++- CascadingStyleSheets/General/footer.css | 2 +- Data/About/Acknowledgments/AngusTan.json | 16 +++++- JavaScript/About/about.js | 27 +++++++++- JavaScript/Index/index.js | 4 +- Layout/Webpages/About/About.json | 7 ++- .../About/Session/Acknowledgments.json | 18 ++++++- README.md | 18 +++---- 8 files changed, 126 insertions(+), 18 deletions(-) diff --git a/CascadingStyleSheets/About/about.css b/CascadingStyleSheets/About/about.css index 9bdf056..ba5015c 100644 --- a/CascadingStyleSheets/About/about.css +++ b/CascadingStyleSheets/About/about.css @@ -144,7 +144,57 @@ width: 100vw; height: 100dvh; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(255, 255, 255, 0.7); display: none; + + z-index: 998; +} + +#about_ExpandContent.expanded-loading { + + display: initial; + opacity: 0; + + transition: opactiy 0.5s; +} +#about_ExpandContent.expanded { + + opacity: 1; + transition: opacity 0.5s; +} + +#about_ExpandContent #content_acknowledgments { + + width: 100vw; + height: 100dvh; + + overflow: hidden scroll; + + /* filter: invert(1); */ +} +#about_ExpandContent #content_acknowledgments::-webkit-scrollbar { + display: none; +} + +#about_ExpandContent #content_acknowledgments > img:nth-child(1) { + + display: block; + + height: 15em; + text-align: center; + + margin: 10dvh auto 5dvh; + + border-radius: 10em; + border: 0.15em solid #000000; +} + +#about_ExpandContent #content_acknowledgments > p:nth-child(2) { + + color: var(--font-color-title); + font-size: var(--font-size-2_5em); + font-family: var(--fontface-title); + + text-align: center; } diff --git a/CascadingStyleSheets/General/footer.css b/CascadingStyleSheets/General/footer.css index 4570678..cd68af5 100644 --- a/CascadingStyleSheets/General/footer.css +++ b/CascadingStyleSheets/General/footer.css @@ -52,7 +52,7 @@ position: relative; margin: auto; - z-index: 999; + z-index: 888; transition: opacity 2s; } diff --git a/Data/About/Acknowledgments/AngusTan.json b/Data/About/Acknowledgments/AngusTan.json index 9aaa115..14e2323 100644 --- a/Data/About/Acknowledgments/AngusTan.json +++ b/Data/About/Acknowledgments/AngusTan.json @@ -1,3 +1,17 @@ { - "target-page": "https://angustan.com/" + "profile-pictures": "https://avatars.githubusercontent.com/u/59675739?v=4", + "websites": "https://angustan.com/", + "github": "https://github.com/tanvihang", + "gitlab": "none", + "gitee": "none", + "email": "angustanworkspce@gmail.com", + "help_list": { + "layout-bugs-fix": true, + "responsive-design": true, + "animation-enhancements": true, + "crossBrowser-compatibility": true, + "crossDevice-compatibility": true, + "styling-best-practices": true, + "new-features-of-css":true + } } \ No newline at end of file diff --git a/JavaScript/About/about.js b/JavaScript/About/about.js index 201f874..61a6b2e 100644 --- a/JavaScript/About/about.js +++ b/JavaScript/About/about.js @@ -46,9 +46,12 @@ export const SeeChen_AboutPage = { aboutSession.children[2].children.push({ tag: "span", props: { + id: `${aboutSessionList[sessionTitle]["handle"].split("_")[1]}-${aboutSessionChildren["handle"].split("-")[1]}`, class: "session-children", "data-event-handle": aboutSessionChildren["handle"], - "data-target-link": aboutSessionChildren["link"] ? aboutSessionChildren["link"] : null + "data-target-link": aboutSessionChildren["link"] ? aboutSessionChildren["link"] : null, + + "data-original-obj": sessionContent }, lang: "about", children: [sessionContent] @@ -205,7 +208,27 @@ const SeeChen_AboutPage_Acknowledgments = { var targetDetails = `/Data/About/Acknowledgments/${e.target.dataset.eventHandle.split("-")[1]}.json`; targetDetails = await window.myTools.getJson(targetDetails); - console.log(targetDetails); + const template_Acknowledgments = await window.myTools.getJson("/Layout/Webpages/About/Session/Acknowledgments.json"); + const old_Acknowledgmenst = window.myTools.deepCopy(window.myData.about.contentExpand); + + window.myData.about.contentExpand = template_Acknowledgments; + + window.myData.about.contentExpand.children[0].props["src"] = targetDetails["profile-pictures"]; + window.myData.about.contentExpand.children[1].children = [e.target.dataset.originalObj]; + + console.log(window.myData.about.contentExpand); + + window.vDom.Patch( + document.querySelector("#about_ExpandContent"), + window.vDom.Diff( + old_Acknowledgmenst, + window.myData.about.contentExpand + ) + ); + + document.querySelector("#about_ExpandContent").classList.add("expanded-loading"); + await new Promise(r => setTimeout(r, 100)); + document.querySelector("#about_ExpandContent").classList.add("expanded"); document.querySelector("#box_LoadingAnimation").classList.remove("display"); await new Promise(r => setTimeout(r, 600)); diff --git a/JavaScript/Index/index.js b/JavaScript/Index/index.js index ebebded..8cede6c 100644 --- a/JavaScript/Index/index.js +++ b/JavaScript/Index/index.js @@ -92,7 +92,9 @@ window.myData = { about: { OldLayout: {}, - vDomLayout: {} + vDomLayout: {}, + + contentExpand: {} } } diff --git a/Layout/Webpages/About/About.json b/Layout/Webpages/About/About.json index 0e9015a..95ece72 100644 --- a/Layout/Webpages/About/About.json +++ b/Layout/Webpages/About/About.json @@ -17,6 +17,11 @@ "id": "about_ExpandContent" }, "lang": "", - "children": [] + "children": [{ + "tag": "p", + "props": {}, + "lang": "", + "children": [] + }] }] } diff --git a/Layout/Webpages/About/Session/Acknowledgments.json b/Layout/Webpages/About/Session/Acknowledgments.json index 46240f0..87ae5aa 100644 --- a/Layout/Webpages/About/Session/Acknowledgments.json +++ b/Layout/Webpages/About/Session/Acknowledgments.json @@ -1,6 +1,20 @@ { "tag": "div", - "props": {}, + "props": { + "id": "content_acknowledgments" + }, "lang": "", - "children": [] + "children": [{ + "tag": "img", + "props": { + "src": "/favicon.svg" + }, + "lang": "", + "children": [] + }, { + "tag": "p", + "props": {}, + "lang": "about", + "children": [] + }] } \ No newline at end of file diff --git a/README.md b/README.md index 78be37f..33ebadb 100644 --- a/README.md +++ b/README.md @@ -167,50 +167,50 @@ seechen.github.io ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| #### 6.2.2 Responsive Design > Suggestions on creating responsive designs to ensure optimal performance across different devices. ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| -|Eugene Yip|[Websites](https://spevoljy.site/)|[GitHub](https://github.com/EugeneSpevoljy)|[Email](yuyujunjun6633@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| +|Eugene Yip|[Websites](https://spevoljy.site/)|[GitHub](https://github.com/EugeneSpevoljy)|[Email](mailto:yuyujunjun6633@gmail.com)| #### 6.2.3 Animation Enhancements > Enhancements to CSS animations, including optimizations for keyframe animations and transitions. ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| #### 6.2.4 Cross-Browser Compatibility > Suggestions for addressing cross-browser compatibility issues to ensure consistent display across different browsers. ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| #### 6.2.5 Cross-Device Compatibility > Suggestions on designing layouts for cross-device compatibility, ensuring a good user experience on phones, tablets, and desktops. ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| #### 6.2.6 Styling Best Practices > Shared best practices for writing CSS, including naming conventions, performance optimization, and maintainability improvements. ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| #### 6.2.7 New Features of CSS > Introduced the application of new CSS features, ||||| |:---:|:---:|:---:|:---:| -|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](angustanworkspce@gmail.com)| +|Angus Tan|[Websites](https://angustan.com/)|[GitHub](https://github.com/tanvihang)|[Email](mailto:angustanworkspce@gmail.com)| ### 6.3 JavaScript @@ -223,5 +223,5 @@ seechen.github.io ---
-###### *Last Modified by [SeeChen](https://github.com/SeeChen/) @ 03-DEC-2024 21:22 UTC +08:00* +###### *Last Modified by [SeeChen](https://github.com/SeeChen/) @ 11-DEC-2024 07:29 UTC +08:00*
\ No newline at end of file