Projet

Général

Profil

0001-CSS-improve-day-view-UI-when-calendar-has-many-desks.patch

Thomas Jund, 06 mai 2021 19:11

Télécharger (2,92 ko)

Voir les différences:

Subject: [PATCH] CSS: improve day view UI when calendar has many desks
 (#52464)

 chrono/manager/static/css/style.scss          | 52 +++++++++++++++----
 .../manager_meetings_agenda_day_view.html     |  2 +
 2 files changed, 43 insertions(+), 11 deletions(-)
chrono/manager/static/css/style.scss
165 165

  
166 166
.agenda-table tbody tr.odd th.hour,
167 167
.agenda-table tbody tr.odd td {
168
	background: hsla(0, 0%, 0%, 0.04);
168
	background-color: #f5f5f5;
169 169
	@media print {
170 170
		border-top: 1px solid #aaa;
171 171
	}
......
231 231
		border-left: .5em solid;
232 232
		border-bottom: 1px solid;
233 233
		border-color: currentColor;
234

  
234
		box-shadow: 0 0 0 0 #888;
235
		transition:
236
			width 150ms ease-in,
237
			min-width 150ms ease-in,
238
			left 150ms ease-in,
239
			right 150ms ease-in,
240
			padding 150ms ease-in,
241
			box-shadow 250ms ease-in;
235 242
		z-index: 2;
236 243
		&:hover {
237
			z-index: 3;
244
			z-index: 4;
238 245
			height: auto !important;
246
			box-shadow: 0 0 1em 0 #888;
239 247
		}
240 248
		> * {
241 249
			color: hsla(0, 0%, 0%, 0.6);
......
254 262
}
255 263

  
256 264
.monthview tbody td div.booking {
257
	box-shadow: 0 0 0 0 #888;
258
	transition:
259
		width 100ms ease-in,
260
		left 100ms ease-in,
261
		color 200ms ease-in,
262
		box-shadow 200ms ease-in,
263
		padding 100ms ease-in;
264 265
	text-indent: -9999px;
265 266
	&:not(:hover) {
266 267
		padding-top: 0;
......
270 271
		text-indent: 0;
271 272
		left: 0% !important;
272 273
		width: 100% !important;
273
		box-shadow: 0 0 1em 0 #888;
274 274
	}
275 275
	span.desk {
276 276
		display: block;
......
281 281
	text-indent: 0;
282 282
}
283 283

  
284

  
285
.day-view-wrapper {
286
	overflow-x: auto;
287
	position: relative;
288
}
289
.day-view.agenda-table {
290
	width: auto;
291
	min-width: 100%;
292
	thead th {
293
		min-width: 8em;
294
	}
295
	// sticky hour cells
296
	thead td,
297
	tbody th {
298
		position: sticky;
299
		left: 0;
300
		z-index: 3;
301
		background-color: white;
302
	}
303
	.booking {
304
		min-width: 0;
305
		right: 0.5ex;
306
		left: auto;
307
		&:hover {
308
			right: 0;
309
			min-width: 15em;
310
		}
311
	}
312
}
313

  
284 314
span.start-time {
285 315
	font-size: 80%;
286 316
}
chrono/manager/templates/chrono/manager_meetings_agenda_day_view.html
8 8

  
9 9
{% block content %}
10 10

  
11
<div class="agenda-table-wrapper day-view-wrapper">
11 12
{% for period, desk_infos in view.get_timetable_infos %}
12 13

  
13 14
{% if forloop.first %}
......
58 59
{% if forloop.last %}
59 60
  </tbody>
60 61
</table>
62
</div>
61 63
{% endif %}
62 64

  
63 65
{% empty %}
64
-