From 56d603802b71881857df9046d6c6875500fc7e47 Mon Sep 17 00:00:00 2001 From: Karen Date: Thu, 25 Aug 2011 16:28:23 +0530 Subject: [PATCH 1/2] committed first run of front end gazetteer. --- gazetteer/templates/main.css | 169 ++++++++++++++++++++++++++++++++ gazetteer/templates/reset.css | 44 +++++++++ gazetteer/templates/search.html | 86 ++++++++++++++++ 3 files changed, 299 insertions(+) create mode 100644 gazetteer/templates/main.css create mode 100644 gazetteer/templates/reset.css create mode 100644 gazetteer/templates/search.html diff --git a/gazetteer/templates/main.css b/gazetteer/templates/main.css new file mode 100644 index 0000000..78f6add --- /dev/null +++ b/gazetteer/templates/main.css @@ -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;} diff --git a/gazetteer/templates/reset.css b/gazetteer/templates/reset.css new file mode 100644 index 0000000..b6bde9f --- /dev/null +++ b/gazetteer/templates/reset.css @@ -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; +} diff --git a/gazetteer/templates/search.html b/gazetteer/templates/search.html new file mode 100644 index 0000000..af63f22 --- /dev/null +++ b/gazetteer/templates/search.html @@ -0,0 +1,86 @@ + + + + + + + + +Untitled Document + + + + + + + + + + +
+ +
+ +
+ +
+ + + + + +
+ + +
+
    +
  • Water Well Imagery
    • +
  • Chicago in the 20s
    • +
  • Maps go here
    • +
  • Maps go here
    • +
  • Maps go here
    • +
  • Maps go here
    • +
  • Maps go here
    • +
  • Maps go here
    • +
  • Maps go here
    • +
  • Maps go here
    • +
+ +
    +
  1. «
    2. +
  2. 1
    3. +
  3. 2
    4. +
  4. 3
    5. +
  5. 4
    6. +
  6. 5
    7. +
  7. 6
    8. +
  8. 7
    9. +
  9. 8
    10. +
  10. 9
    11. +
  11. 10
    12. +
  12. »
    13. +
+ +
+First +Last +
+ +
+ +
+

MAP GOES HERE

+
+ +
+ + + +
+ +
+ + + + + From f9f6ba9420aae89bbb4b4ba22f0f8e019389f5ca Mon Sep 17 00:00:00 2001 From: Karen Date: Thu, 25 Aug 2011 16:50:28 +0530 Subject: [PATCH 2/2] aligned the pagination div. --- gazetteer/templates/main.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/gazetteer/templates/main.css b/gazetteer/templates/main.css index 78f6add..2df4be3 100644 --- a/gazetteer/templates/main.css +++ b/gazetteer/templates/main.css @@ -76,6 +76,10 @@ margin-right:2%; background-color:blue; height:100%; /*please delete this fixed height*/} +.paginate +{width:320px; /*is a fixed width fine, because percentages screw this up*/ +margin:0 auto;} + .paginate li {float:left; margin-right:9px; @@ -163,7 +167,7 @@ box-shadow:2px 3px 4px 2px #c6c0c0;} /*height:100px*/ /*may need to be changed if content exceeds*/ /*margin-top:-100px;*/ width:100%; -height:9.6%; /*DECIMALS should work, right*/ +height:8.6%; /*HA HA HA HA HA HA HA DECIMALS should work, right*/ /*margin:0 auto;*/ background-color:grey; clear:both;}