mirror of
https://github.com/frappe/erpnext.git
synced 2026-05-14 10:41:21 +00:00
added responsive layout with groups
This commit is contained in:
Rushabh Mehta
@@ -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 %}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
@@ -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 %}
|
||||
@@ -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>
|
||||
</div>
|
||||
<h4><a href="{{ page_name }}">{{ item_name }}</a></h4>
|
||||
<p class="help">Item Code: {{ name }}</p>
|
||||
</div>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</div>
|
||||
@@ -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 %}
|
||||
Reference in New Issue
Block a user