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

9
build/templates/index.html
View File

@ -1,23 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="/styles/spectre.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="/styles/primop.me.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">
</head>
<html>
<body>
<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>
<app></app>
<footer class="footer">
</footer>
<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>
</html>

17
src/scripts/app.tag
View File

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

8
src/scripts/post.tag
View File

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

2
src/scripts/projects.tag
View File

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

20
src/styles/riotblog.scss
View File

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

2
src/templates/index.html
View File

@ -8,7 +8,7 @@
<html>
<body>
<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>
<app></app>
<footer class="footer">

Write Preview
Loading…
Cancel
Save