Lawipac
/
hitxy-member
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 1 Вики Активность
Просмотр исходного кода

gui is ready with mock ups

tags/V1.0
patrick 5 лет назад
Родитель
7fcbd34f5b
Сommit
0f50eb6948
5 измененных файлов: 186 добавлений и 70 удалений
Единый вид
Diff Options
Show Stats Download Patch File Download Diff File
  1. +60
    -4
      css/workspace.css
  2. +73
    -64
      html/workspace.html
  3. Двоичные данные
      img/loading_user.gif
  4. +52
    -2
      js/workspace.js
  5. +1
    -0
      member.php

+ 60
- 4
css/workspace.css Просмотреть файл

<style> <style>
#username { #username {
width:calc(100% - 130px);
width:100%;
} }


#step1, #step2, #step3, #changeaddr{ #step1, #step2, #step3, #changeaddr{
float:right; float:right;
} }


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


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


input.fullwidth{ input.fullwidth{
color: blue; color: blue;
resize: none; 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> </style>

+ 73
- 64
html/workspace.html Просмотреть файл

<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> <div class= 'clear'></div>


<button id="step2"> Verify</button> <button id="step2"> Verify</button>
</div> </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>


<div class="success"> <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> </div>

Двоичные данные
img/loading_user.gif Просмотреть файл

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

+ 52
- 2
js/workspace.js Просмотреть файл

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


}); });
el.slideToggle(); 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); })(jQuery);

+ 1
- 0
member.php Просмотреть файл

'display_name' => wp_get_current_user()->display_name, 'display_name' => wp_get_current_user()->display_name,
'loading' => plugins_url('img/loading.gif', __FILE__), 'loading' => plugins_url('img/loading.gif', __FILE__),
'done' => plugins_url('img/done.gif', __FILE__), 'done' => plugins_url('img/done.gif', __FILE__),
'search_user' => plugins_url('img/loading_user.gif', __FILE__),
'anonymous' => !is_user_logged_in(), 'anonymous' => !is_user_logged_in(),
) ); ) );
} }

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить