50 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			50 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <div>
 | |
|     <div class="d-flex">
 | |
|         <div class="d-flex position-relative" style="min-width: 0">
 | |
|             <slot name="primary-action" />
 | |
|             <div class="overflow-hidden align-self-center">
 | |
|                 <stop :stop="stop" />
 | |
|                 <div class="stop__destinations" v-if="destinations && destinations.length > 0">
 | |
|                     <ul>
 | |
|                         <li class="stop__destination destination" v-for="destination in destinations" :key="destination.stop.id">
 | |
|                             <ul class="destination__lines">
 | |
|                                 <li v-for="line in destination.lines">
 | |
|                                     <line-symbol :line="line" :key="line.symbol" simple/>
 | |
|                                 </li>
 | |
|                             </ul>
 | |
|                             <span class="destination__name ml-1">{{ destination.stop.name }}</span>
 | |
|                         </li>
 | |
|                     </ul>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </div>
 | |
| 
 | |
|         <div class="stop__actions">
 | |
|             <slot name="actions">
 | |
|                 <button class="btn btn-action" ref="action-info" @click="details = !details">
 | |
|                     <tooltip>dodatkowe informacje</tooltip>
 | |
|                     <ui-icon icon="info"/>
 | |
|                 </button>
 | |
| 
 | |
|                 <button class="btn btn-action" ref="action-map" v-hover:map>
 | |
|                     <ui-icon icon="map"/>
 | |
|                 </button>
 | |
|             </slot>
 | |
|         </div>
 | |
|     </div>
 | |
| 
 | |
|     <keep-alive>
 | |
|         <portal to="popups">
 | |
|             <ui-dialog v-if="details" @leave="details = false" behaviour="modal" class="ui-modal--medium" title="Szczegóły przystanku">
 | |
|                 <stop-details :stop="stop"/>
 | |
|             </ui-dialog>
 | |
|         </portal>
 | |
|     </keep-alive>
 | |
|     <keep-alive>
 | |
|         <!-- FIXME: This should be in portal but it's not possible due to information loss, maybe in vue3 it will be better?-->
 | |
|         <ui-dialog reference="action-map" v-if="showMap" arrow class="ui-popup--no-padding" style="width: 500px;" placement="right-start" v-hover:inMap>
 | |
|             <stop-map :stop="stop" style="height: 300px"/>
 | |
|         </ui-dialog>
 | |
|     </keep-alive>
 | |
| </div>
 |