Make narrow-screen schedule details more distinct
In the narrow view, lots of details that aren't in the normal view appear to compensate for not having clear row/column headers any more. However, all the detail can look very same-same; this tweak makes rooms and end times more distinct. Session chair info is made always italic, and a label is added to make it clear that this person is not the speaker.
This commit is contained in:
		
							parent
							
								
									54f53cd2c6
								
							
						
					
					
						commit
						ffe0f64182
					
				
					 2 changed files with 11 additions and 8 deletions
				
			
		|  | @ -1,3 +1,4 @@ | ||||||
|  | 
 | ||||||
| {% load lca2018_tags %} | {% load lca2018_tags %} | ||||||
| {% load waffle_tags %} | {% load waffle_tags %} | ||||||
| <table class="calendar table table-bordered"> | <table class="calendar table table-bordered"> | ||||||
|  | @ -40,14 +41,12 @@ | ||||||
|                   {% if slot.sessions %} |                   {% if slot.sessions %} | ||||||
|                     <div> |                     <div> | ||||||
|                       {% for session in slot.sessions.all %} |                       {% for session in slot.sessions.all %} | ||||||
|  |                         <em>Session chair: | ||||||
|                         {% if not session.chair %} |                         {% if not session.chair %} | ||||||
|                           <br /> |  | ||||||
|                           <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a> |                           <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a> | ||||||
|                         {% elif session.chair.user == request.user %} |                         {% elif session.chair.user == request.user %} | ||||||
|                           <br /> |                           <a href="{% url "schedule_session_detail" session.id %}"><strong>You!</strong></a> | ||||||
|                           <a href="{% url "schedule_session_detail" session.id %}">(You are session chair)</a> |                         {% endif %}</em> | ||||||
|                         {% endif %} |  | ||||||
|                         </a> |  | ||||||
|                       {% endfor %} |                       {% endfor %} | ||||||
|                     </div> |                     </div> | ||||||
|                   {% endif %} |                   {% endif %} | ||||||
|  | @ -64,7 +63,7 @@ | ||||||
|             {% if "break" in slot.kind.label %} |             {% if "break" in slot.kind.label %} | ||||||
|             {% else %} |             {% else %} | ||||||
|               <span class="room"> |               <span class="room"> | ||||||
|                 {{ slot.rooms|join:", "}} |                 {{ slot.rooms|join:", "}}<span class="endtime"> ends {{ slot.end|date:"h:iA" }}</span> | ||||||
|               </span> |               </span> | ||||||
|             {% endif %} |             {% endif %} | ||||||
|           </td> |           </td> | ||||||
|  |  | ||||||
|  | @ -206,12 +206,15 @@ div.system-message p.system-message-title { | ||||||
| /* Schedule, proposal and presenter display */ | /* Schedule, proposal and presenter display */ | ||||||
| /* Make sure twitter/link buttons get displayed */ | /* Make sure twitter/link buttons get displayed */ | ||||||
| 
 | 
 | ||||||
| .room { | .mw760, .room { | ||||||
|     display: none; |     display: none; | ||||||
| } | } | ||||||
| .speaker { | .speaker { | ||||||
|     display: block; |     display: block; | ||||||
| } | } | ||||||
|  | .endtime { | ||||||
|  |     font-style: italic; | ||||||
|  | } | ||||||
| 
 | 
 | ||||||
| .presenters .btn-group { | .presenters .btn-group { | ||||||
|     display: inline-flex; |     display: inline-flex; | ||||||
|  | @ -220,7 +223,8 @@ div.system-message p.system-message-title { | ||||||
| .presenters .btn-svg { width: 20px; } | .presenters .btn-svg { width: 20px; } | ||||||
| 
 | 
 | ||||||
| @media all and (max-width: 760px) { | @media all and (max-width: 760px) { | ||||||
|     .room {	display: block;  } |     .mw760, .room {	display: block;  } | ||||||
|  |     .speaker { font-weight: bold; } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @media only screen and (max-width: 760px) { | @media only screen and (max-width: 760px) { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 James Polley
						James Polley