Albirew/nyaa-pantsu
Archivé
1
0
Bifurcation 0

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 2017-09-17 20:30:58 +02:00 révisé par GitHub
Parent 2ec6eaab9d
révision cedbec3246
5 fichiers modifiés avec 161 ajouts et 193 suppressions

Voir le fichier

@ -238,6 +238,7 @@ select.form-input {
.language .input-group label { .language .input-group label {
margin-bottom: 1px; margin-bottom: 1px;
vertical-align: unset;
} }
.language .input-group input { .language .input-group input {
@ -877,6 +878,9 @@ html, body {
.torrent-hr { .torrent-hr {
margin-bottom: 0; margin-bottom: 0;
} }
.upload-form-table .table-torrent-link input {
width: 100%!important;
}
} }
@media (max-height: 750px),(max-width: 500px) { @media (max-height: 750px),(max-width: 500px) {
@ -903,6 +907,9 @@ html, body {
.form-refine { .form-refine {
margin-bottom: 8px; margin-bottom: 8px;
} }
.upload-form-table .table-input-label {
width: 23%;
}
} }
@media (max-width: 565px) { @media (max-width: 565px) {
@ -955,6 +962,9 @@ html, body {
.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] { .refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
width: 87px!important; width: 87px!important;
} }
.upload-form-table .table-input-label {
display: none;
}
} }
@media (max-width: 440px) { @media (max-width: 440px) {
@ -1895,30 +1905,63 @@ span.tag {
border-left: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8;
} }
.upload-tag-form h3 { p.upload-rules {
margin: 10px 0; margin-top: 0;
} }
#upload-button {
.upload-tag-form .form-group { width: 120px;
width: 167px;
display:inline-block;
margin-bottom: 5px;
margin-right: 5px;
} }
.upload-form-table {
.upload-tag-form label { max-width: 950px;
display:inline-block; margin: 15px 0;
width: 100%; 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; font-size: unset;
margin-bottom: 1px; margin-bottom: 1px;
} }
.upload-tag-table input, .upload-tag-table select {
.upload-tag-form input,.upload-tag-form select {
height: 25px; height: 25px;
padding: 3px 3px; padding: 3px 3px;
width: 100%; width: 100%;
} }
.upload-tag-table td {
padding-right: 7px;
}
.upload-tag-form h3 {
margin: 10px 0;
}
.show-xs { .show-xs {
display: none; display: none;

Voir le fichier

@ -1,5 +1,5 @@
{{ block ruleList(open=false)}} {{ 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> <summary class="form-input">{{ T("rules")}}</summary>
<div class="form-input"> <div class="form-input">
<ul> <ul>

Voir le fichier

@ -7,201 +7,116 @@
{{block title()}}{{ T("upload")}}{{end}} {{block title()}}{{ T("upload")}}{{end}}
{{block content_body()}} {{block content_body()}}
<div style="text-align: left;" class="box"> <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"> <form enctype="multipart/form-data" method="POST">
{{ yield csrf_field() }} {{ 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> <div class="upload-errors">
{{ yield errors(name="name")}} {{ 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>
<div class="torrent-preview-table" style="display: none;"><h3 style="text-align: center;margin-bottom: 3px;">{{ T("torrent_preview")}}</h3> <table class="upload-form-table">
<table> <tbody>
<thead class="torrent-info table-torrent-thead"> <tr>
<tr> <td class="table-input-label"><label for="name">{{ T("name")}}</label></td>
<th class="tr-cat">{{ T("category")}}</th> <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>
<th class="tr-name"> </tr>
{{ T("name")}} <tr class="table-torrent-link">
<span class="sort-arrows"> <td class="table-input-label"><label for="torrent">{{ T("torrent_file")}} / {{ T("magnet_link")}}</label></td>
<span class="sortarrowleft sortarrowdim"></span> <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>
<span class="sortarrowdim"></span> </tr>
</span> <tr>
</th> <td class="table-input-label"><label for="c">{{ T("category")}}</label></td>
<th class="tr-cs"></th> <td class="table-input">
<th class="tr-links"></th> <select name="c" id="c" class="form-input up-input form-torrent-category" required>
<th class="tr-size hide-xs"> <option value="">{{ T("select_a_torrent_category")}}</option>
{{ T("size")}} {{ range _, cat := GetCategories(false, true) }}
<span class="sort-arrows"> <option value="{{ cat.ID }}" {{if Form.Category == cat.ID }}selected{{end}}>{{ T(cat.Name) }}</option>
<span class="sortarrowleft sortarrowdim"></span> {{ end }}
<span class="sortarrowdim"></span> </select>
</span> </td>
</th> </tr>
<th class="tr-se hide-smol"> <td class="table-input-label">{{ T("torrent_language")}}</td>
S <td class="table-input">
<span class="sort-arrows"> <div class="form-input language">
<span class="sortarrowleft sortarrowdim"></span> {{ yield flagList(languages=GetTorrentLanguages(), selected=Form.Languages, inputname="languages", id="upload-lang")}}
<span class="sortarrowdim"></span> </div>
</span> </td>
</th> </tr>
<th class="tr-le hide-smol"> <tr class="table-checkboxes">
L <td class="table-input-label"></td>
<span class="sort-arrows"> <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>
<span class="sortarrowleft sortarrowdim"></span> </tr>
<span class="sortarrowdim"></span> <tr>
</span> <tr>
</th> <td class="table-input-label"><label for="website_link">{{ T("website_link")}}</label></td>
<th class="tr-dl hide-xs"> <td class="table-input"><input name="website_link" id="website_link" placeholder="http://" class="form-input up-input" type="text" value="{{Form.WebsiteLink}}"/></td>
D </tr>
<span class="sort-arrows"> <tr>
<span class="sortarrowleft sortarrowdim"></span> <td class="table-input-label"><label for="desc">{{ T("torrent_description")}}</label></td>
<span class="sortarrowdim"></span> <td class="table-input"><textarea name="desc" id="desc" class="form-input up-input" style="height: 10rem;">{{Form.Description}}</textarea></td>
</span> </tr>
</th> </tbody>
<th class="tr-date hide-xs"> </table>
{{ 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>
<td class="tr-links home-td"> <table class="upload-tag-table">
<a title="Magnet Link"> <tbody>
<div class="icon-magnet"></div> <tr><td colspan="3"><h3 id="tag-h3">{{ T("torrent_tags")}}</h3></td></tr>
</a> <tr>
<a title="Torrent file"> {{ range _, tag := Config.Torrents.Tags.Types}}
<div class="icon-floppy"></div> <td>
</a> {{ yield tagForm(tagType=tag, acceptedTag=Form.Tags.Get(tag.Name)) }}
</td> {{ if _ % 3 == 1 && _ == len(Config.Torrents.Tags.Types) - 1}}
<td class="tr-size home-td hide-xs">570.4 MiB</td> </td>
<td class="tr-se home-td hide-smol">0</td> <td>
<td class="tr-le home-td hide-smol">0</td> <div class="form-group">
<td class="tr-dl home-td hide-xs">0</td> <label class="input-label" for="tag_{{Config.Torrents.Tags.Default}}">{{ T("tagtype_tags") }}</label>
<td class="tr-date home-td date-short hide-xs table-torrent-date" title="2017-07-12T16:58:29Z">Jul 12, 2017</td> <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 }}" />
</tr> </div>
<tr class="torrent-info hidden"> </td>
<td class="tr-cat home-td"></td> {{ else }}
<td class="tr-name home-td" colspan="2"><a></a></td> {{ if _ % 3 == 2}}
<td class="tr-links home-td"></td> </td></tr><tr>
<td class="tr-size home-td hide-xs"></td> {{else}}
<td class="tr-se home-td hide-smol"></td> </td>
<td class="tr-le home-td hide-smol"></td> {{end}}
<td class="tr-dl home-td hide-xs"></td> {{end}}
<td></td> {{ if _ % 3 != 1 && _ == len(Config.Torrents.Tags.Types) - 1}}
</tr> </tr>
</tbody> <tr>
</table></div> <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 {{ 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")}}
<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"> <div style="width: 240px">
{{yield captcha(captchaid=Form.CaptchaID)}} {{yield captcha(captchaid=Form.CaptchaID)}}
</div> </div>
<input type="hidden" id="IsUploadingToSukebei" value="{{ if Sukebei}}yes{{end}}"/>
{{ yield errors(name="captchaID")}} {{ 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> </form>
</div> </div>
{{end}} {{end}}
{{ block footer_js()}} {{ block footer_js()}}
<script type="text/javascript" src="/js/translation.js?v={{ Config.Version}}{{ Config.Build }}"></script> <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/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> <script type="text/javascript" src="/js/simplemde.min.js?v={{ Config.Version}}{{ Config.Build }}"></script>
{{ include "layouts/partials/torrent_item_upload" }} {{ include "layouts/partials/torrent_item_upload" }}
<script type="text/javascript"> <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) => { document.querySelector("input[name='magnet']").addEventListener("keyup", (e) => {
var torrentInput = document.querySelector("input[name='torrent']") var torrentInput = document.querySelector("input[name='torrent']")
torrentInput.disabled = e.target.value != "" torrentInput.disabled = e.target.value != ""

Voir le fichier

@ -40,3 +40,6 @@
* ~ edited: change_settings * ~ edited: change_settings
## 2017/09/12 ## 2017/09/12
* + terms_conditions_full * + terms_conditions_full
## 2017/09/17
* + torrent_name
* + upload_rules

Voir le fichier

@ -1,4 +1,7 @@
[ [{
"id": "upload_rules",
"translation": "Please read <a href=\"/faq#rules\">the rules</a> before uploading."
},
{ {
"id": "rules", "id": "rules",
"translation": "Rules" "translation": "Rules"
@ -1811,6 +1814,10 @@
"id": "error_content_type_post", "id": "error_content_type_post",
"translation": "Please provide either of Content-Type: application/json header or multipart/form-data" "translation": "Please provide either of Content-Type: application/json header or multipart/form-data"
}, },
{
"id": "torrent_name",
"translation": "Torrent name"
},
{ {
"id": "torrent_name_invalid", "id": "torrent_name_invalid",
"translation": "Torrent name is invalid" "translation": "Torrent name is invalid"