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

menu stuff

pull/1/head
wes 8 years ago
parent
d6ca37cd65
commit
ef3c56562e
8 changed files with 164 additions and 41 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. 1
      package.json
  2. 35
      src/scripts/app.tag
  3. 6
      src/scripts/post.tag
  4. 6
      src/scripts/riotblog.js
  5. 92
      src/scripts/sidebar.tag
  6. 58
      src/styles/riotblog.scss
  7. 3
      src/templates/index.html
  8. 4
      yarn.lock

1
package.json
View File

@ -39,6 +39,7 @@
"lodash": "^4.17.4", "lodash": "^4.17.4",
"moment": "^2.18.1", "moment": "^2.18.1",
"querystring": "^0.2.0", "querystring": "^0.2.0",
"riotcontrol": "^0.0.3",
"rollup-plugin-json": "^2.1.1", "rollup-plugin-json": "^2.1.1",
"showdown": "^1.6.4", "showdown": "^1.6.4",
"spectre.css": "^0.2.14", "spectre.css": "^0.2.14",

35
src/scripts/app.tag
View File

@ -1,12 +1,18 @@
<app> <app>
<div class="header">
<section style={{"margin-top" : "0px"}} class="text-center nav navbar centered page-top navbar-section">
<h4 class="blog-title">{ currentPage }</h4>
</section>
</div>
<div class="app-body">
<div class=""> <div class="">
<div class=""> <section class="text-center nav navbar centered page-top navbar-section">
<sidebar <sidebar
if={this.active.get("posts")} if={this.active.get("posts")}
name="Category" name="Filter By Category"
items={["Programming", "Books", "Philosophy"]}> items={["Programming", "Books", "Philosophy"]}>
</sidebar> </sidebar>
</section>
<div class=""> <div class="">
<div class="show-md show-sm show-xs navigate-small dropdown dropdown-right"> <div class="show-md show-sm show-xs navigate-small dropdown dropdown-right">
@ -105,12 +111,22 @@ self.cached = fetchCached({
} }
}); });
this.R = R; self.R = R;
this.route = route; self.route = route;
this.riot = riot; self.riot = riot;
this.menuActive = false; self.menuActive = false;
self.currentPage = "";
RiotControl.on("postswitch",
(ev) => {
self.update(
{
"currentPage" : ev.title
})
}
);
this.route.base('#!') self.route.base('#!')
function PostUpdated() { function PostUpdated() {
riot.observable(this); riot.observable(this);
@ -151,7 +167,8 @@ menuOff(ev) {
function activate(page) { function activate(page) {
return function() { return function() {
if (page !== "posts") { if (page !== "posts") {
document.title = `Wes Kerfoot ${page.slice(0,1).toUpperCase()}${page.slice(1,page.length)}`; document.title = `${page.slice(0,1).toUpperCase()}${page.slice(1,page.length)}`;
self.currentPage = `Wes Kerfoot ${document.title}`;
} }
console.log(`activating ${page}`); console.log(`activating ${page}`);
self.active = lens.setActive(self.active, page); self.active = lens.setActive(self.active, page);

6
src/scripts/post.tag
View File

@ -20,8 +20,6 @@
postid={this.opts.state._id} postid={this.opts.state._id}
> >
</social> </social>
<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) }"
@ -125,6 +123,10 @@ updatePost(postcontent) {
self.nextloading = ""; self.nextloading = "";
self.route(`/posts/${self._id}`); self.route(`/posts/${self._id}`);
RiotControl.trigger("postswitch", {"title" : self.title});
self.parent.update();
self.refs.social.updateButton(self._id, self.title); self.refs.social.updateButton(self._id, self.title);
self.one("updated", self.toTop); self.one("updated", self.toTop);

6
src/scripts/riotblog.js
View File

@ -1,4 +1,5 @@
import riot from 'riot'; import riot from 'riot';
import { default as RiotControl } from 'riotcontrol';
import './bbutton.tag'; import './bbutton.tag';
import './post.tag'; import './post.tag';
import './posts.tag'; import './posts.tag';
@ -10,6 +11,10 @@ import { default as promise } from 'es6-promise';
promise.Promise.polyfill() promise.Promise.polyfill()
window.RiotControl = RiotControl;
RiotControl.addStore(new riot.observable());
riot.mount("app"); riot.mount("app");
riot.mount("editor"); riot.mount("editor");
riot.mount("post", riot.mount("post",
@ -17,6 +22,5 @@ riot.mount("post",
"creator" : "author" "creator" : "author"
}); });
riot.mount("decision");
riot.mount("bbutton"); riot.mount("bbutton");
riot.mount("projects"); riot.mount("projects");

92
src/scripts/sidebar.tag
View File

@ -7,36 +7,43 @@
onclick={swipe} onclick={swipe}
> >
<i <i
class="fa fa-bars" class="fa fa-filter"
aria-hidden="true" aria-hidden="true"
> >
</i> </i>
</button> </button>
<div show={this.swiped !== undefined} style={ this.styles() } class={`animated ${this.swiped !== undefined ? (this.swiped ? "slideInLeft" : "slideOutLeft") : "" } container`}> <div
<div style={{"height" : "100%"}} class="columns col-oneline col-gapless"> show={this.swiped !== undefined}
style={ this.styles() }
<div class="panel column col-11"> id="sidebar"
class={`animated ${this.swiped !== undefined ? (this.swiped ? "fadeInLeft" : "fadeOutLeft") : "" } container`}
>
<div
style={{"height" : "100%", "overflow-x" : "hidden"}}
class="columns col-oneline col-gapless"
>
<div style={nobg} class="panel column col-11">
<div class="panel-header"> <div class="panel-header">
<div class="panel-title"> <div class="panel-title">
{ opts.name } { opts.name }
</div> </div>
</div> </div>
<div style={panelStyles} class="panel-body"> <div style={R.merge(panelStyles, nobg)} class="panel-body">
<ul class="menu"> <ul style={nobg} class="menu">
<li class="divider" data-content="LINKS"> <li style={R.merge(nobg, subtitle)} class="divider sidebar-divider" data-content="Categories">
</li> </li>
<li each={item in opts.items} class="menu-item"> <li style={R.merge(menuStyles, nobg)} each={item in opts.items} class="menu-item">
<a <a
class="btn btn-primary menu-button" style={nobg}
class="btn btn-primary sidebar-button"
href="#" href="#"
> >
{ item } { item }
</a> </a>
<yield/> <yield/>
<li class="divider"></li>
</li> </li>
</ul> </ul>
</div> </div>
@ -54,9 +61,15 @@
<script> <script>
import { default as jquery } from 'jquery';
import { default as lodash } from 'lodash'; import { default as lodash } from 'lodash';
import { default as R } from 'ramda';
var self = this; var self = this;
self.R = R;
var background = "rgba(255, 255, 255, 0.95)";
self.open = false; self.open = false;
self.swiped = undefined; self.swiped = undefined;
@ -70,44 +83,77 @@ self.swipe = lodash.debounce(() => {
self.buttonStyles = (() => { self.buttonStyles = (() => {
return { return {
"top": "0", "top": "0"
"overflow-x": "hidden"
}; };
}); });
self.closedButton = (() => { self.closedButton = (() => {
return { return {
"background-color" : "rgba(103, 173, 219, 0.40)", "background-color" : background,
"font-color" : "black", "font-color" : "black",
"height": "50px", "height": "30px",
"width": "50px", "width": "30px",
"font-size" : "40px", "font-size" : "20px",
"position": "fixed", "position": "fixed",
"z-index": "1", "z-index": "1",
"top": "0", "top": "10px",
"left": "0" "left": "10px"
}; };
}); });
self.styles = (() => { self.styles = (() => {
return { return {
"height": "100%", "box-shadow" : "6px 8px 16px -4px rgba(0,0,0,0.75)",
"width": "300px", "-webkit-box-shadow" : "6px 8px 16px -4px rgba(0,0,0,0.75)",
"-moz-box-shadow" : "6px 8px 16px -4px rgba(0,0,0,0.75)",
"height": "80%",
"width": "250px",
"position": "fixed", "position": "fixed",
"z-index": "1", "z-index": "1",
"top": "0", "top": "0",
"left": "0", "left": "0",
"overflow-x": "hidden", "overflow-x": "hidden",
"padding-top": "60px", "padding-top": "60px",
"background-color" : "rgba(103, 173, 219, 0.40)" "border" : "1px solid",
"background-color" : background
}; };
}); });
self.panelStyles = { self.panelStyles = {
"width" : "90%", "width" : "100%",
"height" : "100%", "height" : "100%",
"margin" : "0 auto",
"padding" : "0px 0px 0px 0px"
};
self.menuStyles = {
"width" : "100%",
"margin" : "0 auto" "margin" : "0 auto"
}; };
self.nobg = {
"background-color" : "transparent",
"background" : "none",
"border" : "none",
"box-shadow" : "none"
};
self.subtitle = {
"color" : "#4b93c1",
"width" : "100%"
};
self.one("updated",
() => {
jquery(document).click(function(event) {
if(!jquery(event.target).closest('#sidebar').length) {
console.log("clicked outside of the sidebar");
if (self.open) {
self.swipe();
}
}
});
});
</script> </script>
</sidebar> </sidebar>

58
src/styles/riotblog.scss
View File

@ -1,10 +1,44 @@
$brandingBG: rgba(103, 173, 219, 0.40); $brandingBG: rgba(103, 173, 219, 0.40);
$brandingBG2: rgba(75, 147, 193, 0.65);
$branding: #25658f; $branding: #25658f;
$branding2: #4b93c1; $branding2: #4b93c1;
$branding3: #1b4c6c; $branding3: #1b4c6c;
$menuWidth: 60px; $menuWidth: 60px;
$navbarHeight: 100px;
.blog-title {
text-transform: capitalize;
margin-top: 10px;
max-width: 70%;
margin-left: auto;
margin-right: auto;
@media (max-width: 600px) {
font-size: 1.5em;
}
@media (max-width: 530px) {
font-size: 1.2em;
}
}
.header {
background-color: $brandingBG2;
color: white;
font-weight: 800;
height: 70px;
margin-top: 0px;
padding-top: 0px;
top: 0;
position: fixed;
z-index: 1;
width: 100%;
}
.app-body {
margin-top: 80px;
}
.twitter-share-button-rendered { .twitter-share-button-rendered {
font-size: 1.5em; font-size: 1.5em;
} }
@ -21,6 +55,24 @@ $menuWidth: 60px;
margin-top: 25%; margin-top: 25%;
} }
.sidebar-button {
display: block !important;
margin-top: 0;
border: none;
color: black !important;
text-decoration: none;
&:hover {
background-color: $brandingBG !important;
}
}
.sidebar-divider {
&:after {
background: none !important;
color: $branding3 !important;
}
}
.menu-button { .menu-button {
display: block !important; display: block !important;
margin-top: 0; margin-top: 0;
@ -206,13 +258,13 @@ p, h6, h4 {
margin: auto; margin: auto;
max-width: 80%; max-width: 80%;
@media (max-width: 1000px) { @media (max-width: 1000px) {
max-width: 90%; max-width: 85%;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
max-width: 95%; max-width: 87%;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
max-width: 100%; max-width: 90%;
} }
} }

3
src/templates/index.html
View File

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

4
yarn.lock
View File

@ -1225,6 +1225,10 @@ riot@^3.3.1:
simple-dom "0.3.2" simple-dom "0.3.2"
simple-html-tokenizer "^0.4.1" simple-html-tokenizer "^0.4.1"
riotcontrol@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/riotcontrol/-/riotcontrol-0.0.3.tgz#8b3d7c93002964a331d7f7bbd8490f167eca9eb2"
rollup-plugin-buble@^0.15.0: rollup-plugin-buble@^0.15.0:
version "0.15.0" version "0.15.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-buble/-/rollup-plugin-buble-0.15.0.tgz#83c3e89c7fd2266c7918f41ba3980313519c7fd0" resolved "https://registry.yarnpkg.com/rollup-plugin-buble/-/rollup-plugin-buble-0.15.0.tgz#83c3e89c7fd2266c7918f41ba3980313519c7fd0"

Write Preview
Loading…
Cancel
Save