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
Expand all 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
This diff is collapsed.
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>
</g>
</svg>
frontend/src/index.php
View file @ 293587c4
......@@ -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
......
frontend/src/view.css
View file @ 293587c4
......@@ -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