Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive search and general fixes #34

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Responsive search and general fixes #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cce1d60
clean up/consistently index.html
Abbe98 Oct 20, 2016
153f063
always point to a protocol
Abbe98 Oct 20, 2016
0aedfbc
fix broken link to font
Abbe98 Oct 20, 2016
d339968
move hack4dk file into repo
Abbe98 Oct 20, 2016
a02a163
minor formatting search.html
Abbe98 Oct 20, 2016
e29d438
remove hack4dk css
Abbe98 Oct 20, 2016
1b7148b
responsive search
Abbe98 Oct 20, 2016
1049252
minor css things
Abbe98 Oct 20, 2016
69c0cdb
align tooltips to left on large screens
Abbe98 Oct 20, 2016
321dfe4
increase padding for search results(Firefox)
Abbe98 Oct 25, 2016
dff04c5
add missing responsive tag
Abbe98 Nov 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/cookieinfo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Offentlig konst i Sverige</title>
<link rel="profile" href="//www.w3.org/2005/10/profile" />
<link rel="profile" href="https://www.w3.org/2005/10/profile" />
<link rel="icon"
type="image/ico"
href="favicon.ico" />
Expand All @@ -12,7 +12,7 @@
body { font-family:Varela; text-align:justify; background:white; padding:5px; border:2px solid grey; width:50%; margin-left: auto; margin-right: auto ; }
@font-face{
font-family: 'Varela';
src: url("varela.woff") format("woff");
src: url('css/varela.woff') format('woff');
}
</style>
</head>
Expand Down
64 changes: 61 additions & 3 deletions site/css/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,11 @@
right:1%;
left: 61%;
}

#searchheader label {
color: #b3b3b3;
}

#searchheader span {
display:inline-block;
vertical-align: middle;
Expand All @@ -43,7 +45,7 @@

/* Div for results of search */
#searchresults {
padding-top: 18em;
padding-top: 18.2em;
}

/* Main map div */
Expand Down Expand Up @@ -79,17 +81,34 @@
overflow: auto;
margin-left: 0.2em;
}

fieldset {
padding-bottom: 2px;
}

fieldset div {
width: 95%;
display: inline-block;
float: left;
}

fieldset div:last-of-type {
float: initial;
}

/* Image size inside the resultcard */
.resultcard img.thumb {
padding-right: .5em;
width: 15%;
float: left;
}

.resultcard img.nopic {
padding-left: .5em;
width: 5%;
float: right;
}

.resultcard img.edit {
padding-left: .5em;
width: 5%;
Expand All @@ -102,7 +121,7 @@

/* The balloon shown on mouse over a resultcard */
.rcballoon {
max-width: 40%;
box-sizing: border-box;
}

/* Image size inside balloon */
Expand All @@ -111,18 +130,57 @@
width: 20%;
float: left;
}

.rcballoon img.nopic {
padding-left: .5em;
width: 5%;
float: right;
}

.rcballoon img.edit {
padding-left: .5em;
width: 5%;
float: right;
}

@font-face{
@font-face {
font-family:'Varela';
src:url('varela.woff') format('woff');
}

@media (min-width: 800px) {
#main {
max-height: 100vh;
}
}

@media (max-width: 800px) {
#sidebarholder {
min-width: 100%;
bottom: initial;
height: initial;
overflow: initial;
}

#searchheader {
width: 100%;
position: relative;
left: initial;
right: initial;
}

#searchresults {
padding-top: 0;
}

.pure-u-3-5 {
width: 100%;
}

