added responsive layout with groups
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index 9237382..24dd8d7 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -9,51 +9,45 @@
{% endblock %}
{% block content %}
- <div class="layout-wrapper layout-wrapper-background">
- <div class="web-content" id="blog-{{ name }}">
+<div class="span12">
+ <h2>{{ title }}</h2>
- <div class="layout-main">
-
- <h2>{{ title }}</h2>
+ <!-- begin blog content -->
+ <div class="help">By {{ full_name }} on {{ updated }}</div>
+ <br>
+ {{ content_html }}
+ <!-- end blog content -->
- <!-- begin blog content -->
- <div class="help">By {{ full_name }} on {{ updated }}</div>
- <br>
- {{ content_html }}
- <!-- end blog content -->
-
- <hr>
- <h3>Comments</h3><br>
- <div class="blog-comments">
-
- {% if not comment_list %}
- <div class="alert no-comment">
- <p>Be the first one to comment</p>
- </div>
- {% endif %}
-
- {% include 'html/comment.html' %}
- </div>
- <div><button class="btn add-comment">Add Comment</button></div>
- <div style="display: none; margin-top: 10px;"
- id="comment-form" class="well">
- <div class="alert" style="display:none;"></div>
- <form>
- <p>
- <input name="comment_by_fullname" placeholder="Your Name" />
- </p>
- <p>
- <input name="comment_by" placeholder="Your Email Id" />
- </p>
- <p>
- <textarea name="comment" placeholder="Comment" style="width: 300px; height: 120px;"/>
- </textarea>
- </p>
- <p>
- <button class="btn btn-info" id="submit-comment">Submit</button>
- </form>
- </div>
- </div>
+ <hr>
+ <h3>Comments</h3><br>
+ <div class="blog-comments">
+
+ {% if not comment_list %}
+ <div class="alert no-comment">
+ <p>Be the first one to comment</p>
</div>
+ {% endif %}
+
+ {% include 'html/comment.html' %}
</div>
+ <div><button class="btn add-comment">Add Comment</button></div>
+ <div style="display: none; margin-top: 10px;"
+ id="comment-form" class="well">
+ <div class="alert" style="display:none;"></div>
+ <form>
+ <p>
+ <input name="comment_by_fullname" placeholder="Your Name" />
+ </p>
+ <p>
+ <input name="comment_by" placeholder="Your Email Id" />
+ </p>
+ <p>
+ <textarea name="comment" placeholder="Comment" style="width: 300px; height: 120px;"/>
+ </textarea>
+ </p>
+ <p>
+ <button class="btn btn-info" id="submit-comment">Submit</button>
+ </form>
+ </div>
+</div>
{% endblock %}
\ No newline at end of file
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index 02a61ac..a8b73ad 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -7,66 +7,72 @@
{% block body %}
<header>
</header>
- <div id="body_div">
- <div class="navbar-wrapper">
- <div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}"
- style="margin-bottom: 0px;">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="/">{{ brand_html }}</a>
- <ul class="nav">
- {% for page in top_bar_items %}
- {% if not page.parent_label %}
- <li data-label="{{ page.label }}"
- {% if page.child_items %}
- class="dropdown"
- {% endif %}>
- <a href="{{ page.url or '#' }}"
- {% if page.child_items %}
- class="dropdown-toggle"
- onclick="return false;"
- data-toggle="dropdown"
- {% endif %}
- {{ page.target or ''}}>
- {{ page.label }}
- {% if page.child_items %}
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- {% for child in page.child_items %}
- <li data-label="{{ child.label }}">
- <a {% if child.indent %}
- style="padding-left:
- {{(int(child.indent)+1)*15 }}px"
- {% endif %}
- href="{{ child.url }}" {{ child.target or '' }}>
- {{ child.label }}
+ <div class="container">
+ <div class="outer">
+ <div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}"
+ style="margin-bottom: 0px;">
+ <div class="navbar-inner">
+ <a class="brand" href="index">{{ brand_html }}</a>
+ <div class="container">
+ <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="nav-collapse collapse">
+ <ul class="nav">
+ {% for page in top_bar_items %}
+ {% if not page.parent_label %}
+ <li data-label="{{ page.label }}"
+ {% if page.child_items %}
+ class="dropdown"
+ {% endif %}>
+ <a href="{{ page.url or '#' }}"
+ {% if page.child_items %}
+ class="dropdown-toggle"
+ onclick="return false;"
+ data-toggle="dropdown"
+ {% endif %}
+ {{ page.target or ''}}>
+ {{ page.label }}
+ {% if page.child_items %}
+ <b class="caret"></b>
</a>
- </li>
+ <ul class="dropdown-menu">
+ {% for child in page.child_items %}
+ <li data-label="{{ child.label }}">
+ <a {% if child.indent %}
+ style="padding-left:
+ {{(int(child.indent)+1)*15 }}px"
+ {% endif %}
+ href="{{ child.url }}" {{ child.target or '' }}>
+ {{ child.label }}
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ </a>
+ {% endif %}
+ </li>
+ {% endif %}
{% endfor %}
- </ul>
- {% else %}
- </a>
- {% endif %}
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- <img src="lib/images/ui/spinner.gif" id="spinner"/>
- <ul class="nav pull-right">
- <li id="login-topbar-item"><a href="login">Login</a></li>
- </ul>
+ </ul>
+ <ul class="nav pull-right">
+ <li id="login-topbar-item"><a href="login">Login</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
</div>
+ <script>$('.dropdown-toggle').dropdown()</script>
+ <div class="content row" id="page-{{ name }}" style="display: block;">
+ {% block content %}
+ {% endblock %}
</div>
</div>
- </div>
- <script>$('.dropdown-toggle').dropdown()</script>
- <div class="content" id="page-{{ name }}" style="display: block;">
- {% block content %}
- {% endblock %}
- </div>
</div>
- <footer><div class="web-footer">
+ <footer class="container"><div class="web-footer">
{% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
<div class="social-icons" style="">
<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index 2b2ea50..0b026e7 100644
--- a/website/templates/html/product_breadcrumbs.html
+++ b/website/templates/html/product_breadcrumbs.html
@@ -1,8 +1,12 @@
{% if obj.parent_groups and len(obj.parent_groups) > 1 %}
-<ul class="breadcrumb">
- {% for ig in obj.parent_groups[:-1] %}
- <li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li>
- {% endfor %}
- <li class="active">{{ obj.parent_groups[-1].name }}</li>
-</ul>
+<div class="span12">
+ <div class="clearfix">
+ <ul class="breadcrumb">
+ {% for ig in obj.parent_groups[:-1] %}
+ <li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li>
+ {% endfor %}
+ <li class="active">{{ obj.parent_groups[-1].name }}</li>
+ </ul>
+ </div>
+</div>
{% endif %}
\ No newline at end of file
diff --git a/website/templates/html/product_group.html b/website/templates/html/product_group.html
index 1dd853f..2e80c43 100644
--- a/website/templates/html/product_group.html
+++ b/website/templates/html/product_group.html
@@ -1,44 +1,40 @@
{% extends "html/page.html" %}
{% block content %}
-
-<div class="layout-wrapper layout-wrapper-background">
- <div class="web-content" id="content-product_group">
- <div class="layout-main" style="padding: 30px;">
- {% include 'html/product_search_box.html' %}
- {% include 'html/product_breadcrumbs.html' %}
- {% if slideshow %}<!-- slideshow -->
- {% include "html/slideshow.html" %}
- {% endif %}
- {% if description %}<!-- description -->
- <div>{{ description or ""}}</div>
- {% else %}
- <h3>{{ name }}</h3>
- {% endif %}
- {% if sub_groups %}
- <div class="well well-small">
- <div class="container-fluid" style="padding-left: 0px; margin-left:-10px; line-height: 2em;">
- {% for d in sub_groups %}
- <div class="span4">
- <a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
- </div>
- {% endfor %}
- </div>
- </div>
- {% endif %}
- {% if items %}
- <div id="search-list">
- <table class="table">
- {% for item in items %}
- {{ item }}
- {% endfor %}
- </table>
- </div>
- {% else %}
- <div class="alert">No items listed.</div>
- {% endif %}
+{% include 'html/product_search_box.html' %}
+{% include 'html/product_breadcrumbs.html' %}
+<div class="span12">
+ {% if slideshow %}<!-- slideshow -->
+ {% include "html/slideshow.html" %}
+ {% endif %}
+ {% if description %}<!-- description -->
+ <div>{{ description or ""}}</div>
+ {% else %}
+ <h3>{{ name }}</h3>
+ {% endif %}
+ {% if sub_groups %}
+ <hr />
+ <div class="row">
+ {% for d in sub_groups %}
+ <div class="span4">
+ <a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
</div>
+ {% endfor %}
</div>
+ <hr />
+ {% endif %}
+ {% if items %}
+ <div id="search-list" class="row">
+ {% for item in items %}
+ {{ item }}
+ {% endfor %}
+ </div>
+ {% if len(items)==20 %}
+ <div class="alert info">Showing top 20</div>
+ {% endif %}
+ {% else %}
+ <div class="alert">No items listed.</div>
+ {% endif %}
</div>
{% endblock %}
\ No newline at end of file
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index e5e7b3e..c3cb6bf 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,14 +1,11 @@
-<tr>
- <td style="width: 30%;">
+<div class="span3">
+ <div style="height: 120px; overflow: hidden;">
{% if website_image %}
- <img class="product-image" style="width: 80%;" src="{{ website_image }}">
+ <img class="product-image" style="width: 80%; margin: auto;" src="{{ website_image }}">
{% else %}
{% include 'html/product_missing_image.html' %}
{% endif %}
- </td>
- <td>
- <h4><a href="{{ page_name }}">{{ item_name }}</a></h4>
- <p class="help">Item Code: {{ name }}</p>
- <p>{{ website_description }}</p>
- </td>
-</tr>
\ No newline at end of file
+ </div>
+ <h4><a href="{{ page_name }}">{{ item_name }}</a></h4>
+ <p class="help">Item Code: {{ name }}</p>
+</div>
\ No newline at end of file
diff --git a/website/templates/html/product_page.html b/website/templates/html/product_page.html
index 14fecfb..eaf4ca8 100644
--- a/website/templates/html/product_page.html
+++ b/website/templates/html/product_page.html
@@ -9,59 +9,52 @@
{% endblock %}
{% block content %}
- <div class="layout-wrapper layout-wrapper-background">
- <div class="web-content" id="content-product-{{ name }}">
- <div class="layout-main" style="padding: 30px;">
- {% include 'html/product_search_box.html' %}
- {% include 'html/product_breadcrumbs.html' %}
- <h3 itemprop="name">{{ item_name }}</h3>
- <p class="help">Item Code: {{ name }}</p>
- <div class="product-page-content"
- itemscope itemtype="http://schema.org/Product">
- {% if slideshow %}
- {% include "html/slideshow.html" %}
- {% else %}
- <div class="span6">
- {% if website_image %}
- <image itemprop="image" class="item-main-image"
- src="{{ website_image }}" />
- {% else %}
- <div class="img-area">
- {% include 'html/product_missing_image.html' %}
- </div>
- {% endif %}
- </div>
- {% endif %}
- <br><br>
- <div class="span3">
- <div class="item-price hide">
- <p>Price:</p>
- </div>
- <div class="item-stock"></div>
- </div>
- <div class="clearfix"></div>
- <div class="span9">
- <h3>Product Description</h3>
- <div itemprop="description">
- {{ web_long_description or web_short_description or
- "[No description given]" }}
- </div>
- <hr>
- {% if obj.doclist.get({"doctype":"Item Website Specification"}) %}
- <h3>Specifications</h3>
- <table class="table table-striped table-bordered" style="width: 100%">
- {% for d in obj.doclist.get(
- {"doctype":"Item Website Specification"}) %}
- <tr>
- <td style="width: 30%;">{{ d.label }}</td>
- <td>{{ d.description }}</td>
- </tr>
- {% endfor %}
- </table>
- {% endif %}
- </div>
- <div class="clearfix"></div>
+ {% include 'html/product_search_box.html' %}
+ {% include 'html/product_breadcrumbs.html' %}
+ <div class="span12">
+ <h3 itemprop="name">{{ item_name }}</h3>
+ <p class="help">Item Code: {{ name }}</p>
+ </div>
+ <div class="span12 product-page-content" itemscope itemtype="http://schema.org/Product">
+ {% if slideshow %}
+ {% include "html/slideshow.html" %}
+ {% else %}
+ {% if website_image %}
+ <image itemprop="image" class="item-main-image"
+ src="{{ website_image }}" />
+ {% else %}
+ <div class="img-area">
+ {% include 'html/product_missing_image.html' %}
+ </div>
+ {% endif %}
+ {% endif %}
+ <br><br>
+ <div class="row">
+ <div class="span9">
+ <h3>Product Description</h3>
+ <div itemprop="description">
+ {{ web_long_description or web_short_description or
+ "[No description given]" }}
</div>
+ <hr>
+ {% if obj.doclist.get({"doctype":"Item Website Specification"}) %}
+ <h3>Specifications</h3>
+ <table class="table table-striped table-bordered" style="width: 100%">
+ {% for d in obj.doclist.get(
+ {"doctype":"Item Website Specification"}) %}
+ <tr>
+ <td style="width: 30%;">{{ d.label }}</td>
+ <td>{{ d.description }}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ {% endif %}
+ </div>
+ <div class="span3">
+ <div class="item-price hide">
+ <p>Price:</p>
+ </div>
+ <div class="item-stock"></div>
</div>
</div>
</div>
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index 5f69b34..3b3a95a 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,12 +1,14 @@
-<div class="pull-right" style="margin-top:-15px;">
- <form class="form-search">
- <div class="input-append">
- <input type="text" class="span2 search-query"
- id="product-search" placeholder="Product Search...">
- <button class="btn" id="btn-product-search">
- <i class="icon-search"></i></button>
- </div>
- </form>
+<div class="span12 clearfix">
+ <div class="pull-right" style="margin-top: 15px;">
+ <form class="form-search">
+ <div class="input-append">
+ <input type="text" class="span2 search-query"
+ id="product-search" placeholder="Product Search..." />
+ <button class="btn" id="btn-product-search">
+ <i class="icon-search"></i></button>
+ </div>
+ </form>
+ </div>
<script>
// redirect to product search page
$(document).ready(function() {
@@ -23,5 +25,4 @@
})
})
</script>
-</div>
-<div class="clearfix"></div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/website/templates/html/web_page.html b/website/templates/html/web_page.html
index aaa0aa8..d3c646a 100644
--- a/website/templates/html/web_page.html
+++ b/website/templates/html/web_page.html
@@ -7,12 +7,8 @@
{% endblock %}
{% block content %}
- <div class="layout-wrapper layout-wrapper-background">
- <div class="web-content" style="text-align: {{ text_align }};">
- <div class="layout-main">
- {% include "html/slideshow.html" %}
- {{ main_section }}
- </div>
- </div>
- </div>
+<div class="span12" style="margin-top: 15px;">
+ {% include "html/slideshow.html" %}
+ {{ main_section }}
+</div>
{% endblock %}
\ No newline at end of file