Lawipac
/
hitxy-member
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 1 Wiki Attività
Sfoglia il codice sorgente

gui is ready with mock ups

tags/V1.0
patrick 5 anni fa
parent
7fcbd34f5b
commit
0f50eb6948
5 ha cambiato i file con 186 aggiunte e 70 eliminazioni
Visualizzazione separata
Diff Options
Show Stats Download Patch File Download Diff File
  1. +60
    -4
      css/workspace.css
  2. +73
    -64
      html/workspace.html
  3. BIN
      img/loading_user.gif
  4. +52
    -2
      js/workspace.js
  5. +1
    -0
      member.php

+ 60
- 4
css/workspace.css Vedi File

@@ -1,6 +1,6 @@
<style>
#username {
width:calc(100% - 130px);
width:100%;
}

#step1, #step2, #step3, #changeaddr{
@@ -8,9 +8,9 @@
float:right;
}

#errUserName {
color: red;
div.error {
color:red
font-weight: bold;
}

div.verification, div.details, div.success {
@@ -19,6 +19,7 @@ div.verification, div.details, div.success {
margin-top:10px;
margin-bottom:10px;
color: black;
//display:none;
}

input.fullwidth{
@@ -45,4 +46,59 @@ textarea.addr{
color: blue;
resize: none;
}

.twitter-typeahead {
width: 100%;
}

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 0px;
outline: none;
}

.tt-query {
/* UPDATE: newer versions use tt-input instead of tt-query */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
color: #999;
}

.tt-menu {
/* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
width: 100%;
margin-top: 0px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 8px 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
padding: 3px 1px 3px 3px;
font-size: 16px;
line-height: 20px;
cursor: pointer;
text-align:left;
}

.tt-suggestion.tt-cursor, .tt-suggestion.tt-is-under-cursor {
/* UPDATE: newer versions use .tt-suggestion.tt-cursor */
color: #fff;
background-color: #ca974d;
}

.tt-suggestion p {
margin: 0;
}
</style>

+ 73
- 64
html/workspace.html Vedi File

@@ -1,6 +1,12 @@
<input id="username" class="typeahead" type=text name="user" placeholder="input name">
<button id="step1" class=disabled> Search </button>
<div id="errUserName"> abcdefg </div>
<div id="search">
<div>
<input id="username" class="typeahead" type=text name="user" placeholder="input name">
<div class='error' id="errUserName"> abcdefg </div>
</div>
<div>
<button id="step1" class=disabled> Search </button>
</div>
</div>

<div class= 'clear'></div>

@@ -12,69 +18,72 @@
<button id="step2"> Verify</button>
</div>

<div class="details">
<table class="details">
<tr><td colspan=2>
<span>Postal Address</span> <br>
<textarea class=addr>
33 Valerie Ave
Baulk Ham Hills,
NSW, Australia 2153
</textarea>
<button id=changeaddr>Change Address</button>
</td></tr>


<tr>
<td>Delivery:</td>
<td class="left">
<input type=radio name="delivery"> Direct Post <br>
<input type=radio name="delivery" checked> Pickup from <span id=collector> Patrick Sun </span>
</td>

</tr>

<tr>
<td style="vertical-align:middle">
<input id="medal" type=checkbox checked><br>
<label for="medal"> uncheck = 放弃</label>
</td>
<td >
<img src="https://via.placeholder.com/150" >
</td>
</tr>

<tr>
<td style="vertical-align:middle">
<button id=cardbtn> Apply </button>
<img id=cardloading>
<input id="card" type=checkbox checked>
</td>
<td>
<img src="https://via.placeholder.com/150" >
</td>
</tr>

<tr>
<td style="vertical-align:middle">
<button id=btn90> Apply </button>
<img id=loading90 >
<input id="medal90" type=checkbox checked>
</td>
<td>
<img src="https://via.placeholder.com/150" >
</td>
</tr>
<div class= 'clear'></div>

</table>
<div id="details" class="details">
<table class="details">
<tr><td colspan=2>
<span>Postal Address</span> <br>
<textarea class=addr>
33 Valerie Ave
Baulk Ham Hills,
NSW, Australia 2153
</textarea>
<button id=changeaddr>Change Address</button>
</td></tr>
<tr>
<td>Delivery:</td>
<td class="left">
<input type=radio name="delivery"> Direct Post <br>
<input type=radio name="delivery" checked> Pickup from <span id=collector> Patrick Sun </span>
</td>
</tr>
<tr>
<td style="vertical-align:middle">
<input id="medal" type=checkbox checked><br>
<label for="medal"> uncheck = 放弃</label>
</td>
<td >
<img src="https://via.placeholder.com/150" >
</td>
</tr>
<tr>
<td style="vertical-align:middle">
<button id=cardbtn> Apply </button>
<img id=cardloading style="display:none;">
<input id="card" type=checkbox checked style="display:none;"">
<div class='error' id=errCard></div>
</td>
<td>
<img src="https://via.placeholder.com/150" >
</td>
</tr>
<tr>
<td style="vertical-align:middle">
<button id=btn90> Apply </button>
<img id=loading90 style="display:none;">
<input id="medal90" type=checkbox checked style="display:none;">
<div class='error' id=errCard></div>
</td>
<td>
<img src="https://via.placeholder.com/150" >
</td>
</tr>
</table>
</div>

<div class="success">
<table style="min-height:150px;">
<tr><td style="text-align:center; vertical-align:middle;">
<button> Confirm Everything </button>
<img id=done>
</td></tr>
</table>

<table style="min-height:150px;">
<tr><td style="text-align:center; vertical-align:middle;">
<button id='confirm' > Confirm Everything </button>
<img id=done style="display:none;" >
</td></tr>
</table>
</div>

BIN
img/loading_user.gif Vedi File

Before After
Width: 64  |  Height: 64  |  Size: 21KB

+ 52
- 2
js/workspace.js Vedi File

@@ -73,7 +73,7 @@
return '<div><i class="fusion-li-icon fa-user fas"></i> '+ item.username +'-'+ item.userid +'</div>';
},
pending: function (query) {
return '<img src=' + mm.loading + '>';
return '<img src=' + mm.search_user + '>';
},
},
'updater' : function(item) {
@@ -109,7 +109,7 @@
}, function(response, status, xhr){
step2_verify_user(response);
}).fail(function(){
errUserName("网络错误，请稍后尝试");
errUserName("Network Error, Please try again later");
});

});
@@ -122,5 +122,55 @@
el.slideToggle();
}
//verify
$(document).on("click", "#step2", function(){
var el = $('#details');
el.slideDown();
});
//apply card
$(document).on("click", "#cardbtn", function(){
var loading = $('#cardloading');
var check = $('#card');
$(this).hide();
loading.show();
setTimeout(function(){
loading.hide();
check.show();
}, 2000);
});

//apply 90 meda;
$(document).on("click", "#btn90", function(){
var loading = $('#loading90');
var check = $('#medal90');
$(this).hide();
loading.show();
setTimeout(function(){
loading.hide();
check.show();
}, 2000);
});
//confirm;
$(document).on("click", "#confirm", function(){
var search = $("#search");
var verify = $("#userpass");
var details = $("#details");
var btn = $('#confirm');
var img = $('#done');
$(this).hide();
verify.hide();
details.hide();
search.hide();
img.show();
setTimeout(function(){
btn.show();
img.hide();
}, 4000);
});

})(jQuery);

+ 1
- 0
member.php Vedi File

@@ -93,6 +93,7 @@ class Member{
'display_name' => wp_get_current_user()->display_name,
'loading' => plugins_url('img/loading.gif', __FILE__),
'done' => plugins_url('img/done.gif', __FILE__),
'search_user' => plugins_url('img/loading_user.gif', __FILE__),
'anonymous' => !is_user_logged_in(),
) );
}

Write Preview
Loading…
Annulla
Salva