More GTS search design

This commit is contained in:
Greg Edwards 2015-04-04 17:57:11 -04:00
parent 67a6454f20
commit 98fefa0416
8 changed files with 199 additions and 148 deletions

View File

@ -1,15 +1,12 @@
input[type=text], input[type=password], select, textarea
{
display: block;
border: 1px solid #999999;
background-color: white;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1) inset;
width: 230px;
height: 14px;
padding: 3px 2px;
font-size: 10pt;
font-family: Arial,Helvetica,sans-serif;
margin-bottom: 4px;
border-radius: 2px;
}
@ -19,10 +16,8 @@ input[type=text]:focus, input[type=password]:focus, select, textarea:focus
}
input[type=submit], button
input[type=submit], button, .ui-button
{
height: 28px;
margin-bottom: 4px;
border-radius: 2px;
background-color: #008fc4;
background-image: -moz-linear-gradient(top, #008fc4 0%, #00749f 100%); /* FF3.6+ */
@ -39,6 +34,17 @@ input[type=submit], button
text-shadow: 0 1px 0 #004a68;
font-family: Lato,Candara,'Meiryo UI',Arial,sans-serif;
font-weight: bold;
}
a.ui-button
{
color: white;
}
input[type=submit], button
{
height: 28px;
margin-bottom: 4px;
cursor: pointer;
}
@ -95,38 +101,25 @@ input[type=submit].large, button.large
margin-right: 16px;
}
.pfSubmitGroup
.pfFormSubmit
{
position: absolute;
bottom: 12px;
right: 16px;
}
.pfFormTable, .pfFormTableMoves
.pfFormGroup
{
border-radius: 4px;
overflow: hidden;
border-spacing: 0;
}
.pfFormTable th, .pfFormTableMoves th
.pfFormKey, .pfFormValue
{
text-align: left;
width: 64px;
margin: 0;
padding: 4px 2px 4px 8px;
}
.pfFormTable th
{
color: white;
text-shadow: 0 1px 0 #2f8fbb;
border-bottom: 1px solid #2f8fbb;
background-color: #43c4ff;
text-align: left;
width: 64px;
margin: 0;
padding: 4px 2px 4px 8px;
padding: 4px 8px;
border-bottom: 1px solid rgba(0,0,0,0.3);
background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.05) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,rgba(0,0,0,0.05))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* Chrome10+,Safari5.1+ */
@ -135,3 +128,59 @@ input[type=submit].large, button.large
background-image: linear-gradient(to bottom, transparent 0%,rgba(0,0,0,0.05) 100%); /* W3C */
}
.pfFormKey
{
color: white;
text-align: left;
width: 64px;
padding-right: 2px;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.pfFormKey
{
background-color: #82d2e0;
}
.pfFormValue
{
background-color: #f2f2f2;
}
.ui-spinner
{
display: inline-block;
position: relative;
padding-right: 18px;
}
.ui-spinner-input, input.ui-spinner-input
{
border-radius: 2px 0 0 2px;
border-right: none;
}
.ui-spinner-button
{
position: absolute;
display: block;
width: 16px; height: calc(50% - 2px);
right: 0;
font-size: 8px;
text-align: center;
line-height: 9px;
cursor: pointer;
border-radius: 0;
}
.ui-spinner-up
{
top: 0;
border-top-right-radius: 2px;
}
.ui-spinner-down
{
bottom: 0;
border-bottom-right-radius: 2px;
}

View File

@ -30,6 +30,7 @@
width: 104px;
color: #e0e0e0;
color: rgba(128,128,128,0.2);
font-family: 'Meiryo UI',sans-serif;
}
.gtsPokemonSummary .marks .m
@ -78,33 +79,31 @@
top: -2px;
}
.colBasic2 .pfFormTable.summaryItems th
.pfGroupBasic2 .pfFormKey
{
background-color: #43c4ff;
border-bottom: 1px solid #2f8fbb;
text-shadow: 0 1px 0 #2f8fbb;
}
.colStats .pfFormTable.summaryItems th
.pfGroupStats .pfFormKey
{
background-color: #9761e9;
border-color: #6d45ab;
text-shadow: 0 1px 0 #6d45ab;
}
.gtsPokemonSummary .pfColumn table.summaryItems td, .gtsPokemonSummary .pfColumn .pfFormTableMoves td
.pfFormGroup.pfGroupMoves
{
margin-top: 16px;
overflow: hidden;
border-radius: 4px;
}
.pfFormGroup .type
{
border-bottom: none;
}
.gtsPokemonSummary .pfFormValue
{
width: 180px;
margin: 0;
padding: 4px 8px 4px 8px;
border-bottom: 1px solid #aaaaaa;
background-color: #f2f2f2;
background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.05) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,rgba(0,0,0,0.05))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, transparent 0%,rgba(0,0,0,0.05) 100%); /* W3C */
}
.gtsPokemonSummary .pfColumn.colBasic1
@ -122,44 +121,21 @@
margin-top: 3px;
}
.gtsPokemonSummary .pfFormTableMoves
.pfFormGroup .type
{
margin-top: 16px;
overflow: hidden;
border-radius: 4px;
}
.gtsPokemonSummary .pfFormTableMoves .move
{
}
.pfFormTableMoves .move
{
position: relative;
margin: 0;
padding: 4px;
border-bottom: 1px solid #aaaaaa;
background-color: #f2f2f2;
background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.05) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,rgba(0,0,0,0.05))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, transparent 0%,rgba(0,0,0,0.05) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, transparent 0%,rgba(0,0,0,0.05) 100%); /* W3C */
}
.pfFormTableMoves .move .name
{
}
.pfFormTableMoves .move .type
.pfFormGroup .move .type
{
height: auto;
display: table-cell;
border-radius: 0;
text-align: left;
padding: 4px 2px 4px 8px;
}
.pfFormTableMoves .move .pp
.pfFormGroup .move .pp
{
float: right;
}

