Commit 293587c4 authored by Erin van der Veen's avatar Erin van der Veen Committed by Camil Staps

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
......@@ -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
......
......@@ -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
......@@ -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();
}
......
......@@ -16,3 +16,7 @@ pre {
.toggle-container .togglee {
display: none;
}
.toggle-container .toggle-visible {
display: block;
}
......@@ -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';
}
......
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;
}
}
This diff is collapsed.
../logo.png
\ No newline at end of file
<?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>
</g>
</svg>
......@@ -13,6 +13,7 @@
</head>
<body>
<div id="sidebar">
<a href="/"><img id="logo" src="../logo.png" alt="Cloogle logo"/></a>
<h3>Library browser</h3>
<select id="select-lib">
<?php
......
......@@ -88,6 +88,11 @@ body {
margin-top: .2em;
}
#logo {
margin-bottom: 1em;
max-width: 100%;
}
#select-lib {
margin-bottom: .8em;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment