Fix overflow errors

This commit is contained in:
Kacper Donat 2020-02-06 23:01:25 +01:00
parent 38e6ae52e1
commit 2b0792775f
7 changed files with 30 additions and 13 deletions

View File

@ -5,7 +5,7 @@
<div class="icon">
<fa :icon="['fal', 'star']"/>
</div>
<div class="d-flex flex-column">
<div class="overflow-hidden">
<span class="text flex-grow-1">{{ favourite.name }}</span>
<ul class="favourite__stops">
<li class="favourite__stop" v-for="stop in favourite.stops" :key="stop.id"><stop :stop="stop"/></li>

View File

@ -24,7 +24,7 @@
<li v-for="stop in group" :key="stop.id" class="d-flex">
<picker-stop :stop="stop" class="flex-grow-1">
<template v-slot:primary-action>
<button @click="select(stop, $event)" class="btn btn-action align-self-start">
<button @click="select(stop, $event)" class="btn btn-action">
<tooltip>dodaj przystanek</tooltip>
<fa :icon="['fal', 'check']" />
</button>

View File

@ -1,12 +1,14 @@
<div class="finder__stop">
<div class="d-flex">
<slot name="primary-action" />
<div style="overflow: hidden">
<stop :stop="stop" />
<!-- <div style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ut!</div>-->
<ul class="stop__destinations">
<li class="stop__destination" v-for="destination in stop.destinations" :key="destination.id"><stop :stop="destination"/></li>
</ul>
<div class="overflow-hidden align-self-center">
<stop :stop="stop" class="my-1"/>
<div class="stop__destinations" v-if="stop.destinations && stop.destinations.length > 0">
<fa :icon="['far', 'chevron-right']" />
<ul class="ml-1">
<li class="stop__destination" v-for="destination in stop.destinations" :key="destination.id">{{ destination.name }}</li>
</ul>
</div>
</div>
<div class="stop__actions flex-space-left">

View File

@ -31,6 +31,8 @@
align-items: center;
padding: 0;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.favourite__stop {

View File

@ -1,13 +1,15 @@
.stop, .stop-group__header {
.stop-group__header {
@extend .flex;
flex-wrap: wrap;
}
.stop {
flex-wrap: nowrap;
}
.stop__name {
//flex: 1 0;
line-height: 1.1;
margin-right: .5em;
}
.stop__actions {
@ -26,6 +28,10 @@
margin-bottom: 0;
}
.stop__variant {
margin-left: .5em;
}
.stop__tracks .line__symbol .badge {
flex-grow: 1;
}
@ -48,7 +54,13 @@
}
.stop__destinations {
@extend .favourite__stops;
display: flex;
font-size: $small-font-size;
align-items: center;
ul {
@extend .favourite__stops;
}
}
.stop__destination {

View File

@ -9,6 +9,7 @@ $primary: #005ea8;
$custom-control-indicator-checked-bg: $dark;
$custom-control-indicator-active-bg: $dark;
$small-font-size: $font-size-base * 0.8;
$line-types: (
'trolleybus': #419517,

View File

@ -103,7 +103,7 @@
<li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
<picker-stop :stop="stop" class="flex-grow-1">
<template v-slot:primary-action>
<button @click="remove(stop)" class="btn btn-action align-self-start">
<button @click="remove(stop)" class="btn btn-action">
<tooltip>usuń przystanek</tooltip>
<fa :icon="['fal', 'times']"></fa>
</button>