Skip to content

erp5
erp5
Commit c67bc8aa authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

erp5_web_renderjs_ui: add thread reader gadget 

The purpose of this gadget is to display Event's texts as on a discussion forum.
parent a6fbb478
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1642 additions and 0 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_thread_reader_css.css 0 → 100644
View file @ c67bc8aa
div[data-gadget-url$="gadget_thread_reader.html"] {
max-width: 50em;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol {
background-color: #FFFFFF;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li {
padding-bottom: 12pt;
/*
&:nth-child(even) {
background-color: rgba(230, 230, 230, 0.65);
}
*/
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_content {
display: inline-block;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_content > time {
color: hsl(0, 0%, 42%);
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_content > div {
margin-top: 6pt;
max-width: 46em;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_avatar {
display: inline-block;
margin-right: 6pt;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
border-radius: 50%;
background: #0E81C2;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
vertical-align: top;
text-transform: uppercase;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li + li {
border-top: solid 1px #0E81C2;
padding-top: 6pt;
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav {
display: flex;
padding-top: 6pt;
border-top: 2px solid rgba(0, 0, 0, 0.14902);
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav span {
opacity: 0.3;
flex: 2;
text-align: right;
float: right;
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav a {
padding: 6pt;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
background-color: #FFFFFF;
margin-right: 6pt;
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav a::before {
margin-right: 6pt;
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav a:hover,
div[data-gadget-url$="gadget_thread_reader.html"] > nav a:active {
background-color: #e0e0e0;
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav a:last-of-type {
margin-right: 0;
}
div[data-gadget-url$="gadget_thread_reader.html"] > nav a:hover,
div[data-gadget-url$="gadget_thread_reader.html"] > nav a:active {
background-color: #e0e0e0;
}
@media not screen and (min-width: 45em) {
div[data-gadget-url$="gadget_thread_reader.html"] > nav a {
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-url$="gadget_thread_reader.html"] > nav a::before {
float: left;
text-indent: 6pt;
}
}
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_thread_reader_html.html 0 → 100644
View file @ c67bc8aa
<!DOCTYPE html>
<html>
<head>
<!--
data-i18n=No records
data-i18n=Records
data-i18n=Reset
data-i18n=Previous
data-i18n=Next
-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Thread Reader</title>
<!-- renderjs -->
<link rel="stylesheet" href="gadget_thread_reader.css">
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="domsugar.js" type="text/javascript"></script>
<!--script src="jiodev.js" type="text/javascript"></script-->
<script src="gadget_global.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_thread_reader.js" type="text/javascript"></script>
</head>
<body>
<ol></ol>
<nav></nav>
</body>
</html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/gadget_thread_reader.less.txt 0 → 100644
View file @ c67bc8aa
@colorheaderbackground: #085078;
@colorsubheaderbackground: #0E81C2;
@foreground-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
@colorlabel: hsl(0, 0%, 42%);
@margin-size: 6pt;
@double-margin-size: 12pt;
@border-size: 1px;
@border-type: solid;
@border-transparency: .3;
@border-color: rgba(0, 0, 0, @border-transparency);
@border: @border-size @border-type @border-color;
@border-radius: @radius;
@radius: .325em;
@white: #FFFFFF;
@colorbackground: @white;
@colorblocklinkbackground: #e0e0e0;
@smartphone: ~"not screen and (min-width: 45em)";
@tablet: ~"only screen and (min-width: 45em) and (max-width: 85em)";
@desktop: ~"not screen and (max-width: 85em)";
@listboxbordercolor: rgba(0, 0, 0, 0.14902);
.button() {
padding: @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @border-radius;
background-color: @colorbackground;
&::before{
margin-right: @margin-size;
}
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
.hide_text(@width: 3em) {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
& when (@width > 0) {
width: @width;
}
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
@avatar_size: 3em;
div[data-gadget-url$="gadget_thread_reader.html"] {
// Limit the width to make reading more pleasant on large screen
max-width: 50em;
& > ol {
background-color: @colorbackground;
& > li {
padding-bottom: @double-margin-size;
/*
&:nth-child(even) {
background-color: rgba(230, 230, 230, 0.65);
}
*/
& > div.post_content {
display: inline-block;
max-width: 46em;
& > time {
color: @colorlabel;
}
& > div {
// Separate post info (user and time) from content
margin-top: @margin-size;
}
}
& > div.post_avatar {
display: inline-block;
margin-right: @margin-size;
width: @avatar_size;
height: @avatar_size;
line-height: @avatar_size;
text-align: center;
border-radius: 50%;
background: @colorsubheaderbackground;
color: @white;
text-shadow: @foreground-text-shadow;
vertical-align: top;
text-transform: uppercase;
}
& + li {
// Separate posts
border-top: solid 1px @colorsubheaderbackground;
padding-top: @margin-size;
}
}
}
& > nav {
// XXX Copied from listbox
display: flex;
padding-top: @margin-size;
border-top: 2px solid @listboxbordercolor;
span {
opacity: .3;
flex: 2;
text-align: right;
float: right;
}
a {
.button();
margin-right: @margin-size;
&:last-of-type {
margin-right: 0;
}
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
@media @smartphone {
.hide_text(@width: initial);
}
&::before {
@media @smartphone {
float: left;
text-indent: @margin-size;
}
}
}
}
}
\ No newline at end of file
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/gadget_thread_reader.less.xml 0 → 100644
View file @ c67bc8aa
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>__name__</string> </key>
<value> <string>gadget_thread_reader.less</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/plain</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7