{% extends "plainui/base.html" %} {% import "plainui/components/title.html" as titleMacro with context%} {% import "plainui/components/logo.html" as logoMacro %} {% import "plainui/components/markdown.html" as markdownMacro %} {% import "plainui/components/event_info.html" as eventInfoMacro %} {% import "plainui/components/slider.html" as sliderMacro %} {% import "plainui/components/resourcesbox.html" as resboxMacro %} {% import "plainui/components/tagbox.html" as tagboxMacro %} {% import "plainui/components/listbox.html" as listboxMacro %} {% import "plainui/components/tile_board.html" as tileBoardMacro %} {% import "plainui/components/image.html" as imageMacro %} {% import "plainui/components/form_elements.html" as formElementsMacro %} {% import "plainui/components/three_cards.html" as threeCardsMacro %} {% import "plainui/components/list_events.html" as list_events with context %} {% import "plainui/components/list_assemblies.html" as list_assm with context %} {% import "plainui/components/list_rooms.html" as list_rooms with context %} {% import "plainui/components/function_btns.html" as fbtns with context %} {% block title %}Components Gallery{% endblock %} {% set image_url = "https://picsum.photos/1400/800" %} {% set event1 = {"id": "1", "name": "event example 1", "slug": "event_slug1", "banner_image": {"url": image_url}, "schedule_start": time1, "schedule_end": time2, "schedule_duration": duration, "description": "Lorem Ipsum ...", "language": "en" } %} {% set event2 = {"id": "2", "name": "event example 2", "slug": "event_slug2", "banner_image": {"url": image_url}, "schedule_start": time1, "schedule_end": time2, "schedule_duration": duration, "description": "Lorem Ipsum ...", "language": "de" } %} {% set events = [ event1, event2, event1, event2 ] %} {% set assembly1 = {"id": "1", "name": "assembly example 1", "slug": "assembly_slug1", "is_official": false,"banner_image": {"url": image_url}, "description": "Lorem Ipsum ..." } %} {% set assembly2 = {"id": "2", "name": "assembly example 2 - official", "slug": "assembly_slug2", "is_official": true, "banner_image": {"url": image_url}, "description": "Lorem Ipsum ..." } %} {% set assemblies = [ assembly1, assembly2, assembly1, assembly2, assembly1, assembly2 ] %} {% set room1 = {"id": "8387a222-536d-4bb6-b15a-9b3688fda7d9", "name": "room example 1", "slug":"abc", "room_type": "bbb", "capacity": 42, "occupants": 23 } %} {% set room2 = {"id": "8387a222-536d-4bb6-b15a-9b3688fda7a5", "name": "room example 2", "slug":"abcd", "room_type": "workshop", "capacity": 42 } %} {% set rooms = [ room1, room2 ] %} {% block content %}

Components Gallery

Logo
{{ logoMacro.logo(static('plainui/img/02a_Logo_web_200px_still.png'), "#") }}
heroimage
{{ imageMacro.image(image=image_url, alt="Alt Text", title="Title Text") }}
title
{{ titleMacro.title(title="Fantastic Headline", fav_id="12345", fav_type="assembly", fav_is=true, sch_id="12345", sch_is=true, share_url="url", stream_url="url", report_url="url") }}
Markdown
{{ markdownMacro.markdown(markdown="Hello World") }}
Markdown Plain
{{ markdownMacro.markdown_plain(markdown="Hello World") }}
Event Info
{{ eventInfoMacro.eventInfo(event=event1)}}
Slider
{{ sliderMacro.slider(items=['eins', 'zwei', '3', '4']) }}
Livestream
{{ list_events.livestream({ "room": "My Room", "stream_link": null, "voc_stream": null, "current_event": event1, "next_event": event2 }) }}
Resources box
{{ resboxMacro.resourcesbox() }}
Tagbox
{{ tagboxMacro.tagbox(tags=[ { "tag": { "slug": "start", } }, { "tag": { "slug": "start", } } ]) }}
Listbox
{{listboxMacro.listbox(items=[{ "name": "Item 1", "link": "#", }, { "name": "Item 2", "link": "#" }]) }}
Assembly List
{{ list_assm.list(assemblies, ['2']) }}
Assembly Grid
{{ list_assm.grid(assemblies, ['2']) }}
Assembly Slider
{{ list_assm.slider(assemblies, ['2']) }}
Events List
{{ list_events.list(events, ['1'], ['2'] ) }}
Events List Tiles
{{ list_events.grid(events, ['1'], ['2'] ) }}
Events List Slider
{{ list_events.slider(events, ['1'], ['2'] ) }}
Rooms List
{{ list_rooms.list(rooms) }}
Tile Board
{{tileBoardMacro.tile({ "id": 1, "title": "Item 1", "timestamp": "2020-12-18 17:39:39.916726+00:00", "text": "Hello World", "owner_name": "Mia", "owner_link": "#", "is_editable": true, "edit_link": "#", "delete_form_id": "form-1", "report_link": "#", "detail_link": "#" }) }}
Three Cards
{{threeCardsMacro.three_cards(cards=[{ "title": "Item 1", "text": "Lorem Ipsum", "link": { "url": "#", "text": "Link Text", "type": "secondary" } }, { "title": "Item 1", "text": "Lorem Ipsum" }, { "title": "Item 1", "text": "Lorem Ipsum", "link": { "url": "#", "text": "Link Text", "type": "assembly" } } ]) }}
Valid Form
{{ formElementsMacro.text(form_valid, 'text') }} {{ formElementsMacro.password(form_valid, 'password') }} {{ formElementsMacro.checkbox(form_valid, 'checkbox') }} {{ formElementsMacro.textarea(form_valid, 'textarea') }} {{ formElementsMacro.errors(form_valid) }}
Invalid Form
{{ formElementsMacro.text(form_invalid, 'text') }} {{ formElementsMacro.password(form_invalid, 'password') }} {{ formElementsMacro.checkbox(form_invalid, 'checkbox') }} {{ formElementsMacro.textarea(form_invalid, 'textarea') }} {{ formElementsMacro.errors(form_invalid) }}
Functional Buttons
{{ fbtns.share(share_url="URL") }} {{ fbtns.fav(fav_id="1", fav_type="assembly", fav_is=true) }} {{ fbtns.schedule(sch_id="2", sch_is=false) }} {{ fbtns.stream(stream_url="URL") }} {{ fbtns.report(report_url="URL") }}
{% endblock %}