Skip to content

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

romain_dev: thread paginate

parent 9e519665
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 697 deletions
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_css.css
View file @ 22ef933f
div[data-gadget-url$="gadget_thread_reader.html"] > ol {
div[data-gadget-url$="gadget_thread_reader.html"] {
max-width: 50em;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li {
padding-bottom: 2em;
padding-bottom: 12pt;
/*
&:nth-child(even) {
background-color: rgba(230, 230, 230, 0.65);
......@@ -12,12 +12,15 @@ div[data-gadget-url$="gadget_thread_reader.html"] > ol > li {
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: 1em;
margin-top: 6pt;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_avatar {
display: inline-block;
margin-right: 1em;
margin-right: 6pt;
width: 3em;
height: 3em;
line-height: 3em;
......@@ -31,5 +34,50 @@ div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_avatar {
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li + li {
border-top: solid 1px #0E81C2;
padding-top: 1em;
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/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_css.xml
View file @ 22ef933f
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.21835.12698.21896</string> </value>
<value> <string>989.23184.30015.20821</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -258,7 +258,7 @@
</tuple>
<state>
<tuple>
<float>1610706932.15</float>
<float>1610719802.53</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_html.html
View file @ 22ef933f
......@@ -25,5 +25,7 @@
</head>
<body>
<ol></ol>
<nav></nav>
</body>
</html>
\ No newline at end of file
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_html.xml
View file @ 22ef933f
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.21729.52523.14404</string> </value>
<value> <string>989.21729.64568.40328</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1610632439.05</float>
<float>1610708710.59</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_js.xml
View file @ 22ef933f
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.22940.20056.59460</string> </value>
<value> <string>989.23313.43269.31948</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -258,7 +258,7 @@
</tuple>
<state>
<tuple>
<float>1610705282.38</float>
<float>1610727465.34</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/SkinTemplateItem/portal_skins/romain_dev/gadget_thread_reader.less.txt
View file @ 22ef933f
@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 {
// Limit the width to make reading more pleasant on large screen
max-width: 50em;
& > li {
padding-bottom: 2em;
padding-bottom: @double-margin-size;
/*
&:nth-child(even) {
background-color: rgba(230, 230, 230, 0.65);
......@@ -20,15 +62,18 @@ div[data-gadget-url$="gadget_thread_reader.html"] {
*/
& > div.post_content {
display: inline-block;
& > time {
color: @colorlabel;
}
& > div {
// Separate post info (user and time) from content
margin-top: 1em;
margin-top: @margin-size;
}
}
& > div.post_avatar {
display: inline-block;
margin-right: 1em;
margin-right: @margin-size;
width: @avatar_size;
height: @avatar_size;
line-height: @avatar_size;
......@@ -46,8 +91,47 @@ div[data-gadget-url$="gadget_thread_reader.html"] {
& + li {
// Separate posts
border-top: solid 1px @colorsubheaderbackground;
padding-top: 1em;
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
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