Gmeek/templates/plist.html

{% extends 'base.html' %}
{% block head %}
<title>{{ blogBase['title'] }}</title>
{% endblock %}

{% block style %}
<style>
h1 a:not([href]){color:inherit;text-decoration:none;vertical-align: bottom;font-size:40px;font-family:Monaco;}
.title-right{display:flex;margin:auto 0 0 auto;}
.title-right button{margin-right:8px;padding:16px;}

.subnav-search{margin-top:8px;margin-right:8px;}
.subnav-search-input{width:160px;border-top-right-radius:0px;border-bottom-right-radius:0px;}
.subnav-search button{padding:5px 8px;border-top-left-radius:0px;border-bottom-left-radius:0px;}

.title-right .circle{padding: 14px 16px;}

.SideNav{min-width: 360px;}
.SideNav-icon{margin-right: 16px}
.SideNav-item .Label{color: #fff;margin-left:8px;}
@media (max-width: 767px) {
    body { padding: 8px;}
    h1 a:not([href]){font-size:24px;}
    .subnav-search form{display:none;}
    .subnav-search svg{display:none;}
    #buttonRSS{display:none;}
    .SideNav-item .listLabels{display:none;}
}
</style>
{% endblock %}

{% block header %}
<h1>
    <img src="{{ blogBase['avatarUrl'] }}" size="64" height="64" width="64" class="avatar circle" id="avatarImg">
    <a>{{ blogBase['displayTitle'] }}</a>
</h1>
<div class="title-right">
    <div class="subnav-search">
        <form action="https://www.google.com/search" method="get" target="_blank">
            <input type="hidden" name="q" value="site:{{ blogBase['homeUrl'] }}">
            <input type="search" name="q" class="form-control subnav-search-input float-left" aria-label="Search site" value="">
            <button class="btn float-left" type="submit">{{ i18n['Search'] }}</button>
        </form>
        <svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
            <path id="searchSVG" fill-rule="evenodd" d=""></path>
        </svg>
    </div>
    {% for num in blogBase['singeListJson'] -%}
    <a href="/{{ blogBase['singeListJson'][num]['label'] }}.html"><button class="btn btn-invisible circle" title="{{ blogBase['singeListJson'][num]['postTitle'] }}">
        <svg class="octicon" width="16" height="16" >
            <path id="{{ blogBase['singeListJson'][num]['postTitle'] }}" fill-rule="evenodd"></path>
        </svg>
    </button></a>
    {%- endfor %}
    <a href="/rss.xml" target="_blank"><button id="buttonRSS" class="btn btn-invisible circle" title="RSS">
        <svg class="octicon" width="16" height="16" >
            <path id="pathRSS" fill-rule="evenodd"></path>
        </svg>
    </button></a>
    <button class="btn btn-invisible circle" onclick="modeSwitch()" title="{{ i18n['switchTheme'] }}">
        <svg class="octicon" width="16" height="16" >
            <path id="themeSwitch" fill-rule="evenodd"></path>
        </svg>
    </button>
</div>
{% endblock %}

{% block content %}
<div style="margin-bottom: 16px;">{{ blogBase['subTitle'] }}</div>
<nav class="SideNav border">
{% for num in postListJson -%}
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="{{ postListJson[num]['postUrl']|e }}">
    <div class="d-flex flex-items-center">
        <svg class="SideNav-icon octicon" style="witdh:16px;height:16px"><path class="svgTop{{ postListJson[num]['top'] }}" d=""></path>
        </svg>
        <span>{{ postListJson[num]['postTitle']|e }}</span>
    </div>
    <div class="listLabels">
        {% if postListJson[num]['commentNum']>0 %}<span class="Label" style="background-color:{{ blogBase['commentLabelColor'] }}">{{ postListJson[num]['commentNum'] }}</span>{% endif %}
        <span class="Label" style="background-color:{{ postListJson[num]['labelColor'] }}">{{ postListJson[num]['label'] }}</span>
        <span class="Label" style="background-color:{{ postListJson[num]['dateLabelColor'] }}">{{ postListJson[num]['createdDate'] }}</span>
    </div>
</a>
{%- endfor %}
</nav>
{%- if blogBase['prevUrl']!='disabled' or blogBase['nextUrl']!='disabled' -%}
<nav class="paginate-container" aria-label="Pagination">
    <div class="pagination">
        {%- if blogBase['prevUrl']=='disabled' -%}
        <span class="previous_page" aria-disabled="true">{{ i18n['Previous'] }}</span>
        {% else -%}
        <a class="previous_page" rel="previous" href="{{ blogBase['prevUrl'] }}" aria-label="Previous Page">{{ i18n['Previous'] }}</a>
        {%- endif -%}

        {%- if blogBase['nextUrl']=='disabled' -%}
        <span class="next_page" aria-disabled="true">{{ i18n['Next'] }}</span>
        {% else -%}
        <a class="next_page" rel="next" href="{{ blogBase['nextUrl'] }}" aria-label="Next Page">{{ i18n['Next'] }}</a>
        {%- endif -%}

    </div>
</nav>
{%- endif %}
{% endblock %}

{% block script %}
<script>
document.getElementById("searchSVG").setAttribute("d",IconList["search"]);
document.getElementById("pathRSS").setAttribute("d",IconList["rss"]);
iconTOP=document.getElementsByClassName("svgTop1");
iconPost=document.getElementsByClassName("svgTop0");
for(var i=0;i<iconTOP.length;i++){
    iconTOP[i].setAttribute("d",IconList["upload"]);
    iconTOP[i].parentNode.style.color="red";
}
for(var i=0;i<iconPost.length;i++){
    iconPost[i].setAttribute("d",IconList["post"]);
}

{% for num in blogBase['singeListJson'] -%}
document.getElementById("{{ blogBase['singeListJson'][num]['postTitle'] }}").setAttribute("d",value=IconList["{{ blogBase['singeListJson'][num]['label'] }}"]);
{%- endfor %}
</script>
{% endblock %}