Unverified Commit 4b794180 authored by cgm78's avatar cgm78 Committed by GitHub
Browse files

Updated CSS

parent 158852af

AutoComplete/customIndex.js

+23 −7
Original line number Diff line number Diff line
@@ -3,7 +3,10 @@ document.querySelector("#autoComplete").addEventListener("autoComplete", functio 
    console.log(event.detail);

  });



//Declares a new autocomplete that is ran when the user enters more data into the autocomplete box.

/**

 * @class autoComplete

 * @classdesc Declares a new autocomplete that is ran when the user enters more data into the autocomplete box.

 */

var newAutocomplete = new autoComplete({

    //Defines the data that will be returned inside of the autocomplete.

    data: {
@@ -17,7 +20,7 @@ var newAutocomplete = new autoComplete({ 
        return nameArray;

      },

      //Searches the returned data based off of the name property.

      key: ["name"],

      key: ["clean_feature"],

      //Does not cache search.

      cache: false

    },
@@ -42,7 +45,7 @@ var newAutocomplete = new autoComplete({ 
        return 0;

    },

    //Value displayed in searchbox before any value is entered.

    placeHolder: "Nomenclature", 

    placeHolder: "Enter feature here...", 

    //ID of input/searchbox which will be used.    

    selector: "#autoComplete",       

    //Does not display autocomplete results list until the characters entered into the searchbox exceed the threshold.
@@ -85,10 +88,15 @@ var newAutocomplete = new autoComplete({ 
        result.innerHTML = "No Results";

        document.querySelector("#autoComplete_list").appendChild(result);

    },*/

    //Runs a script on the selection of a result item, will be used to edit the url for search queries.

    onSelection: feedback => {             // Action script onSelection event | (Optional)

       //Cretes string used for searching with the selected name.

        var URLString = ("https://planetarynames.wr.usgs.gov/SearchResults?feature=" + feedback.selection.value.name);



    /**

     * @function onSelection

     * @description Runs a script on the selection of a result item, will be used to edit the url for search queries.

     * @param {JSON} feedback

     */

    onSelection: feedback => {             

       //Creates string used for searching with the selected name.

        var URLString = ("https://planetarynames.wr.usgs.gov/SearchResults?feature=" + feedback.selection.value.clean_feature);

        //Replaces spaces with %20 for encoded URL string.

        var encodedURLString = URLString.replace(" ", "%20");

        //Puts web address into browser.
@@ -96,3 +104,11 @@ var newAutocomplete = new autoComplete({ 
    }

});



/*

function unrenderBox(){

  var newAutocomplete = new autoComplete({

      resultsList: {

        render = false,

      },

  }),

}*/
 
 No newline at end of file

AutoComplete/index.html

+6 −4
Original line number Diff line number Diff line
@@ -9,7 +9,7 @@ 
			  crossorigin="anonymous">

	</script>

	<!-- Declares the stylesheet for the page.-->

	<link rel="stylesheet" href="cssBeingUsed.css">

	<link rel="stylesheet" href="planetarynames.css">

	<!-- Gets the autcomplete.js library for use (Doesn't look like I need this, keeping it for now just in case).

	<script src="./autoComplete.js/dist/js/autoComplete.js"></script> -->

	<!--Link to demo stylesheet, keeping for now in case I need it.
@@ -34,9 +34,9 @@ 
	//While the feature at the current index is not null.

    while (data.features[index] != null){

		//Log the feature name.

		console.log(data.features[index].name);

		console.log(data.features[index].properties.clean_feature + " " + index);

		//Push the json object at the current index onto nameArray.

		nameArray.push(data.features[index]);

		nameArray.push(data.features[index].properties);

		//Increment index.

        index++;

         }
@@ -44,7 +44,8 @@ 
	//Ajax call to WFS server with the features/data need.

	$.ajax({

		//URL of WFS server.

		url: "https://astrocloud.wr.usgs.gov/dataset/data/nomenclature/MARS/WFS?version=1.1.0.0&service=WFS&request=GetFeature&srsname=EPSG4326&outputFormat=application/json",

		// Old URL https://astrocloud.wr.usgs.gov/dataset/data/nomenclature/MARS/WFS?version=1.1.0.0&service=WFS&request=GetFeature&srsname=EPSG4326&outputFormat=application/json

		url: "https://wms.wr.usgs.gov/cgi-bin/mapserv?map=/var/www/html/mapfiles/earth/moon_nomen_wfs.map&service=WFS&version=1.1.0&&TYPENAME=MOON_POINT&REQUEST=getfeature&PropertyName=clean_feature&outputformat=application/json;%20subtype=geojson&Filter=%3CFilter%3E%3CPropertyIsLike%20wildcard=%27*%27%20singleChar=%27.%27%20escape=%27!%27%3E%3CPropertyName%3Eclean_feature%3C/PropertyName%3E%3CLiteral%3EA*%3C/Literal%3E%3C/PropertyIsLike%3E%3C/Filter%3E",

		//Data type of file on WFS server/above URL.

		dataType: 'json',

		//When the server is successfully connect to, run loadGeoJson function.
@@ -55,6 +56,7 @@ 
	</script>

	<!-- Declares main js file for autocomplete functionality.-->

	<script src="./customIndex.js"></script>



</body>

	

</html>
 
 No newline at end of file

AutoComplete/planetarynames.css

0 → 100644
+717 −0
Original line number Diff line number Diff line 
@charset "utf-8";



html, body {

  margin:    0;

  padding:   0;

  height: 100%;

  background: transparent url(../images/layout/stary_bg.jpg) repeat;

}



body, td, th {

  color: #000000;

  font-family: Tahoma, Verdana, Arial, sans-serif, Helvetica;

  font-size: 10pt;

}



a, a:visited {

  color: #0000FF;

}



table  {

  border-spacing: 0px;

}



tr, td {

  vertical-align: top;

}



span.h1 {

  font-size: 2em;

  font-weight: bolder;

  margin: .67em 0

}



span.h2 {

  font-size: 1.5em;

  font-weight: bolder;

  margin: .75em 0

}



span.h3  {

  font-weight: bolder;

  font-size: 1.17em;

  margin: .83em 0

}



div#backgroud_overlapping_layer {

/*  background: transparent url(../images/layout/vertical_fade_bg.png) repeat-x;*/

  width: 100%;

  height: 100%;

  overflow: hidden;

  position: absolute;

  top: 0px;

  left: 0px;

  z-index: -1;



}

div#body {

  height:      100%;

  min-width:  900px;

  width:       100%;

  background: transparent url(../images/layout/vertical_fade_bg.png) repeat-x;



}



#layout_glass_wrapper {

  width: 100%;

}



.spacer {

  width: 5px;

  min-width: 5px;

}





#layout_glass_table, tr.layout, tr.layout td.layout  {

  margin:           0;

  padding:          0;

  border:           0;

  border-spacing: 0px;

}



#layout_glass_table {

   width:               100%;

   padding:              5px;

   border-collapse: collapse;

   margin-bottom:        5px;

}





#layout_glass_top_left {

  background: transparent url(../images/layout/glass_top_left_corner.png) no-repeat left top;

  height: 32px;

  width:  10px;

}

#layout_glass_top_center {

  background: transparent url(../images/layout/glass_top_center.png) repeat-x left top;

  height: 32px;

  margin:  0px;

  vertical-align: middle;

}

#layout_glass_top_right {

  background: transparent url(..//images/layout/glass_top_right_corner.png) no-repeat right top;

  height: 32px;

  width:  10px;

}

#layout_glass_bottom_left {

  background: transparent url(..//images/layout/glass_bottom_left_corner.png) no-repeat left bottom;

  height: 10px;

}

#layout_glass_bottom_center {

  background: transparent url(..//images/layout/glass_bottom_center.png) repeat-x left bottom;

  height: 10px;

}

#layout_glass_bottom_right {

  background: transparent url(..//images/layout/glass_bottom_right_corner.png) no-repeat right bottom;

  height: 10px;

}

#layout_glass_middle_left {

  background: transparent url(..//images/layout/glass_middle_left.png) repeat-y left top;

  height: 10px;

}

#layout_glass_middle_right {

  background: transparent url(..//images/layout/glass_middle_right.png) repeat-y right -28px; /* offset is to make the transition cleaner */

  height: 10px;

}

#layout_glass_middle_center {

  background: transparent url(..//images/layout/glass_middle_center.png) repeat;

}



div.page_title {

  margin-left:       5px;

  font-size:        120%;

  color:            #fff;

  display:        inline;

  vertical-align: middle;

}

div.search_wrapper {

  float:       right;

  margin-right: 10px;

  display:    inline;

}





#layout_content_table {

  margin:                 0;

  padding:                0;

  border:                 0;

  border-spacing:       0px;

  border-collapse: collapse;

  width:               100%;

  min-width:          900px;

}



/*#layout_content_table *, #layout_content_table * * {

  margin:  0;

  padding: 0;

}*/



#layout_content_top_left_corner {

  background: transparent url(..//images/layout/content_top_left_corner.png) no-repeat left top;

  height:     12px;

  width:      12px;

  min-width:  12px;

  min-height: 12px;

}

#layout_content_top_left_header {

  background: transparent url(..//images/layout/nav_background.png) repeat-y right top;

  width:        175px;

  height:        12px;

  min-height:    12px;

}

#layout_content_top_right_header {

  background: #fff;

  height:     12px;

  min-height: 12px;

}

