added responsive layout with groups
diff --git a/website/css/website.css b/website/css/website.css
index 0b2dce4..106d18a 100644
--- a/website/css/website.css
+++ b/website/css/website.css
@@ -1,19 +1,21 @@
-.content, div#body_div {
- width: 780px;
-}
-
-div#body_div {
- padding: 0px;
- min-height: 400px;
- margin: 40px auto 10px auto;
- box-shadow: 1px 1px 3px 3px #bbb;
+div.outer {
+ -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
+ -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
+ box-shadow: 0px 0px 3px rgba(0,0,0,0.9);
+ background-color: #fff;
border-radius: 5px;
+ padding: 15px;
+ margin: 30px -15px 10px -15px;
+ min-height: 400px;
overflow: hidden;
}
+.outer .navbar {
+ margin: -15px -15px 0 -15px;
+}
+
footer {
text-align: left;
- width: 720px;
margin: auto;
}
@@ -39,6 +41,14 @@
padding: 30px;
}
+.missing-image {
+ background-color: #eee;
+ padding: 40px;
+ width: 32px;
+ font-size: 32px;
+ color: #888;
+}
+
.social-icons {
font-size: 120%;
float: right;
@@ -67,11 +77,6 @@
margin: 0px;
}
-.two-column {
- width: 50%;
- float: left;
-}
-
.clear {
clear: both;
}
diff --git a/website/doctype/style_settings/custom_template.css b/website/doctype/style_settings/custom_template.css
index 7e89ca0..9009bbe 100644
--- a/website/doctype/style_settings/custom_template.css
+++ b/website/doctype/style_settings/custom_template.css
@@ -4,6 +4,8 @@
{% elif doc.background_color %}
background-color: #{{ doc.background_color }};
background-image: none;
+{% else %}
+ background-color: #edede7;
{% endif %}
{% if doc.font %}
font-family: '{{ doc.font }}', Verdana, Sans !important;
diff --git a/website/templates/css/product_page.css b/website/templates/css/product_page.css
index 2b7c979..5780ee4 100644
--- a/website/templates/css/product_page.css
+++ b/website/templates/css/product_page.css
@@ -1,9 +1,7 @@
<style>
- .product-page-content {
- margin-left: -20px;
- }
.item-main-image {
- max-width: 100%;
+ max-width: 400px;
+ margin: auto;
}
.web-long-description {
font-size: 18px;
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
diff --git a/website/templates/pages/about.html b/website/templates/pages/about.html
index 1a60b33..4d0eefc 100644
--- a/website/templates/pages/about.html
+++ b/website/templates/pages/about.html
@@ -3,8 +3,7 @@
{% set title="About Us" %}
{% block content %}
-<div class="layout-wrapper">
- <div class="layout-main">
+<div class="span12">
{{ obj.doc.company_introduction or "<h2>About Us</h2><p>Some Introduction about your company that you would like your website visitor to know. More people than you think will read your About page. People always like to know who the are doing business with. Be authentic and avoid using jargon like 'value added services' etc. Be sure to update your company history and list of key team members in Website > About Us Settings</p>" }}
{% if obj.doclist.get({"doctype":"Company History"}) %}
<h3>{{ obj.doc.company_history_heading or "Company History" }}</h3>
@@ -35,6 +34,5 @@
</table>
{% endif %}
{{ obj.doc.footer or "" }}
- </div>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index 3ad9e0a..3c2a579 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -11,20 +11,15 @@
{% set title="Blog" %}
{% block content %}
- <div class="layout-wrapper layout-wrapper-background">
- <div class="web-content" id="content-blog">
-
- <div class="layout-main">
- <h1>Blog</h1>
- <br>
- <div id="blog-list">
- <!-- blog list will be generated dynamically -->
- </div>
- <div style="text-align: center;">
- <button id="next-page" class="btn"
- style="display:none;">More...</button>
- </div>
- </div>
- </div>
+<div class="span12">
+ <h1>Blog</h1>
+ <br>
+ <div id="blog-list">
+ <!-- blog list will be generated dynamically -->
</div>
+ <div style="text-align: center;">
+ <button id="next-page" class="btn"
+ style="display:none;">More...</button>
+ </div>
+</div>
{% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index f876da1..6022b9a 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -7,9 +7,9 @@
{% set title="Contact Us" %}
{% block content %}
-<div class="layout-wrapper">
- <div class="layout-main row">
- <div class="web-form span5 pull-left">
+<div class="span12">
+ <div class="row">
+ <div class="web-form span8">
{{ obj.doc.introduction or "<h3>Contact Us</h3>"}}
<div class="row">
<div class="span4">
@@ -28,7 +28,7 @@
<p><button class="btn btn-primary btn-send">Send</button></p>
</div>
{% if obj.doc.address %}
- <div class="pull-right span3 alert" itemscope itemtype="http://schema.org/PostalAddress">
+ <div class="span3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
<h4><i class="icon-map-marker"></i> {{ obj.address.address_title }}</h4>
{% if obj.address.address_line1 %}
<span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br>
@@ -50,7 +50,6 @@
{% endif %}
</div>
{% endif %}
- <div class="clearfix"></div>
</div>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/product_search.html b/website/templates/pages/product_search.html
index 90c2489..66bf160 100644
--- a/website/templates/pages/product_search.html
+++ b/website/templates/pages/product_search.html
@@ -17,22 +17,17 @@
});
</script>
-<div class="layout-wrapper layout-wrapper-background">
- <div class="web-content" id="content-product_search">
- <div class="layout-main" style="padding: 30px;">
- {% include 'html/product_search_box.html' %}
- <h3 class="search-results">Search Results</h3>
- <div id="search-list">
-
- </div>
- <div style="text-align: center;">
- <div class="more-btn"
- style="display: none; text-align: center;">
- <button class="btn">More...</button>
- </div>
- </div>
+{% include 'html/product_search_box.html' %}
+<div class="span12">
+ <h3 class="search-results">Search Results</h3>
+ <div id="search-list" class="row">
+
+ </div>
+ <div style="text-align: center;">
+ <div class="more-btn"
+ style="display: none; text-align: center;">
+ <button class="btn">More...</button>
</div>
</div>
</div>
-
{% endblock %}
\ No newline at end of file