committed first run of front end gazetteer.
This commit is contained in:
parent
584afc94e7
commit
56d603802b
169
gazetteer/templates/main.css
Normal file
169
gazetteer/templates/main.css
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
html, body
|
||||
{width:100%;
|
||||
height:100%;}
|
||||
|
||||
body
|
||||
{font-family:Helvetica, Arial, 'DejaVu Sans', sans-serif;
|
||||
color:#666;}
|
||||
|
||||
/*.wrapper
|
||||
{min-height:100%;}*/
|
||||
|
||||
.header
|
||||
{width:100%;
|
||||
/*background-color:grey;*/
|
||||
border-bottom:1px solid #999;
|
||||
margin-bottom:2%;
|
||||
height:14%;}
|
||||
|
||||
.content
|
||||
{/*padding-bottom: 100px;*/
|
||||
margin-bottom:2%;
|
||||
height:70%}
|
||||
|
||||
.search
|
||||
{margin-left:2%;
|
||||
padding-top:2%;
|
||||
}
|
||||
|
||||
.search input
|
||||
{width:30%; /*fine if i give this width in percent, right?*/
|
||||
height:30px; /*here, a fixed width shouldn't be a problem, right?, what is someone's seeing it on an iphone?*/
|
||||
padding-left:8px;
|
||||
padding-right:8px;
|
||||
/*-moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
|
||||
-webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
|
||||
box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
|
||||
background-color:rgba(254, 254, 254, 0.9);*/
|
||||
border-radius:8px;
|
||||
-moz-box-shadow:inset 2px 2px 8px 1px #aca7a7;
|
||||
-webkit-box-shadow:inset 2px 2px 8px 1px #aca7a7;
|
||||
box-shadow:inset 2px 2px 8px 1px #aca7a7;
|
||||
border:1px solid #c8c6c6;
|
||||
-moz-border-radius:16px;
|
||||
-webkit-border-radius:16px;
|
||||
border-radius:20px;}
|
||||
|
||||
.search input:focus
|
||||
{outline:none;
|
||||
border:1px solid #999;
|
||||
-moz-border-radius:16px;
|
||||
-webkit-border-radius:16px;
|
||||
border-radius:16px;} /*this doesn't work need to find a way to give the outline border radius on focus*/
|
||||
|
||||
.mapListSection
|
||||
{float:left;
|
||||
width:34%;
|
||||
margin-left:2%;}
|
||||
|
||||
/*.mapList
|
||||
{
|
||||
}*/
|
||||
|
||||
.mapList li
|
||||
{font-size:16px;
|
||||
padding-bottom:14px;
|
||||
cursor:pointer;}
|
||||
|
||||
.mapList li:hover
|
||||
{color:#7e4444;}
|
||||
|
||||
.map
|
||||
{
|
||||
float:left;
|
||||
width:60%;
|
||||
margin-right:2%;
|
||||
background-color:blue;
|
||||
height:100%; /*please delete this fixed height*/}
|
||||
|
||||
.paginate li
|
||||
{float:left;
|
||||
margin-right:9px;
|
||||
margin-bottom:12px;
|
||||
font-size:10px;
|
||||
border:1px solid #e5e5e5;
|
||||
padding:2px 4px;
|
||||
cursor:pointer;
|
||||
background: #b5b5b5; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #FFF 0%, #e5e5e5 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #FFF 0%,#b8b8b8 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #FFF 0%,#e5e5e5 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #FFF 0%,#e5e5e5 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #FFF 0%,#e5e5e5 100%); /* W3C */
|
||||
}
|
||||
|
||||
.paginate li a
|
||||
{text-decoration:none;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
|
||||
.paginate li:first-child, .paginate li:last-child /*wont work in old IE versions, will have to test how it works*/
|
||||
{border:1px solid transparent;
|
||||
background:none;
|
||||
font-size:10px;}
|
||||
|
||||
.paginate li:hover
|
||||
{-moz-box-shadow:2px 3px 4px #c6c0c0;
|
||||
-webkit-box-shadow:2px 3px 4px #c6c0c0;
|
||||
box-shadow:2px 3px 4px #c6c0c0;
|
||||
-moz-transform:scale(1.25);
|
||||
-webkit-transform:scale(1.25);
|
||||
-o-transform:scale(1.25);
|
||||
transform:scale(1.25);}
|
||||
|
||||
/*.paginateSelected li*/ /*do i need to repeat all these classes from the .paginate div ?, also do the same for first child and last child please*/
|
||||
/*{float:left;
|
||||
color:#272727;
|
||||
margin-right:12px;
|
||||
font-size:10px;
|
||||
border:1px solid #e5e5e5;
|
||||
padding:2px 4px;
|
||||
cursor:pointer;
|
||||
background: #b5b5b5;
|
||||
background: -moz-linear-gradient(top, #d19f9f 0%, #e5e5e5 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d19f9f), color-stop(100%,#e5e5e5));
|
||||
background: -webkit-linear-gradient(top, #d19f9f 0%,#e5e5e5 100%);
|
||||
background: -o-linear-gradient(top, #d19f9f 0%,#e5e5e5 100%);
|
||||
background: -ms-linear-gradient(top, #d19f9f 0%,#e5e5e5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d19f9f', endColorstr='#e5e5e5',GradientType=0 );
|
||||
background: linear-gradient(top, #d19f9f 0%,#e5e5e5 100%);
|
||||
-moz-transform:scale(1.25);
|
||||
-webkit-transform:scale(1.25);
|
||||
-o-transform:scale(1.25);
|
||||
transform:scale(1.25);}*/
|
||||
|
||||
.firstLast
|
||||
{clear:both;
|
||||
text-align:center;
|
||||
font-size:12px;
|
||||
cursor:pointer;}
|
||||
|
||||
.first, .last
|
||||
{margin-right:12px;
|
||||
border:1px solid #e5e5e5;
|
||||
padding:2px 4px;
|
||||
color:#999;
|
||||
-moz-box-shadow:2px 3px 4px #c6c0c0;
|
||||
-webkit-box-shadow:2px 3px 4px #c6c0c0;
|
||||
box-shadow:2px 3px 4px #c6c0c0;
|
||||
font-size:10px;
|
||||
font-weight:bold;}
|
||||
|
||||
.first:hover, .last:hover
|
||||
{-moz-box-shadow:2px 3px 4px #c6c0c0;
|
||||
-webkit-box-shadow:2px 3px 4px #c6c0c0;
|
||||
box-shadow:2px 3px 4px 2px #c6c0c0;}
|
||||
|
||||
|
||||
.footer
|
||||
{position:relative;
|
||||
/*height:100px*/ /*may need to be changed if content exceeds*/
|
||||
/*margin-top:-100px;*/
|
||||
width:100%;
|
||||
height:9.6%; /*DECIMALS should work, right*/
|
||||
/*margin:0 auto;*/
|
||||
background-color:grey;
|
||||
clear:both;}
|
||||
44
gazetteer/templates/reset.css
Normal file
44
gazetteer/templates/reset.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
86
gazetteer/templates/search.html
Normal file
86
gazetteer/templates/search.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE HTML>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Untitled Document</title>
|
||||
|
||||
<link rel="stylesheet" href="reset.css" type="text/css" />
|
||||
<link rel="stylesheet" href="main.css" type="text/css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--<div class="wrapper">-->
|
||||
|
||||
<div class="header">
|
||||
|
||||
<form action="" method="get" class="search"><!--method is right???-->
|
||||
<input type="text" placeholder="Search digital gazetteer" name="field"/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
|
||||
<div class="mapListSection">
|
||||
<ul class="mapList">
|
||||
<li>Water Well Imagery</li>
|
||||
<li>Chicago in the 20s</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
<li>Maps go here</li>
|
||||
</ul>
|
||||
|
||||
<ol class="paginate paginateSelected"> <!--ordered would be better in this case, right?-->
|
||||
<li><a href="">«</a></li>
|
||||
<li><a href="">1</a></li>
|
||||
<li><a href="">2</a></li>
|
||||
<li><a href="">3</a></li>
|
||||
<li><a href="">4</a></li>
|
||||
<li><a href="">5</a></li>
|
||||
<li><a href="">6</a></li>
|
||||
<li><a href="">7</a></li>
|
||||
<li><a href="">8</a></li>
|
||||
<li><a href="">9</a></li>
|
||||
<li><a href="">10</a></li>
|
||||
<li><a href="">»</a></li>
|
||||
</ol>
|
||||
|
||||
<div class="firstLast">
|
||||
<span class="first">First</span>
|
||||
<span class="last">Last</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<p>MAP GOES HERE</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--</div>-->
|
||||
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user