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

update responsiveness and add side stuff

pull/1/head
wes 8 years ago
parent
65430b3d1f
commit
e5c9703914
8 changed files with 124 additions and 81 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. 3
      src/posts.py
  2. 140
      src/scripts/app.tag
  3. 1
      src/scripts/editor.tag
  4. 23
      src/scripts/menu.tag
  5. 3
      src/scripts/post.tag
  6. 12
      src/scripts/social.tag
  7. 21
      src/styles/riotblog.scss
  8. 2
      src/templates/index.html

3
src/posts.py
View File

@ -27,7 +27,8 @@ class Posts:
doc = { doc = {
"title" : title, "title" : title,
"content" : content, "content" : content,
"author" : author "author" : author,
"type" : "post"
} }
print("post was saved %s" % doc) print("post was saved %s" % doc)

140
src/scripts/app.tag
View File

@ -1,65 +1,81 @@
<app> <app>
<div class="show-md show-sm show-xs navigate-small dropdown dropdown-right"> <div class="container">
<button onclick={this.menuOn} class="mobile-navigate btn btn-link navigate-item dropdown-toggle" tabindex="0"> <div class="columns">
<i class="bar-menu fa fa-bars" aria-hidden="true"></i>
</button> <div class="column hide-xs hide-sm hide-md col-1 col-xl-1 col-lg-2">
<!-- menu component --> <div
<ul data-is="menu"
if={this.menuActive} name="Category"
class="mobile-menu tab tab-block menu"> items={["Programming", "Books", "Philosophy"]}>
<li </div>
each="{page in ['posts', 'projects', 'links', 'about']}" </div>
class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")} <div class="column col-xl-11 col-lg-10 col-md-12 col-sm-12 col-xs-12">
data-is="navtab" <div class="show-md show-sm show-xs navigate-small dropdown dropdown-right">
active={this.parent.active.get(page)} <button onclick={this.menuOn} class="mobile-navigate btn btn-link navigate-item dropdown-toggle" tabindex="0">
to={this.parent.to(page)} <i class="bar-menu fa fa-bars" aria-hidden="true"></i>
title={page} </button>
onclick={this.menuOff} <!-- menu component -->
> <ul
</li> if={this.menuActive}
</ul> class="mobile-menu tab tab-block menu">
</div> <li
<ul class="hide-md hide-sm hide-xs navigate tab tab-block"> each="{page in ['posts', 'projects', 'links', 'about']}"
<li class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
each="{page in ['posts', 'projects', 'links', 'about']}" data-is="navtab"
class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")} active={this.parent.active.get(page)}
data-is="navtab" to={this.parent.to(page)}
active={this.parent.active.get(page)} title={page}
to={this.parent.to(page)} onclick={this.menuOff}
title={page} >
> </li>
</li> </ul>
</ul> </div>
<div class="projects-content"> <ul class="hide-md hide-sm hide-xs navigate tab tab-block">
<loading if={!this.state.loaded}></loading> <li
<projectsview each="{page in ['posts', 'projects', 'links', 'about']}"
class="animated fadeInDown" class={"navigate-tab tab-item animated fadeIn " + (this.parent.active.get(page) ? "active" : "")}
if={this.active.get("projects") && this.state.loaded} data-is="navtab"
state={this.state} active={this.parent.active.get(page)}
ref="projectsview" to={this.parent.to(page)}
> title={page}
</projectsview> >
</div> </li>
<div class="content"> </ul>
<postsview <div class="projects-content">
cached={this.cached} <loading if={!this.state.loaded}></loading>
state={this.state} <projectsview
if={this.active.get("posts")} class="animated fadeInDown"
ref="postsview" if={this.active.get("projects") && this.state.loaded}
> state={this.state}
</postsview> ref="projectsview"
<about >
if={this.active.get("about")} </projectsview>
> </div>
</about>
<links <div class="content">
cached={this.cached} <postsview
state={this.state} cached={this.cached}
if={this.active.get("links")} state={this.state}
> if={this.active.get("posts")}
</links> ref="postsview"
>
</postsview>
<about
if={this.active.get("about")}
>
</about>
<links
cached={this.cached}
state={this.state}
if={this.active.get("links")}
>
</links>
</div>
</div>
</div>
</div> </div>
<script> <script>
import './menu.tag';
import './navtab.tag'; import './navtab.tag';
import './projectsview.tag'; import './projectsview.tag';
import './postsview.tag'; import './postsview.tag';
@ -82,11 +98,7 @@ self.cached = fetchCached({
cache: { cache: {
get: ((k) => { get: ((k) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var result = self.cache[k]; resolve(self.cache[k]);
if (result == undefined) {
resolve(undefined);
}
resolve(result);
}); });
}), }),
set: (k, v) => { self.cache[k] = v; } set: (k, v) => { self.cache[k] = v; }

