wes
/
KettleBlog
1
0
Fork 0
Code Issues Pull Requests 15 Projects Releases Wiki Activity
Browse Source

fix post routing

pull/1/head
wes 8 years ago
parent
36c0b5bb44
commit
aa8d107355
8 changed files with 46 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      build/scripts/riotblog.min.js
  2. 29
      build/styles/riotblog.min.css
  3. 9
      build/templates/index.html
  4. 17
      src/scripts/app.tag
  5. 8
      src/scripts/post.tag
  6. 2
      src/scripts/projects.tag
  7. 20
      src/styles/riotblog.scss
  8. 2
      src/templates/index.html

12
build/scripts/riotblog.min.js
View File

File diff suppressed because one or more lines are too long

29
build/styles/riotblog.min.css
View File

@ -2,17 +2,18 @@
text-align: center; } text-align: center; }
.navigate { .navigate {
width: 70%; width: 20% !important;
margin: auto; } margin-bottom: 25px !important;
margin: auto !important; }
.content-box, .projects-box, .posts-box { .content-box, .projects-box, .posts-box {
display: flex; display: flex !important;
/* defines flexbox */ /* defines flexbox */
flex-direction: column; flex-direction: column !important;
/* top to bottom */ /* top to bottom */
justify-content: space-between; justify-content: space-between !important;
/* first item at start, last at end */ /* first item at start, last at end */
position: relative; } position: relative !important; }
.projects-box { .projects-box {
height: 350px !important; } height: 350px !important; }
@ -34,17 +35,11 @@
max-width: 80%; } } max-width: 80%; } }
.post-content { .post-content {
max-width: 50%; max-width: 100%;
text-align: justify; font-family: 'Open Sans',sans-serif;
font-size: 1.5em; } font-size: 1.4em;
line-height: 1.6em;
@media (max-width: 700px) { color: #3A4145; }
.post-content {
max-width: 70%; } }
@media (max-width: 500px) {
.post-content {
max-width: 90%; } }
.rounded-button { .rounded-button {
border-radius: 13px; } border-radius: 13px; }

9
build/templates/index.html
View File

@ -1,23 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<head> <head>
<link rel="stylesheet" href="/styles/spectre.min.css"> <link rel="stylesheet" href="/styles/primop.me.min.css">
<link rel="stylesheet" href="/styles/riotblog.min.css">
<link rel="stylesheet" href="/styles/projects.min.css">
<link rel="stylesheet" href="/styles/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<html> <html>
<body> <body>
<section class="text-center nav navbar centered page-top navbar-section"> <section class="text-center nav navbar centered page-top navbar-section">
<h1 class="blog-title">WTF</h1> <h1 class="blog-title">Wesley Kerfoot</h1>
</section> </section>
<app></app> <app></app>
<footer class="footer"> <footer class="footer">
</footer> </footer>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script> <script type="text/javascript" src="/scripts/riotblog.min.js"></script>
</body> </body>
</html> </html>

17
src/scripts/app.tag
View File

@ -1,7 +1,7 @@
<app> <app>
<ul class="navigate tab tab-block"> <ul class="navigate tab tab-block">
<li class={"tab-item " + (this.active.posts ? "active" : "")}> <li class={"tab-item " + (this.active.posts ? "active" : "")}>
<a onclick={to("posts")} href="#">Posts</a> <a onclick={to(`posts/${this.state.pid}`)} href="#">Posts</a>
</li> </li>
<li class={"tab-item animated fadeIn " + (this.active.projects ? "active" : "")}> <li class={"tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
<a onclick={to("projects")} href="#">Projects</a> <a onclick={to("projects")} href="#">Projects</a>
@ -52,24 +52,29 @@ function projects() {
self.update(); self.update();
} }
function posts() { function posts(pid) {
self.active.posts = true; self.active.posts = true;
self.state.pid = parseInt(pid, 10);
self.active.projects = false; self.active.projects = false;
self.update(); self.update();
} }
this.route("posts", posts);
this.route("/", posts);
this.route("projects", projects);
to(name) { to(name) {
return (function(e) { return (function(e) {
/* This may or may not be used as an event handler */
if (e !== undefined) {
e.preventDefault(); e.preventDefault();
}
this.route(name); this.route(name);
return; return;
}).bind(this); }).bind(this);
} }
this.route("posts", self.to(`posts/${self.state.pid}`));
this.route("posts/*", posts);
this.route("/", self.to("posts"));
this.route("projects", projects);
this.on("mount", () => { this.on("mount", () => {
route.start(true); route.start(true);
}); });

8
src/scripts/post.tag
View File

@ -30,9 +30,12 @@
import 'whatwg-fetch'; import 'whatwg-fetch';
import { default as R } from 'ramda'; import { default as R } from 'ramda';
import './postcontrols.tag'; import './postcontrols.tag';
import route from 'riot-route';
var self = this; var self = this;
self.route = route;
self.author = ""; self.author = "";
self.title = ""; self.title = "";
self.content = ""; self.content = "";
@ -56,7 +59,7 @@ prev(ev) {
self.update(); self.update();
} }
self.update({"swipe" : !self.swipe}); self.update({"swipe" : !self.swipe});
self.setPost(self.opts.state.pid, "fadeInLeft"); self.setPost(self.opts.state.pid, "fadeIn");
} }
next(ev) { next(ev) {
@ -70,7 +73,7 @@ next(ev) {
self.update(); self.update();
} }
self.update({"swipe" : !self.swipe}); self.update({"swipe" : !self.swipe});
self.setPost(self.opts.state.pid, "fadeInRight"); self.setPost(self.opts.state.pid, "fadeIn");
} }
setPost(pid, transition) { setPost(pid, transition) {
@ -113,6 +116,7 @@ setPost(pid, transition) {
self.prevloading = ""; self.prevloading = "";
self.nextloading = ""; self.nextloading = "";
self.route(`/posts/${self.opts.state.pid}`);
self.update(); self.update();
}); });
} }

2
src/scripts/projects.tag
View File

@ -1,6 +1,6 @@
<projects> <projects>
<div class="projects-box"> <div class="projects-box">
<h3>Projects for { this.username }</h3> <h3>My Projects</h3>
<div class="text-break"> <div class="text-break">
<div if={this.swipe} class={`card animated ${this.transition}`}> <div if={this.swipe} class={`card animated ${this.transition}`}>
<div class="card-header"> <div class="card-header">

20
src/styles/riotblog.scss
View File

@ -43,21 +43,11 @@
} }
.post-content { .post-content {
max-width: 50%; max-width: 100%;
text-align: justify; font-family: 'Open Sans',sans-serif;
font-size: 1.5em; font-size: 1.4em;
} line-height: 1.6em;
color: #3A4145;
@media (max-width: 700px) {
.post-content {
max-width: 70%;
}
}
@media (max-width: 500px) {
.post-content {
max-width: 90%;
}
} }
.rounded-button { .rounded-button {

2
src/templates/index.html
View File

@ -8,7 +8,7 @@
<html> <html>
<body> <body>
<section class="text-center nav navbar centered page-top navbar-section"> <section class="text-center nav navbar centered page-top navbar-section">
<h1 class="blog-title">WTF</h1> <h1 class="blog-title">Wesley Kerfoot</h1>
</section> </section>
<app></app> <app></app>
<footer class="footer"> <footer class="footer">

Write Preview
Loading…
Cancel
Save