Design Top7

← zurück zum Umsetzung Wiki

Verantwortlicher:
Simon Künnen
Patrick Puritscher

Beschreibung:
Seite stellt eine explizite Auswahl von 7 Routen zur Verfügung, die durch die Redaktion bestimmt wird. Jede Route wird in einer eigenen Box mit einem Icon dargestellt. Dieses Modul bietet des Weiteren die Grundlage für die "Offline Routen", welches die Routen darstellt, welche von dem Nutzer offline gespeichert wurden. Prinzipiell wird eine Listendarstellung verwendet.

Betroffende Dateien:
style.css
elements.css

Eingebundene Bibliotheken:
-

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

Darstellung:

---

CSS

style.css

#theatre-myroutes {
    min-height: 100%;
    background: url('../images/myroutes_background.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px 0;
    float: left;
    width: 100%;
}
#theatre-recentroute {
    min-height: 100%;
    float: left;
    width: 100%;
}
#theatre-myroutes {
    float:left;
    width:100%;
    min-height: 100%;background: url('../images/myroutes_background.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

elements.css

/**
 * Liste - SMALL
 * fuer Myroutes 
 */

.e__list-small {
    margin: 0 10px;
    border: 1px solid #c0c0c0;
}

.e__list-small,
.e__list-small-element {
    padding: 0;
    list-style-type: none;
}

.e__list-small-element {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #c0c0c0;
}

.e__list-small-element:last-of-type {
    border-bottom: 0;
}

.e__list-small-element-icon {
    background: url('../images/icon_route.svg') no-repeat #f5f5f5 center;
    background-size: 68%;
    width: 60px;
    height: 100%;
    float: left;
}

.e__list-small-element-content {
    height: 100%;
    float: left;
    padding: 3px;
}

.e__list-small-element-options {
    float: right;
    height: 100%;
    width: 60px;
}

.e__list-small-element-head {
    font-size: 1rem;
    font-weight: 700;
}

.e__list-small-element-body > p {
    color: #a6a6a6;
    font-size: 0.6rem;
    font-weight: 200;
    padding: 3px 0px;
    margin: 0;
}

/** /Liste - SMALL **/

###HTML

<section id="theatre-myroutes">
            <ul class="e__list-small">
                <li class="e__list-small-element clearfix">
                    <div class="e__list-small-element-icon clearfix"></div>
                    <div class="e__list-small-element-content clearfix">
                        <h3 class="e__list-small-element-head">Erstsemester Tour</h3>

                        <div class="e__list-small-element-body">
                            <p>Gespeichert am 05.08.2014 - 16:03 Uhr<br>
                                Tour geplant für Montag</p>
                        </div>
                    </div>
                    <div class="e__list-small-element-options clearfix align-center">
                        <span class="e__btn i-f__trash"></span>
                    </div>
                </li>
                <li class="e__list-small-element clearfix">
                    <div class="e__list-small-element-icon clearfix"></div>
                    <div class="e__list-small-element-content clearfix">
                        <h3 class="e__list-small-element-head">Erstsemester Tour</h3>

                        <div class="e__list-small-element-body">
                            <p>Gespeichert am 05.08.2014 - 16:03 Uhr<br>
                                Tour geplant für Montag</p>
                        </div>
                    </div>
                    <div class="e__list-small-element-options clearfix align-center">
                        <span class="e__btn i-f__trash"></span>
                    </div>
                </li>
            </ul>
        </section>
        <section id="theatre-myroutes">
            <p class="e__infobox e__infobox-danger">Du hast noch keine Routen gespeichert.</p>
        </section>