nsinnovations/erpnext
2
0
Fork 0
mirror of https://github.com/frappe/erpnext.git synced 2026-05-19 13:09:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

added responsive layout with groups

Browse Source
This commit is contained in:
Rushabh Mehta
2013-02-21 14:25:30 +05:30
parent 1e037fbe29
commit 78db3ec2dd
15 changed files with 256 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
website/css/website.css
View File

@@ -1,19 +1,21 @@
.content, div#body_div { div.outer {
width: 780px; -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;
} }
div#body_div { .outer .navbar {
padding: 0px; margin: -15px -15px 0 -15px;
min-height: 400px;
margin: 40px auto 10px auto;
box-shadow: 1px 1px 3px 3px #bbb;
border-radius: 5px;
overflow: hidden;
} }
footer { footer {
text-align: left; text-align: left;
width: 720px;
margin: auto; margin: auto;
} }
@@ -39,6 +41,14 @@ p, li {
padding: 30px; padding: 30px;
} }
.missing-image {
background-color: #eee;
padding: 40px;
width: 32px;
font-size: 32px;
color: #888;
}
.social-icons { .social-icons {
font-size: 120%; font-size: 120%;
float: right; float: right;
@@ -67,11 +77,6 @@ p, li {
margin: 0px; margin: 0px;
} }
.two-column {
width: 50%;
float: left;
}
.clear { .clear {
clear: both; clear: both;
} }

2
website/doctype/style_settings/custom_template.css
View File

@@ -4,6 +4,8 @@ body {
{% elif doc.background_color %} {% elif doc.background_color %}
background-color: #{{ doc.background_color }}; background-color: #{{ doc.background_color }};
background-image: none; background-image: none;
{% else %}
background-color: #edede7;
{% endif %} {% endif %}
{% if doc.font %} {% if doc.font %}
font-family: '{{ doc.font }}', Verdana, Sans !important; font-family: '{{ doc.font }}', Verdana, Sans !important;

6
website/templates/css/product_page.css
View File

@@ -1,9 +1,7 @@
<style> <style>
.product-page-content {
margin-left: -20px;
}
.item-main-image { .item-main-image {
max-width: 100%; max-width: 400px;
margin: auto;
} }
.web-long-description { .web-long-description {
font-size: 18px; font-size: 18px;

78
website/templates/html/blog_page.html
View File

@@ -9,51 +9,45 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="layout-wrapper layout-wrapper-background"> <div class="span12">
<div class="web-content" id="blog-{{ name }}"> <h2>{{ title }}</h2>
<div class="layout-main"> <!-- begin blog content -->
<div class="help">By {{ full_name }} on {{ updated }}</div>
<br>
{{ content_html }}
<!-- end blog content -->
<h2>{{ title }}</h2> <hr>
<h3>Comments</h3><br>
<div class="blog-comments">
<!-- begin blog content --> {% if not comment_list %}
<div class="help">By {{ full_name }} on {{ updated }}</div> <div class="alert no-comment">
<br> <p>Be the first one to comment</p>
{{ 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>
</div> </div>
{% endif %}
{% include 'html/comment.html' %}
</div> </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 %} {% endblock %}

114
website/templates/html/outer.html
View File

@@ -7,66 +7,72 @@
{% block body %} {% block body %}
<header> <header>
</header> </header>
<div id="body_div"> <div class="container">
<div class="navbar-wrapper"> <div class="outer">
<div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}" <div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}"
style="margin-bottom: 0px;"> style="margin-bottom: 0px;">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <a class="brand" href="index">{{ brand_html }}</a>
<a class="brand" href="/">{{ brand_html }}</a> <div class="container">
<ul class="nav"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
{% for page in top_bar_items %} <span class="icon-bar"></span>
{% if not page.parent_label %} <span class="icon-bar"></span>
<li data-label="{{ page.label }}" <span class="icon-bar"></span>
{% if page.child_items %} </button>
class="dropdown" <div class="nav-collapse collapse">
{% endif %}> <ul class="nav">
<a href="{{ page.url or '#' }}" {% for page in top_bar_items %}
{% if page.child_items %} {% if not page.parent_label %}
class="dropdown-toggle" <li data-label="{{ page.label }}"
onclick="return false;" {% if page.child_items %}
data-toggle="dropdown" class="dropdown"
{% endif %} {% endif %}>
{{ page.target or ''}}> <a href="{{ page.url or '#' }}"
{{ page.label }} {% if page.child_items %}
{% if page.child_items %} class="dropdown-toggle"
<b class="caret"></b> onclick="return false;"
</a> data-toggle="dropdown"
<ul class="dropdown-menu"> {% endif %}
{% for child in page.child_items %} {{ page.target or ''}}>
<li data-label="{{ child.label }}"> {{ page.label }}
<a {% if child.indent %} {% if page.child_items %}
style="padding-left: <b class="caret"></b>
{{(int(child.indent)+1)*15 }}px"
{% endif %}
href="{{ child.url }}" {{ child.target or '' }}>
{{ child.label }}
</a> </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 %} {% endfor %}
</ul> </ul>
{% else %} <ul class="nav pull-right">
</a> <li id="login-topbar-item"><a href="login">Login</a></li>
{% endif %} </ul>
</li> </div>
{% endif %} </div>
{% endfor %} </div>
</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>
</div> </div>
<script>$('.dropdown-toggle').dropdown()</script>
<div class="content row" id="page-{{ name }}" style="display: block;">
{% block content %}
{% endblock %}
</div> </div>
</div> </div>
</div>
<script>$('.dropdown-toggle').dropdown()</script>
<div class="content" id="page-{{ name }}" style="display: block;">
{% block content %}
{% endblock %}
</div>
</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 %} {% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
<div class="social-icons" style=""> <div class="social-icons" style="">
<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span> <span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>

16
website/templates/html/product_breadcrumbs.html
View File

@@ -1,8 +1,12 @@
{% if obj.parent_groups and len(obj.parent_groups) > 1 %} {% if obj.parent_groups and len(obj.parent_groups) > 1 %}
<ul class="breadcrumb"> <div class="span12">
{% for ig in obj.parent_groups[:-1] %} <div class="clearfix">
<li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li> <ul class="breadcrumb">
{% endfor %} {% for ig in obj.parent_groups[:-1] %}
<li class="active">{{ obj.parent_groups[-1].name }}</li> <li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li>
</ul> {% endfor %}
<li class="active">{{ obj.parent_groups[-1].name }}</li>
</ul>
</div>
</div>
{% endif %} {% endif %}

68
website/templates/html/product_group.html
View File

@@ -1,44 +1,40 @@
{% extends "html/page.html" %} {% extends "html/page.html" %}
{% block content %} {% block content %}
{% include 'html/product_search_box.html' %}
<div class="layout-wrapper layout-wrapper-background"> {% include 'html/product_breadcrumbs.html' %}
<div class="web-content" id="content-product_group"> <div class="span12">
<div class="layout-main" style="padding: 30px;"> {% if slideshow %}<!-- slideshow -->
{% include 'html/product_search_box.html' %} {% include "html/slideshow.html" %}
{% include 'html/product_breadcrumbs.html' %} {% endif %}
{% if slideshow %}<!-- slideshow --> {% if description %}<!-- description -->
{% include "html/slideshow.html" %} <div>{{ description or ""}}</div>
{% endif %} {% else %}
{% if description %}<!-- description --> <h3>{{ name }}</h3>
<div>{{ description or ""}}</div> {% endif %}
{% else %} {% if sub_groups %}
<h3>{{ name }}</h3> <hr />
{% endif %} <div class="row">
{% if sub_groups %} {% for d in sub_groups %}
<div class="well well-small"> <div class="span4">
<div class="container-fluid" style="padding-left: 0px; margin-left:-10px; line-height: 2em;"> <a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
{% 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 %}
</div> </div>
{% endfor %}
</div> </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> </div>
{% endblock %} {% endblock %}

17
website/templates/html/product_in_list.html
View File

@@ -1,14 +1,11 @@
<tr> <div class="span3">
<td style="width: 30%;"> <div style="height: 120px; overflow: hidden;">
{% if website_image %} {% 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 %} {% else %}
{% include 'html/product_missing_image.html' %} {% include 'html/product_missing_image.html' %}
{% endif %} {% endif %}
</td> </div>
<td> <h4><a href="{{ page_name }}">{{ item_name }}</a></h4>
<h4><a href="{{ page_name }}">{{ item_name }}</a></h4> <p class="help">Item Code: {{ name }}</p>
<p class="help">Item Code: {{ name }}</p> </div>
<p>{{ website_description }}</p>
</td>
</tr>

97
website/templates/html/product_page.html
View File

@@ -9,59 +9,52 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="layout-wrapper layout-wrapper-background"> {% include 'html/product_search_box.html' %}
<div class="web-content" id="content-product-{{ name }}"> {% include 'html/product_breadcrumbs.html' %}
<div class="layout-main" style="padding: 30px;"> <div class="span12">
{% include 'html/product_search_box.html' %} <h3 itemprop="name">{{ item_name }}</h3>
{% include 'html/product_breadcrumbs.html' %} <p class="help">Item Code: {{ name }}</p>
<h3 itemprop="name">{{ item_name }}</h3> </div>
<p class="help">Item Code: {{ name }}</p> <div class="span12 product-page-content" itemscope itemtype="http://schema.org/Product">
<div class="product-page-content" {% if slideshow %}
itemscope itemtype="http://schema.org/Product"> {% include "html/slideshow.html" %}
{% if slideshow %} {% else %}
{% include "html/slideshow.html" %} {% if website_image %}
{% else %} <image itemprop="image" class="item-main-image"
<div class="span6"> src="{{ website_image }}" />
{% if website_image %} {% else %}
<image itemprop="image" class="item-main-image" <div class="img-area">
src="{{ website_image }}" /> {% include 'html/product_missing_image.html' %}
{% else %} </div>
<div class="img-area"> {% endif %}
{% include 'html/product_missing_image.html' %} {% endif %}
</div> <br><br>
{% endif %} <div class="row">
</div> <div class="span9">
{% endif %} <h3>Product Description</h3>
<br><br> <div itemprop="description">
<div class="span3"> {{ web_long_description or web_short_description or
<div class="item-price hide"> "[No description given]" }}
<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>
</div> </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> </div>
</div> </div>

21
website/templates/html/product_search_box.html
View File

@@ -1,12 +1,14 @@
<div class="pull-right" style="margin-top:-15px;"> <div class="span12 clearfix">
<form class="form-search"> <div class="pull-right" style="margin-top: 15px;">
<div class="input-append"> <form class="form-search">
<input type="text" class="span2 search-query" <div class="input-append">
id="product-search" placeholder="Product Search..."> <input type="text" class="span2 search-query"
<button class="btn" id="btn-product-search"> id="product-search" placeholder="Product Search..." />
<i class="icon-search"></i></button> <button class="btn" id="btn-product-search">
</div> <i class="icon-search"></i></button>
</form> </div>
</form>
</div>
<script> <script>
// redirect to product search page // redirect to product search page
$(document).ready(function() { $(document).ready(function() {
@@ -24,4 +26,3 @@
}) })
</script> </script>
</div> </div>
<div class="clearfix"></div>

12
website/templates/html/web_page.html
View File

@@ -7,12 +7,8 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="layout-wrapper layout-wrapper-background"> <div class="span12" style="margin-top: 15px;">
<div class="web-content" style="text-align: {{ text_align }};"> {% include "html/slideshow.html" %}
<div class="layout-main"> {{ main_section }}
{% include "html/slideshow.html" %} </div>
{{ main_section }}
</div>
</div>
</div>
{% endblock %} {% endblock %}

4
website/templates/pages/about.html
View File

@@ -3,8 +3,7 @@
{% set title="About Us" %} {% set title="About Us" %}
{% block content %} {% block content %}
<div class="layout-wrapper"> <div class="span12">
<div class="layout-main">
{{ 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>" }} {{ 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"}) %} {% if obj.doclist.get({"doctype":"Company History"}) %}
<h3>{{ obj.doc.company_history_heading or "Company History" }}</h3> <h3>{{ obj.doc.company_history_heading or "Company History" }}</h3>
@@ -35,6 +34,5 @@
</table> </table>
{% endif %} {% endif %}
{{ obj.doc.footer or "" }} {{ obj.doc.footer or "" }}
</div>
</div> </div>
{% endblock %} {% endblock %}

25
website/templates/pages/blog.html
View File

@@ -11,20 +11,15 @@
{% set title="Blog" %} {% set title="Blog" %}
{% block content %} {% block content %}
<div class="layout-wrapper layout-wrapper-background"> <div class="span12">
<div class="web-content" id="content-blog"> <h1>Blog</h1>
<br>
<div class="layout-main"> <div id="blog-list">
<h1>Blog</h1> <!-- blog list will be generated dynamically -->
<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> </div>
<div style="text-align: center;">
<button id="next-page" class="btn"
style="display:none;">More...</button>
</div>
</div>
{% endblock %} {% endblock %}

9
website/templates/pages/contact.html
View File

@@ -7,9 +7,9 @@
{% set title="Contact Us" %} {% set title="Contact Us" %}
{% block content %} {% block content %}
<div class="layout-wrapper"> <div class="span12">
<div class="layout-main row"> <div class="row">
<div class="web-form span5 pull-left"> <div class="web-form span8">
{{ obj.doc.introduction or "<h3>Contact Us</h3>"}} {{ obj.doc.introduction or "<h3>Contact Us</h3>"}}
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
@@ -28,7 +28,7 @@
<p><button class="btn btn-primary btn-send">Send</button></p> <p><button class="btn btn-primary btn-send">Send</button></p>
</div> </div>
{% if obj.doc.address %} {% 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> <h4><i class="icon-map-marker"></i> {{ obj.address.address_title }}</h4>
{% if obj.address.address_line1 %} {% if obj.address.address_line1 %}
<span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br> <span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br>
@@ -50,7 +50,6 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="clearfix"></div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

23
website/templates/pages/product_search.html
View File

@@ -17,22 +17,17 @@ $(document).ready(function() {
}); });
</script> </script>
<div class="layout-wrapper layout-wrapper-background"> {% include 'html/product_search_box.html' %}
<div class="web-content" id="content-product_search"> <div class="span12">
<div class="layout-main" style="padding: 30px;"> <h3 class="search-results">Search Results</h3>
{% include 'html/product_search_box.html' %} <div id="search-list" class="row">
<h3 class="search-results">Search Results</h3>
<div id="search-list">
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<div class="more-btn" <div class="more-btn"
style="display: none; text-align: center;"> style="display: none; text-align: center;">
<button class="btn">More...</button> <button class="btn">More...</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}