New design for upload form (#1574)
* CSS for new upload form * add torrent_name in translation * Update CHANGELOG.md * New upload form HTML, don't load kilo.js * Update upload.jet.html * Update main.css * change placeholder of torrent name input * Update upload.jet.html * remove useless function call from upload * responsive upload form * Fix description being constantly bold in upload * fix vertical align of labels in upload * upload tags inputs in table too * tag table styling & remove old upload tag styling * Update main.css * Update main.css * Update main.css * Update upload.jet.html * fix flag misalignement in upload form * Remove rules <div> from upload, provide temporary link to rules in faq (maybe will turn into a modal in the future?), remove useless input * bigger upload button & no margin for upload rules text * Update en-us.all.json * Update CHANGELOG.md * add ID to rules div * Update upload.jet.html
Cette révision appartient à :
kilo
GitHub
Parent
2ec6eaab9d
révision
cedbec3246
5 fichiers modifiés avec 161 ajouts et 193 suppressions
|
|
@ -238,6 +238,7 @@ select.form-input {
|
|||
|
||||
.language .input-group label {
|
||||
margin-bottom: 1px;
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
.language .input-group input {
|
||||
|
|
@ -877,6 +878,9 @@ html, body {
|
|||
.torrent-hr {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.upload-form-table .table-torrent-link input {
|
||||
width: 100%!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 750px),(max-width: 500px) {
|
||||
|
|
@ -903,6 +907,9 @@ html, body {
|
|||
.form-refine {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.upload-form-table .table-input-label {
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 565px) {
|
||||
|
|
@ -955,6 +962,9 @@ html, body {
|
|||
.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
|
||||
width: 87px!important;
|
||||
}
|
||||
.upload-form-table .table-input-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 440px) {
|
||||
|
|
@ -1895,30 +1905,63 @@ span.tag {
|
|||
border-left: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
.upload-tag-form h3 {
|
||||
margin: 10px 0;
|
||||
p.upload-rules {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.upload-tag-form .form-group {
|
||||
width: 167px;
|
||||
display:inline-block;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
#upload-button {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.upload-tag-form label {
|
||||
display:inline-block;
|
||||
width: 100%;
|
||||
.upload-form-table {
|
||||
max-width: 950px;
|
||||
margin: 15px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.upload-form-table .table-input-label {
|
||||
width: 185px;
|
||||
font-weight: bold;
|
||||
padding-top: 3px!important;
|
||||
}
|
||||
.upload-form-table .table-input-label, .upload-form-table td label{
|
||||
vertical-align: top;
|
||||
}
|
||||
.upload-form-table .upload-form-table .CodeMirror {
|
||||
font-weight: normal;
|
||||
}
|
||||
.upload-form-table .table-input {
|
||||
font-weight: bold;
|
||||
}
|
||||
.upload-form-table .table-checkboxes td {
|
||||
padding: 3px 0;
|
||||
}
|
||||
.upload-form-table .table-torrent-link input[type="file"] {
|
||||
width: 35%;
|
||||
}
|
||||
.upload-form-table .table-torrent-link input[type="text"] {
|
||||
width: 65%;
|
||||
}
|
||||
#tag-h3 {
|
||||
margin: 0 0 7px;
|
||||
}
|
||||
.upload-tag-table {
|
||||
width: auto;
|
||||
}
|
||||
.upload-tag-table .input-label {
|
||||
display: block;
|
||||
font-size: unset;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.upload-tag-form input,.upload-tag-form select {
|
||||
.upload-tag-table input, .upload-tag-table select {
|
||||
height: 25px;
|
||||
padding: 3px 3px;
|
||||
width: 100%;
|
||||
}
|
||||
.upload-tag-table td {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.upload-tag-form h3 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.show-xs {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ block ruleList(open=false)}}
|
||||
<details class="rules-drop" {{if open}}open{{end}}>
|
||||
<details class="rules-drop" {{if open}}open{{end}} id="rules">
|
||||
<summary class="form-input">{{ T("rules")}}</summary>
|
||||
<div class="form-input">
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -7,201 +7,116 @@
|
|||
{{block title()}}{{ T("upload")}}{{end}}
|
||||
{{block content_body()}}
|
||||
<div style="text-align: left;" class="box">
|
||||
{{ yield ruleList() }}
|
||||
<p class="upload-rules">{{ T("read_rules")|raw }}</p>
|
||||
<form enctype="multipart/form-data" method="POST">
|
||||
{{ yield csrf_field() }}
|
||||
<h3>{{ T("name")}}</h3>
|
||||
<input type="text" name="name" id="name" class="form-input up-input form-torrent-name" placeholder="{{ T("file_name")}}" value="{{Form.Name}}" autofocus>
|
||||
{{ yield errors(name="name")}}
|
||||
|
||||
<div class="torrent-preview-table" style="display: none;"><h3 style="text-align: center;margin-bottom: 3px;">{{ T("torrent_preview")}}</h3>
|
||||
<table>
|
||||
<thead class="torrent-info table-torrent-thead">
|
||||
<tr>
|
||||
<th class="tr-cat">{{ T("category")}}</th>
|
||||
<th class="tr-name">
|
||||
{{ T("name")}}
|
||||
<span class="sort-arrows">
|
||||
<span class="sortarrowleft sortarrowdim">▼</span>
|
||||
<span class="sortarrowdim">▲</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="tr-cs"></th>
|
||||
<th class="tr-links"></th>
|
||||
<th class="tr-size hide-xs">
|
||||
{{ T("size")}}
|
||||
<span class="sort-arrows">
|
||||
<span class="sortarrowleft sortarrowdim">▼</span>
|
||||
<span class="sortarrowdim">▲</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="tr-se hide-smol">
|
||||
S
|
||||
<span class="sort-arrows">
|
||||
<span class="sortarrowleft sortarrowdim">▼</span>
|
||||
<span class="sortarrowdim">▲</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="tr-le hide-smol">
|
||||
L
|
||||
<span class="sort-arrows">
|
||||
<span class="sortarrowleft sortarrowdim">▼</span>
|
||||
<span class="sortarrowdim">▲</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="tr-dl hide-xs">
|
||||
D
|
||||
<span class="sort-arrows">
|
||||
<span class="sortarrowleft sortarrowdim">▼</span>
|
||||
<span class="sortarrowdim">▲</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="tr-date hide-xs">
|
||||
{{ T("date")}}
|
||||
<span class="sort-arrows">
|
||||
<span class="sortarrowleft ">▼</span>
|
||||
<span class="sortarrowdim">▲</span>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="torrentListResults" {{if AltColors}}class="alt-colors"{{end}}>
|
||||
<tr class="torrent-info hidden">
|
||||
<td class="tr-cat home-td"></td>
|
||||
<td class="tr-name home-td" colspan="2"><a></a></td>
|
||||
<td class="tr-links home-td"></td>
|
||||
<td class="tr-size home-td hide-xs"></td>
|
||||
<td class="tr-se home-td hide-smol"></td>
|
||||
<td class="tr-le home-td hide-smol"></td>
|
||||
<td class="tr-dl home-td hide-xs"></td>
|
||||
<td class="hide-xs"></td>
|
||||
</tr>
|
||||
<tr id="torrent-info-tr" class="torrent-info{{ if User.IsTrusted() }} trusted{{end}}">
|
||||
<td class="tr-cat home-td">
|
||||
<div class="nyaa-cat table-torrent-category">
|
||||
<a class="category"></a>
|
||||
<a><img src="/img/blank.gif" class="flag flag-other table-torrent-flag" alt="blank"></a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="tr-name home-td" colspan="2">
|
||||
<a class="table-torrent-name">{{Form.Name}}</a>
|
||||
</td>
|
||||
<div class="upload-errors">
|
||||
{{ yield errors(name="name")}}
|
||||
{{ yield errors(name="torrent")}}
|
||||
{{ yield errors(name="magnet")}}
|
||||
{{ yield errors(name="c")}}
|
||||
{{ yield errors(name="remake")}}
|
||||
{{ yield errors(name="hidden")}}
|
||||
{{ yield errors(name="website_link")}}
|
||||
{{ yield errors(name="tags")}}
|
||||
</div>
|
||||
|
||||
<td class="tr-links home-td">
|
||||
<a title="Magnet Link">
|
||||
<div class="icon-magnet"></div>
|
||||
</a>
|
||||
<a title="Torrent file">
|
||||
<div class="icon-floppy"></div>
|
||||
</a>
|
||||
</td>
|
||||
<td class="tr-size home-td hide-xs">570.4 MiB</td>
|
||||
<td class="tr-se home-td hide-smol">0</td>
|
||||
<td class="tr-le home-td hide-smol">0</td>
|
||||
<td class="tr-dl home-td hide-xs">0</td>
|
||||
<td class="tr-date home-td date-short hide-xs table-torrent-date" title="2017-07-12T16:58:29Z">Jul 12, 2017</td>
|
||||
</tr>
|
||||
<tr class="torrent-info hidden">
|
||||
<td class="tr-cat home-td"></td>
|
||||
<td class="tr-name home-td" colspan="2"><a></a></td>
|
||||
<td class="tr-links home-td"></td>
|
||||
<td class="tr-size home-td hide-xs"></td>
|
||||
<td class="tr-se home-td hide-smol"></td>
|
||||
<td class="tr-le home-td hide-smol"></td>
|
||||
<td class="tr-dl home-td hide-xs"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
<table class="upload-form-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="table-input-label"><label for="name">{{ T("name")}}</label></td>
|
||||
<td class="table-input"><input type="text" name="name" id="name" class="form-input up-input form-torrent-name" placeholder="{{ T("torrent_name")}}" value="{{Form.Name}}" autofocus></td>
|
||||
</tr>
|
||||
<tr class="table-torrent-link">
|
||||
<td class="table-input-label"><label for="torrent">{{ T("torrent_file")}} / {{ T("magnet_link")}}</label></td>
|
||||
<td class="table-input"><input type="file" name="torrent" id="torrent" class="up-input" accept=".torrent" {{ if Form.Magnet != "" }}disabled{{end}}/><input type="text" name="magnet" id="magnet" class="form-input up-input" placeholder="{{ T("magnet_link")}}" value="{{Form.Magnet}}"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table-input-label"><label for="c">{{ T("category")}}</label></td>
|
||||
<td class="table-input">
|
||||
<select name="c" id="c" class="form-input up-input form-torrent-category" required>
|
||||
<option value="">{{ T("select_a_torrent_category")}}</option>
|
||||
{{ range _, cat := GetCategories(false, true) }}
|
||||
<option value="{{ cat.ID }}" {{if Form.Category == cat.ID }}selected{{end}}>{{ T(cat.Name) }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<td class="table-input-label">{{ T("torrent_language")}}</td>
|
||||
<td class="table-input">
|
||||
<div class="form-input language">
|
||||
{{ yield flagList(languages=GetTorrentLanguages(), selected=Form.Languages, inputname="languages", id="upload-lang")}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table-checkboxes">
|
||||
<td class="table-input-label"></td>
|
||||
<td class="table-input" style="font-weight: normal;"><input type="checkbox" value="true" name="remake" id="remake" class="form-torrent-remake"/><label for="remake">{{ T("mark_as_remake")}}</label> <input type="checkbox" value="true" name="hidden" id="hidden" class="form-torrent-hidden {{ if User.ID == 0 }}hidden{{end}}" {{ if User.ID == 0 }}disabled{{end}}><label for="hidden" {{ if User.ID == 0 }}class="hidden"{{end}}>{{ T("upload_as_anon")}}</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td class="table-input-label"><label for="website_link">{{ T("website_link")}}</label></td>
|
||||
<td class="table-input"><input name="website_link" id="website_link" placeholder="http://" class="form-input up-input" type="text" value="{{Form.WebsiteLink}}"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table-input-label"><label for="desc">{{ T("torrent_description")}}</label></td>
|
||||
<td class="table-input"><textarea name="desc" id="desc" class="form-input up-input" style="height: 10rem;">{{Form.Description}}</textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 {{ if Form.Magnet != "" }}class="hidden"{{end}}>{{ T("torrent_file")}}</h3>
|
||||
<input type="file" name="torrent" id="torrent" class="up-input" accept=".torrent" {{ if Form.Magnet != "" }}disabled{{end}}/>
|
||||
<p>{{ T("uploading_file_prefills_fields")}}</p>
|
||||
{{ yield errors(name="torrent")}}
|
||||
<table class="upload-tag-table">
|
||||
<tbody>
|
||||
<tr><td colspan="3"><h3 id="tag-h3">{{ T("torrent_tags")}}</h3></td></tr>
|
||||
<tr>
|
||||
{{ range _, tag := Config.Torrents.Tags.Types}}
|
||||
<td>
|
||||
{{ yield tagForm(tagType=tag, acceptedTag=Form.Tags.Get(tag.Name)) }}
|
||||
{{ if _ % 3 == 1 && _ == len(Config.Torrents.Tags.Types) - 1}}
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<label class="input-label" for="tag_{{Config.Torrents.Tags.Default}}">{{ T("tagtype_tags") }}</label>
|
||||
<input type="text" name="tag_{{Config.Torrents.Tags.Default}}" class="form-input" id="tag_{{Config.Torrents.Tags.Default}}" value="{{ Form.Tags.Get(Config.Torrents.Tags.Default).Tag }}" />
|
||||
</div>
|
||||
</td>
|
||||
{{ else }}
|
||||
{{ if _ % 3 == 2}}
|
||||
</td></tr><tr>
|
||||
{{else}}
|
||||
</td>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{ if _ % 3 != 1 && _ == len(Config.Torrents.Tags.Types) - 1}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<label class="input-label" for="tag_{{Config.Torrents.Tags.Default}}">{{ T("tagtype_tags") }}</label>
|
||||
<input type="text" name="tag_{{Config.Torrents.Tags.Default}}" class="form-input" id="tag_{{Config.Torrents.Tags.Default}}" value="{{ Form.Tags.Get(Config.Torrents.Tags.Default).Tag }}" />
|
||||
</div>
|
||||
</td>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>{{ T("magnet_link")}}</h3>
|
||||
<input type="text" name="magnet" id="magnet" class="form-input up-input" placeholder="{{ T("magnet_link")}}" value="{{Form.Magnet}}"/>
|
||||
<p>{{ T("please_include_our_tracker") }}</p>
|
||||
{{ yield errors(name="magnet")}}
|
||||
|
||||
<h3>{{ T("category")}}</h3>
|
||||
<select name="c" id="c" class="form-input up-input form-torrent-category" required>
|
||||
<option value="">{{ T("select_a_torrent_category")}}</option>
|
||||
{{ range _, cat := GetCategories(false, true) }}
|
||||
<option value="{{ cat.ID }}" {{if Form.Category == cat.ID }}selected{{end}}>{{ T(cat.Name) }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
{{ yield errors(name="c")}}
|
||||
|
||||
<h3>{{ T("torrent_language") }}</h3>
|
||||
<div class="form-input language">
|
||||
{{ yield flagList(languages=GetTorrentLanguages(), selected=Form.Languages, inputname="languages", id="upload-lang")}}
|
||||
</div>
|
||||
<p class="not-important">{{ T("language_not_mandatory") }}</p>
|
||||
|
||||
<p>
|
||||
<input type="checkbox" value="true" name="remake" id="remake" class="form-torrent-remake"/>
|
||||
<label for="remake">{{ T("mark_as_remake")}}</label>
|
||||
</p>
|
||||
{{ yield errors(name="remake")}}
|
||||
|
||||
{{ if User.ID > 0 }}
|
||||
<p>
|
||||
<input type="checkbox" value="true" name="hidden" id="hidden" class="form-torrent-hidden"/>
|
||||
<label for="hidden">{{ T("upload_as_anon")}}</label>
|
||||
</p>
|
||||
{{ yield errors(name="hidden")}}
|
||||
{{ end }}
|
||||
|
||||
<h3>{{ T("website_link")}}</h3>
|
||||
<input name="website_link" id="website_link" class="form-input up-input" type="text" value="{{Form.WebsiteLink}}"/>
|
||||
{{ yield errors(name="website_link")}}
|
||||
|
||||
<h3>{{ T("torrent_description")}}</h3>
|
||||
<p>{{ T("description_markdown_notice")}}</p>
|
||||
<textarea name="desc" id="desc" class="form-input up-input" style="height: 10rem;">{{Form.Description}}</textarea>
|
||||
|
||||
<div class="upload-tag-form">
|
||||
<h3 id="tag-h3">{{ T("torrent_tags")}}</h3>
|
||||
{{ range Config.Torrents.Tags.Types }}
|
||||
{{ yield tagForm(tagType=., acceptedTag=Form.Tags.Get(.Name)) }}
|
||||
{{ end }}
|
||||
<div class="form-group">
|
||||
<label class="input-label" for="tag_{{Config.Torrents.Tags.Default}}">{{ T("tagtype_tags") }}</label>
|
||||
<input type="text" name="tag_{{Config.Torrents.Tags.Default}}" class="form-input" id="tag_{{Config.Torrents.Tags.Default}}" value="{{ Form.Tags.Get(Config.Torrents.Tags.Default).Tag }}" />
|
||||
</div>
|
||||
{{ yield errors(name="tags")}}
|
||||
</div>
|
||||
<div style="width: 240px">
|
||||
{{yield captcha(captchaid=Form.CaptchaID)}}
|
||||
</div>
|
||||
<input type="hidden" id="IsUploadingToSukebei" value="{{ if Sukebei}}yes{{end}}"/>
|
||||
{{ yield errors(name="captchaID")}}
|
||||
<button type="submit" class="form-input up-btn">{{ T("upload")}}</button>
|
||||
<button type="submit" class="form-input up-btn" id="upload-button">{{ T("upload")}}</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
{{ block footer_js()}}
|
||||
<script type="text/javascript" src="/js/translation.js?v={{ Config.Version}}{{ Config.Build }}"></script>
|
||||
<script type="text/javascript" src="/js/template.js?v={{ Config.Version}}{{ Config.Build }}"></script>
|
||||
<script type="text/javascript" src="/js/kilo.js?v={{ Config.Version}}{{ Config.Build }}"></script>
|
||||
<script type="text/javascript" src="/js/simplemde.min.js?v={{ Config.Version}}{{ Config.Build }}"></script>
|
||||
{{ include "layouts/partials/torrent_item_upload" }}
|
||||
<script type="text/javascript">
|
||||
var preview = new Kilo({
|
||||
// {{ if User.IsTrusted()}}
|
||||
userTrusted: true,
|
||||
// {{ end }}
|
||||
// {{ if Sukebei() }}
|
||||
sukebei: true,
|
||||
// {{end}}
|
||||
// {{ if User.ID > 0 }}
|
||||
isMember: true,
|
||||
// {{end}}
|
||||
listContext: true
|
||||
})
|
||||
preview.render()
|
||||
parseAllDates()
|
||||
document.querySelector("input[name='magnet']").addEventListener("keyup", (e) => {
|
||||
var torrentInput = document.querySelector("input[name='torrent']")
|
||||
torrentInput.disabled = e.target.value != ""
|
||||
|
|
|
|||
|
|
@ -40,3 +40,6 @@
|
|||
* ~ edited: change_settings
|
||||
## 2017/09/12
|
||||
* + terms_conditions_full
|
||||
## 2017/09/17
|
||||
* + torrent_name
|
||||
* + upload_rules
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
[
|
||||
[{
|
||||
"id": "upload_rules",
|
||||
"translation": "Please read <a href=\"/faq#rules\">the rules</a> before uploading."
|
||||
},
|
||||
{
|
||||
"id": "rules",
|
||||
"translation": "Rules"
|
||||
|
|
@ -1811,6 +1814,10 @@
|
|||
"id": "error_content_type_post",
|
||||
"translation": "Please provide either of Content-Type: application/json header or multipart/form-data"
|
||||
},
|
||||
{
|
||||
"id": "torrent_name",
|
||||
"translation": "Torrent name"
|
||||
},
|
||||
{
|
||||
"id": "torrent_name_invalid",
|
||||
"translation": "Torrent name is invalid"
|
||||
|
|
|
|||
Référencer dans un nouveau ticket