Search Bar, avalible from clients menu.

WickedShell commented 13 years ago

This was frikfry's suggestion, I just repened it here.

His orginal comment; "On another note, I think it would be good if a search bar tab was added to the top navigation along with a game selection dropdown, something similar to this. http://img818.imageshack.us/img818/9408/searchfz.png

It'd an addition that was made to my clan's echelon that is very helpful."

My current throught is what if I add an entry to the drop down menu under clients, that loads the search bar into a little window similar to the way edit ban looks. I'm not sure if this is terribly inconvienent upon users though... Any opnions?

FrikFry commented 13 years ago

I think that sounds good, it would certainly be in keeping with the style of the new echelon.

FrikFry commented 13 years ago

Just out of curiosity, have you had a chance to look into this?

WickedShell commented 13 years ago

Yeah. Everytime I get started I've stumble'd across a new issue that takes precedence. Right now what's blocking this, is the issues with session tracking, and casuing invalid hack attempts detected.

This will be happening though.

FrikFry commented 13 years ago

Alright. Thanks for the speedy reply.

FrikFry commented 13 years ago

I've been trying to get it to work on my own end, but I'm having trouble getting a colorbox to display properly. for some reason it displays the search page i made but it doesn't put a background to it like it does with the edit ban box. That is to say, the rest of the page isn't darkened out and the close button appears as just plain text. If you've managed to get far enough to get the button at least working, would you mind sharing the code for that?

Thanks.

FrikFry commented 13 years ago

Figured out my issue, forgot to double check the css documents.

X_X

WickedShell commented 13 years ago

Sorry I got completley side tracked from all of this as the test server I was useing got root'd (not echelon2's fault) but I had to focus on recovering that.

So does it work now? :D

And CSS documents sound like the spot. I remember I was having some problems getting some js and CSS sheets behaving nicely.

FrikFry commented 13 years ago

Ya. I made a clientsearch page and just have the colorbox open that. Works like a charm.

WickedShell commented 13 years ago

Is it suitable to be incorperated back upstream? (Saved work is saved work after all :)

And when you say a client search page did you mean an entry on the drop down menu?

FrikFry commented 13 years ago

Yes, I made a clientsearch.php and I have it open that page in a colorbox from the dropdown. It's actually its own separate search tab.

Here's the clientsearch page I made:

<?php
$page = "clientsearch";
$page_title = "Client Search";
$auth_name = 'clients';
$b3_conn = false; // this page needs to connect to the B3 database
$pagination = false; // this page requires the pagination part of the footer
require 'inc.php';
?>
<html>
<head>
</head>
<body>

<fieldset class="search">
<legend>Client Search</legend>
<form action="clients.php" method="get" id="c-search">

    <img src="images/indicator.gif" alt="Loading...." title="We are searching for posible matches, please wait" id="c-s-load" />

    <input type="text" autocomplete="off" name="s" id="search" onBlur="fill();" value="<?php echo $search_string; ?>" />

    <select name="t">
        <option value="all" <?php if($search_type == "all") echo 'selected="selected"' ?>>All Records</option>
        <option value="name" <?php if($search_type == "name") echo 'selected="selected"' ?>>Name</option>
        <option value="alias" <?php if($search_type == "alias") echo 'selected="selected"' ?>>Alias</option>
        <option value="pbid" <?php if($search_type == "pbid") echo 'selected="selected"' ?>>PBID</option>
        <option value="ip" <?php if($search_type == "ip") echo 'selected="selected"' ?>>IP Address</option>
        <option value="id" <?php if($search_type == "id") echo 'selected="selected"' ?>>Player ID</option>
    </select>

    <br>

    <label for="game">Game:</label>
        <select name="game">
            <?php

            $games_list = $dbl->getGamesList();
            $i = 0;
            $count = count($games_list);
            $count--; // minus 1
            while($i <= $count) :

                if($game == $games_list[$i]['id'])
                    $selected = 'selected="selected"';
                else
                    $selected = NULL;

                echo '<option value="'. $games_list[$i]['id'] .'" '. $selected .'>'. $games_list[$i]['name'] .'</option>';

                $i++;
            endwhile;

            ?>
        </select>

    <input type="submit" id="sub-search" value="Search" />
</form>
</fieldset>

</body>
</html>

Here's everything that needs changing:

The site.js document needs this added to the bottom:

function searchBox() {

$.fn.colorbox({href:"clientsearch.php"});

}

I had to update the jquery.colorbox to the latest version from https://github.com/jackmoore/colorbox

I also modified the footer so that it loaded colorbox for all the pages and updated the version of jquery being used:

<!-- load jQuery off google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

<!-- load main site js -->
<script src="<?php echo $path; ?>js/site.js" charset="utf-8"></script>
<script src="<?php echo $path; ?>js/jquery.colorbox-min.js" charset="utf-8"></script>

This is the code I used to modify the header to display the search button:

<?php if($mem->reqLevel('clients')) : ?>
    <li class="cdd">
        <a onclick="searchBox()" rel="" class="search-button">Search</a></li>
    </li>
    <?php
        endif; // reqLevel clients DD
    ?>

I added it at the end so that its the button farthest to the right but before the logout stuff.

I think that that's everything.

FrikFry commented 13 years ago

Ha, did it again. You also need to add this to the site.min.css file:

/* ColorBox Core Style */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:none; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

#cboxOverlay{background:#000;}

#colorbox{}
#cboxTopLeft{width:14px; height:14px; background:url(../images/colorbox/controls.png) 0 0 no-repeat;}
#cboxTopCenter{height:14px; background:url(../images/colorbox/border.png) top left repeat-x;}
#cboxTopRight{width:14px; height:14px; background:url(../images/colorbox/controls.png) -36px 0 no-repeat;}
#cboxBottomLeft{width:14px; height:43px; background:url(../images/colorbox/controls.png) 0 -32px no-repeat;}
#cboxBottomCenter{height:43px; background:url(../images/colorbox/border.png) bottom left repeat-x;}
#cboxBottomRight{width:14px; height:43px; background:url(../images/colorbox/controls.png) -36px -32px no-repeat;}
#cboxMiddleLeft{width:14px; background:url(../images/colorbox/controls.png) -175px 0 repeat-y;}
#cboxMiddleRight{width:14px; background:url(../images/colorbox/controls.png) -211px 0 repeat-y;}
#cboxContent{background:#fff;}
    #cboxLoadedContent{margin-bottom:5px;}
    #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) center center no-repeat;}
    #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) center center no-repeat;}
    #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
    #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(../images/colorbox/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}
    #cboxPrevious{left:0px; background-position: -51px -25px;}
    #cboxPrevious.hover{background-position:-51px 0px;}
    #cboxNext{left:27px; background-position:-75px -25px;}
    #cboxNext.hover{background-position:-75px 0px;}
    #cboxClose{right:0; background-position:-100px -25px;}
    #cboxClose.hover{background-position:-100px 0px;}

    .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
    .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
    .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
    .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

FrikFry commented 13 years ago

Thoughts on this?

WickedShell commented 12 years ago

I have to run through it again; I tried it once and it worked, then broke everything, but I don't think I put it in quite right, and had made conflicting changes. I have to try it again :P

WickedShell / echelon

Search Bar, avalible from clients menu. #13