Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@crotel
crotel committed Mar 16, 2020
1 parent 773d3c2 commit 4ffcbfb
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 35 deletions.
17 changes: 9 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>

<head>
<base href="https://cdn.jsdelivr.net/gh/crotel/crotel.github.io@v0.8.20200314_beta/">
<base href="https://cdn.jsdelivr.net/gh/crotel/crotel.github.io@v0.9.20200314_beta/">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').catch(function(error) {
Expand Down Expand Up @@ -57,12 +57,13 @@ <h1 class="section-title align-center">
<section class="content body" id="content" style="display:none;">
<div class="container align-center">
<div class="container">
<h1>Project Timeline</h1>
<div class="timeline">
<ul>
</ul>
</div>
</div>
<h1>Project Timeline<br></h1>
<span class="des">( <span class="i"> i </span> : click to go if met this mark. )</span>
<div class="timeline">
<ul>
</ul>
</div>
</div>
</div>
</section>
<section once="footers" class="footers" id="footer" style="display:none;">
Expand All @@ -79,4 +80,4 @@ <h1>Project Timeline</h1>
<script src="main.min.js" await></script>
</body>

</html>
</html>
44 changes: 33 additions & 11 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,37 @@
return [year, month, day].join('-');
}
var publishTime = formatDate(json.posts[i].published_at);
var plaintext = json.posts[i].plaintext.replace(/\n+\n/g, '<br><br>');
fgpList.innerHTML += `
<li><div class="content"><h3>${json.posts[i].title}</h3><p>${plaintext}</p></div><div class="point"></div><div class="date"><h4>${publishTime} </h4></div></li>`;
var filterUrl = /((www\.)?[a-zA-Z0-9_]{1,}(\-)?[a-zA-Z0-9_]{1,}\.[a-z]{2,}\b([a-zA-Z0-9@:%_\+.~#?&//=]*)|(www\.)?[a-zA-Z0-9_]{1,}\.[a-z]{2,}\b([a-zA-Z0-9@:%_\+.~#?&//=]*))/g;
var filterTodo = /\?+\?/g;
var filterUpdate = /\++\+/g;
var filterPs = /\!+\!/g;
var preRLB1 = json.posts[i].plaintext.replace(filterTodo, '<span class="todo"></span>');
var preRLB2 = preRLB1.replace(filterUpdate, '<span class="update"></span>');
var preRLB3 = preRLB2.replace(filterPs, '<span class="attention"></span>');
var replaceLineBreak = preRLB3.replace(/\n+\n/g, '<br><br>');
var getTitleUrl = new RegExp(filterUrl);
var plaintext, titleUrl;

function gUrl(){
var r = replaceLineBreak
var m = replaceLineBreak.match(getTitleUrl);
var p = plaintext;
var t = titleUrl;
if (m != null) {
p = r.replace(filterUrl, '');
t = m.toString();
fgpList.innerHTML += `
<li><div class="content"><h3><a href="https://${t}">${json.posts[i].title}<span>i</span></a></h3><p>${p}</p></div><div class="point"></div><div class="date"><h4>${publishTime} </h4></div></li>`;
console.log(p,t);
return;
} else {
p = r;
fgpList.innerHTML += `
<li><div class="content"><h3>${json.posts[i].title}</h3><p>${p}</p></div><div class="point"></div><div class="date"><h4>${publishTime} </h4></div></li>`;
console.log(p);
return;
}
}
gUrl();
}
})
.catch(function (error) {
var p = document.createElement('p');
p.appendChild(
document.createTextNode('Error: ' + error.message)
);
document.body.insertBefore(p, fgpList);
});
})
88 changes: 72 additions & 16 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,21 @@
margin-bottom: 2em;
}

section.content .des {
text-align: center;
color: #7d7d7d;
margin-bottom: 2em;
display: block;
font-size: 0.8em;
}

section.content .des span {
vertical-align: super;
padding: 0 5px;
font-size: 10px;
font-weight: bold;
}

.point {
min-width: 20px;
height: 20px;
Expand All @@ -56,7 +71,7 @@
z-index: 2;
border: 3px #7d7d7d solid;
position: relative;
margin-top: 9px;
margin-top: 10px;
}

.timeline {
Expand All @@ -66,7 +81,7 @@
}

.timeline ul {
padding-inline-start: 0;
padding: 0;
}

.timeline ul li {
Expand Down Expand Up @@ -102,64 +117,105 @@
}

.timeline ul li .date h4 {
background-color: #7d7d7d;
text-align: center;
color: whitesmoke;
font-size: 17px;
border-radius: 50px;
font-size: 0.8em;
}

.timeline ul li .content h3 {
padding: 10px 20px;
background-color: #7d7d7d;
margin-bottom: 0;
text-align: center;
color: white;
}

.timeline ul li .content h3 a {
color: whitesmoke;
}

.timeline ul li .content h3 a span {
vertical-align: super;
padding-left: 5px;
font-size: 0.5em;
}

.timeline ul li .content p {
padding: 10px 20px;
padding: 10px 10px;
background-color: #ffffff;
margin-top: 0;
text-align: left;
border-style: solid;
border-color: #7d7d7d;
}

.timeline ul li .content p span.todo {
margin-right: 5px;
border-width: 2px;
border-radius: 100%;
border-color: #7d7d7d;
border-style: dotted;
width: calc(1em - 4px);
display: inline-block;
height: calc(1em - 4px);
vertical-align: sub;
}

.timeline ul li .content p span.update {
border-radius: 100%;
width: 1em;
display: inline-block;
height: 1em;
vertical-align: sub;
margin-right: 5px;
background-color: #7d7d7d;
}

.timeline ul li .content p span.attention {
display: inline-block;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-bottom: 1em solid #7d7d7d;
margin-right: 5px;
}

.timeline ul li:nth-child(even) {
flex-direction: row-reverse;
}

.timeline ul li:nth-child(odd) .content p {
margin-right: -14.2px;
margin-right: -12px;
border-width: 0 0 2px 2px;
}

.timeline ul li:nth-child(even) .content p {
margin-left: -14.2px;
margin-left: -12px;
border-width: 0 2px 2px 0;
}

.timeline ul li:nth-child(odd) .content h3 {
margin-right: -14.2px;
margin-right: -135px;
border-top-left-radius: 10px;
border-bottom-right-radius: 45px;
border-top-right-radius: 45px;
padding-right: 145px;
}

.timeline ul li:nth-child(even) .content h3 {
margin-left: -14.2px;
margin-left: -135px;
border-top-right-radius: 10px;
border-bottom-left-radius: 45px;
border-top-left-radius: 45px;
padding-left: 145px;
}

.timeline ul li:nth-child(odd) .date h4 {
float: left;
padding: 10px 20px 12px 40px;
margin: 0 0 0 -35px;
padding: 14px 20px 0 13px;
}

.timeline ul li:nth-child(even) .date h4 {
float: right;
padding: 10px 40px 12px 20px;
margin: 0 -35px 0 0;
padding: 14px 13px 0 20px;
}

.timeline::before {
Expand All @@ -169,4 +225,4 @@
width: 2px;
left: calc(45vw - 1px);
background-color: #7d7d7d;
}
}

0 comments on commit 4ffcbfb

Please sign in to comment.