I'm really not sure that I am on the right track ... every time I find a solution to my previous problem, and then when I integrate the “fixed” code with something else, it breaks again and it made me think that I am doing something fundamentally wrong here. That's why I ask you to REVIEW and suggest FIX or add a new solution for something that I plan to achieve.
I am trying to display flight information, and each route should be displayed as you see in the picture.
It currently works, but in some cases, when the outbound flight has more connections than the incoming flight, the flight path (blue line) is interrupted and remains at the same level as the second flight in Outbound. I want the blue path to go all the way down in the current scenario, and each path length of the incoming / outgoing route should be synchronized with respect to each other. (same length no matter how many connections each flight has)
Could you help me figure out how to fix or change the whole architecture, solution, CSS, draw a line of the blue path and keep the incoming and outgoing flights of the same length regardless of how many connections each of them has?
Plunger Code Example
HTML:
<div class="roundtrip"> <div class="col-md-6">Outbound <div class="trip" ng-repeat="departureFlight in ticket.route.departureFlights"> <div class="flight align-bottom"> <div class="date-time col-md-offset-2 col-md-3"> <div class="flight-time">{{departureFlight.departureTime | date:"h:mma"}}</div> <div class="flight-date">{{departureFlight.departureTime | date:"EEE, MMM d, y"}}</div> </div> <div class="col-md-offset-0 col-md-2">{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</div> </div> <div class="flight-path"> <div class="flight-path"> <div class="flight-duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}hr</div> </div> </div> <div class="flight align-bottom"> <div class="date-time col-md-offset-2 col-md-3"> <div class="flight-time">{{departureFlight.arrivalTime | date:"h:mma"}}</div> <div class="flight-date">{{departureFlight.arrivalTime | date:"EEE, MMM d, y"}}</div> </div> <div class="col-md-offset-0 col-md-2">{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</div> </div> <div class="connection" ng-if="departureFlight.transferFlight"> {{departureFlight.arrivalTime | date:"h:mm"}}hr wait </div> </div> </div> <div class="col-md-6">Inbound <div class="trip" ng-repeat="returnFlight in ticket.route.returnFlights"> <div class="flight align-bottom"> <div class="date-time col-md-offset-2 col-md-3"> <div class="flight-time">{{returnFlight.departureTime | date:"h:mma"}}</div> <div class="flight-date">{{returnFlight.departureTime | date:"EEE, MMM d, y"}}</div> </div> <div class="col-md-offset-0 col-md-2">{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</div> </div> <div class="flight-path"> <div class="flight-path"> <div class="flight-duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}hr</div> </div> </div> <div class="flight align-bottom"> <div class="date-time col-md-offset-2 col-md-3"> <div class="flight-time">{{returnFlight.arrivalTime | date:"h:mma"}}</div> <div class="flight-date">{{returnFlight.arrivalTime | date:"EEE, MMM d, y"}}</div> </div> <div class="col-md-offset-0 col-md-2">{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</div> </div> <div class="connection" ng-if="returnFlight.transferFlight"> {{returnFlight.arrivalTime | date:"h:mm"}}hr wait </div> </div> </div> </div>
CSS
.searchResult { padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; } .align-bottom { /*added*/ display: flex; align-items: flex-end; } .roundtrip { width: 100%; display: inline-flex; flex-direction: row; align-items: stretch; } .trip { //width: 100px; text-align: center; display: flex; flex-direction: column; } .flight { white-space: nowrap; } .date-time { text-align: center; } .flight-path { position: relative; width: 6px; min-height: 135px; flex-grow: 1; align-self: center; background-color:
html angularjs css less twitter-bootstrap
Wild goat
source share