kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix overflow errors

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/components/favourites.html
View File

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

2
resources/components/finder.html
View File

@ -24,7 +24,7 @@
<li v-for="stop in group" :key="stop.id" class="d-flex"> <li v-for="stop in group" :key="stop.id" class="d-flex">
<picker-stop :stop="stop" class="flex-grow-1"> <picker-stop :stop="stop" class="flex-grow-1">
<template v-slot:primary-action> <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> <tooltip>dodaj przystanek</tooltip>
<fa :icon="['fal', 'check']" /> <fa :icon="['fal', 'check']" />
</button> </button>

14
resources/components/picker/stop.html
View File

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

2
resources/styles/_favourites.scss
View File

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

20
resources/styles/_stop.scss
View File

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

1
resources/styles/main.scss
View File

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

2
templates/app.html.twig
View File

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