tagcloud + using uikit 2.27.4 + wip tag-filtering navbar buttons

This commit is contained in:
Lucas Cimon 2017-08-14 03:08:27 +02:00
parent afce114b62
commit 89ff3dee70
15 changed files with 122 additions and 23 deletions

View File

@ -1,3 +1,16 @@
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 800;
src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(../fonts/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-Regular'), url(../fonts/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
}
html, h1, h2, h3 {
font-family: "Oswald", "Helvetica Neue",Helvetica,Arial,sans-serif; }
html {
@ -72,10 +85,14 @@ a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.mg-header {
padding: 1em 0;
background-color: #39B39D; }
.mg-header-content {
display: flex;
justify-content: space-between; }
.mg-brand {
font-family: "Open Sans", sans-serif;
font-style: italic;
@ -94,11 +111,33 @@ a {
.mg-tagline {
font-family: "Open Sans", sans-serif;
font-weight: 800;
padding: 1em 0 0;
color: white; }
@media (min-width: 1220px) {
.mg-tagline {
padding-left: 0 !important; } }
.mg-tag-filters {
flex: 1;
display: flex;
justify-content: flex-end; }
.mg-tag-filter {
background-color: transparent;
border: 1px solid white;
overflow: visible;
color: inherit;
font: inherit;
padding: .5rem 1.5rem;
margin: .5rem 1rem;
text-transform: uppercase; }
.mg-tag-filter:hover {
border-color: #b2b2b2;
text-decoration: none;}
.mg-tag-filter:hover {
text-decoration: none; }
.mg-tag-filter:not(:disabled) {
cursor: pointer; }
.mg-nav-small {
width: 100% }
.mg-nav-menu-toggle-small {
flex: 1; }
.mg-main {
margin-top: 4em;
@ -207,3 +246,29 @@ a {
color: #000;
padding: 0.2em 0; }
.mg-tagcloud {
list-style: none;
padding: 0;
width: 80%;
text-align: center; }
.mg-cloud-tag {
display: inline-block;
padding: .2rem;
line-height: 110%; }
.mg-cloud-tag-size-5 {
font-size: 140%; }
.mg-cloud-tag-size-4 {
font-size: 180%; }
.mg-cloud-tag-size-3 {
font-size: 220%; }
.mg-cloud-tag-size-2 {
font-size: 260%; }
.mg-cloud-tag-size-1 {
font-size: 300%; }
.mg-cloud-tag-badge {
color: #FF6600; }

View File

@ -0,0 +1,2 @@
/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
.uk-search{display:inline-block;position:relative;margin:0}.uk-search:before{content:"\f002";position:absolute;top:0;left:0;width:30px;line-height:30px;text-align:center;font-family:FontAwesome;font-size:14px;color:rgba(0,0,0,.2)}.uk-search-field::-moz-focus-inner{border:0;padding:0}.uk-search-field::-webkit-search-cancel-button,.uk-search-field::-webkit-search-decoration{-webkit-appearance:none}.uk-search-field::-ms-clear{display:none}.uk-search-field::-moz-placeholder{opacity:1}.uk-search-field{box-sizing:border-box;margin:0;border-radius:0;font:inherit;color:#444;-webkit-appearance:none;width:120px;height:30px;padding:0 0 0 30px;border:1px solid transparent;background:rgba(0,0,0,0);-webkit-transition:all .2s linear;transition:all .2s linear;vertical-align:middle}.uk-search-field:-ms-input-placeholder{color:#999!important}.uk-search-field::-moz-placeholder{color:#999}.uk-search-field::-webkit-input-placeholder{color:#999}.uk-search-field:focus{outline:0}.uk-search-field:focus,.uk-search.uk-active .uk-search-field{width:180px}.uk-dropdown-search{width:300px;margin-top:0;background:#f5f5f5;color:#444}.uk-open>.uk-dropdown-search{-webkit-animation:uk-slide-top-fixed .2s ease-in-out;animation:uk-slide-top-fixed .2s ease-in-out}.uk-navbar-flip .uk-dropdown-search{margin-top:5px;margin-right:-15px}.uk-nav-search>li>a{color:#444}.uk-nav-search>li.uk-active>a{background:#00a8e6;color:#fff;outline:0}.uk-nav-search .uk-nav-header{color:#999}.uk-nav-search .uk-nav-divider{border-top:1px solid #ddd}.uk-nav-search ul a{color:#07D}.uk-nav-search ul a:hover{color:#059}.uk-offcanvas .uk-search{display:block;margin:20px 15px}.uk-offcanvas .uk-search:before{color:#777}.uk-offcanvas .uk-search-field{width:100%;border-color:transparent;background:#1a1a1a;color:#ccc}.uk-offcanvas .uk-search-field:-ms-input-placeholder{color:#777!important}.uk-offcanvas .uk-search-field::-moz-placeholder{color:#777}.uk-offcanvas .uk-search-field::-webkit-input-placeholder{color:#777}

2
static/css/uikit-2.27.4.min.css vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,2 +0,0 @@
/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
!function(e){var s;window.UIkit&&(s=e(UIkit)),"function"==typeof define&&define.amd&&define("uikit-search",["uikit"],function(){return s||e(UIkit)})}(function(e){"use strict";e.component("search",{defaults:{msgResultsHeader:"Search Results",msgMoreResults:"More Results",msgNoResults:"No results found",template:'<ul class="uk-nav uk-nav-search uk-autocomplete-results"> {{#msgResultsHeader}}<li class="uk-nav-header uk-skip">{{msgResultsHeader}}</li>{{/msgResultsHeader}} {{#items && items.length}} {{~items}} <li data-url="{{!$item.url}}"> <a href="{{!$item.url}}"> {{{$item.title}}} {{#$item.text}}<div>{{{$item.text}}}</div>{{/$item.text}} </a> </li> {{/items}} {{#msgMoreResults}} <li class="uk-nav-divider uk-skip"></li> <li class="uk-search-moreresults" data-moreresults="true"><a href="#" onclick="jQuery(this).closest(\'form\').submit();">{{msgMoreResults}}</a></li> {{/msgMoreResults}} {{/end}} {{^items.length}} {{#msgNoResults}}<li class="uk-skip"><a>{{msgNoResults}}</a></li>{{/msgNoResults}} {{/end}} </ul>',renderer:function(e){var s=this.options;this.dropdown.append(this.template({items:e.results||[],msgResultsHeader:s.msgResultsHeader,msgMoreResults:s.msgMoreResults,msgNoResults:s.msgNoResults})),this.show()}},boot:function(){e.$html.on("focus.search.uikit","[data-uk-search]",function(){var s=e.$(this);s.data("search")||e.search(s,e.Utils.options(s.attr("data-uk-search")))})},init:function(){var s=this;this.autocomplete=e.autocomplete(this.element,this.options),this.autocomplete.dropdown.addClass("uk-dropdown-search"),this.autocomplete.input.on("keyup",function(){s.element[s.autocomplete.input.val()?"addClass":"removeClass"]("uk-active")}).closest("form").on("reset",function(){s.value="",s.element.removeClass("uk-active")}),this.on("selectitem.uk.autocomplete",function(e,t){t.url?location.href=t.url:t.moreresults&&s.autocomplete.input.closest("form").submit()}),this.element.data("search",this)}})});

File diff suppressed because one or more lines are too long

2
static/js/uikit-2.27.4-search.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
!function(e){var s;window.UIkit2&&(s=e(UIkit2)),"function"==typeof define&&define.amd&&define("uikit-search",["uikit"],function(){return s||e(UIkit2)})}(function(e){"use strict";e.component("search",{defaults:{msgResultsHeader:"Search Results",msgMoreResults:"More Results",msgNoResults:"No results found",template:'<ul class="uk-nav uk-nav-search uk-autocomplete-results"> {{#msgResultsHeader}}<li class="uk-nav-header uk-skip">{{msgResultsHeader}}</li>{{/msgResultsHeader}} {{#items && items.length}} {{~items}} <li data-url="{{!$item.url}}"> <a href="{{!$item.url}}"> {{{$item.title}}} {{#$item.text}}<div>{{{$item.text}}}</div>{{/$item.text}} </a> </li> {{/items}} {{#msgMoreResults}} <li class="uk-nav-divider uk-skip"></li> <li class="uk-search-moreresults" data-moreresults="true"><a href="#" onclick="jQuery(this).closest(\'form\').submit();">{{msgMoreResults}}</a></li> {{/msgMoreResults}} {{/end}} {{^items.length}} {{#msgNoResults}}<li class="uk-skip"><a>{{msgNoResults}}</a></li>{{/msgNoResults}} {{/end}} </ul>',renderer:function(e){var s=this.options;this.dropdown.append(this.template({items:e.results||[],msgResultsHeader:s.msgResultsHeader,msgMoreResults:s.msgMoreResults,msgNoResults:s.msgNoResults})),this.show()}},boot:function(){e.$html.on("focus.search.uikit","[data-uk-search]",function(){var s=e.$(this);s.data("search")||e.search(s,e.Utils.options(s.attr("data-uk-search")))})},init:function(){var s=this;this.autocomplete=e.autocomplete(this.element,this.options),this.autocomplete.dropdown.addClass("uk-dropdown-search"),this.autocomplete.input.on("keyup",function(){s.element[s.autocomplete.input.val()?"addClass":"removeClass"]("uk-active")}).closest("form").on("reset",function(){s.value="",s.element.removeClass("uk-active")}),this.on("selectitem.uk.autocomplete",function(e,t){t.url?location.href=t.url:t.moreresults&&s.autocomplete.input.closest("form").submit()}),this.element.data("search",this)}})});

3
static/js/uikit-2.27.4.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -47,14 +47,12 @@
{% endif %}
{% endblock %}
<link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed"/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:800italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/uikit.min.css">
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4.min.css' rel='stylesheet' type='text/css'>
{% if not DISABLE_SEARCH %}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/components/search.min.css">
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4-search.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/tipuesearch.css">
{% endif %}
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized-highlight.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">
<script src="{{ SITEURL }}/theme/js/html5shiv-3.7.2.min.js"></script>
@ -64,14 +62,27 @@
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header class=" mg-header uk-navbar uk-navbar-attached">
<header class="mg-header uk-navbar uk-navbar-attached">
<div class="uk-container uk-container-center">
<div class="mg-header-content uk-container uk-container-center">
<a class="mg-brand uk-navbar-brand uk-hidden-small" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
<div class="mg-tagline uk-navbar-content uk-hidden-small">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
<a class="uk-navbar-toggle uk-visible-small" href="#mg-offcanvas" data-uk-offcanvas></a>
<a class="mg-brand uk-navbar-brand uk-navbar-center uk-visible-small" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
<div class="uk-hidden-small">
<a class="mg-brand uk-navbar-brand" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
<div class="mg-tagline uk-navbar-content">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
</div>
{% if MG_FILTER_TAGS %}
<div class="mg-tag-filters uk-hidden-small">
{% for filter_tag in MG_FILTER_TAGS %}
<button class="mg-tag-filter">{{ filter_tag.replace('lang:', '') }}</button>
{% endfor %}
</div>
{% endif %}
<div class="mg-nav-small uk-visible-small">
<a class="mg-nav-menu-toggle-small uk-navbar-toggle" href="#mg-offcanvas" data-uk-offcanvas></a>
<a class="mg-brand uk-navbar-brand uk-navbar-center" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
</div>
</div>
</header>
@ -241,9 +252,9 @@
<script src="{{ SITEURL }}/theme/js/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="{{ SITEURL }}/theme/js/uikit-2.23.0.min.js"></script>
<script src="{{ SITEURL }}/theme/js/uikit-2.27.4.min.js"></script>
{% if not DISABLE_SEARCH %}
<script src="{{ SITEURL }}/theme/js/uikit-2.23.0-search.min.js"></script>
<script src="{{ SITEURL }}/theme/js/uikit-2.27.4-search.min.js"></script>
<script src="{{ SITEURL }}/theme/js/tipuesearch_set.js"></script>
<script src="{{ SITEURL }}/theme/js/tipuesearch.js"></script>
{% endif %}

19
templates/tagcloud.html Normal file
View File

@ -0,0 +1,19 @@
{% extends "base.html" %}
{% block title %}Tag cloud{% endblock %}
{% block description %}{% endblock %}
{% block content %}
<ul class="mg-tagcloud">
{% for tag in tag_cloud if not tag.0.name.startswith('lang:') %}
<li class="mg-cloud-tag mg-cloud-tag-size-{{ tag.1 }}">
<a href="{{ SITEURL }}/{{ tag.0.url }}">
{{ tag.0 }}
{% if TAG_CLOUD_BADGE %}
<span class="mg-cloud-tag-badge">({{ tag.2 }})</span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endblock %}