1
src/scripts/editor.tag
View File

@ -92,7 +92,6 @@ this.defaultPost = {
"author" : "" "author" : ""
}; };
var self = this; var self = this;
currentPost() { currentPost() {

23
src/scripts/menu.tag
View File

@ -0,0 +1,23 @@
<menu>
<div class="dropdown">
<a href="#" class="btn btn-primary menu-button dropdown-toggle" tabindex="0">
{ opts.name }<i class="icon icon-caret"></i>
</a>
<ul class="menu">
<!-- menu header text -->
<li class="divider" data-content="LINKS">
</li>
<!-- menu item -->
<div each={item in opts.items} class="menu-item">
<a
class="btn btn-primary menu-button"
href="#"
>
{ item }
</a>
<yield/>
<li class="divider"></li>
</div>
</ul>
</div>
</menu>

3
src/scripts/post.tag
View File

@ -13,6 +13,7 @@
<loading if={this.loading && this.opts.state.loaded}></loading> <loading if={this.loading && this.opts.state.loaded}></loading>
<div class="text-break"> <div class="text-break">
<div class={"animated " + (this.loading ? "invisible" : "fadeIn")}> <div class={"animated " + (this.loading ? "invisible" : "fadeIn")}>
<social <social
show={!this.loading} show={!this.loading}
ref="social" ref="social"
@ -20,6 +21,7 @@
> >
</social> </social>
<h4 class="post-title">{ this.title }</h4> <h4 class="post-title">{ this.title }</h4>
<p class="post-content centered text-break"> <p class="post-content centered text-break">
<raw <raw
content="{ this.converter.makeHtml(this.content) }" content="{ this.converter.makeHtml(this.content) }"
@ -41,7 +43,6 @@
</div> </div>
</div> </div>
<script> <script>
import './raw.tag'; import './raw.tag';
import './social.tag'; import './social.tag';
import { default as R } from 'ramda'; import { default as R } from 'ramda';

12
src/scripts/social.tag
View File

@ -1,10 +1,8 @@
<social> <social>
<div class="social-wrapper"> <div class="social-wrapper btn-group">
<div class="btn-group"> <div onmouseover={test} data-is="raw" ref="twitter" content={this.tweetHtml}>
<div onmouseover={test} data-is="raw" ref="twitter" content={this.tweetHtml}> </div>
</div> <div onmouseover={test} data-is="raw" ref="facebook" content={this.fbHtml}>
<div onmouseover={test} data-is="raw" ref="facebook" content={this.fbHtml}>
</div>
</div> </div>
</div> </div>
<script> <script>
@ -38,7 +36,7 @@ self.on("updated", () => {
window.twttr.widgets.load(self.refs.twitter.root); window.twttr.widgets.load(self.refs.twitter.root);
} }
if (FB !== undefined) { if (FB !== undefined && FB.XFBML !== undefined) {
FB.XFBML.parse(self.refs.facebook.root); FB.XFBML.parse(self.refs.facebook.root);
} }
self.old_id = self._id; self.old_id = self._id;

21
src/styles/riotblog.scss
View File

@ -7,12 +7,10 @@ $menuWidth: 60px;
.twitter-share-button-rendered { .twitter-share-button-rendered {
font-size: 1.5em; font-size: 1.5em;
margin: 2px;
} }
.fb-share-button { .fb-share-button {
font-size: 1.5em; font-size: 1.5em;
margin: 2px;
} }
.social-wrapper { .social-wrapper {
@ -23,6 +21,17 @@ $menuWidth: 60px;
margin-top: 25%; margin-top: 25%;
} }
.menu-button {
display: block !important;
margin-top: 0;
text-decoration: none;
color: $branding !important;
background-color: white !important;
&:hover {
background-color: $brandingBG !important;
}
}
.branded, button { .branded, button {
border-radius: 5px !important; border-radius: 5px !important;
border-color: $branding2 !important; border-color: $branding2 !important;
@ -195,15 +204,15 @@ p, h6, h4 {
.content { .content {
margin: auto; margin: auto;
max-width: 70%; max-width: 80%;
@media (max-width: 1000px) { @media (max-width: 1000px) {
max-width: 80%; max-width: 90%;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
max-width: 90%; max-width: 95%;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
max-width: 93%; max-width: 100%;
} }
} }

2
src/templates/index.html
View File

@ -9,7 +9,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">Wes Kerfoot</h1> <h1 class="blog-title"></h1>
</section> </section>
<app csrf_token="{{ csrf_token() }}"></app> <app csrf_token="{{ csrf_token() }}"></app>
<footer class="footer"> <footer class="footer">

Write Preview
Loading…
Cancel
Save