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 7 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
Split 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 = {
"title" : title,
"content" : content,
"author" : author
"author" : author,
"type" : "post"
}
print("post was saved %s" % doc)

140
src/scripts/app.tag
View File

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

1
src/scripts/editor.tag
View File

@ -92,7 +92,6 @@ this.defaultPost = {
"author" : ""
};
var self = this;
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>
<div class="text-break">
<div class={"animated " + (this.loading ? "invisible" : "fadeIn")}>
<social
show={!this.loading}
ref="social"
@ -20,6 +21,7 @@
>
</social>
<h4 class="post-title">{ this.title }</h4>
<p class="post-content centered text-break">
<raw
content="{ this.converter.makeHtml(this.content) }"
@ -41,7 +43,6 @@
</div>
</div>
<script>
import './raw.tag';
import './social.tag';
import { default as R } from 'ramda';

12
src/scripts/social.tag
View File

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

21
src/styles/riotblog.scss
View File

@ -7,12 +7,10 @@ $menuWidth: 60px;
.twitter-share-button-rendered {
font-size: 1.5em;
margin: 2px;
}
.fb-share-button {
font-size: 1.5em;
margin: 2px;
}
.social-wrapper {
@ -23,6 +21,17 @@ $menuWidth: 60px;
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 {
border-radius: 5px !important;
border-color: $branding2 !important;
@ -195,15 +204,15 @@ p, h6, h4 {
.content {
margin: auto;
max-width: 70%;
max-width: 80%;
@media (max-width: 1000px) {
max-width: 80%;
max-width: 90%;
}
@media (max-width: 800px) {
max-width: 90%;
max-width: 95%;
}
@media (max-width: 400px) {
max-width: 93%;
max-width: 100%;
}
}

2
src/templates/index.html
View File

@ -9,7 +9,7 @@
<html>
<body>
<section class="text-center nav navbar centered page-top navbar-section">
<h1 class="blog-title">Wes Kerfoot</h1>
<h1 class="blog-title"></h1>
</section>
<app csrf_token="{{ csrf_token() }}"></app>
<footer class="footer">

Write Preview
Loading…
Cancel
Save