#layout_content_top_right_corner {

  background: transparent url(..//images/layout/content_top_right_corner.png) no-repeat right top;

  height:     12px;

  width:      12px;

  min-height: 12px;

}



#layout_content_middle_left_corner {

  background: #dedede;

}

#layout_content_middle_left_header {

  background: transparent url(..//images/layout/nav_background.png) repeat-y right top;

  vertical-align: top;

  padding-right:  5px;

  width:        175px;

  min-width:    175px;

  min-height: 500px;

  height:     500px;

}



#layout_content_middle_right_header {

  background: #fff;

  vertical-align: top;

}

#layout_content_middle_right_corner {

  background: #fff;

}



#layout_content_bottom_left_corner {

  background: transparent url(..//images/layout/content_bottom_left_corner.png) no-repeat left;

  height: 12px;

}

#layout_content_bottom_left_header {

  background: transparent url(..//images/layout/nav_background.png) repeat-y right top;

}

#layout_content_bottom_right_header {

  background: #fff;

}

#layout_content_bottom_right_corner {

  background: transparent url(..//images/layout/content_bottom_right_corner.png) no-repeat right;

  height: 12px;

}



#layout_content_wrapper {

  margin:         5px;

  vertical-align: top;

  padding-left:   8px;

  padding-right:  8px;

  padding-bottom: 8px;

}



