dfx.sk/dfx-jekyll-mdl
1
0
Fork 0
Code Issues Releases Activity

remove the pagination, this is not ready

Browse source
This commit is contained in:
Oscar Cortez 2015-07-19 12:09:16 -06:00
commit 14854cca0a
14 changed files with 294 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

17
CHANGELOG.md Normal file
View file

@ -0,0 +1,17 @@
# (July 17, 2015)
* add validation for the layout type
* Make this dinamic
* fix with autors section
* Add dropdown menu for share options
* Fix error with the dropdown menu
* Add the layout config
* Add new docs and some info
* Create highlight post layout
* New Header Type
* fixed footer layout
* improve new layout for post list
* adding MDL html structure
* add material desing lite library
* Setup the jekyll project
* Initial commit

76
CONTRIBUTING.md Normal file
View file

@ -0,0 +1,76 @@
# Contributing to jekyll-mdl
:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
The following is a set of guidelines for contributing to jekyll-mdl.
These are just guidelines, not rules, use your best judgment and feel free to
propose changes to this document in a pull request.
## Submitting Issues
* You can create an issue [here](https://github.com/gdg-managua/jekyll-mdl/issues/new),
and include as many details as possible with your report.
* Include the version of Jekyll you are using, the OS and the browser version and name.
* Include screenshots and animated GIFs whenever possible; they are immensely
helpful.
* Include the behavior you expected and other places you've seen that behavior
such as Emacs, vi, Xcode, etc.
* Check the web console for errors to include. If you can reproduce the error, use this approach to get the
full stack trace and include it in the issue.
* Perform a [cursory search](https://github.com/gdg-managua/jekyll-mdl/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+)
to see if a similar issue has already been submitted.
* Please setup a [profile picture](https://help.github.com/articles/how-do-i-set-up-my-profile-picture)
to make yourself recognizable and so we can all get to know each other better.
## Pull Requests
* Include screenshots and animated GIFs in your pull request whenever possible.
* Follow the [Material Design](https://www.google.com/design/spec/material-design/introduction.html) styleguides.
* End files with a newline.
* Please open an issue and reference this with your pull request
* See the [pull request guide](#pull-request-and-issue-styleguide)
## Git Commit Messages
* Use the present tense ("Add feature" not "Added feature")
* Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
* Limit the first line to 72 characters or less
* Reference issues and pull requests liberally
* Consider starting the commit message with an applicable emoji:
* :art: `:art:` when improving the format/structure of the code
* :racehorse: `:racehorse:` when improving performance
* :non-potable_water: `:non-potable_water:` when plugging memory leaks
* :memo: `:memo:` when writing docs
* :penguin: `:penguin:` when fixing something on Linux
* :apple: `:apple:` when fixing something on Mac OS
* :checkered_flag: `:checkered_flag:` when fixing something on Windows
* :bug: `:bug:` when fixing a bug
* :fire: `:fire:` when removing code or files
* :white_check_mark: `:white_check_mark:` when adding tests
* :lock: `:lock:` when dealing with security
* :arrow_up: `:arrow_up:` when upgrading dependencies
* :arrow_down: `:arrow_down:` when downgrading dependencies
* :shirt: `:shirt:` when removing linter warnings
## Pull request and Issue Styleguide
```
### DESCRIPTION
The jekyll-mdl exploded my browser, some performance errors appear.
### Trace
Here is the stack trace.
### STEPS
1. Make a bomb.
2. Activate the bomb.
3. Place the bomb near of your browser.
4. RUN!.
5. The browser exploded.
### EXPECTED
The jekyll-mdl dont exploded my browser.
### REALITY
The jekyll-mdl exploded my browser.
```

19
History.md Normal file
View file

@ -0,0 +1,19 @@
0.0.1 / 2015-07-17
==================
* add validation for the layout type
* Make this dinamic
* fix with autors section
* Add dropdown menu for share options
* Fix error with the dropdown menu
* Add the layout config
* Add new docs and some info
* Create highlight post layout
* New Header Type
* fixed footer layout
* improve new layout for post list
* adding MDL html structure
* add material desing lite library
* Setup the jekyll project
* Initial commit

50
README.md
View file

@ -1,2 +1,50 @@
# jekyll-mdl
A Jekyll theme based in Google Material Design Lite library.
> A Jekyll theme based in Google Material Design Lite library.
## Post Configs
All the post, require an image and maybe an author, the image are used in the cards and the autor used for the footer in the cards. For use the images and author, just add a new key in the post config, something like this:
---
layout: post
title: "Welcome to jekyll-mdl"
date: 2015-07-11 11:34:20
categories: jekyll
image: http://www.wchs4pets.org/wp-content/uploads/2015/03/cat_1-jpg.jpg
author: Google Developers Group Managua
---
## Layout Configs
You can setup 4 types of layout
- Fixed Nav + Simple Card Grid
- Fixed Nav + Highlight Post + Card Grid
- Drawer Nav + Simple Card Grid
- Drawer Nav + Highlight Post + Card Grid
For use this in the [_config.yml](https://github.com/gdg-managua/jekyll-mdl/blob/master/_config.yml) select the type of layout, rebuild the website and voilà :smile:
## Contributing
If you want to contribute to this project, please read the [CONTRIBUTING](https://github.com/gdg-managua/jekyll-mdl/blob/master/CONTRIBUTING.md) file and perform the following steps
# Fork this repository
# Clone your fork
jekyll serve --watch
git checkout -b feature_branch
# Implement your feature and tests
git add . && git commit
git push -u origin feature_branch
# Send a pull request for your feature branch
## Team
[![Oscar Cortez](https://avatars.githubusercontent.com/u/2553459?v=3&s=100)](http://github.com/oscarmcm) | [![Byron Corrales](https://avatars.githubusercontent.com/u/99616?v=3&s=100)](https://github.com/byroncorrales)
---|---
[Oscar Cortez](http://github.com/oscarmcm) | [Byron Corrales](https://github.com/byroncorrales)
## License
Licensed under the Apache 2.0 license.
See the [LICENSE](https://github.com/gdg-managua/jekyll-mdl/blob/master/LICENSE.md) file for more details.
Copyright © 2015 [Google Developers Group Managua](http://www.gdgmanagua.org).

5
_config.yml
View file

@ -11,8 +11,9 @@ twitter_username: jekyllrb
github_username: jekyll
# Layout settings
header_type: fixed
post_type: highlight
header_type: default # values [ drawer, default ]
post_type: default # values [ highlight, default ]
pagination_type: default # values [ ops, default ]
# Build settings
markdown: kramdown

4
_includes/header.html
View file

@ -23,11 +23,11 @@
</div>
</div>
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
<button class="mdl-button mdl-js-button mdl-button--icon" id="menu-lower-left">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu-lower-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>

5
_includes/header_fixed.html
View file

@ -12,12 +12,11 @@
id="fixed-header-drawer-exp" />
</div>
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
<button class="mdl-button mdl-js-button mdl-button--icon" id="fixed-menu-lower-left">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left">
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="fixed-menu-lower-left">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>

21
_includes/highlight_post.html
View file

@ -1,26 +1,25 @@
{% assign post = site.posts.first %}
<div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white" style="">
<i class="material-icons">play_circle_filled</i>
</header>
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card__supporting-text">
<h4>Features</h4>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
<h4>{{ post.title }}</h4>
{{ post.excerpt }}
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
<a href="{{ post.url | prepend: site.baseurl }}" class="mdl-button">Read More</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn1">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn-high">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn1">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high">
<li class="mdl-menu__item">Facebook</li>
<li class="mdl-menu__item">Twitter</li>
<li class="mdl-menu__item">Google+</li>
</ul>
</div>

4
_layouts/default.html
View file

@ -26,7 +26,9 @@
</div>
<!-- Material Design Lite js Library -->
<script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
{% if site.pagination_type == 'ops' %}
<script rel="javascript" src="{{ "/js/site.js" | prepend: site.baseurl }}"></script>
{% endif %}
</body>
</html>

27
_layouts/post.html
View file

@ -1,15 +1,18 @@
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
<p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
</header>
<article class="post-content">
{{ content }}
</article>
</div>
<div class="post-ribbon"></div>
<main class="post-main mdl-layout__content">
<div class="post-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="post-section mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<div class="mdl-color-text--grey-500">
{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}
</div>
<h3>{{ page.title }}</h3>
<article class="post-content">
<p>{{ content }}</p>
</article>
</div>
</div>
</main>

4
_sass/_layout.scss
View file

@ -53,10 +53,6 @@
-ms-flex-pack: center;
justify-content: center;
min-height: 200px;
.material-icons {
font-size: 3rem;
}
}
button {

29
_sass/_post.scss Normal file
View file

@ -0,0 +1,29 @@
.post-ribbon {
width: 100%;
height: 40vh;
background-color: #3F51B5;
flex-shrink: 0;
}
.post-main {
margin-top: -35vh;
flex-shrink: 0;
.post-container {
max-width: 1600px;
width: calc(100% - 16px);
margin: 0 auto;
}
.post-section {
border-radius: 2px;
padding: 80px 56px;
margin-bottom: 80px;
h3 {
margin-top: 48px;
}
}
}

3
css/main.scss
View file

@ -48,5 +48,6 @@ $on-laptop: 800px;
@import
"base",
"layout",
"syntax-highlighting"
"syntax-highlighting",
"post"
;

90
index.html
View file

@ -1,19 +1,12 @@
---
layout: default
---
{% if site.post_type == 'highlight' %}
{% if paginator.page %}
{% assign offset = paginator.page | minus:1 | times:paginator.per_page %}
{% assign currentPage = paginator.page %}
{% else %}
{% assign offset = 0 %}
{% assign currentPage = 1 %}
{% endif %}
<div class="mdl-grid" id="js-post-container" data-page="{{ currentPage }}" data-total-pages="{{ paginator.total_pages }}">
{% for post in site.posts limit:site.paginate offset:offset %}
<article class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="mdl-card__title">
<div class="mdl-grid">
{% for post in site.posts offset:1 %}
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div>
<div class="mdl-card__supporting-text">
@ -26,21 +19,72 @@ layout: default
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{{ post.date | date: "%b %-d, %Y" }}
</a>
{% if post.author %}
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{{ post.author }}
</a>
{% endif %}
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{% for cat in post.categories %}{{ cat }}, {% endfor %}
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
<i class="material-icons">share</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="post-{{ post.id }}">
<li class="mdl-menu__item">Facebook</li>
<li class="mdl-menu__item">Twitter</li>
<li class="mdl-menu__item">Google+</li>
</ul>
</div>
</article>
</div>
{% endfor %}
{% assign postCount = site.posts | size %}
{% assign postsCovered = site.paginate | plus:offset %}
{% if postsCovered < postCount %}
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="js-load-more">
<i class="material-icons">add</i>
</button>
{% endif %}
<script rel="javascript" src="{{ "/js/site.js" | prepend: site.baseurl }}"></script>
</div>
{% else %}
<div class="mdl-grid">
{% for post in site.posts %}
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div>
<div class="mdl-card__supporting-text">
{{ post.excerpt }}
</div>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='{{ post.url | prepend: site.baseurl }}'">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{{ post.date | date: "%b %-d, %Y" }}
</a>
{% if post.author %}
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{{ post.author }}
</a>
{% endif %}
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
{% for cat in post.categories %}{{ cat }}, {% endfor %}
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
<i class="material-icons">share</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="post-{{ post.id }}">
<li class="mdl-menu__item">Facebook</li>
<li class="mdl-menu__item">Twitter</li>
<li class="mdl-menu__item">Google+</li>
</ul>
</div>
</div>
{% endfor %}
</div>
{% endif %}