Mercurial > libervia-templates

comparison default/static/blog.css @ 44:580670430fa2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
blog/item: expand/reduce improvments: - only expand_box is now clickable, not the whole article anymore, avoiding unwanted click - when in .clicked state, message is "Click to reduce" instead of "expand" - in .clicked state, expand_box is only visible on :hover - in .clicked state, and expand_box is available at top and bottom
author Goffi <goffi@goffi.org>
date Thu, 13 Jul 2017 19:23:02 +0200
parents f8798d691acf
children 650f3456f80d
comparison
equal deleted inserted replaced
43:f8798d691acf 44:580670430fa2
1 /**** articles ****/ 1 /*** articles ***/
2 2
3 article.box { 3 article.box {
4 position: relative; 4 position: relative;
5 margin: 2% auto; 5 margin: 2% auto;
6 border-style: solid none none; 6 border-style: solid none none;
14 .main_article article.box:not(.clicked) { 14 .main_article article.box:not(.clicked) {
15 border-bottom-right-radius: 0; 15 border-bottom-right-radius: 0;
16 border-bottom-left-radius: 0; 16 border-bottom-left-radius: 0;
17 } 17 }
18 18
19 /* header */ 19 /** header **/
20 20
21 header .metadata { 21 header .metadata {
22 text-align: right; 22 text-align: right;
23 } 23 }
24 24
29 article .author::after { 29 article .author::after {
30 content: ", "; 30 content: ", ";
31 } 31 }
32 32
33 33
34 /* content */ 34 /** content **/
35 35
36 article div.content { 36 article div.content {
37 text-align: justify; 37 text-align: justify;
38 font-size: 0.9em; 38 font-size: 0.9em;
39 } 39 }
46 article img { 46 article img {
47 max-width: 100%; 47 max-width: 100%;
48 margin: 0; 48 margin: 0;
49 } 49 }
50 50
51 /** reduce/expand buttons **/
52
51 .expand_box { 53 .expand_box {
52 display: none; 54 cursor: pointer;
55 }
56
57 .box_top {
58 position: absolute;
59 top: 0;
60 left: 0;
61 width: 100%;
62 }
63
64 .box_bottom {
53 position: absolute; 65 position: absolute;
54 bottom: 0; 66 bottom: 0;
55 left: 0; 67 left: 0;
56 width: 100%; 68 width: 100%;
57 } 69 }
58 70
59 .expand_box::before { 71 .expand_box.box_bottom::before {
72 /* we do a gradient to show that text can be expanded */
60 background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff); 73 background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff);
61 display: block; 74 display: block;
62 content: ""; 75 content: "";
63 width: 100%; 76 width: 100%;
64 height: 4em; 77 height: 4em;
74 border-style: solid none dotted none; 87 border-style: solid none dotted none;
75 border-width: 1px 0 1px; 88 border-width: 1px 0 1px;
76 border-bottom-color: gray; 89 border-bottom-color: gray;
77 } 90 }
78 91
79 .main_article .expand_box { 92 article .expand_box .hide {
80 display: initial; 93 /* when not clicked, we only display .show */
81 } 94 display: none;
95 }
96
97 article .expand_box.box_top {
98 /* top expand box only show a reduce button
99 * so it should be displayed only when article is .clicked */
100 display: none;
101 }
102
103 /** other language **/
104
105 /* we hide everything just to display a message informing that
106 * the item is in an other language, and asking to click
107 * to display it */
82 108
83 article.other_lang>div.info { 109 article.other_lang>div.info {
84 display: none; 110 display: none;
85 } 111 }
86 112
88 display: none; 114 display: none;
89 } 115 }
90 116
91 article.other_lang.init>div.info { 117 article.other_lang.init>div.info {
92 display: initial; 118 display: initial;
119 }
120
121 article.other_lang.init>div.expand_box.box_top {
122 /* as we need to have the message clickable, we cheat and use
123 * expand box on the whole surface but fully transparent */
124 display: initial;
125 height: 100%;
126 opacity: 0;
93 } 127 }
94 128
95 article.other_lang.init>div.info>p { 129 article.other_lang.init>div.info>p {
96 margin: 0; 130 margin: 0;
97 padding: 0.2em; 131 padding: 0.2em;
103 border: none; 137 border: none;
104 border-radius: 0; 138 border-radius: 0;
105 padding: 0; 139 padding: 0;
106 } 140 }
107 141
108 /**** comments ****/ 142 /*** comments ***/
109 143
110 button.comments_btn { 144 button.comments_btn {
111 border: none; 145 border: none;
112 font-weight: bold; 146 font-weight: bold;
113 display: block; 147 display: block;
161 border-width: 1px 0; 195 border-width: 1px 0;
162 border-color: black; 196 border-color: black;
163 max-width: 100%; 197 max-width: 100%;
164 } 198 }
165 199
166 /**** media queries ****/ 200 .comments_panel article .expand_box {
201 /* no expand box in comments */
202 display: none;
203 }
204
205 /*** media queries ***/
167 206
168 @media (min-width: 500px) { 207 @media (min-width: 500px) {
169 article.box { 208 article.box {
170 width: 80%; 209 width: 80%;
171 border-style: solid solid none solid; 210 border-style: solid solid none solid;
182 padding: 0.5em; 221 padding: 0.5em;
183 } 222 }
184 223
185 } 224 }
186 225
187 /**** clicked ****/ 226 /*** clicked ***/
188 227
189 .main_article article.clicked { 228 .main_article article.clicked {
190 border-bottom-style: solid; 229 border-bottom-style: solid;
191 } 230 }
192 231
193 .clicked .expand_box { 232 .main_article article.clicked .expand_box.box_top {
194 display: none; 233 display: initial;
195 } 234 }
235
236 .main_article article.clicked .expand_box {
237 opacity: 0;
238 transition: opacity 0.5s;
239 }
240
241 .main_article article.clicked .expand_box p {
242 background-color: transparent;
243 border: none;
244 }
245
246 .main_article article.clicked .expand_box:hover {
247 opacity: 1;
248 color: grey;
249 }
250
251 .main_article article.clicked .expand_box::before {
252 background-image: none;
253 display: none;
254 }
255
256 .main_article article.clicked .expand_box .hide {
257 display: inline;
258 }
259
260 .main_article article.clicked .expand_box .show {
261 display: none;
262 }