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> <span class="nobold">{_avatar}: </span>
</td> </td>
<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> </td>
</tr> </tr>
<tr> <tr>

View file

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

View file

@ -21,7 +21,12 @@
</tr> </tr>
<tr> <tr>
<td width="120" valign="top"><span class="nobold">{_photo}:</span></td> <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>
<tr> <tr>
<td width="120" valign="top"></td> <td width="120" valign="top"></td>

View file

@ -318,7 +318,10 @@
<span class="nobold">{_picture}: </span> <span class="nobold">{_picture}: </span>
</td> </td>
<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> </td>
</tr> </tr>
<tr> <tr>
@ -341,9 +344,10 @@
<form method="POST" enctype="multipart/form-data"> <form method="POST" enctype="multipart/form-data">
<div id="backdropEditor"> <div id="backdropEditor">
<div id="backdropFilePicker"> <div id="backdropFilePicker">
<input type="file" accept="image/*" name="backdrop1" /> <label class="button" style="">Обзор<input type="file" accept="image/*" name="backdrop1" style="display: none;"></label>
<div id="spacer"></div> <div id="spacer" style="width: 366px;"></div>
<input type="file" accept="image/*" name="backdrop2" /> <label class="button" style="">Обзор<input type="file" accept="image/*" name="backdrop2" style="display: none;"></label>
<div id="spacer" style="width: 366px;"></div>
</div> </div>
</div> </div>

View file

@ -25,7 +25,12 @@
</tr> </tr>
<tr> <tr>
<td width="120" valign="top"><span class="nobold">{_video}:</span></td> <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>
<tr> <tr>
<td width="120" valign="top"><span class="nobold">{_video_link_to_yt}:</span></td> <td width="120" valign="top"><span class="nobold">{_video_link_to_yt}:</span></td>

View file

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

View file

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

View file

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

View file

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

View file

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