pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] website_blog: review blog redesign

Browse Source 
- No cards for menus
- Use the grid system for better blog post card footers
- Correct grid system for blog list grid view
- Remove some useless custom css
- Restore 'groups' in xml data
- ...

Part of https://github.com/odoo/odoo/pull/31749
task-1948882
This commit is contained in:
qsm-odoo
2019-03-29 16:37:37 +00:00
parent 217ba16809
commit 24aec084e2
2 changed files with 120 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_blog/static/src/scss/website_blog.scss
-14
View File
@@ -75,7 +75,6 @@
}
&.o_list_cover {
display: none;
width: auto!important;
height: 250px!important;
&.cover {
@@ -158,8 +157,6 @@
.o_author_avatar_little {
width: 40px;
display: inline;
margin-top: -5px;
}
.o_blog_post_complete.o_sharing_links {
@@ -176,17 +173,6 @@
}
}
div[name="blog_post_data"] {
margin-top: 20px !important;
font-size: 13px;
}
div[name="blog_post"] {
position: relative;
hr {
margin-top: 10px;
}
}
.blog_post_year_collapse {
cursor: pointer;
> i {
addons/website_blog/views/website_blog_templates.xml
+120 -119
View File
@@ -127,51 +127,46 @@
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2" t-ignore="True" id="main_column">
<div t-if="not blog_posts" class="card">
<div class="card-body">
<h1 class="css_editable_hidden">No blog post yet.</h1>
<p groups="website.group_website_designer" class="card-text">Click on "New Page" in the top-right corner to write your first blog post.</p>
</div>
</div>
<div t-foreach="blog_posts" t-as="blog_post" name="blog_post">
<div class="card mb-3">
<div class="card-header text-center">
<a t-attf-href="/blog/#{ slug(blog_post.blog_id) }/post/#{ slug(blog_post) }">
<t t-if="not blog_posts">
<p class="h2">No blog post yet.</p>
<p groups="website.group_website_designer">Click on "New" in the top-right corner to write your first blog post.</p>
</t>
<t t-foreach="blog_posts" t-as="blog_post">
<div class="card mb-3" name="blog_post">
<div class="card-body">
<a t-attf-href="/blog/#{slug(blog_post.blog_id)}/post/#{slug(blog_post)}">
<h2 t-field="blog_post.name" class="mb4 o_blog_post_title">Untitled Post</h2>
</a>
</div>
<div class="card-body">
<div class="text-muted">
<div t-field="blog_post.teaser" class="mb12 mt12 o_blog_post_teaser"/>
</div>
<div t-field="blog_post.teaser" class="text-muted o_blog_post_teaser"/>
</div>
<div class="card-footer text-muted">
<div name='blog_post_data' class='mb0'>
<span t-field="blog_post.author_id" style="display: inline-block;" t-options='{
"widget": "contact",
"fields": ["name"]
}'/>
&amp;mdash; <span t-field="blog_post.post_date" t-options='{"format": "MMMM yyyy"}'/>
<span t-if="len(blog_post.message_ids) &gt; 0">
&amp;mdash; <t t-esc="len(blog_post.message_ids)"/>
<t t-if="len(blog_post.message_ids) &lt;= 1" >comment</t>
<t t-if="len(blog_post.message_ids) &gt; 1">comments</t>
</span>
<span t-if="blog_post.visits &gt; 0">
&amp;mdash; <t t-esc="blog_post.visits"/>
<t t-if="blog_post.visits &lt;= 1" >view</t>
<t t-if="blog_post.visits &gt; 1">views</t>
</span>
<span t-if="not blog_post.website_published" class="badge badge-danger">unpublished</span>
<span class="fa fa-tags" role="img" aria-label="Tags" title="Tags"/>
<div class="row align-items-center">
<div class="col col-sm-auto">
<span t-field="blog_post.author_id" style="display: inline-block;" t-options='{
"widget": "contact",
"fields": ["name"]
}'/>
&amp;mdash; <span t-field="blog_post.post_date" t-options='{"format": "MMMM yyyy"}'/>
<span t-if="len(blog_post.message_ids) &gt; 0">
&amp;mdash; <t t-esc="len(blog_post.message_ids)"/>
<t t-if="len(blog_post.message_ids) &lt;= 1" >comment</t>
<t t-if="len(blog_post.message_ids) &gt; 1">comments</t>
</span>
<span t-if="blog_post.visits &gt; 0">
&amp;mdash; <t t-esc="blog_post.visits"/>
<t t-if="blog_post.visits &lt;= 1" >view</t>
<t t-if="blog_post.visits &gt; 1">views</t>
</span>
<span t-if="not blog_post.website_published" class="badge badge-danger">unpublished</span>
</div>
<!-- To display tags //no options -->
<t t-foreach="blog_post.tag_ids" t-as="one_tag">
<a class="badge badge-primary" t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
</t>
<div class="o_sharing_links">
<div class="col-12 col-sm my-1 o_wblog_post_short_tag_section">
<span t-if="len(blog_post.tag_ids)" class="fa fa-tags" role="img" aria-label="Tags" title="Tags"/>
<t t-foreach="blog_post.tag_ids" t-as="one_tag">
<a class="badge badge-primary" t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
</t>
</div>
<div class="col-sm-auto my-1">
<a href="#" class="fa fa-lg fa-twitter-square text-twitter o_twitter" aria-label="Twitter" title="Twitter"/>
<a href="#" class="fa fa-lg fa-facebook-square text-facebook o_facebook" aria-label="Facebook" title="Facebook"/>
<a href="#" class="fa fa-lg fa-linkedin-square text-linkedin o_linkedin" aria-label="LinkedIn" title="LinkedIn"/>
@@ -180,7 +175,7 @@
</div>
</div>
</div>
</div>
</t>
</div>
</div>
</div>
@@ -200,10 +195,10 @@
<!-- Option: Blog Post List: cover image -->
<template id="opt_blog_post_cover_image" name="Cover image"
customize_show="True" active="True" inherit_id="website_blog.blog_post_short">
<xpath expr="//div[@t-field='blog_post.teaser']/.." position="before">
<xpath expr="//div[@name='blog_post']/div[hasclass('card-body')]" position="before">
<t t-call="website_blog.blog_cover">
<t t-set="cover_properties" t-value="blog_posts_cover_properties[blog_post_index]"/>
<t t-set="additionnal_classes" t-value="'o_list_cover mt16 mb32'"/>
<t t-set="additionnal_classes" t-value="'o_list_cover card-img-top'"/>
</t>
</xpath>
</template>
@@ -211,25 +206,31 @@
<!-- Option: Blog Post List: grid layout -->
<template id="opt_blog_post_grid_layout" name="Grid view"
customize_show="True" active="False" inherit_id="website_blog.blog_post_short">
<xpath expr="//div[@name='blog_post']" position="replace">
<div class="container">
<div class="row">
<t>$0</t>
</div>
<xpath expr="//t[@t-foreach='blog_posts']" position="replace">
<div class="row">
<t>$0</t>
</div>
</xpath>
<xpath expr="//div[@name='blog_post']" position="attributes">
<attribute name="class" add="col-lg-6 d-flex" separator=" "/>
<attribute name="class" add="h-100" remove="mb-3" separator=" "/>
</xpath>
<xpath expr="//div[@name='blog_post']" position="replace">
<div class="col-md-6 mb-3">
<t>$0</t>
</div>
</xpath>
<xpath expr="//div[hasclass('o_wblog_post_short_tag_section')]" position="before">
<div class="w-100"/>
</xpath>
</template>
<!-- Option: Blog Post List: display the author avatar -->
<template id="opt_blog_post_author_avatar" name="Author avatar"
customize_show="True" active="False" inherit_id="website_blog.blog_post_short">
<xpath expr="//span[@t-field='blog_post.author_id']" position="before">
<t t-if="blog_post.author_avatar">
<xpath expr="//span[@t-field='blog_post.author_id']/.." position="before">
<div t-if="blog_post.author_avatar" class="col-auto">
<div t-field="blog_post.author_avatar" class="o_not_editable" style="display:inline" t-options='{"widget": "image", "class": "rounded-circle o_author_avatar_little "}' />
</t>
</div>
</xpath>
</template>
@@ -389,27 +390,24 @@
<template id="index_right" name="Right Column"
inherit_id="website_blog.blog_post_short">
<xpath expr="//div[@id='main_column']" position="after">
<div class="col-lg-3" id="blog_right_column"/>
<div class="col-xl-3 col-lg-4" id="blog_right_column"/>
</xpath>
</template>
<!-- Option:Right Column: tags -->
<template id="tag_category" name="Tags List">
<ul class="nav nav-pills">
<t t-if="tags">
<div t-if='not hide_title' class='text-muted mt8'><i class='fa fa-tag' role="img" aria-label="Tag category" title="Tag category"/> <t t-esc='categ_title' /></div>
<t t-foreach="tags" t-as="tag">
<t t-if="tag.post_ids">
<li class="nav-item mr-2">
<a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" t-attf-class="badge nav-link#{tag.id in active_tag_ids and ' active' or ''}">
<span t-field="tag.name"/>
</a>
</li>
</t>
<t t-if="tags">
<div t-if='not hide_title' class='text-muted mt8'><i class='fa fa-tag' role="img" aria-label="Tag category" title="Tag category"/> <t t-esc='categ_title' /></div>
<t t-foreach="tags" t-as="tag">
<t t-if="tag.post_ids">
<a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}"
t-attf-class="badge #{tag.id in active_tag_ids and 'badge-primary' or 'badge-secondary'}">
<span t-field="tag.name"/>
</a>
</t>
</t>
</ul>
</t>
</template>
<template id="opt_blog_rc_tags" name="Tags"
@@ -419,7 +417,7 @@
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary">
<h6 class="card-header"><b>Tags</b></h6>
<h6 class="card-header">Tags</h6>
<div class="card-body">
<t t-foreach="tag_category" t-as="nav_tag_category">
<t t-call="website_blog.tag_category">
@@ -445,7 +443,7 @@
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary">
<h6 class="card-header"><b>Archives</b></h6>
<h6 class="card-header">Archives</h6>
<div class="card-body">
<ul class="nav nav-pills flex-column">
<t t-foreach="nav_list" t-as="year">
@@ -470,36 +468,34 @@
</template>
<!-- Option:Right Column: about us -->
<template id="opt_blog_rc_about_us" name="About Us" priority="2"
inherit_id="website_blog.index_right" active="True" customize_show="True">
<xpath expr="//div[@id='main_column']" position="attributes">
<attribute name="class">col</attribute>
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary" id="about_forum">
<h6 class="card-header"><b>About us</b></h6>
<div class="card-body">
<span>
Write a small text here for when <b>new visitors</b> find your website
through your <b>blog entries</b>, referenced in Google.
</span>
</div>
</div>
</xpath>
</template>
<!-- Option:Right Column: follow us -->
<template id="opt_blog_rc_follow_us" name="Subscription" priority="4"
<template id="opt_blog_rc_about_us" name="About Us" priority="8"
inherit_id="website_blog.index_right" active="True" customize_show="True">
<xpath expr="//div[@id='main_column']" position="attributes">
<attribute name="class">col</attribute>
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary">
<h6 class="card-header"><b>Stay updated</b></h6>
<h6 class="card-header">About us</h6>
<div class="card-body">
<span>Participate on our social stream.</span>
<h2 class="mt4">
Write a small text here for when <b>new visitors</b> find your website
through your <b>blog entries</b>, referenced in Google.
</div>
</div>
</xpath>
</template>
<!-- Option:Right Column: follow us -->
<template id="opt_blog_rc_follow_us" name="Subscription" priority="12"
inherit_id="website_blog.index_right" active="True" customize_show="True">
<xpath expr="//div[@id='main_column']" position="attributes">
<attribute name="class">col</attribute>
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary">
<h6 class="card-header">Stay updated</h6>
<div class="card-body">
<p class="h6">Participate on our social stream.</p>
<div class="h5">
<a t-if="website.social_facebook" t-att-href="website.social_facebook" class="fa fa-lg fa-facebook-square text-facebook" aria-label="Facebook" title="Facebook"/>
<a t-if="website.social_twitter" t-att-href="website.social_twitter" class="fa fa-lg fa-twitter text-twitter" aria-label="Twitter" title="Twitter"/>
<a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="fa fa-lg fa-linkedin text-linkedin" aria-label="LinkedIn" title="LinkedIn"/>
@@ -508,7 +504,7 @@
<a t-if="website.social_github" t-att-href="website.social_github" class="fa fa-lg fa-github text-github" aria-label="Github" title="Github"/>
<a t-if="website.social_instagram" t-att-href="website.social_instagram" class="fa fa-lg fa-instagram text-instagram" aria-label="Instagram" title="Instagram"/>
<a t-att-href="'/blog/%s/feed' % (blog.id)" class="fa fa-lg fa-rss-square" aria-label="RSS" title="RSS"/>
</h2>
</div>
<hr/>
<t t-if="blog">
<t t-call="website_mail.follow">
@@ -523,49 +519,54 @@
</template>
<!-- Option:Right Column: status -->
<template id="opt_blog_rc_status" name="Status" priority="5"
<template id="opt_blog_rc_status" name="Status" priority="2"
inherit_id="website_blog.index_right" active="True" customize_show="True">
<xpath expr="//div[@id='main_column']" position="attributes">
<attribute name="class">col</attribute>
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary">
<h6 class="card-header"><b>Status</b></h6>
<div class="card-body">
<ul class="list-group">
<t t-set="state" t-value="state_info['state']"/>
<li t-attf-class="list-group-item#{state == 'published' and ' active' or ''}">
<a t-attf-class="text-dark#{state == 'published' and ' text-white' or ''}" t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}"><i class="fa fa-eye mr-2"></i><strong><span t-esc="state_info['published']" /></strong> published</a>
</li>
<li t-attf-class="list-group-item#{state == 'unpublished' and ' active' or ''}">
<a t-attf-class="text-dark#{state == 'unpublished' and ' text-white' or ''}" t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}"><i class="fa fa-edit mr-2"></i><strong><span t-esc="state_info['unpublished']" /></strong> unpublished</a>
</li>
</ul>
</div>
<div class="mb-3" groups="website.group_website_designer">
<h3 class="h4">Status</h3>
<ul class="nav nav-pills flex-column">
<t t-set="state" t-value="state_info['state']"/>
<li class="nav-item">
<a t-attf-class="nav-link #{state == 'published' and 'active' or ''}"
t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}">
<i class="fa fa-eye mr-2"></i>
<strong><span t-esc="state_info['published']" /></strong> published
</a>
</li>
<li class="nav-item">
<a t-attf-class="nav-link #{state == 'unpublished' and 'active' or ''}"
t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}">
<i class="fa fa-edit mr-2"></i>
<strong><span t-esc="state_info['unpublished']" /></strong> unpublished
</a>
</li>
</ul>
</div>
</xpath>
</template>
<!-- Option:Right Column: blogs -->
<template id="opt_blog_rc_blogs" name="Our Blogs" priority="6"
<template id="opt_blog_rc_blogs" name="Our Blogs" priority="4"
inherit_id="website_blog.index_right" active="True" customize_show="True">
<xpath expr="//div[@id='main_column']" position="attributes">
<attribute name="class">col</attribute>
</xpath>
<xpath expr="//div[@id='blog_right_column']" position="inside">
<div class="card mb-3 bg-secondary">
<h6 class="card-header"><b>Our Blogs</b></h6>
<div class="card-body">
<ul class="nav nav-pills flex-column">
<t t-foreach="blogs" t-as="nav_blog">
<li class="nav-item">
<a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}" t-attf-class="nav-link#{nav_blog.id == blog.id and ' active' or ''}">
<span t-field="nav_blog.name"/>
</a>
</li>
</t>
</ul>
</div>
<div class="mb-3">
<h3 class="h4">Our Blogs</h3>
<ul class="nav nav-pills flex-column">
<t t-foreach="blogs" t-as="nav_blog">
<li class="nav-item">
<a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}"
t-attf-class="nav-link #{nav_blog.id == blog.id and 'active' or ''}">
<span t-field="nav_blog.name"/>
</a>
</li>
</t>
</ul>
</div>
</xpath>
</template>