#header_wrapper {

  width:      100%;

  height:     65px;

  min-width: 900px;

}



#header_center {

  color:        #fff;

  margin-left:  95px;

}

#header_center div {

  text-align: center;

}

#header_text {

  padding-top: 5px;

  font-size:  170%;

  color:      #fff;

}

#header_sub_text {

  font-size: 100%;

  color:     #fff;

}



#header_right_logos {

  float:       right;

  left:         auto;

  right:           0;

  height:       45px;

  padding:      10px;

}



#header_left_logo {

  position: absolute;

  left:            0;

  right:        auto;

  height:       45px;

  padding:       6px;

}



#nasa_logo {

  padding-left: 5px;

}



#usgs_logo img {

 padding-bottom: 5px;

}



#usgs_logo img, #nasa_logo img, #iau_logo img {

   border: 0px;

}



#simple_search {

  vertical-align: middle;

}



#simple_search * {

  padding:     0;

  margin:      0;

  font-size: 90%;

}



#search_button {

  vertical-align: top;

  height:  21px;

  width:   22px;

}

#search_button:hover {

  cursor: pointer;

}



#layout_content_footer {

  background:       #fff;

  padding-top:      10px;

  font-size:        100%;

  color:         #4b3f33;

  text-align:     center;

  vertical-align: bottom;

}



#layout_content_footer a  {

  padding-top:     10px;

  font-size:        90%;

  color:        #4b3f33;

  text-decoration: none;

}



#layout_content_footer a:hover {

  text-decoration: underline;

}



#simple_search_box {

  border:     none;

  color:   #000000;

  height:     21px;

  width:     150px;

  font-size: 1.2em;

  position: relative;

  display: inline-block;



}



#autoComplete{

  border:     none;

  color:   #000000;

  height:     21px;

  width:     150px;

  font-size: 1.2em;

  left: 40px;

  top: 14px;

  position: relative;

}



#autoComplete_list{position: relative; padding:0;left:0;right:0;margin-top:0;margin-left:auto;margin-right:auto;width:18rem;transition:all .1s ease-in-out;-webkit-transition:all -webkit-transform .1s ease}

