youthweb-styleguide

Öffentlicher Bereich 

<!DOCTYPE html>
<html lang="de">

<head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> - Youthweb Styleguide</title>
    <!-- Include the CSS -->
    <link href="../../dist/toolkit.min.css" rel="stylesheet">
    <meta name="theme-color" content="#1c60a1">
</head>

<body>
    <script type="text/javascript">
        app_settings = {
            // Profildaten zum eingeloggten User
            // TODO: Refactoring profile-settings
            profile: null,
            urls: {
                // Wegen eines Bugs in Fractal wird z.B. `_config.project.baseUrl` statt `baseUrl` verwendet
                // @see https://github.com/frctl/fractal/issues/1042
                'root': 'https://styleguide.youthweb.net/components/preview',
                'baseUrl': 'http://localhost:8000',
                'communityJsonHost': 'http://localhost:8000',
                'imagesUploadUrl': 'http://localhost:8000/imageUpload',
            },
            'loaderUIDelay': 1000, //Asynchrone Funktionen fühlen sich flüssiger an, wenn es aufgrund eines künstlichen Delays nicht flackert
            'redirectDelay': 3000, //Bei Redirects sollten die Nutzer die Möglichkeit haben, den Bestätigungstext zu sehen
            'locale': window.navigator.userLanguage || window.navigator.language, // z.B. 'de' oder 'de_DE'
        };
    </script>
    <div id="app">
        <div class="text-white welcome" style="background-color:#19579c">
            <div class="container container-fill-height pt-5 pb-5">
                <div class="container-content-middle">
                    <div class="row youthweb-intro text-center">

                        <div class="col-12 mb-3">
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                Achtung, hier steht eine wichtige Nachricht.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                Warnung, hier steht eine Warnung.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                Geschafft, du hast diese Nachricht gelesen.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-info alert-dismissible fade show" role="alert">
                                Dies ist nur eine Info.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-primary alert-dismissible fade show" role="alert">
                                Dies ist zwar auch nur eine Info, aber dafür etwas wichtiger.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                        </div>
                        <div class="col-12 mb-5">
                            <a href="https://styleguide.youthweb.net/components/preview/timeline">
                                <img src="../../dist/img/logo-30.png" alt="Youthweb" />
                            </a>
                        </div>
                        <div class="col-12">
                            <p>youthweb.net ist ein weltweites soziales Netzwerk für junge Christen.<br />Für Jugend-, Teeniegruppen und Hauskreise gibt es besondere Möglichkeiten, um sich auszutauschen.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <nav class="navbar navbar-expand-lg fixed-bottom navbar-dark bg-secondary app-navbar navbar-toggle-on-scroll" id="">
            <a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>
            <button class="navbar-toggler navbar-toggler-right d-lg-none" type="button" data-toggle="collapse" data-target="#navbarFooter" aria-controls="navbarFooter" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse navbar-collapse-on-scrolldown" id="navbarFooter">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <!-- class.="active" -->
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                    </li>
                </ul>
                <div class="dropdown-divider"></div>

                <div class="d-lg-none d-xl-none">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                                Facebook
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                                Instagram
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                                Twitter
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                                Pinterest
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                                Shop
                            </a>
                        </li>
                    </ul>
                </div>

                <ul class="nav navbar-nav float-right mr-0 d-none d-lg-flex">
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                            <i class="fab fa-pinterest-p"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                            <i class="fas fa-shopping-basket"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <script src="../../dist/toolkit.min.js"></script>
</body>

</html>
 
{% extends '_base.html.twig' %}

{% block body %}
<div id="app">
    <div class="text-white welcome" style="background-color:#19579c">
      <div class="container container-fill-height pt-5 pb-5">
        <div class="container-content-middle">
            <div class="row youthweb-intro text-center">
{% set app_flashes = app.getFlashes %}
{# Alert-Box bei Bedarf anzeigen #}
{% if app_flashes %}
                <div class="col-12 mb-3">
{% for label, alerts in app_flashes %}
{% for alert in alerts %}
                    <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                        {{ alert }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
{% endfor %}
{% endfor %}
                </div>
{% endif %}
                <div class="col-12 mb-5">
                    <a href="{{ url('landing_page') }}">
                        <img src="{{ asset('img/logo-30.png') }}" alt="Youthweb"/>
                    </a>
                </div>
                <div class="col-12"><p>{{ 'youthweb.net ist ein weltweites soziales Netzwerk für junge Christen.'|trans }}<br />{{ 'Für Jugend-, Teeniegruppen und Hauskreise gibt es besondere Möglichkeiten, um sich auszutauschen.'|trans }}</p></div>
            </div>
{% block content %}{% endblock %}
        </div>
      </div>
    </div>

    <nav class="navbar navbar-expand-lg fixed-bottom navbar-dark bg-secondary app-navbar navbar-toggle-on-scroll" id="">
      <a class="navbar-brand" href="{{ url('landing_page') }}"><img src="{{ asset('img/logo-16.png') }}" alt="Youthweb"/></a>
      <button
        class="navbar-toggler navbar-toggler-right d-lg-none"
        type="button"
        data-toggle="collapse"
        data-target="#navbarFooter"
        aria-controls="navbarFooter"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse navbar-collapse-on-scrolldown" id="navbarFooter">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><!-- class.="active" -->
            <a class="nav-link" href="{{ url('blog_view_posts') }}">{{ 'Blog'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link{% if 'landing-page/ueber-uns' == active_page %} active{% endif %}" href="{{ url('team_page') }}">{{ 'Über uns'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link{% if 'landing-page/support' == active_page %} active{% endif %}" href="{{ url('docs_page', {'path':'index.html'}) }}">{{ 'Hilfe'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link{% if 'landing-page/develop' == active_page %} active{% endif %}" href="{{ url('develop_page') }}">{{ 'Develop'|trans }}</a>
          </li>

          <li class="nav-item">
            <a class="nav-link{% if 'landing-page/datenschutz' == active_page %} active{% endif %}" href="{{ url('privacy_page') }}">{{ 'Datenschutz'|trans }}</a>
          </li>
          <li class="nav-item">
            <a class="nav-link{% if 'landing-page/impressum' == active_page %} active{% endif %}" href="{{ url('impressum_page') }}">{{ 'Impressum'|trans }}</a>
          </li>
        </ul>
        <div class="dropdown-divider"></div>

        <div class="d-lg-none d-xl-none">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                {{ 'Facebook'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                {{ 'Instagram'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                {{ 'Twitter'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                {{ 'Pinterest'|trans }}
              </a>
            </li>
            <li class="nav-item">
              <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                {{ 'Shop'|trans }}
              </a>
            </li>
          </ul>
        </div>

        <ul class="nav navbar-nav float-right mr-0 d-none d-lg-flex">
          <li class="nav-item">
            <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
              <i class="fab fa-facebook-f"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
              <i class="fab fa-instagram"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
              <i class="fab fa-pinterest-p"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
              <i class="fas fa-shopping-basket" ></i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
</div>
{% endblock %}
 
{
  "app": {
    "getFlashes": {
      "danger": [
        "Achtung, hier steht eine wichtige Nachricht."
      ],
      "warning": [
        "Warnung, hier steht eine Warnung."
      ],
      "success": [
        "Geschafft, du hast diese Nachricht gelesen."
      ],
      "info": [
        "Dies ist nur eine Info."
      ],
      "primary": [
        "Dies ist zwar auch nur eine Info, aber dafür etwas wichtiger."
      ]
    }
  }
}

Dieses Layout wird für alle Bereiche verwendet, die auch ohne Anmeldung sichtbar sind.