Design Aktuelle Route

← zurück zum Umsetzung Wiki

Verantwortlicher:
Simon Künnen
Patrick Puritscher

Beschreibung:
Seite stellt die berechnete, aktuelle Route dar. Dazu wird das Element Liste Big mit dem Element Barcard kombiniert. Durch einen Klick auf ein einzelnes Element werden zusätzliche Information angezeigt. Der Nutzer hat hier zudem die Möglichkeit den Eintrag zu melden. Weiter kann durch einen Swipe von Rechts nach Links bzw. durch einen Klick auf das Icon .i__close das gesamte Element ausgetauscht werden. Dazu wird die Ansicht .switchside der Liste Big genutzt.

Betroffende Dateien:
style.css
elements.css

Eingebundene Bibliotheken:
-

Genutzte Elemente:
Icons
Popup
Navigation
Listen
Barcard
Rating
Fehlermeldungen
Loading Overlay
weitere Elemente

Darstellung:

---

CSS

style.css

#theatre-recentroute {
    min-height: 100%;
    float: left;
    width: 100%;
}

elements.css
siehe genutzte Elemente

HTML

<section id="theatre-recentroute" class="grid">
	<ul class="e__list-big">
		<li class="e__list-big-element clearfix">
			<div class="e__list-big-element-frontside e__barcard" style="background-image: url('images/bars/1.jpg')">
				<div class="e__list-big-element-frontside-head e__barcard-head grid">
					<div class="col-7">
						<a class="when__expanded__show i__close"></a>

						<h3><span class="when__expanded__hidden">1. </span>Hascienda</h3>
					</div>
					<span class="col-5 align-right timeslot">18:30 - 19:30</span>
				</div>
				<div class="e__list-big-element-frontside-body e__barcard-body clearfix">
					<div class="e__list-big-element-frontside-body-main">
						<h4>Happy Hour</h4>

						<p>Jeden Tag 00:00 - 24:00
							<br>
							<strong>alle Cocktails für 4,99€</strong>
						</p>
					</div>
					<div class="e__list-big-element-frontside-body-expand grid when__expanded__show">
						<div class="col-8">
							<h4>Öffnungszeigen</h4>

							<p>Montag bis Freitag
								<br>ab 09.00 Uhr</p>

							<p>Samstag und Sonntag
								<br>ab 12.00 Uhr</p>
							</p>
						</div>
						<div class="col-4 align-center">
							<div class="e__barcard-body-map" style="background:url('images/_dummy_map.png')">
							</div>
							<div class="e__btn e__btn-danger e__barcard-body-btn-melden">Melden</div>
						</div>
					</div>
				</div>
				<div class="e__list-big-element-frontside-footer e__barcard-footer">
					<span class="col-4 e__rating"><span class="i__euro-colored"></span><span class="i__euro-halfcolored"></span><span class="i__euro"></span><span class="i__euro"></span><span class="i__euro"></span></span>
					<span class="col-2"></span>
					<span class="col-6 align-right e__rating"><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-halfcolored"></span><span class="i__star"></span><span class="e__rating-description">(5/10)</span></span>
				</div>
			</div>
			<div class="e__list-big-element-backside grid">
				<div class="col-12 align-center e__list-big-element-backside-content">
					<span class="i-f__reload2"></span>

					<p class="icon-undertitle">Bar austauschen</p>
				</div>
			</div>
			<div class="e__list-big-element-switchside">
				<div class="e__slider grid">
					<div class="e__slider-background padding-default">
						<div class="col-7"></div>
						<span class="col-5 align-right e__slider-background-text">18:30 - 19:30</span>

						<span class="e__slider-background-footer align-center">Wählen Sie eine alternative Bar aus</span>
					</div>
					<ul class="e__slider-stage" style="width:200%;left:0%;">
						<li class="e__slider-stage-element">
							<div class="e__barcard clearfix">
								<div class="e__barcard-head grid">
									<div class="col-7">
										<h3>Hascienda</h3>
									</div>
								</div>
								<div class=" e__barcard-body clearfix">
									<p class="e__quote">„Seit 1991 der temperamentvolle Mexikaner in Stuttgart! Erleben Sie die richtige Mischung aus vielfältigen mexikanischen Gaumenfreuden und bester Unterhaltung“</p>
								</div>
								<div class="e__barcard-footer">
									<span class="col-5"><span class="i__euro-colored"></span><span class="i__euro-halfcolored"></span><span class="i__euro"></span><span class="i__euro"></span><span class="i__euro"></span></span>
									<span class="col-2"></span>
									<span class="col-5 align-right"><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-halfcolored"></span><span class="i__star"></span></span>
								</div>
							</div>
						</li>
						<li class="e__slider-stage-element" style="width:calc( 50% - 70px )">
							<div class="e__barcard clearfix">
								<div class="e__barcard-head grid">
									<div class="col-7">
										<h3>Mauritius</h3>
									</div>
								</div>
								<div class=" e__barcard-body clearfix">
									<p class="e__quote">„Seit 1991 der temperamentvolle Mexikaner in Stuttgart! Erleben Sie die richtige Mischung aus vielfältigen mexikanischen Gaumenfreuden und bester Unterhaltung“</p>
								</div>
								<div class="e__barcard-footer">
									<span class="col-5"><span class="i__euro-colored"></span><span class="i__euro-halfcolored"></span><span class="i__euro"></span><span class="i__euro"></span><span class="i__euro"></span></span>
									<span class="col-2"></span>
									<span class="col-5 align-right"><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-halfcolored"></span><span class="i__star"></span></span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</li>
		...
	</ul>
</section>