Skip to content

GitLab

cloogle.org
cloogle.org
Commit 293587c4 authored by Erin van der Veen's avatar Erin van der Veen Committed by Camil Staps
Browse files
Options

New logo and layout changes (#102) 

* Alternative Cloogle logo

* Clean svg manually

* New header

* Link colours

* Search links style

* Switch to PNG logo

* Add ErinvanderVeen to contributors

* Fix issue with e in logo

* Fix SVG error

* Implement alternative cloogle layout
Logo centralized on page load but moved to top when displaying results.

* Remove padding from searchlinks

* Align searchlinks to left in result-view

* Add subtle rounded border to codeblocks

* Increase darkness of tooltip background

* Several minor layout changes

- Last suggestions from #102
- Distinguish tooltips with border
- Remove body margin to fill whole width
- Align search bar to logo
- Remove spacing in result-view search form
- Align tooltip information and search form on not-small screens

* Add logo to library browser

* Update contributors
parent b9645bf6
Hide whitespace changes
Inline Side-by-side
Showing with 363 additions and 142 deletions
README.md
View file @ 293587c4
......@@ -162,6 +162,7 @@ Maintainers:
Contributors:
- [ErinvanderVeen](https://github.com/ErinvanderVeen) (logo and UI design)
- [KDercksen](https://github.com/KDercksen) (searching on module; help text)
## Copyright & License
......
frontend/Dockerfile
View file @ 293587c4
......@@ -35,3 +35,10 @@ RUN hg clone https://bitbucket.org/camilstaps/pygments-main-3 /opt/pygments \
COPY iconv.sh .
RUN bash iconv.sh && rm iconv.sh
COPY logo.svg /var/www/logo.svg
RUN cd /var/www \
&& apt-get install -qq inkscape \
&& inkscape logo.svg -w 200 --export-png=logo.png \
&& apt-get remove -qq inkscape \
&& apt-get autoremove -qq
frontend/api.js
View file @ 293587c4
......@@ -2,11 +2,11 @@ var form_str = document.getElementById('search_str');
var form_libs = document.getElementsByClassName('search_libs');
var sform = document.getElementById('search_form');
var sresults = document.getElementById('search_results');
var advanced_checkbox = document.getElementById('search_advanced');
var include_builtins_checkbox = document.getElementById('include_builtins');
var include_core_checkbox = document.getElementById('include_core');
var refresh_on_hash = true;
var advanced = false;
var old_str = null;
var old_libs = null;
var old_include_builtins = null;
......@@ -34,6 +34,11 @@ function toggleLibSelection(className) {
boxes[i].checked = checkAll;
}
function toggleAdvanced() {
advanced = !advanced;
toggleById('advanced');
}
function highlightCallback(span, cls, str) {
if (cls == 'type') {
return '<a class="hidden" title="Search type ' + str + '" href="#' +
......@@ -394,7 +399,7 @@ function getResults(str, libs, include_builtins, include_core, page) {
'</div>';
}
par.innerHTML += '<div class="remove-at-request">' + makeGeneralHelp(str) + '</span>';
par.innerHTML += '<div class="remove-at-request general-help">' + makeGeneralHelp(str) + '</span>';
if ('suggestions' in responsedata &&
responsedata['suggestions'].length > 0) {
......@@ -432,7 +437,7 @@ function makeUnifier(ufr) {
}
function getLibs() {
if (!advanced_checkbox.checked)
if (!advanced)
return -1;
var libs = [];
......@@ -447,6 +452,8 @@ function getLibs() {
}
function formsubmit() {
document.getElementById("header").classList.add('result-view');
var q = form_str.value;
if (q === '') {
sresults.innerHTML = 'Can\'t search for the empty string';
......@@ -465,7 +472,7 @@ function formsubmit() {
var libs = getLibs();
var include_builtins = -1;
var include_core = -1;
if (advanced_checkbox.checked) {
if (advanced) {
var include_builtins = include_builtins_checkbox.checked;
var include_core = include_core_checkbox.checked;
}
......@@ -476,11 +483,6 @@ function formsubmit() {
return false;
};
advanced_checkbox.onchange = function () {
var el = document.getElementById('advanced');
el.style.display = this.checked ? 'block' : 'none';
}
window.onload = function () {
sform.onsubmit = formsubmit;
var str = decodeURIComponent(document.location.hash);
......@@ -490,9 +492,6 @@ window.onload = function () {
formsubmit();
}
if (advanced_checkbox.checked)
advanced_checkbox.onchange();
document.getElementById('search_str').focus();
}
......
frontend/common.css
View file @ 293587c4
......@@ -16,3 +16,7 @@ pre {
.toggle-container .togglee {
display: none;
}
.toggle-container .toggle-visible {
display: block;
}
frontend/common.js
View file @ 293587c4
......@@ -2,8 +2,8 @@ function pluralise(n, what) {
return n + ' ' + what + (n == 1 ? '' : 's');
}
function toggleElement(e) {
e.style.display = e.style.display == 'block' ? 'none' : 'block';
function toggleElement(e, className) {
e.classList.toggle(typeof className == 'undefined' ? 'visible' : className);
}
function toggle(toggler, open) {
......@@ -20,7 +20,7 @@ function toggle(toggler, open) {
continue;
if (typeof open == 'undefined')
toggleElement(es[i]);
toggleElement(es[i], 'toggle-visible');
else
es[i].style.display = open ? 'block' : 'none';
}
......
frontend/frontend.css
View file @ 293587c4
body {
color: #222;
font-family: sans-serif;
margin: 0;
}
#helptext {
margin-bottom: 1em;
td, th {
vertical-align: top;
}
#helptext code, #helptext .code {
background-color: #f9f2f4;
font-family: monospace;
font-size: 90%;
padding: 1px 4px;
th {
text-align: left;
}
#helptext td.description {
padding-left: 1em;
a {
color: #26c;
}
#header {
margin-top: 10%;
text-align: center;
width: 100%;
}
#header.result-view {
margin-top: 0%;
text-align: left;
}
#header.result-view > * {
vertical-align: top;
}
#logo {
display: inline-block;
margin: 20px;
}
#search {
display: block;
text-align: center;
}
#header.result-view #search {
display: inline-block;
margin-top: 65px;
text-align: left;
}
a.hidden {
text-decoration: none;
}
#suggestions {
margin: 10px 0;
#searchlinks {
display: inline-block;
font-size: 90%;
list-style-type: none;
padding: 0;
}
#header.result-view #searchlinks {
margin: .3em 0 0;
}
td.wide {
width: 99%;
#searchlinks li {
cursor: pointer;
color: #6f7c91;
float: left;
text-decoration: underline;
}
th {
padding-right: 1em;
#searchlinks li.active {
color: #373e48;
}
#searchlinks li.separator {
cursor: default;
color: #939dac;
padding: 0 .5em;
text-decoration: none;
}
.tooltip {
background: #f8f8f8;
display: block;
max-height: 0px;
overflow: hidden;
transition: max-height 0.15s ease-out;
}
#header.result-view .tooltip {
padding-left: 245px;
}
.tooltip.visible {
border-width: 1px 0;
border-color: #ccc;
border-style: solid;
margin-bottom: 1em;
}
.tooltip div {
text-align: left;
vertical-align: top;
white-space: nowrap;
display: inline-block;
}
#lib_selection th {
text-align: center;
#advanced.visible {
padding-bottom: .6em;
padding-top: .6em;
}
#lib_selection td {
font-size: 90%;
vertical-align: top;
div.visible {
max-height: 500px !important;
}
.core-module {
font-style: italic;
#helptext code, #helptext .code {
background-color: #eeeeee;
font-family: monospace;
font-size: 90%;
margin-right: .2em;
padding: 1px 4px;
border: 1px solid #d0d0d0;
border-radius: 2px;
}
#search_results {
margin-top: 1.5em;
#helptext .description {
padding-left: .3em;
}
#search_results a {
color: #26c;
.core-module {
font-style: italic;
}
.result-basic {
background-color: #e8e8e8;
padding: .2em;
padding: .2em .2em .2em 1em;
}
.result-extra {
background-color: #f4f4f4;
font-size: 85%;
padding-left: .2em;
padding-left: 1em;
}
.result-extra.toggle-container {
padding-left: 1.2em;
padding-left: 2.2em;
}
.result-extra .toggler {
......@@ -79,3 +153,22 @@ th {
.result-code {
margin: 1em 0 1.5em 1em;
}
.general-help {
padding: 0 1em;
}
@media (max-width: 600px) {
#header.result-view > * {
display: block;
}
#search {
margin-bottom: 1em;
margin-top: 0 !important;
}
.tooltip {
padding-left: 0;
}
}
frontend/index.html
View file @ 293587c4
......@@ -15,103 +15,115 @@
<link rel="stylesheet" href="frontend.css" type="text/css"/>
</head>
<body>
<p>
<a href="https://github.com/clean-cloogle/cloogle">
<img src="logo.jpg" alt="follow link for the sourcecode" />
</a>
</p>
<p>
<a href="javascript:toggleById('helptext')">How to use</a> | <a href="javascript:toggleById('contributetext')">Contribute</a>
</p>
<div id="helptext" style="display:none;">
<p>Cloogle is the unofficial <a href="http://clean.cs.ru.nl">Clean</a> language search engine.</p>
<p><b>The following search strings are recognised:</b></p>
<table>
<tr>
<td class='code'>hd</td>
<td class='description'>Functions with a name like <code>hd</code></td>
</tr>
<tr>
<td class='code'>:: a [a] -&gt; a</td>
<td class='description'>Functions with a type unifiable with <code>a [a] -&gt; a</code></td>
</tr>
<tr>
<td class='code'>hd :: [a] -&gt; a</td>
<td class='description'>A combination of the above</td>
</tr>
<tr>
<td class='code'>:: A.a: [a] -&gt; a</td>
<td class='description'>Type search, where <code>a</code> cannot be unified.</td>
</tr>
<tr>
<td class='code'>type Maybe</td>
<td class='description'>The type definition of <code>Maybe x</code></td>
</tr>
<tr>
<td class='code'>class Text</td>
<td class='description'>The class definition of <code>Text</code></td>
</tr>
</table>
<p><b>Besides this web app, there are other frontends available:</b></p>
<ul>
<li>The <code>!cloogle</code> bang on <a href="https://duckduckgo.com/">DuckDuckGo</a></li>
<li><a href="https://telegram.me/CloogleBot">@CloogleBot</a> on Telegram</li>
<li><a href="https://github.com/clean-cloogle/cloogle-cli">cloogle-cli</a>, a command line application</li>
<li>The <code>:Cloogle</code> command in Vim, if you use <a href="https://github.com/camilstaps/vim-clean">vim-clean</a></li>
<li>An email to <a href="mailto:query@cloogle.org">query@cloogle.org</a>, with the query in the subject</li>
</ul>
<p>You can also <a href="src?lib=StdEnv">browse the standard libraries</a>.</p>
</div>
<div id="contributetext" style="display:none;">
<p>
Development takes place on <a href="https://github.com/clean-cloogle/cloogle">GitHub</a>.
Please read the <a href="https://github.com/clean-cloogle/cloogle/blob/master/CONTRIBUTING.md">contributing guidelines</a> first.
</p>
<p>
For bug reports, open an issue in the <a href="https://github.com/clean-cloogle/cloogle/issues">issue tracker</a>.
</p>
</div>
<form id="search_form" action="#">
<input type="text" id="search_str" placeholder="fix :: (a -> a) -> a" /><br/>
<input type="submit" value="Search" />
&nbsp;
<label><input type="checkbox" id="search_advanced"/> advanced</label>
<div id="advanced" style="display:none;">
<label><input type="checkbox" id="include_builtins" checked="checked"/> Include language builtins</label><br/>
<label><input type="checkbox" id="include_core"/> Include library core modules</label><br/>
<table id="lib_selection">
<tr>
<th><a title="Toggle selection" href="javascript:toggleLibSelection('libs-clean-2.4')">Clean 2.4</a></th>
<th><a title="Toggle selection" href="javascript:toggleLibSelection('libs-misc')">Miscellaneous</a></th>
</tr>
<tr>
<td id="libs-clean-2.4">
<label><input type="checkbox" class="search_libs" checked="checked" value="StdEnv"/> StdEnv</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="ArgEnv"/> ArgEnv</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Directory"/> Directory</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Dynamics"/> Dynamics</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Gast"/> Gast</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Generics"/> Generics</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="MersenneTwister"/> MersenneTwister</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="StdLib"/> StdLib</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="TCPIP"/> TCPIP</label><br/>
</td>
<td id="libs-misc">
<label><input type="checkbox" class="search_libs" checked="checked" value="CleanSerial"/> CleanSerial</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="CleanTypeUnifier"/> CleanTypeUnifier</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="CleanPrettyPrint"/> CleanPrettyPrint</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Cloogle"/> Cloogle</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="GraphCopy"/> GraphCopy</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="ObjectIO"> ObjectIO</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Platform"/> Platform</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Sapl"/> Sapl</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="SoccerFun"> SoccerFun</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="iTasks"/> iTasks</label>
</td>
</tr>
</table>
<div id="header">
<div id="logo">
<a href="https://github.com/clean-cloogle/cloogle">
<img src="logo.png" alt="follow link for the sourcecode" />
</a>
</div>
<div id="search">
<form id="search_form" action="#">
<input type="text" id="search_str" placeholder="fix :: (a -> a) -> a" />
<input type="submit" value="Search" /><br/>
<ul id="searchlinks">
<li onclick="toggleAdvanced();this.classList.toggle('active');">Advanced</li>
<li class="separator">|</li>
<li onclick="toggleById('helptext');this.classList.toggle('active');">How to use</li>
<li class="separator">|</li>
<li onclick="toggleById('contributetext');this.classList.toggle('active');">Contribute</li>
</ul>
</form>
</div>
<div id="advanced" class="tooltip">
<div>
<label><input type="checkbox" id="include_builtins" checked="checked"/> Include language builtins</label><br/>
<label><input type="checkbox" id="include_core"/> Include library core modules</label><br/>
<table id="lib_selection">
<tr>
<th><a title="Toggle selection" href="javascript:toggleLibSelection('libs-clean-2.4')">Clean 2.4</a></th>
<th><a title="Toggle selection" href="javascript:toggleLibSelection('libs-misc')">Miscellaneous</a></th>
</tr>
<tr>
<td id="libs-clean-2.4">
<label><input type="checkbox" class="search_libs" checked="checked" value="StdEnv"/> StdEnv</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="ArgEnv"/> ArgEnv</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Directory"/> Directory</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Dynamics"/> Dynamics</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Gast"/> Gast</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Generics"/> Generics</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="MersenneTwister"/> MersenneTwister</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="StdLib"/> StdLib</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="TCPIP"/> TCPIP</label><br/>
</td>
<td id="libs-misc">
<label><input type="checkbox" class="search_libs" checked="checked" value="CleanSerial"/> CleanSerial</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="CleanTypeUnifier"/> CleanTypeUnifier</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="CleanPrettyPrint"/> CleanPrettyPrint</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Cloogle"/> Cloogle</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="GraphCopy"/> GraphCopy</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="ObjectIO"> ObjectIO</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Platform"/> Platform</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="Sapl"/> Sapl</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="SoccerFun"> SoccerFun</label><br/>
<label><input type="checkbox" class="search_libs" checked="checked" value="iTasks"/> iTasks</label>
</td>
</tr>
</table>
</div>
</div>
</form>
<div id="helptext" class="tooltip">
<div>
<p>Cloogle is the unofficial <a href="http://clean.cs.ru.nl">Clean</a> language search engine.</p>
<p><b>The following search strings are recognised:</b></p>
<table>
<tr>
<td class='code'>hd</td>
<td class='description'>Functions with a name like <code>hd</code></td>
</tr>
<tr>
<td class='code'>:: a [a] -&gt; a</td>
<td class='description'>Functions with a type unifiable with <code>a [a] -&gt; a</code></td>
</tr>
<tr>
<td class='code'>hd :: [a] -&gt; a</td>
<td class='description'>A combination of the above</td>
</tr>
<tr>
<td class='code'>:: A.a: [a] -&gt; a</td>
<td class='description'>Type search, where <code>a</code> cannot be unified.</td>
</tr>
<tr>
<td class='code'>type Maybe</td>
<td class='description'>The type definition of <code>Maybe x</code></td>
</tr>
<tr>
<td class='code'>class Text</td>
<td class='description'>The class definition of <code>Text</code></td>
</tr>
</table>
<p><b>Besides this web app, there are other frontends available:</b></p>
<ul>
<li>The <code>!cloogle</code> bang on <a href="https://duckduckgo.com/">DuckDuckGo</a></li>
<li><a href="https://telegram.me/CloogleBot">@CloogleBot</a> on Telegram</li>
<li><a href="https://github.com/clean-cloogle/cloogle-cli">cloogle-cli</a>, a command line application</li>
<li>The <code>:Cloogle</code> command in Vim, if you use <a href="https://github.com/camilstaps/vim-clean">vim-clean</a></li>
<li>An email to <a href="mailto:query@cloogle.org">query@cloogle.org</a>, with the query in the subject</li>
</ul>
<p>You can also <a href="src?lib=StdEnv">browse the standard libraries</a>.</p>
</div>
</div>
<div id="contributetext" class="tooltip">
<div>
<p>
Development takes place on <a href="https://github.com/clean-cloogle/cloogle">GitHub</a>.
Please read the <a href="https://github.com/clean-cloogle/cloogle/blob/master/CONTRIBUTING.md">contributing guidelines</a> first.
</p>
<p>
For bug reports, open an issue in the <a href="https://github.com/clean-cloogle/cloogle/issues">issue tracker</a>.
</p>
</div>
</div>
</div>
<div id="search_results"></div>
</body>
</html>
frontend/logo.png 0 → 120000
View file @ 293587c4
../logo.png
\ No newline at end of file
frontend/logo.svg 0 → 100644
View file @ 293587c4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="433.16434"
height="200"
viewBox="0 0 114.60806 52.916668"
version="1.1"
id="clooglelogo">
<title
id="title4497">Cloogle logo</title>
<defs
id="defs4261" />
<metadata
id="metadata">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Cloogle logo</dc:title>
<dc:date>2017-03-21</dc:date>
<dc:creator>
<cc:Agent>
<dc:title>Erin van der Veen</dc:title>
</cc:Agent>
</dc:creator>
<cc:license
rdf:resource="http://creativecommons.org/licenses/by/4.0/" />
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/licenses/by/4.0/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice" />
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
<g
inkscape:label="Logo Layer"
inkscape:groupmode="layer"
id="layerlogo"
transform="translate(-0.2645833,-244.08332)">
<path
style="fill:#87aade;stroke-width:1"
d="M 100,0 A 100,100 0 0 0 1,100 100,100 0 0 0 101,200 V 168.36133 A 68.356594,68.356594 0 0 1 32.904297,100 68.356594,68.356594 0 0 1 100,31.648438 Z"
transform="matrix(0.26458333,0,0,0.26458333,0,244.08332)"
id="largec"
inkscape:connector-curvature="0" />
<path
style="fill:#d7e3f4;stroke-width:1"
d="M 100,38.714844 A 60.775314,60.775314 0 0 0 39.224605,99.490234 60.775314,60.775314 0 0 0 100,160.26562 v -29.1875 A 31.589168,31.589168 0 0 1 69.669922,100 31.589168,31.589168 0 0 1 100,67.900391 Z"
transform="matrix(0.26458333,0,0,0.26458333,0,244.08332)"
id="smallc"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:none;stroke-width:0"
d="M 26.791647,286.48693 H 105.7051"
id="textpath"
inkscape:connector-curvature="0" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="28.279488"
y="286.37601"
id="text5130"><tspan
sodipodi:role="line"
id="tspan5128"
x="28.279488"
y="286.37601"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.39999962px;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332"><tspan
style="fill:#373e48"
id="tspan5132">l</tspan><tspan
style="fill:#535d6c"
id="tspan5134">o</tspan><tspan
style="fill:#6f7c91"
id="tspan5136">o</tspan><tspan
style="fill:#939dac"
id="tspan5138">g</tspan><tspan
style="fill:#b7bec8"
id="tspan5142">l</tspan><tspan
id="tspan5146"
style="fill:#dbdee3">e</tspan></tspan></text>