View File

@ -11,6 +11,8 @@
<asp:Content ID="Content2" ContentPlaceHolderID="cpMain" runat="server">
<h1>Available Pokémon</h1>
<script type="text/javascript">
$(document).ready(function ()
{
@ -20,43 +22,37 @@
</script>
<form id="theForm" runat="server">
<div class="gtsBox pfColGroup">
<p>
Please enter your search terms:
</p>
<div class="gtsBox pfColGroup" style="width: 640px;">
<div class="pfColumn">
<table class="pfFormTable">
<tr>
<th>Species</th>
<td>
<table class="pfFormGroup">
<tr class="pfFormPair">
<th class="pfFormKey">Species</th>
<td class="pfFormValue">
<pf:PokemonPicker ID="ppSpecies" runat="server" />
</td>
</tr>
<tr>
<th>Level</th>
<td>
<asp:TextBox ID="txtLevelMin" Width="3em" min="1" max="100" Text="1" runat="server" />
<tr class="pfFormPair">
<th class="pfFormKey">Level</th>
<td class="pfFormValue">
<asp:TextBox ID="txtLevelMin" min="1" max="100" Width="3em" Text="1" runat="server" />
to
<asp:TextBox ID="txtLevelMax" Width="3em" min="1" max="100" Text="100" runat="server" />
<asp:TextBox ID="txtLevelMax" min="1" max="100" Width="3em" Text="100" runat="server" />
</td>
</tr>
<tr>
<th>Gender</th>
<td>
<asp:RadioButtonList ID="rbGender" runat="server">
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
<asp:ListItem Text="Any" Value="3" Selected="True" />
</asp:RadioButtonList>
<tr class="pfFormPair">
<th class="pfFormKey">Gender</th>
<td class="pfFormValue">
<asp:CheckBox ID="chkMale" Text="Male" Checked="true" runat="server" />
<asp:CheckBox ID="chkFemale" Text="Female" Checked="true" runat="server" />
</td>
</tr>
</table>
</div>
<div class="pfColumn">
<table class="pfFormTable">
<tr>
<th>Version</th>
<td>
<table class="pfFormGroup">
<tr class="pfFormPair">
<th class="pfFormKey">Version</th>
<td class="pfFormValue">
<asp:RadioButton ID="rbGen4" GroupName="grpGeneration" Checked="true" runat="server" />
<asp:Label ID="lblGen4" AssociatedControlID="rbGen4" runat="server">
<asp:Image ImageUrl="~/images/ver-icon/10.png" CssClass="sprite"
@ -87,7 +83,7 @@
</tr>
</table>
</div>
<div class="pfSubmitGroup">
<div class="pfFormSubmit">
<asp:Button ID="btnSearch" Width="8em" Text="Search" runat="server" />
</div>
</div>

View File

@ -21,7 +21,9 @@ namespace PkmnFoundations.GTS
int species; Int32.TryParse(ppSpecies.Value, out species);
int minLevel = Convert.ToInt32(txtLevelMin.Text);
int maxLevel = Convert.ToInt32(txtLevelMax.Text);
Genders gender = (Genders)Convert.ToInt32(rbGender.SelectedValue);
Genders gender = Genders.Either;
if (chkMale.Checked && !chkFemale.Checked) gender = Genders.Male;
if (chkFemale.Checked && !chkMale.Checked) gender = Genders.Female;
if (rbGen4.Checked)
{

View File

@ -58,13 +58,22 @@ namespace PkmnFoundations.GTS {
protected global::System.Web.UI.WebControls.TextBox txtLevelMax;
/// <summary>
/// rbGender control.
/// chkMale control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.WebControls.RadioButtonList rbGender;
protected global::System.Web.UI.WebControls.CheckBox chkMale;
/// <summary>
/// chkFemale control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.WebControls.CheckBox chkFemale;
/// <summary>
/// rbGen4 control.

View File

@ -51,33 +51,33 @@
</div>
<div class="pfColumn colBasic2">
<table class="pfFormTable summaryItems">
<tr>
<th>Species</th>
<td><asp:Literal ID="litSpecies" runat="server" /></td>
<table class="pfFormGroup pfGroupBasic2">
<tr class="pfFormPair">
<th class="pfFormKey">Species</th>
<td class="pfFormValue"><asp:Literal ID="litSpecies" runat="server" /></td>
</tr>
<tr>
<th>Pokédex</th>
<td>#<asp:Literal ID="litPokedex" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Pokédex</th>
<td class="pfFormValue">#<asp:Literal ID="litPokedex" runat="server" /></td>
</tr>
<tr>
<th>Type</th>
<td>
<tr class="pfFormPair">
<th class="pfFormKey">Type</th>
<td class="pfFormValue">
<asp:Literal ID="litType1" runat="server" />&nbsp;
<asp:Literal ID="litType2" runat="server" />
</td>
</tr>
<tr>
<th>OT</th>
<td><asp:Literal ID="litOtName" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">OT</th>
<td class="pfFormValue"><asp:Literal ID="litOtName" runat="server" /></td>
</tr>
<tr>
<th>ID No.</th>
<td><asp:Literal ID="litTrainerId" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">ID No.</th>
<td class="pfFormValue"><asp:Literal ID="litTrainerId" runat="server" /></td>
</tr>
<tr>
<th>Exp.</th>
<td><asp:Literal ID="litExperience" runat="server" />
<tr class="pfFormPair">
<th class="pfFormKey">Exp.</th>
<td class="pfFormValue"><asp:Literal ID="litExperience" runat="server" />
<div class="nextIn"><asp:Literal ID="litExperienceNext" runat="server" /></div>
<div class="gtsProgress expBar">
@ -87,28 +87,28 @@
</div>
</td>
</tr>
<tr>
<th>Held item</th>
<td><asp:Image ID="imgHeldItem" CssClass="sprite item" ImageUrl="~/images/item-sm/3202.png" Width="24" Height="24" runat="server" />
<tr class="pfFormPair">
<th class="pfFormKey">Held item</th>
<td class="pfFormValue"><asp:Image ID="imgHeldItem" CssClass="sprite item" ImageUrl="~/images/item-sm/3202.png" Width="24" Height="24" runat="server" />
<asp:Literal ID="litHeldItem" runat="server" /></td>
</tr>
<tr>
<th>Nature</th>
<td><asp:Literal ID="litNature" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Nature</th>
<td class="pfFormValue"><asp:Literal ID="litNature" runat="server" /></td>
</tr>
<tr>
<th>Ability</th>
<td><asp:Literal ID="litAbility" runat="server" />
<tr class="pfFormPair">
<th class="pfFormKey">Ability</th>
<td class="pfFormValue"><asp:Literal ID="litAbility" runat="server" />
</td>
</tr>
</table>
</div>
<div class="pfColumn colStats">
<table class="pfFormTable summaryItems">
<tr>
<th>HP</th>
<td><asp:Literal ID="litHpCurr" runat="server" /> / <asp:Literal ID="litHp" runat="server" /><br />
<table class="pfFormGroup pfGroupStats">
<tr class="pfFormPair">
<th class="pfFormKey">HP</th>
<td class="pfFormValue"><asp:Literal ID="litHpCurr" runat="server" /> / <asp:Literal ID="litHp" runat="server" /><br />
<div class="gtsProgress hpBar">
<asp:Literal ID="litHpProgress" runat="server">
<div class="progress" style="width: 50%;"></div>
@ -116,36 +116,36 @@
</div>
</td>
</tr>
<tr>
<th>Attack</th>
<td><asp:Literal ID="litAtk" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Attack</th>
<td class="pfFormValue"><asp:Literal ID="litAtk" runat="server" /></td>
</tr>
<tr>
<th>Defense</th>
<td><asp:Literal ID="litDef" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Defense</th>
<td class="pfFormValue"><asp:Literal ID="litDef" runat="server" /></td>
</tr>
<tr>
<th>Sp. Atk</th>
<td><asp:Literal ID="litSAtk" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Sp. Atk</th>
<td class="pfFormValue"><asp:Literal ID="litSAtk" runat="server" /></td>
</tr>
<tr>
<th>Sp. Def</th>
<td><asp:Literal ID="litSDef" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Sp. Def</th>
<td class="pfFormValue"><asp:Literal ID="litSDef" runat="server" /></td>
</tr>
<tr>
<th>Speed</th>
<td><asp:Literal ID="litSpeed" runat="server" /></td>
<tr class="pfFormPair">
<th class="pfFormKey">Speed</th>
<td class="pfFormValue"><asp:Literal ID="litSpeed" runat="server" /></td>
</tr>
</table>
<table class="pfFormTableMoves">
<table class="pfFormGroup pfGroupMoves">
<asp:Repeater ID="rptMoves" runat="server">
<ItemTemplate>
<tr class="move <%# ((MoveSlot)Container.DataItem).Move == null ? "" : ((MoveSlot)Container.DataItem).Move.Type.Identifier %>">
<th class="type <%# ((MoveSlot)Container.DataItem).Move == null ? "" : ((MoveSlot)Container.DataItem).Move.Type.Identifier %>">
<th class="pfFormKey type <%# ((MoveSlot)Container.DataItem).Move == null ? "" : ((MoveSlot)Container.DataItem).Move.Type.Identifier %>">
<%# ((MoveSlot)Container.DataItem).Move == null ? "" : ((MoveSlot)Container.DataItem).Move.Type.Name.ToString() %>
</th>
<td>
<td class="pfFormValue">
<span class="name">
<%# ((MoveSlot)Container.DataItem).Move == null ? "&nbsp;" : ((MoveSlot)Container.DataItem).Move.Name.ToString() %>
</span>

View File

@ -142,6 +142,16 @@
<% break;
case "gts": %>
<ul class="gtsNav">
<li>
<asp:HyperLink ID="hlGts_Offers" NavigateUrl="~/gts/Default.aspx" runat="server">
<span class="inner">
Available Pokémon
</span>
</asp:HyperLink>
</li>
</ul>
<% break;
} %>
<div class="clear"></div>

View File

@ -138,6 +138,15 @@ namespace PkmnFoundations.GTS {
/// </remarks>
protected global::System.Web.UI.WebControls.HyperLink hlMain_Home;
/// <summary>
/// hlGts_Offers control.
/// </summary>
/// <remarks>
/// Auto-generated field.
/// To modify move field declaration from designer file to code-behind file.
/// </remarks>
protected global::System.Web.UI.WebControls.HyperLink hlGts_Offers;
/// <summary>
/// cpMain control.
/// </summary>