File picker buttons redesign (#870)

* Refactoring login and register button in sidebar

For Firefox 10.0 and other old 2000s browsers compatibillity

* CSS friends grid workaround for 2000s browsers

* CSS friends grid full fix

* Revert "CSS friends grid full fix"

This reverts commit 9d64cd2d2b.

* restyling file pickers button

* redefined some strings

* да блин

* Translating "Browse" string

* locale syntax and logic fixes

* Update uk.strings

* Added redesign in Photo section

* Structuring commits and adding redisgn in Video section
This commit is contained in:
Dmitry Tretyakov 2023-04-24 22:50:26 +07:00 committed by GitHub
parent 252ff0ead0
commit 62b93a3cf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 52 additions and 27 deletions

View file

@ -71,7 +71,10 @@
<span class="nobold">{_avatar}: </span>
</td>
<td>
<input type="file" name="ava" accept="image/*" />
<label class="button" style="">{_browse}
<input type="file" id="ava" name="ava" style="display: none;" onchange="filename.innerHTML=ava.files[0].name" />
</label>
<div id="filename" style="margin-top: 10px;"></div>
</td>
</tr>
<tr>

View file

@ -37,9 +37,12 @@
<form method="POST" enctype="multipart/form-data">
<div id="backdropEditor">
<div id="backdropFilePicker">
<input type="file" accept="image/*" name="backdrop1" />
<div id="spacer"></div>
<input type="file" accept="image/*" name="backdrop2" />
<label class="button" style="">{_browse}
<input type="file" accept="image/*" name="backdrop1" style="display: none;">
</label>
<div id="spacer" style="width: 366px;"></div>
<label class="button" style="">{_browse}<input type="file" accept="image/*" name="backdrop2" style="display: none;"></label>
<div id="spacer" style="width: 366px;"></div>
</div>
</div>

View file

@ -21,7 +21,12 @@
</tr>
<tr>
<td width="120" valign="top"><span class="nobold">{_photo}:</span></td>
<td><input type="file" name="blob" accept="image/*" /></td>
<td>
<label class="button" style="">{_browse}
<input type="file" id="blob" name="blob" style="display: none;" onchange="filename.innerHTML=blob.files[0].name" />
</label>
<div id="filename" style="margin-top: 10px;"></div>
</td>
</tr>
<tr>
<td width="120" valign="top"></td>

View file

@ -20,7 +20,7 @@
<b>Подтверждение номера телефона</b><br/>
Введите код для подтверждения смены номера: <a href="/edit/verify_phone">ввести код</a>.
</div>
<div class="tabs">
<div n:attr="id => ($isMain ? 'activetabs' : 'ki')" class="tab">
<a n:attr="id => ($isMain ? 'act_tab_a' : 'ki')" href="/edit">{_main}</a>
@ -38,10 +38,10 @@
<a n:attr="id => ($isBackDrop ? 'act_tab_a' : 'ki')" href="/edit?act=backdrop">{_backdrop_short}</a>
</div>
</div>
<div class="container_gray">
{if $isMain}
<h4>{_main_information}</h4>
<form action="/edit?act=main" method="POST" enctype="multipart/form-data">
<table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
@ -133,7 +133,7 @@
<option value="7" {if $user->getPoliticalViews() == 7}selected{/if}>{_politViews_7}</option>
<option value="8" {if $user->getPoliticalViews() == 8}selected{/if}>{_politViews_8}</option>
<option value="9" {if $user->getPoliticalViews() == 9}selected{/if}>{_politViews_9}</option>
</select>
</td>
</tr>
@ -162,7 +162,7 @@
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" name="hash" value="{$csrfToken}" />
@ -172,9 +172,9 @@
</tbody>
</table>
</form>
{elseif $isContacts}
<h4>{_contact_information}</h4>
<form action="/edit?act=contacts" method="POST" enctype="multipart/form-data">
<table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
@ -221,7 +221,7 @@
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" name="hash" value="{$csrfToken}" />
@ -231,9 +231,9 @@
</tbody>
</table>
</form>
{elseif $isInterests}
<h4>{_personal_information}</h4>
<form action="/edit?act=interests" method="POST" enctype="multipart/form-data">
<table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
@ -296,7 +296,7 @@
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" name="hash" value="{$csrfToken}" />
@ -306,9 +306,9 @@
</tbody>
</table>
</form>
{elseif $isAvatar}
<h4>{_profile_picture}</h4>
<form action="/al_avatars" method="POST" enctype="multipart/form-data">
<table cellspacing="7" cellpadding="0" width="60%" border="0" align="center">
@ -318,12 +318,15 @@
<span class="nobold">{_picture}: </span>
</td>
<td>
<input type="file" name="blob" accept="image/*" />
<label class="button" style="">{_browse}
<input type="file" id="blob" name="blob" style="display: none;" onchange="filename.innerHTML=blob.files[0].name" />
</label>
<div id="filename" style="margin-top: 10px;"></div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" name="hash" value="{$csrfToken}" />
@ -333,7 +336,7 @@
</tbody>
</table>
</form>
{elseif $isBackDrop}
<h4>{_backdrop}</h4>
@ -341,9 +344,10 @@
<form method="POST" enctype="multipart/form-data">
<div id="backdropEditor">
<div id="backdropFilePicker">
<input type="file" accept="image/*" name="backdrop1" />
<div id="spacer"></div>
<input type="file" accept="image/*" name="backdrop2" />
<label class="button" style="">Обзор<input type="file" accept="image/*" name="backdrop1" style="display: none;"></label>
<div id="spacer" style="width: 366px;"></div>
<label class="button" style="">Обзор<input type="file" accept="image/*" name="backdrop2" style="display: none;"></label>
<div id="spacer" style="width: 366px;"></div>
</div>
</div>
@ -366,5 +370,5 @@
{/if}
</div>
{/block}

View file

@ -25,7 +25,12 @@
</tr>
<tr>
<td width="120" valign="top"><span class="nobold">{_video}:</span></td>
<td><input type="file" name="blob" accept="video/*" /></td>
<td>
<label class="button" style="">{_browse}
<input type="file" id="blob" name="blob" style="display: none;" onchange="filename.innerHTML=blob.files[0].name" accept="video/*" />
</label>
<div id="filename" style="margin-top: 10px;"></div>
</td>
</tr>
<tr>
<td width="120" valign="top"><span class="nobold">{_video_link_to_yt}:</span></td>

View file

@ -231,6 +231,7 @@ h1 {
position: absolute;
top: 140px;
padding: 0 19px;
margin: 24px;
}
#backdropFilePicker > input {

View file

@ -546,6 +546,7 @@
"backdrop_succ" = "Backdrop settings saved";
"backdrop_succ_rem" = "Backdrop images have been removed";
"backdrop_succ_desc" = "Users will start seeing changes in 5 minutes.";
"browse" = "Browse";
/* Two-factor authentication */

View file

@ -556,6 +556,7 @@
"end_all_sessions_description" = "Եթե ցանկանում եք դուրս գալ $1ից ամեն դեվայսից, սեղմե՛ք ներքևի կոճակը";
"end_all_sessions_done" = "Բոլոր սեսսիաները նետված են, ներառյալ բջջային հավելվածները";
"browse" = "Վերանայում";
/* Two-factor authentication */

View file

@ -506,6 +506,7 @@
"backdrop_succ" = "Фон сохранён";
"backdrop_succ_rem" = "Фон удалён";
"backdrop_succ_desc" = "Изменения будут заметны другим пользователям через 5 минут.";
"browse" = "Обзор";
/* Two-factor authentication */
@ -1308,4 +1309,4 @@
"tour_section_14_bottom_text_1" = "Скриншоты приложения";
"tour_section_14_bottom_text_2" = "На этом экскурсия по сайту завершена. Если вы хотите попробовать наше мобильное приложение, создать здесь свою группу, позвать своих друзей или найти новых, или вообще просто как-нибудь поразвлекаться, то это можно сделать прямо сейчас, пройдя небольшую <a href='/reg'>регистрацию</a>";
"tour_section_14_bottom_text_3" = "На этом экскурсия по сайту завершена."
"tour_section_14_bottom_text_3" = "На этом экскурсия по сайту завершена."

View file

@ -510,6 +510,7 @@
"backdrop_succ" = "Фон збережено";
"backdrop_succ_rem" = "Фон видалено";
"backdrop_succ_desc" = "Зміни будуть помітні іншим користувачам через 5 хвилин.";
"browse" = "Огляд";
/* Two-factor authentication */