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

Thomas Jund, 06 May 2021 07:11 PM

View differences: inline side by side

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(-)

     .agenda-table tbody tr.odd th.hour,
     .agenda-table tbody tr.odd td {
     	background: hsla(0, 0%, 0%, 0.04);
     	background-color: #f5f5f5;
     	@media print {
     		border-top: 1px solid #aaa;
+    	}
-...
     		border-left: .5em solid;
     		border-bottom: 1px solid;
     		border-color: currentColor;
     		box-shadow: 0 0 0 0 #888;
     		transition:
     			width 150ms ease-in,
     			min-width 150ms ease-in,
     			left 150ms ease-in,
     			right 150ms ease-in,
     			padding 150ms ease-in,
     			box-shadow 250ms ease-in;
     		z-index: 2;
     		&:hover {
     			z-index: 3;
     			z-index: 4;
     			height: auto !important;
     			box-shadow: 0 0 1em 0 #888;
+    		}
     		> * {
     			color: hsla(0, 0%, 0%, 0.6);
-...
+    }
     .monthview tbody td div.booking {
     	box-shadow: 0 0 0 0 #888;
     	transition:
     		width 100ms ease-in,
     		left 100ms ease-in,
     		color 200ms ease-in,
     		box-shadow 200ms ease-in,
     		padding 100ms ease-in;
     	text-indent: -9999px;
     	&:not(:hover) {
     		padding-top: 0;
-...
     		text-indent: 0;
     		left: 0% !important;
     		width: 100% !important;
     		box-shadow: 0 0 1em 0 #888;
+    	}
     	span.desk {
     		display: block;
-...
     	text-indent: 0;
+    }
     .day-view-wrapper {
     	overflow-x: auto;
     	position: relative;
+    }
     .day-view.agenda-table {
     	width: auto;
     	min-width: 100%;
     	thead th {
     		min-width: 8em;
+    	}
     	// sticky hour cells
     	thead td,
     	tbody th {
     		position: sticky;
     		left: 0;
     		z-index: 3;
     		background-color: white;
+    	}
     	.booking {
     		min-width: 0;
     		right: 0.5ex;
     		left: auto;
     		&:hover {
     			right: 0;
     			min-width: 15em;
+    		}
+    	}
+    }
     span.start-time {
     	font-size: 80%;
+    }

     {% block content %}
     <div class="agenda-table-wrapper day-view-wrapper">
     {% for period, desk_infos in view.get_timetable_infos %}
     {% if forloop.first %}
-...
     {% if forloop.last %}
       </tbody>
     </table>
     </div>
     {% endif %}
     {% empty %}
+    -

Project

General

Profile

Produits Entr'ouvert » Chrono

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