added css for tipue search and fixed js bug

forgot to add a css for the tipue search. so i reworked the template
style management a little and added the tipue search css with some font
changings. i also fixed a bug that was there because of my new script
template handling.
This commit is contained in:
Marvin Steadfast 2015-08-26 15:46:43 +00:00
parent f0fc7fb21e
commit 3a29963fd4
5 changed files with 97 additions and 89 deletions

View File

@ -229,7 +229,7 @@
margin: 0; margin: 0;
width: 210px; width: 210px;
max-width: 100%; max-width: 100%;
/* display: block; */ display: block;
margin-bottom: 20px; margin-bottom: 20px;
background: #fff; } background: #fff; }
select { select {

View File

@ -6,10 +6,13 @@ Tipue Search is released under the MIT License
http://www.tipue.com/search http://www.tipue.com/search
*/ */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
#tipue_search_input #tipue_search_input
{ {
font: 13px/1.6 'open sans', sans-serif; font: 13px/1.6 'Droid Sans', sans-serif;
color: #333; color: #333;
padding: 12px 12px 12px 40px; padding: 12px 12px 12px 40px;
width: 170px; width: 170px;
@ -17,7 +20,7 @@ http://www.tipue.com/search
border-radius: 0; border-radius: 0;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: none; box-shadow: none;
outline: 0; outline: 0;
margin: 0; margin: 0;
background: #fff url('img/search.png') no-repeat 15px 15px; background: #fff url('img/search.png') no-repeat 15px 15px;
@ -25,88 +28,88 @@ http://www.tipue.com/search
#tipue_search_content #tipue_search_content
{ {
max-width: 650px; max-width: 650px;
padding-top: 15px; padding-top: 15px;
margin: 0; margin: 0;
} }
#tipue_search_warning #tipue_search_warning
{ {
font: 300 15px/1.6 'Open Sans', sans-serif; font: 300 15px/1.6 'Droid Sans', sans-serif;
color: #555; color: #555;
margin: 7px 0; margin: 7px 0;
} }
#tipue_search_warning a #tipue_search_warning a
{ {
color: #396; color: #396;
text-decoration: none; text-decoration: none;
} }
#tipue_search_warning a:hover #tipue_search_warning a:hover
{ {
color: #555; color: #555;
} }
#tipue_search_results_count #tipue_search_results_count
{ {
font: 300 15px/1.7 'Open Sans', sans-serif; font: 300 15px/1.7 'Droid Sans', sans-serif;
color: #555; color: #555;
} }
.tipue_search_content_title .tipue_search_content_title
{ {
font: 300 21px/1.7 'Open Sans', sans-serif; font: 300 21px/1.7 'Droid Sans', sans-serif;
margin-top: 23px; margin-top: 23px;
} }
.tipue_search_content_title a .tipue_search_content_title a
{ {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
} }
.tipue_search_content_title a:hover .tipue_search_content_title a:hover
{ {
color: #555; color: #555;
} }
.tipue_search_content_url .tipue_search_content_url
{ {
font: 300 14px/1.9 'Open Sans', sans-serif; font: 300 14px/1.9 'Droid Sans', sans-serif;
word-wrap: break-word; word-wrap: break-word;
hyphens: auto; hyphens: auto;
} }
.tipue_search_content_url a .tipue_search_content_url a
{ {
color: #396; color: #396;
text-decoration: none; text-decoration: none;
} }
.tipue_search_content_url a:hover .tipue_search_content_url a:hover
{ {
color: #555; color: #555;
} }
.tipue_search_content_text .tipue_search_content_text
{ {
font: 300 15px/1.6 'Open Sans', sans-serif; font: 300 15px/1.6 'Droid Sans', sans-serif;
color: #555; color: #555;
word-wrap: break-word; word-wrap: break-word;
hyphens: auto; hyphens: auto;
margin-top: 3px; margin-top: 3px;
} }
.tipue_search_content_debug .tipue_search_content_debug
{ {
font: 300 13px/1.6 'Open Sans', sans-serif; font: 300 13px/1.6 'Droid Sans', sans-serif;
color: #555; color: #555;
margin: 5px 0; margin: 5px 0;
} }
.h01 .h01
{ {
color: #333; color: #333;
font-weight: 400; font-weight: 400;
} }
#tipue_search_foot #tipue_search_foot
{ {
margin: 51px 0 21px 0; margin: 51px 0 21px 0;
} }
#tipue_search_foot_boxes #tipue_search_foot_boxes
{ {
padding: 0; padding: 0;
margin: 0; margin: 0;
font: 12px 'Open Sans', sans-serif; font: 12px 'Droid Sans', sans-serif;
} }
#tipue_search_foot_boxes li #tipue_search_foot_boxes li
{ {
@ -118,9 +121,9 @@ http://www.tipue.com/search
#tipue_search_foot_boxes li a #tipue_search_foot_boxes li a
{ {
padding: 10px 17px 11px 17px; padding: 10px 17px 11px 17px;
background-color: #fff; background-color: #fff;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
border-radius: 1px; border-radius: 1px;
color: #333; color: #333;
margin-right: 7px; margin-right: 7px;
text-decoration: none; text-decoration: none;
@ -129,16 +132,16 @@ http://www.tipue.com/search
#tipue_search_foot_boxes li.current #tipue_search_foot_boxes li.current
{ {
padding: 10px 17px 11px 17px; padding: 10px 17px 11px 17px;
background: #f6f6f6; background: #f6f6f6;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
border-radius: 1px; border-radius: 1px;
color: #333; color: #333;
margin-right: 7px; margin-right: 7px;
text-align: center; text-align: center;
} }
#tipue_search_foot_boxes li a:hover #tipue_search_foot_boxes li a:hover
{ {
background: #f6f6f6; background: #f6f6f6;
} }
@ -147,57 +150,51 @@ http://www.tipue.com/search
.tipue_search_spinner .tipue_search_spinner
{ {
padding: 31px 0; padding: 31px 0;
width: 50px; width: 50px;
height: 28px; height: 28px;
} }
.tipue_search_spinner > div .tipue_search_spinner > div
{ {
background-color: #777; background-color: #777;
height: 100%; height: 100%;
width: 3px; width: 3px;
display: inline-block; display: inline-block;
margin-right: 2px; margin-right: 2px;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out; -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out;
} }
.tipue_search_spinner .tipue_search_rect2 .tipue_search_spinner .tipue_search_rect2
{ {
-webkit-animation-delay: -1.1s; -webkit-animation-delay: -1.1s;
animation-delay: -1.1s; animation-delay: -1.1s;
} }
.tipue_search_spinner .tipue_search_rect3 .tipue_search_spinner .tipue_search_rect3
{ {
-webkit-animation-delay: -1.0s; -webkit-animation-delay: -1.0s;
animation-delay: -1.0s; animation-delay: -1.0s;
} }
@-webkit-keyframes stretchdelay @-webkit-keyframes stretchdelay
{ {
0%, 40%, 100% 0%, 40%, 100%
{ {
-webkit-transform: scaleY(0.4) -webkit-transform: scaleY(0.4)
} }
20% 20%
{ {
-webkit-transform: scaleY(1.0) -webkit-transform: scaleY(1.0)
} }
} }
@keyframes stretchdelay @keyframes stretchdelay
{ {
0%, 40%, 100% 0%, 40%, 100%
{ {
transform: scaleY(0.4); transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); -webkit-transform: scaleY(0.4);
} }
20% 20%
{ {
transform: scaleY(1.0); transform: scaleY(1.0);
-webkit-transform: scaleY(1.0); -webkit-transform: scaleY(1.0);
} }
} }

View File

@ -35,7 +35,13 @@
<div class="back-to-home"><a href="/">← Back to Home</a></div> <div class="back-to-home"><a href="/">← Back to Home</a></div>
<hr class="large"> <hr class="large">
{% block scripts %} {% if DISQUS_SITENAME %}
<div id="disqus_thread"></div>
{% endif %}
{% endblock %}
{% block scripts %}
<!-- DISQUS --> <!-- DISQUS -->
{% if DISQUS_SITENAME %} {% if DISQUS_SITENAME %}
@ -89,6 +95,4 @@
}); });
</script> </script>
{% endblock %}
{% endblock %} {% endblock %}

View File

@ -45,12 +45,14 @@
<!-- CSS <!-- CSS
================================================== --> ================================================== -->
<link rel="stylesheet" href="/theme/css/base.css"> {% block styles %}
<link rel="stylesheet" href="/theme/css/skeleton.css"> <link rel="stylesheet" href="{{ SITEURL }}/theme/css/base.css">
<link rel="stylesheet" href="/theme/css/layout.css"> <link rel="stylesheet" href="{{ SITEURL }}/theme/css/skeleton.css">
<link rel="stylesheet" href="/theme/css/simply.css"> <link rel="stylesheet" href="{{ SITEURL }}/theme/css/layout.css">
<link rel="stylesheet" href="/theme/css/pygment.css"> <link rel="stylesheet" href="{{ SITEURL }}/theme/css/simply.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygment.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
{% endblock %}
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

View File

@ -1,14 +1,19 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}Search | {{ SITENAME }}{% endblock %} {% block title %}Search | {{ SITENAME }}{% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ SITEURL }}/theme/tipuesearch/tipuesearch.css">
{% endblock %}
{% block content %} {% block content %}
<h3 class="article-title">Search</h3> <h3 class="article-title">Search</h3>
<br> <br/ >
<p> <br/ >
<form action="{{ SITEURL}}/pages/search.html"> <form action="{{ SITEURL}}/pages/search.html">
<input type="text" value="" placeholder="Suchen" name="q" id="tipue_search_input" autocomplete="on" required><input type="submit"/> <input type="text" value="" placeholder="Suchen" name="q" id="tipue_search_input" autocomplete="on" required>
</form> <br /><input type="submit"/>
</p> </form>
<div id="tipue_search_content"><div id="tipue_search_loading"></div></div> <div id="tipue_search_content"><div id="tipue_search_loading"></div></div>
<br> <br>
@ -21,7 +26,7 @@
$(document).ready(function() { $(document).ready(function() {
$('#tipue_search_input').tipuesearch({ $('#tipue_search_input').tipuesearch({
'mode' : 'json', 'mode' : 'json',
'show': 100, 'show': 1000,
'newWindow': false, 'newWindow': false,
'contentLocation': '{{ SITEURL }}/tipuesearch_content.json' 'contentLocation': '{{ SITEURL }}/tipuesearch_content.json'
}); });