Skip to content
Snippets Groups Projects
CurrentWeatherTile.html 2.55 KiB
Newer Older
  • Learn to ignore specific revisions
  • <style>
        .currentTemperatureTile {
    
    Robert Goldmann's avatar
    Robert Goldmann committed
            background-color: #2F2F2F;
    
            font-size: 3.5vmin;
    
            border-radius: 1vh;
    
            flex-direction: row;
        }
    
        .currentTemperatureTile .icon {
    
            padding-top: 1vmin;
    
        }
    
        .currentTemperatureTile .content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 85%;
            height: 85%;
        }
    
        .currentTemperatureTile .entries {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            flex: 1;
        }
    
        .currentTemperatureTile .temperatures {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    
        .currentTemperatureTile .temperature-entry {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-left: 3vmin;
            justify-content: space-between;
        }
    
        .currentTemperatureTile .label {
            font-size: 2vmin;
        }
    
        .currentTemperatureTile .wind {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 2vmin;
            padding-top: 1vmin;
        }
    
        .currentTemperatureTile .windSpeed {
            padding-left: 1vmin;
    
        }
    </style>
    
    <div class="currentTemperatureTile">
    
        <div class="content">
    
            {% if data['isDayTime'] %}
                {% set iconPrefix = 'wi-owm-day-' %}
            {% else %}
                {% set iconPrefix = 'wi-owm-night-' %}
            {% endif %}
    
            <i class="wi {{ iconPrefix }}{{ data['icon'] }} icon" style="color: {{ data['iconColor'] }};"></i>
    
            <div class="entries">
                <div class="temperatures">
                    <div class="temperature-entry">
                        <div class="label">Aktuell</div>
    
                        <div style="color: {{ data['temperatureColor'] }}">{{ data['temperature'] }}&deg;C</div>
    
                    </div>
                    <div class="temperature-entry">
                        <div class="label">Gefühlt</div>
    
                        <div style="color: {{ data['feelsLikeColor'] }}">{{ data['feelsLike'] }}&deg;C</div>
    
                    </div>
                </div>
                <div class="wind">
                    <i class="wi wi-wind from-{{ data['windDegrees'] }}-deg"></i>
    
                    <div class="windSpeed" style="color: {{ data['windSpeedColor'] }}">{{ data['windSpeed'] }}</div>
    
                </div>
            </div>
        </div>