Misc Fix

KawaiiZapic · Oct 1, 2021 · 7a94b9e · 7a94b9e
1 parent 47fb611
commit 7a94b9e
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <title>Present</title>
  <meta name="keywords" content=""/>
- <meta name="description" content="" />
+ <meta name="description" content=""/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -59,7 +59,8 @@
  <div class="link-icon"><i class="fa fa-github"></i></div>
  <div>Github</div>
  </a>
- </div><div class="self-content article-container">
+ </div>
+ <div class="self-content article-container">
  <div class="article-content"></div>
  <div class="article-loading flex-center">
  <svg style="visibility: hidden" class="loading-indicator" width="128" height="128">
@@ -71,12 +72,13 @@
  </svg>
  <span class="text-center">Loading...</span>
  </div>
- </div><div class="self-content">
+ </div>
+ <div class="self-content">
  <div class="info-container">
  This is a simple homepage theme by Zapic.
  </div>
 
- </div>
+  </div>
  </div>
  <div class="self-switcher">
  <div class="switcher-btn text-center" id="switcher-btn-1">
@@ -96,7 +98,7 @@
  </div>
  <div class="footer-container text-center">© 2020 By <a href="#">Present</a></div>
  </div>
- </body>
+</body>
 
 <link rel="stylesheet" href="static/css/main.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ClassicOldSong/typinyin.js@0.1.3/typinyin.css">
@@ -111,7 +113,7 @@
  var bgArr = [{
  "url": "static/img/background-1.jpg",
  "thumb": "static/img/background-1-thumb.jpg"
- },{
+ }, {
  "url": "static/img/background-2.jpg",
  "thumb": "static/img/background-2-thumb.jpg"
  }];
@@ -120,39 +122,15 @@
  ch: ["This is an example."],
  py: ["This is an example."],
  }, {
- ch: ["这是","一个","示例","."],
- py: ["zhe'shi","yi'ge","shi'li","."],
+ ch: ["这是", "一个", "示例", "."],
+ py: ["zhe'shi", "yi'ge", "shi'li", "."],
  }
  ];
 
  Init(feedType, feedPath, bgArr, senArr);
  })();
 </script>
 <style>
- .content-container[data-selection="1"] .self-wrapper {
- transform: translateX(0%);
- }
- .content-container[data-selection="1"] .btn-select-indicator {
- transform: translateX(0%);
- }
- .content-container[data-selection="2"] .self-wrapper {
- transform: translateX(-33.33%);
- }
- .content-container[data-selection="2"] .btn-select-indicator {
- transform: translateX(100%);
- }
- .content-container[data-selection="3"] .self-wrapper {
- transform: translateX(-66.66%);
- }
- .content-container[data-selection="3"] .btn-select-indicator {
- transform: translateX(200%);
- }
- .content-container[data-selection="1"] #switcher-btn-1 .btn-icon .fa,.content-container[data-selection="2"] #switcher-btn-2 .btn-icon .fa,.content-container[data-selection="3"] #switcher-btn-3 .btn-icon .fa{
- font-size: 2.5rem;
- transform: translateY(.1em);
- }
- .content-container[data-selection="1"] #switcher-btn-1 .btn-text, .content-container[data-selection="2"] #switcher-btn-2 .btn-text, .content-container[data-selection="3"] #switcher-btn-3 .btn-text {
- opacity: 0;
- }
+
 </style>
 </html>
diff --git a/static/css/loading.css b/static/css/loading.css
@@ -95,6 +95,7 @@
 .self-avatar {
  width: 100vw;
  height: 100vh;
+ overflow: hidden;
  position: absolute;
  min-height: 270px;
 }

diff --git a/static/css/main.css b/static/css/main.css
@@ -142,6 +142,39 @@ body.locked, .content-container, .self-wrapper, .article-title {
  box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, .5);
 }
 
