Styleguide

Timetable List 

<div class="timetable-list">
    <h2 class="title-medium">Stundenplan von Kurs...</h2>
    <div class="timetable-head row">
        <div class="col-sm-2 col-item-head">Datum</div>
        <div class="col-sm-1 col-item-head">Tag</div>
        <div class="col-sm-2 col-item-head">Zeit</div>
        <div class="col-sm-2 col-item-head">Kursnummer</div>
        <div class="col-sm-2 col-item-head">Fach</div>
        <div class="col-sm-1 col-item-head">Raum</div>
        <div class="col-sm-2 col-item-head">Dozierende</div>
    </div>

    <div class="timetable-item row">
        <div class="col-sm-2 col-item"><span class="col-label">Datum</span>01.01.2020</div>
        <div class="col-sm-1 col-item"><span class="col-label">Tag</span>Di</div>
        <div class="col-sm-2 col-item"><span class="col-label">Zeit</span>20:00 - 21:00</div>
        <div class="col-sm-2 col-item"><span class="col-label">Kursnummer</span>12345</div>
        <div class="col-sm-2 col-item"><span class="col-label">Fach</span>English Grundkurs, Englisch Business</div>
        <div class="col-sm-1 col-item"><span class="col-label">Raum</span>SI 217</div>
        <div class="col-sm-2 col-item"><span class="col-label">Dozierende</span>Max Mustermann</div>
    </div>
    <div class="timetable-item row">
        <div class="col-sm-2 col-item"><span class="col-label">Datum</span>01.01.2020</div>
        <div class="col-sm-1 col-item"><span class="col-label">Tag</span>Di</div>
        <div class="col-sm-2 col-item"><span class="col-label">Zeit</span>20:00 - 21:00</div>
        <div class="col-sm-2 col-item"><span class="col-label">Kursnummer</span>12345</div>
        <div class="col-sm-2 col-item"><span class="col-label">Fach</span>English Grundkurs, Englisch Business</div>
        <div class="col-sm-1 col-item"><span class="col-label">Raum</span>SI 217</div>
        <div class="col-sm-2 col-item"><span class="col-label">Dozierende</span>Max Mustermann</div>
    </div>

    <div class="timetable-legend">
        <h5 class="title-small-normal">Schulhäuser</h5>
        <ul>
            <li>SI = Bildungszentrum Sihlpost</li>
            <li>LAA, LAB = Campus PH Zürich</li>
            <li>LAD = Campus PH Zürich</li>
        </ul>
    </div>
</div>
 
<div class="timetable-list">	
	{% if items %}
		<h2 class="title-medium">{{ title }}</h2>
		{{ timetable_head }}

		{% for item in items %}
			{{ item }}
		{% endfor %}

		<div class="timetable-legend">
			<h5 class="title-small-normal">Schulhäuser</h5>
			<ul>
				<li>SI = Bildungszentrum Sihlpost</li>
				<li>LAA, LAB = Campus PH Zürich</li>
				<li>LAD = Campus PH Zürich</li>
			</ul>
		</div>
	{% else %} 
		<h2 class="title-medium">{{ title_empty }}</h2>
		<div class="empty-list">Keine Einträge für Lorem ipsum</div>	
	{% endif %}
</div>
 
{
  "title": "Stundenplan von Kurs...",
  "title_empty": "Keine Einträge",
  "timetable_head": [
    {
      "$timetable-head": null,
      "dummycontent": ""
    }
  ],
  "items": [
    {
      "$timetable-item": {
        "dummycontent": ""
      }
    },
    {
      "$timetable-item": {
        "dummycontent": ""
      }
    }
  ]
}
  • Content: 
    .timetable-list {
	.empty-list {
		border: 1px solid #000;
		padding: 1rem 2rem;
	}

	.title-medium {
		margin-bottom: 3rem;
	}

	.timetable-legend {
		.title-small {
		}

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}
}
  • URL: /components/raw/timetable-list/timetable-list.scss
  • Filesystem Path: components/02-components/timetable/timetable-list/timetable-list.scss
  • Size: 238 Bytes
  • Handle: @timetable-list
  • Preview:
  • Filesystem Path: components/02-components/timetable/timetable-list/timetable-list.twig

There are no notes for this item.