.autoComplete_result{/*display: inline-block;*//*margin:0rem auto;padding:.6rem;*//*SAME WIDTH AS TEXTBOX*/max-width:150px;/*RESTYLE, OUTSIDE BORDER OF LIST*/border:.05rem solid #e3e3e3;/*NO BULLETS*/list-style:none;/*text-align:left;*/font-size:1.1rem;color:#7b7b7b;transition:all .1s ease-in-out;background-color:#fff}

.autoComplete_result::selection{color:rgba(#fff,0);background-color:rgba(#fff,0)}

.autoComplete_result:last-child{border-radius:0 0 1rem 1rem}

.autoComplete_result:hover{cursor:pointer;background-color:rgba(255,248,248,.9);border-left:2px solid rgb(0, 0, 0);border-right:2px solid rgb(0, 0, 0);border-top:2px solid transparent;border-bottom:2px solid transparent}

.autoComplete_result:focus{outline:0;background-color:rgba(255,248,248,.9);border-left:2px solid rgb(0, 0, 0);border-right:2px solid rgb(0, 0, 0);border-top:2px solid transparent;border-bottom:2px solid transparent}

.autoComplete_highlighted{opacity:1;color:rgb(0, 0, 0);font-weight:700}

.autoComplete_highlighted::selection{color:rgba(#fff,0);background-color:rgba(#fff,0)}

.autoComplete_selected{cursor:pointer;background-color:rgba(255,248,248,.9);border-left:2px solid rgb(0, 0, 0);border-right:2px solid rgb(0, 0, 0);border-top:2px solid transparent;border-bottom:2px solid transparent}@media only screen and (max-width:600px){#autoComplete{width:5rem}





input.search_box_empty {

  background: url(../images/layout/search_box_bg.jpg) no-repeat left center;

}



#simple_search {

  display: inline; /*To fix IE Bug, it thinks a form requires a line break...*/

}



li {

  display: list-item;

}



ol {

  list-style-type: decimal;

}



ol ul, ul ol, ul ul, ol ol {

  margin-top: 0;

  margin-bottom: 0;

}



ul {

  margin-left:   5px;

  padding-left: 10px;

}



#layout_content_middle_left_header ul, #layout_content_middle_left_header ul li ul {

  padding-left: 10px;

  margin-left:   1px;

  margin-right:  0px;



}

div.content_spacer {

  width:     11px;

  min-width: 11px;

  height: inherit;

}



div.page_error {

  position: absolute;

  width:  100%;

  height: 100%;

  margin-left: auto;

  margin-right:auto;

  padding-top: 150px;

  font-size: 300%;

  font-weight: bold;

  background: transparent url(../images/layout/black_70percent.png);

  text-align: center;

  color: white;

  z-index: 9000;

}

div.error_subtext {

  padding-top: 20px;

  text-align: center;

  width: 100%;

  font-size: 20px;

  color: white;

  font-weight: normal;

}



div.error_description {

  text-align: center;



}



/** NEWS **/



table.news {

  height:       522px;

  width:        258px;

  margin-left:    7px;

  margin-right:   7px;

  border-spacing: 0px;

  border-collapse:collapse;

}

table.news tbody tr td, table.news tbody tr {

  width:        258px;

  margin:         0px;

}



table.news tbody tr td.news_header {

  background: transparent url(../images/layout/news_header_bg.png) no-repeat;

  font-size:    140%;

  color:        #000;

  height:       30px;

  margin:        5px;

  margin-bottom: 0px;

  padding:       0px;

  padding-left: 10px;

  vertical-align: middle;

}



table.news tbody tr td.news_body {

  background: transparent url(../images/layout/news_body_bg.png) repeat-y;

  vertical-align: top;

  margin:         0px;

}



table.news tbody tr td.news_footer {

  background:  transparent url(../images/layout/news_footer_bg.png) no-repeat;

  height:        28px;

  margin:         0px;

}



table.news tbody tr td.news_footer a {

  text-align:     right;

  float:          right;

  padding-right:   10px;

  text-decoration: none;

  color:        #1f1d1d;

}



table.news tbody tr td.news_footer a:hover {

  text-decoration: underline;

  color:             #444141;

}



div.rss-box {

  vertical-align: top;

}



ul.rss-items {

  padding-left:    10px;

  padding-right:   10px;

  list-style-type: none;

}



ul.rss-items li {

  font-size:       80%;

  color:       #29628c;

  padding-bottom:  5px;

}



a.rss-item  {

  color:          black;

  font-size:      1.2em;

  text-decoration: none;

}



a.rss-item:hover {

  text-decoration: underline;

}

span.rss-date {

  display:         block;

  padding-top:       4px;

  vertical-align: bottom;

}

p.home_page_sub_text {

  padding-left:  10px;

  padding-right: 10px;

  text-align:  center;

}

p.home_page_sub_text a {

  text-decoration: none;

  font-weight:     bold;

  color:          black;

}

p.home_page_sub_text a:hover {

  text-decoration: underline;

  color:             #52657E;

}

#top_chooser_border {

  height: 12px;

  width: 540px;

  background: transparent url(../images/layout/chooser_top_border.png) no-repeat;



}

#bottom_chooser_border {

  height: 12px;

  width: 540px;

  background: transparent url(../images/layout/chooser_bottom_border.png) no-repeat;



}

td.chooser {

  padding:        0px;

  margin:         0px;

  border-spacing: 0px;

/*  background: transparent url(../images/spiral.png) no-repeat 0 24px;*/ /** not sure if this is going to help */

}



table.search_results {

  padding-top:    4px;

  padding-bottom: 4px;

}

table.search_results > tbody > tr:hover {

  background-color: #C5D8E0;

}

table.search_results tbody tr td {

  border-right: 1px solid #ccc;

}

table.search_results tbody tr.row_header th {

  border-right: 1px solid #ccc;

}



table.search_results tbody tr td:first-child, table.search_results tbody tr.row_header th:first-child {

  border-left: 1px solid #ccc;

}

div.searchresults_instructions {





}

.row_even {

  background-color: #E3ECEE;

}

.row_header th {

  background-color: #586366;

  color: white;

  border-right: 1px solid #ccc;

  vertical-align: middle;

  padding-left: 1px;

}

.last_row td {

  border-bottom: 1px solid #ccc;

}

.right {

  text-align: right;

}

.center {

  text-align: center;

}

.left {

  text-align: left;

}



table.table_header tbody tr td {

  border: none;

  color: #fff;

  vertical-align: middle;

}



div.sort_arrow_controls {

/*  display: inline;*/ /*So it gets the v-align */

  width:  10px;

  height: 15px;

  float: right;

}

div.result_column_text {

  float:left;

}



div.asending {

  width:  9px;

  height: 6px;

  margin-top:    2px;

  margin-bottom: 2px;

/*  background: transparent url(../images/searchResults/sort_arrow_light_up.png) no-repeat;*/

}

div.decending {

  width:  9px;

  height: 6px;

/*  background: transparent url(../images/searchResults/sort_arrow_light_down.png) no-repeat;*/

}



div.asending a, div.decending a, div.asending a img, div.decending a img {

  height: inherit;

  display: block;

}



div.decending:hover, div.asending:hover {

  cursor: pointer;

}



div.bottom_next_prev {

/*  float: right;*/

}

table.advanced_search tbody tr td {

  padding: 2px;

}

td.align_top {

  vertical-align: top;

}

form.next_prev {

  display: inline;

}



div.next_prev_buttons {

  width: 400px;

  display:inline ;

}

table.add_padding tbody tr td {

  padding: 5px;

}



sup a:hover, a.js_action:hover {

  text-decoration: underline;

  cursor:       pointer;

}

tr.deprecated td, tr.deprecated td a, span.deprecated {

  color: #7F93A7;

  font-style: italic;

}



#popup {

  position: absolute;

  display:   none;

  opacity:      0;

  z-index:     50;

  top:        240px; /** just some number to get it close */

  background-color: #C5D8E0;

  padding:    8px;

  border: 1px solid #ccc;



}

#add_columns {

  font-size: 120%;

  padding:    2px;

}

#csv_chooser {

  display:   none;

}

div.astroConsole {

  background: transparent url(../images/console/console_center.png) repeat-x;

  height: 101px;

}

img.astroConsoleRight {

  float: right;

}

img.astroConsoleLeft {

  float: left;

}

ul.coord_system {

  margin-bottom: 30px;

}

ul.coord_system li {

  list-style: disc outside none;

  margin-left:             30px;

}



table.target_coord tbody tr td {

  border: 1px solid #ccc;

}



tr.featureTypesHeader th {

  text-align: left;

  font-size: 120%;

}



.loading {

  background: url("../images/ajax-loader.gif") no-repeat scroll center white;

}

div.feature_types {

  clear: both;

  float: left;

  padding-right: 10px;

}

div.html_version {

  float:right;

  display: none;

}

div.html_version a, div.html_version{

  font-size: 80%;

  font-style: normal;

  color: #000;

}

div.html_version a:hover {

/*  font-style: underline;*/

  color: #44B2F1;

}

div.olControlPanel {

   width: 60px;

   height: 200px;

   margin: 245px 0 0 15px;

}

.olControlPanelEdit div {

  float: left;

}