+.content-container[data-selection="1"] .self-wrapper {
+ transform: translateX(0%);
+}
+
+.content-container[data-selection="1"] .btn-select-indicator {
+ transform: translateX(0%);
+}
+
+.content-container[data-selection="2"] .self-wrapper {
+ transform: translateX(-33.33%);
+}
+
+.content-container[data-selection="2"] .btn-select-indicator {
+ transform: translateX(100%);
+}
+
+.content-container[data-selection="3"] .self-wrapper {
+ transform: translateX(-66.66%);
+}
+
+.content-container[data-selection="3"] .btn-select-indicator {
+ transform: translateX(200%);
+}
+
+.content-container[data-selection="1"] #switcher-btn-1 .btn-icon .fa, .content-container[data-selection="2"] #switcher-btn-2 .btn-icon .fa, .content-container[data-selection="3"] #switcher-btn-3 .btn-icon .fa {
+ font-size: 2.5rem;
+ transform: translateY(.1em);
+}
+
+.content-container[data-selection="1"] #switcher-btn-1 .btn-text, .content-container[data-selection="2"] #switcher-btn-2 .btn-text, .content-container[data-selection="3"] #switcher-btn-3 .btn-text {
+ opacity: 0;
+}
+
 .content-layer {
  width: 50vw;
  height: 100vh;
@@ -170,7 +203,7 @@ body.locked, .content-container, .self-wrapper, .article-title {
 .footer-container {
  left: 0;
  z-index: 0;
- width: 100%;
+ width: 100vw;
  bottom: 8px;
  color: white;
  position: absolute;
@@ -298,6 +331,7 @@ body.locked, .content-container, .self-wrapper, .article-title {
 
 .self-wrapper {
  width: 300%;
+ touch-action: pan-x;
  position: absolute;
  white-space: nowrap;
  height: calc(100% - 64px);

diff --git a/static/js/main.js b/static/js/main.js
@@ -23,7 +23,7 @@ function Init(feedType, feedPath, bgArr, senArr) {
  return document.querySelectorAll(selector);
  }
  function dateParser (str){
- var reg = new RegExp("([0-9]{2}) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec){1} ([0-9]{4})");
+ var reg = new RegExp("([0-9]{2}) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-9]{4})");
  reg = reg.exec(str);
  if(!reg){return false;}
  var monthMap = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
@@ -59,9 +59,10 @@ function Init(feedType, feedPath, bgArr, senArr) {
  setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
  return;
  }
+ var data = [];
  try {
  if(feedType === "json"){
- var data = JSON.parse(feed.responseText);
+ data = JSON.parse(feed.responseText);
  if (!data || data.status === -1) {
  throw new Error();
  }
@@ -71,7 +72,7 @@ function Init(feedType, feedPath, bgArr, senArr) {
  if(!xml){
  throw new Error();
  }
- var data = [];
+ data = [];
  if(xml.querySelector("rss") != null){
  xml.querySelectorAll("channel item").forEach(function (v,i){
  if(i > 7){ return; }
@@ -195,7 +196,7 @@ function Init(feedType, feedPath, bgArr, senArr) {
  tMovement.acc = x / time;
  handleTouchMove(evt.pageX - eMove);
  });
- qSlt(".self-wrapper").addEventListener("touchcancel",function (e){
+ qSlt(".self-wrapper").addEventListener("touchcancel",function (){
  tid = -1;
  selfWrapper.style.transition = "";
  selfWrapper.style.transform = "";
@@ -205,7 +206,7 @@ function Init(feedType, feedPath, bgArr, senArr) {
  qSlt(".self-wrapper").addEventListener("touchend",function (e){
  tid = -1;
  var evt = e.changedTouches[0];
- if(Math.abs(tMovement.acc) > 0.5 || Math.abs(eMove - evt.pageX) > selfWrapper.offsetWidth * 0.2) {
+ if(Math.abs(tMovement.acc) > 0.05 || Math.abs(eMove - evt.pageX) > selfWrapper.offsetWidth * 0.1) {
  var sel = parseInt(contentCon.getAttribute("data-selection"))
  if(tMovement.acc > 0 && sel < 3) {
  contentCon.setAttribute("data-selection", sel + 1);
@@ -219,4 +220,4 @@ function Init(feedType, feedPath, bgArr, senArr) {
  selInd.style.transition = "";
  });
 }
-console.log("\n %c Present %c By Zapic\n\n", "color: #fff; background: #fb7299; padding:5px 0;", "background: #efefef; padding:5px 0;");
+console.log("\n %c Present %c By Zapic \n\n", "color: #fff; background: #fb7299; padding:5px 0;", "background: #efefef; padding:5px 0;");