forked from Ponysearch/Ponysearch
[mod] web page modification
This commit is contained in:
Dalf
parent
5c9f6d5174
commit
7915b5c5a0
4 changed files with 99 additions and 64 deletions
|
|
@ -2,8 +2,22 @@ html {
|
|||
font-family: sans-serif;
|
||||
font-size: 0.9em;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
color: #444444;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body, #container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.row { max-width: 800px; margin: auto; text-align: justify; }
|
||||
|
|
@ -22,57 +36,49 @@ h1 { font-size: 5em; }
|
|||
div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; }
|
||||
div.title h1 { visibility: hidden; }
|
||||
|
||||
|
||||
input[type="submit"] { border: 1px solid #666666; color: #444444; padding: 4px; background-color: #FFFFFF; margin-left: 8px; }
|
||||
|
||||
input[type="checkbox"] { visibility: hidden; }
|
||||
|
||||
.checkbox_container { display: inline-block; position: relative; padding-left: 3px; margin: 0 10px; }
|
||||
#categories { margin: 0 10px; }
|
||||
|
||||
.checkbox_container { display: inline-block; position: relative; margin: 0 3px; padding: 0px; }
|
||||
.checkbox_container input {
|
||||
display: none;
|
||||
}
|
||||
.checkbox_container label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox_container label.cb {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background: #eee;
|
||||
border:1px solid #ddd;
|
||||
}
|
||||
.checkbox_container label.cb:after {
|
||||
opacity: 0.2;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
border: 3px solid #333;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
padding: 4px 10px;
|
||||
margin: 0;
|
||||
display: block;
|
||||
text-transform: capitalize;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.checkbox_container label.cb:hover:after {
|
||||
opacity: 0.5;
|
||||
|
||||
.checkbox_container input[type="checkbox"]:checked + label {
|
||||
background: #b8c1d9;
|
||||
}
|
||||
.checkbox_container input[type=checkbox]:checked + label.cb:after {
|
||||
opacity: 1;
|
||||
|
||||
.search .checkbox_container label {
|
||||
border-bottom: 4px solid #e8e7e6;
|
||||
}
|
||||
|
||||
.search .checkbox_container input[type="checkbox"]:checked + label {
|
||||
border-bottom: 4px solid #8098d9;
|
||||
}
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
|
||||
.result { margin-bottom: 16px; clear: both; }
|
||||
.result_title { margin-bottom: 0; }
|
||||
.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; }
|
||||
.result h3 { font-size: 0.9em;}
|
||||
.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; word-wrap:break-word; }
|
||||
.result h3 { font-size: 0.9em; word-wrap:break-word; }
|
||||
.result { max-width: 70em; }
|
||||
|
||||
.url { font-weight: bold; word-wrap:break-word; }
|
||||
|
|
@ -85,6 +91,8 @@ a { text-decoration: none; }
|
|||
|
||||
.small p { margin: 2px 0; }
|
||||
|
||||
.search { background: #e8e7e6; padding: 0; margin: 0 }
|
||||
|
||||
.right { float: right; }
|
||||
|
||||
.invisible { display: none; }
|
||||
|
|
@ -103,8 +111,7 @@ a { text-decoration: none; }
|
|||
td { padding: 0 4px; }
|
||||
tr:hover td { background: #DDDDDD; }
|
||||
|
||||
|
||||
#search_wrapper { position: relative; max-width: 600px; margin: 10px; }
|
||||
#search_wrapper { position: relative; max-width: 600px; padding: 10px; }
|
||||
.center #search_wrapper { margin-left: auto; margin-right: auto; }
|
||||
.q {
|
||||
background: none repeat scroll 0 0 #FFFFFF;
|
||||
|
|
@ -124,8 +131,8 @@ tr:hover td { background: #DDDDDD; }
|
|||
}
|
||||
#search_submit {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0px;
|
||||
top: 15px;
|
||||
right: 4px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: url('/static/img/search-icon.png') no-repeat;
|
||||
|
|
@ -135,14 +142,40 @@ tr:hover td { background: #DDDDDD; }
|
|||
height: 30px;
|
||||
}
|
||||
|
||||
#results { margin-left: 10px; margin-top: 10px; }
|
||||
#results { margin-left: 10px; margin-top: 10px; margin-right: 10px; }
|
||||
|
||||
#suggestions { max-width: 50em;}
|
||||
#suggestions form { display: inline; }
|
||||
#suggestions input { padding: 2px 6px; margin: 2px 4px; font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
.right { margin: 5px; }
|
||||
|
||||
#search_wrapper { max-width: 90%; clear:both }
|
||||
#preferences {
|
||||
top: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: url('/static/img/preference-icon.png') no-repeat;
|
||||
background-size: 28px 28px;
|
||||
opacity: 0.8;
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#preferences * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#apis {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
#search_wrapper { width: 90%; clear:both; }
|
||||
|
||||
.right { display: none; postion: fixed !important; top: 100px; right: 0px; }
|
||||
|
||||
#categories { font-size: 80% }
|
||||
|
||||
#categories .checkbox_container { margin-top: 2px; margin: 0 2px; }
|
||||
|
||||
.result img { max-width: 90%; width: auto; height: auto }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<div id="categories">
|
||||
{% for category in categories %}
|
||||
<div class="checkbox_container">
|
||||
<input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} /><label for="checkbox_{{ category|replace(' ', '_') }}" class="cb"></label><label for="checkbox_{{ category|replace(' ', '_') }}">{{ category }}</label>
|
||||
<input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} /></label><label for="checkbox_{{ category|replace(' ', '_') }}">{{ category }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}{{ q }} - {% endblock %}
|
||||
{% block content %}
|
||||
<div class="right"><a href="/preferences">preferences</a></div>
|
||||
<div class="small">
|
||||
<div class="right"><a href="/preferences" id="preferences"><span>preferences</span></a></div>
|
||||
<div class="small search">
|
||||
{% include 'search.html' %}
|
||||
</div>
|
||||
<div id="results">
|
||||
|
|
@ -19,19 +19,21 @@
|
|||
{% include 'result_templates/default.html' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<form method="post" action="/">
|
||||
<div id="apis">
|
||||
<form method="post" action="/">
|
||||
<div class="left">
|
||||
<input type="hidden" name="q" value="{{ q }}" />
|
||||
<input type="hidden" name="format" value="csv" />
|
||||
<input type="submit" value="download results in csv" />
|
||||
<input type="hidden" name="q" value="{{ q }}" />
|
||||
<input type="hidden" name="format" value="csv" />
|
||||
<input type="submit" value="download results in csv" />
|
||||
</div>
|
||||
</form>
|
||||
<form method="post" action="/">
|
||||
</form>
|
||||
<form method="post" action="/">
|
||||
<div class="">
|
||||
<input type="hidden" name="q" value="{{ q }}" />
|
||||
<input type="hidden" name="format" value="json" />
|
||||
<input type="submit" value="download results in json" />
|
||||
<input type="hidden" name="q" value="{{ q }}" />
|
||||
<input type="hidden" name="format" value="json" />
|
||||
<input type="submit" value="download results in json" />
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<form method="post" action="/" id="search_form">
|
||||
<div id="search_wrapper">
|
||||
<div id="search_wrapper">
|
||||
<input type="text" id="q" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/>
|
||||
<input type="submit" value="" id="search_submit" />
|
||||
</div>
|
||||
<div>
|
||||
{% include 'categories.html' %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'categories.html' %}
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in a new issue