Skip to content

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

romain_dev: thread paginate

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