#main {
right: 0;
height: 100vh;
top: initial;
bottom: -287px;
}
}
46 changes: 23 additions & 23 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Offentlig konst i Sverige</title>
<link rel="profile" href="//www.w3.org/2005/10/profile" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="profile" href="https://www.w3.org/2005/10/profile" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="leaflet/Control.OSMGeocoder.min.css" />
<link rel="stylesheet" href="leaflet/L.Control.Sidebar.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="leaflet/L.Control.Locate.min.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="leaflet/L.Control.Locate.ie.min.css"/>
Expand All @@ -19,10 +19,10 @@
type="image/ico"
href="favicon.ico" />
<link rel="stylesheet" href="css/my.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js"></script>
<script type="text/javascript" src="leaflet/Control.OSMGeocoder.min.js"></script>
<script type="text/javascript" src="leaflet/L.Control.Sidebar.min.js"></script>
<script type="text/javascript" src="leaflet/L.Control.Locate.min.js" ></script>
Expand All @@ -34,7 +34,7 @@
<h1 class="logo">Offentligkonst.se</h1>
<nav>
<a id="menu_btn" href="#" class="menu" title="Meny"></a>
<a id="search_btn" href="/search.html" class="search" title="Sök bland konstverken"></a>
<a id="search_btn" href="search.html" class="search" title="Sök bland konstverken"></a>
</nav>
</header>
<div id="menu" class="clearfix" style="visibility:hidden">
Expand All @@ -45,11 +45,11 @@ <h2>Kontakt</h2>
<li>E-post: <a href="mailto:info[AT]offentligkonst.se" class="at">info<span class="at">[AT]</span>offentligkonst.se</a></li>
<li>Twitter:
<ul>
<li><a href="//twitter.com/offentligkonst">@offentligkonst</a></li>
<li><a href="//twitter.com/WikimediaSE">@WikimediaSE</a> (för projektrelaterade frågor)</li>
<li><a href="//twitter.com/Lokal_Profil">@Lokal_Profil</a> (för tekniska frågor)</li>
<li><a href="https://twitter.com/offentligkonst">@offentligkonst</a></li>
<li><a href="https://twitter.com/WikimediaSE">@WikimediaSE</a> (för projektrelaterade frågor)</li>
<li><a href="https://twitter.com/Lokal_Profil">@Lokal_Profil</a> (för tekniska frågor)</li>
</ul></li>
<li>GitHub: <a href="//github.com/Wikimedia-Sverige/ODOK">Wikimedia-Sverige/ODOK</a></li>
<li>GitHub: <a href="https://github.com/Wikimedia-Sverige/ODOK">Wikimedia-Sverige/ODOK</a></li>
</ul>
Om du hittar fel eller undrar hur du kan hjälpa till att förbättra
offentligkonst.se rekommenderas du att läsa vår <a href="https://se.wikimedia.org/wiki/Offentligkonst.se/FAQ">FAQ</a>.
Expand All @@ -58,22 +58,22 @@ <h2>Kontakt</h2>
<h2>Om offentligkonst.se</h2>
<p>
Välkommen! Här presenteras Wikimedia Sveriges databas över offentlig konst.
Projektet består dels av den öppna databasen, med tillhörande <a href="//offentligkonst.se/api/">API</a>
Projektet består dels av den öppna databasen, med tillhörande <a href="http://offentligkonst.se/api/">API</a>
och dels av denna webbplats där informationen lättare kan konsumeras. För mer information
om projektet och vad du som volontär eller utvecklare kan hjälpa till med finns
på vår <a href="//se.wikimedia.org/wiki/Offentligkonst.se">föreningswiki</a>.
på vår <a href="https://se.wikimedia.org/wiki/Offentligkonst.se">föreningswiki</a>.
</p>
<p>
Nedan visas de konstverk i Sverige för vilka vi har koordinater. Kartan uppdateras dagligen.
Det går även att <a href="/search.html">söka bland konstverken</a>.
Det går även att <a href="search.html">söka bland konstverken</a>.
</p>
<p>
<a href="https://se.wikimedia.org/wiki/Offentligkonst.se/Stämning">Information om stämningen och HDs utlåtande</a>.
Tills mer klarhet finns i denna fråga uppdateras databasen inte med nya bilder
(annan information läggs till löpande).
</p>
<p>
Detta är ett projekt från <a href="//wikimedia.se/">Wikimedia Sverige</a> som möjliggjorts med stöd av <a href="http://www.vinnova.se">Vinnova</a>.
Detta är ett projekt från <a href="https://wikimedia.se/">Wikimedia Sverige</a> som möjliggjorts med stöd av <a href="http://www.vinnova.se">Vinnova</a>.
För information <a href="cookieinfo.html">om kakor</a>.
</p>
</div>
Expand All @@ -83,16 +83,16 @@ <h2>Om offentligkonst.se</h2>
</div>
<script type="text/javascript">
$('#menu_btn').click(function(){
if ($('#menu').css("visibility") == "hidden") {
$('#menu').css("visibility", "visible");
if ($('#menu').css('visibility') == 'hidden') {
$('#menu').css('visibility', 'visible');
}
else {
$('#menu').css("visibility", "hidden");
$('#menu').css('visibility', 'hidden');
}
});
// quick and dirty obfuscation
$('a.at').attr('href', $('a.at').attr('href').replace("[AT]","@"));
$('span.at').text("@");
$('a.at').attr('href', $('a.at').attr('href').replace('[AT]', '@'));
$('span.at').text('@');
</script>
<!-- Piwik -->
<script type="text/javascript">
Expand Down
46 changes: 23 additions & 23 deletions site/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,57 @@
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Offentligkonst.se &ndash; sökmotorn"/>
<meta property="og:description" content="Sökmotor för offentlig konst i Sverige"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Offentligkonst.se &ndash; sökmotorn" />
<meta property="og:description" content="Sökmotor för offentlig konst i Sverige" />
<title>Offentligkonst.se &ndash; sökmotorn</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" />
<link rel="profile" href="//www.w3.org/2005/10/profile" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" />
<link rel="profile" href="https://www.w3.org/2005/10/profile" />
<link rel="icon"
type="image/ico"
href="favicon.ico" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="external/jquery.balloon.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script type="text/javascript" src="search.js"></script>

<!--These should be replaced by something which works better on mobile-->
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/pure-min.css&amp;pure/0.3.0/base-min.css&amp;pure/0.3.0/forms-min.css&amp;pure/0.3.0/grids-min.css"/>
<link rel="stylesheet" href="HACK4DK/web/css/pure-skin-mine.css"/>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/pure-min.css&amp;pure/0.3.0/base-min.css&amp;pure/0.3.0/forms-min.css&amp;pure/0.3.0/grids-min.css" />

<link rel="stylesheet" href="css/search.css"/>
<link rel="stylesheet" href="css/search.css" />
</head>
<body>

<div class="pure-g-r" id="outer">
<div class="pure-u-3-5">
<div id="main"></div>
</div>

<div class="pure-u-2-5" id="sidebarholder">
<div id="sidebar">
<div class="pure-form" id="searchheader">
<fieldset style="padding-bottom: 2px;">
<fieldset>
<legend class="logo"><a href="index.html"><img src="images/Offentligkonst_logo_nav.svg" alt="logo" /></a>&nbsp; &ndash; Sökmotorn</legend>
<div style="width: 99%;display: inline-block; float:right">
<div>
<label for="coord_input">&nbsp;med Koordinater</label>
<input id="coord_input" type="checkbox" value="coord" name="ci" title="Require coordinate" tabindex=1/>
&nbsp;
<label for="image_input">&nbsp;med Bild</label>
<input id="image_input" type="checkbox" value="image" name="ii" title="Require image" tabindex=2/>
</div>
<div style="width: 99%;display: inline-block" class="enterTriggered">
<div class="enterTriggered">
<label for="artist_input" style="width: 24%">&nbsp;Konstnär:</label>
<input type="text" id="artist_input" title="Ange konstnär" placeholder="<alla>" tabindex=3 style="width: 75%; float:right"/>
</div>
<div style="width: 99%;display: inline-block" class="enterTriggered">
<div class="enterTriggered">
<label for="title_input" style="width: 24%">&nbsp;Titel:</label>
<input type="text" id="title_input" title="Ange titel" placeholder="<alla>" tabindex=4 style="width: 75%; float:right"/>
</div>
<div style="width: 99%;display: inline-block" class="enterTriggered">
<div class="enterTriggered">
<label for="year_input_from" style="width: 24%">&nbsp;Tillkomstår:</label>
<input type="number" min="1000" max="2500" step="1" id="year_input_til" title="Till" placeholder="<till>" tabindex=6 style="width: 36%; float:right"/>
<span style="width: 3%; float:right">&nbsp;&ndash;&nbsp;</span>
<input type="number" min="1000" max="2500" step="1" id="year_input_from" title="Från" placeholder="<från>" tabindex=5 style="width: 36%; float:right"/>
<span style="width: 3%; float:right" aria-hidden>&nbsp;&ndash;&nbsp;</span>
<input type="number" min="1000" max="2500" step="1" id="year_input_from" title="Från" placeholder="<från>" tabindex=5 style="width: 36%; float:right"/>
</div>
<div style="width: 99%;display: inline-block">
<div>
<label for="muni_selector" style="width: 24%">&nbsp;Kommun:</label><br/>
<select id="muni_selector" title="Välj kommun" data-placeholder="<alla>" multiple tabindex=7 style="width: 100%; float:right; "></select>
</div>
Expand All @@ -68,6 +64,10 @@
<div id="searchresults"></div>
</div>
</div>

<div class="pure-u-3-5">
<div id="main"></div>
</div>
</div>
<!-- Piwik -->
<script type="text/javascript">
Expand Down
14 changes: 12 additions & 2 deletions site/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,9 @@ function populateSearchResult(rObjs) {
// console.log(newCard);
$('#searchresults').append(newCard);

// set map below results(#sidebarholder)
$('#main').css('bottom', '-' + $('#sidebarholder').height() + 'px');

var bc = $(document.createElement('div'));
bc.append(newCard.html());

Expand Down Expand Up @@ -241,10 +244,17 @@ function populateSearchResult(rObjs) {
bc.append('<a href="' + editLnk + '" target="_blank">' + editImg + '</a>');
}

var ballonPosition;
if ($(document).width() > 800) {
ballonPosition = 'left';
} else {
ballonPosition = 'bottom';
}

$('#rc_' + index).balloon({
position: 'left',
position: ballonPosition,
classname: 'rcballoon',
css: { minWidth: '400px' },
css: { maxWidth: '100%' },
contents: bc });
});

Expand Down