Add native blog template and add breadcrumbs to navbar

- Replace dummy breadcrumbs with working one
- Remove font setting from reset
- Correct footer title spacing
- Remove margin from page-head
This commit is contained in:
Raghavendra Kamath
2018-03-29 16:29:53 +05:30
parent 892d94833c
commit d38f301bc4
8 changed files with 101 additions and 53 deletions

View File

@@ -15,22 +15,6 @@
box-sizing: border-box;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
line-height: 1.62;
font-size: 14px;
}
@media screen and (min-width: 1199px) {
html {
font-size: 16px;
}
}
@-ms-viewport {
width: device-width;
}
@@ -50,11 +34,6 @@ section {
}
body {
margin: 0;
font-weight: 400;
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", "Noto", "Oxygen-Sans", "Noto Sans", "Ubuntu", "Cantarell", sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #36414c;
font-feature-settings: "kern" 1;
font-kerning: normal;
text-rendering: optimizeLegibility;
@@ -78,6 +57,7 @@ h5,
h6 {
margin: 0;
font-weight: 500;
line-height: 1;
}
p {

View File

@@ -15,9 +15,8 @@
fill: var(--dark-grey);
height: 1rem;
width: 1rem;
position: absolute;
left: 1rem;
top: 50%;
top: 50%;
transform: translateY(-50%);
}

View File

@@ -3,20 +3,13 @@
{% block meta_block %}{% endblock %}
<link href="/assets/foundation/css/erpnext-org-theme.css" rel="stylesheet">
{% if path != '' %}
<link type="text/css" rel="stylesheet" href="/assets/frappe/css/hljs.css">
<link type="text/css" rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
<link type="text/css" rel="stylesheet" href="/assets/frappe/css/octicons/octicons.css">
{% endif %}
{% if path == 'contact' %}
<link type="text/css" rel="stylesheet" href="/assets/foundation/css/bootstrap-for-webform.css">
{% endif %}
{% endblock %}
{% block body %}
<body class="container m0auto page-shadow" data-path="{{ path }}">
<body class="container m0auto page-shadow text-dark-grey" data-path="{{ path }}">
{%- block navbar -%}{% include "templates/includes/navbar/navbar.html" %}{%- endblock -%}
{% block content %}
{{ content }}

View File

@@ -1,7 +1,7 @@
<footer>
<div class="border-top flex space-between p4">
<div >
<h3>Industries</h3>
<h3 class="h3 text-black mb1">Industries</h3>
<ul class="list-unstyled">
<li>
<a href="/docs/user/manual/en/manufacturing">Manufacturing</a>
@@ -30,7 +30,7 @@
</ul>
</div>
<div >
<h3>Foundation</h3>
<h3 class="h3 text-black mb1">Foundation</h3>
<ul class="list-unstyled">
<li>
<a href="/about">About</a>
@@ -59,7 +59,7 @@
</ul>
</div>
<div >
<h3>Community</h3>
<h3 class="h3 text-black mb1">Community</h3>
<ul class="list-unstyled">
<li>
<a href="/chapters">Chapters</a>
@@ -88,7 +88,7 @@
</ul>
</div>
<div >
<h3>Documentation</h3>
<h3 class="h3 text-black mb1">Documentation</h3>
<ul class="list-unstyled">
<li>
<a href="/docs/user/manual">Manual</a>
@@ -100,10 +100,10 @@
<a href="/docs/current">ERPNext Model & API</a>
</li>
</ul>
<h3>Find Us On</h3>
<h3 class="h3 text-black mt2 mb1">Find Us On</h3>
<ul class="list-unstyled">
<li>
<a href="https://twitter.com/erpnext" target="_blank">Twitter</a>,
<a href="https://twitter.com/erpnext" target="_blank">Twitter</a>
</li>
<li>
<a href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a>
@@ -116,7 +116,7 @@
</div>
<div class="p4 border-top">
<div class="bottom-spacer">
<span>&copy; <span id="year"></span> ERPNext Open Source Software Foundation. Content licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a> | <a href="/terms" >Terms of use</a>.</span>
<span>&copy; <span id="year"></span> ERPNext Open Source Software Foundation. Content licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a> Read the <a href="/terms" >Terms of use</a>.</span>
</div>
</div>
<script type="text/javascript">

View File

@@ -1,20 +1,26 @@
<nav class="navbar top-sticky bg-light" role="navigation">
<nav class="navbar top-sticky bg-white" role="navigation">
<div class="flex space-between align-item-center border-bottom ph4 pv2">
<div class="left flex align-item-center">
<a class="logo flex align-item-center p1" href="{{ url_prefix }}{{ home_page or "/"}}">
<a class="logo flex align-item-center pr1" href="{{ url_prefix }}{{ home_page or "/"}}">
<img class="logo-img" src="/assets/foundation/img/erpnext-logo.svg" alt="Open Source ERP Software">
<!-- <span>ERPNext.org</span> -->
</a>
<ul class="list-unstyled flex">
<li>
<span class="fg-light-grey">&#10095;</span>
<a class="hover:bg-light-grey p1 border-radius" href="">Service Providers</a>
</li>
<li>
<span class="fg-light-grey">&#10095;</span>
<a class="hover:bg-light-grey p1 border-radius" href="">Cloud8</a>
</li>
<!-- breadcrumbs -->
{% if parents and parents|length > 0 %}
<ul class="breadcrumb list-unstyled flex" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span class="text-dark-grey">&#10093;</span>
{% for parent in parents %}
<li>
<a class="hover:bg-light-grey p1 border-radius" href="{{ url_prefix }}{{ parent.route | abs_url }}" itemprop="url">
<span itemprop="title">{{ parent.title or parent.label or parent.name or "" }}</span>
</a>
<span class="text-dark-grey">&#10093;</span>
</li>
{% endfor %}
<li class="pl1 text-black"><span itemprop="title">{{ title or "" }}</span></li>
</ul>
{% endif %}
<!-- breadcrumbs -->
</div>
<div class="right flex align-item-center">
{% include 'foundation/templates/includes/search-box.html' %}

View File

@@ -1,12 +1,10 @@
<header class="page-head flex space-between align-item-center mb4">
<header class="page-head flex space-between align-item-center">
<div class="ellipsis">
<h1 class="h1 mb0">
<h1 class="h1 text-black">
{{ title }}
</h1>
</div>
<div class="">
<button class="btn">Refresh</button>
<button class="btn btn-blue">New</button>
{% if self.header_actions() %}
<div class="page-header-actions-block">
{% block header_actions %}{% endblock %}

View File

@@ -0,0 +1,37 @@
{% extends "foundation/templates/web.html" %}
{% block meta_block %}
{% include "templates/includes/meta_block.html" %}
{% endblock %}
{% block page_content %}
<article class="blog-content" itemscope itemtype="http://schema.org/BlogPosting">
<div class="blog-info">
<p class="post-by">
<a href="/blog?blogger={{ blogger }}" class="no-decoration">{{ _("By") }} {{ blogger_info and blogger_info.full_name or full_name }}</a>
Posted on {{ frappe.format_date(published_on) }} in <a href="/blog?blog_category={{ blog_category }}" class="no-decoration">{{ category.title }}</a> .{{ comment_text }}
</p>
</div>
<div itemprop="articleBody" class="longform blog-text">
{{ content }}
</div>
</article>
{% if blogger_info %}
<div class="flex align-item-center mb4">
<div class="thumb-medium pr2">
<img itemprop="thumbnailUrl" src="{{ blogger_info.avatar or "/assets/frappe/images/default-avatar.png" }}" />
</div>
<div class="inline-block">
<h3 class="h3">
<a href="/blog?blogger={{ blogger_info.name }}">{{ blogger_info.full_name }}</a>
</h3>
<p class="text-light-grey">{%if blogger_info.bio %}{{ blogger_info.bio }}{% endif %}</p>
</div>
</div>
{% endif %}
<div class="blog-comments pv4 border-top">
{% include 'templates/includes/comments/comments.html' %}
</div>
</div>
<script>
frappe.ready(function() { frappe.set_search_path("/blog"); })
</script>
{% endblock %}

View File

@@ -0,0 +1,35 @@
{%- set post = doc -%}
<div class="web-list-item blog-list-item">
<div class="row">
<div class="col-xs-12">
<h1><a href="/{{ post.route }}">{{ post.title }}</a></h1>
{% if post.cover_image %}
<p>
<img class="blogpost-cover-img" src="{{ post.cover_image }}" alt="{{post.title}} - Cover Image">
</p>
{% endif %}
<p class="post-description">{{ post.intro }}</p>
<div>
<div class="inline-block" style="vertical-align: top">
<div class="avatar">
<img itemprop="thumbnailUrl" src="{{ post.avatar or "/assets/frappe/images/default-avatar.png" }}" />
</div>
</div>
<div class="inline-block" style="width: calc(100% - 100px)">
<div class='text-muted'>
<a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
</div>
<div class="text-muted small">
{{ frappe.format_date(post.published_on) }}
{% if post.comments %}
<span style='display: inline-block; margin-left: 10px;'>
<i class='octicon octicon-comment-discussion'></i> {{ post.comments }}
</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>