brutaldon-interfaccia-web-minimale/brutaldon/templates/main/post_partial.html

{% load widget_tweaks %}

{% if reply %}
    <form method="post" id="post-form" action="{% url "reply" toot.id %}" enctype="multipart/form-data">
{% else %}
        <form method="post" action="{% url "toot" %}" enctype="multipart/form-data">
{% endif %}
{% csrf_token %}

<div>
    {{ form.non_field_errors }}
    <br>
</div>

<div class="field">
    <label class="label"> {{ form.spoiler_text.label }}</label>
    <div class="control">
        {% render_field form.spoiler_text class+="input mousetrap" placeholder="Optional" %}
    </div>
</div>

<div class="field" >
    <label class="label" >{{ form.status.label }}</label>
    <div class="control">
        {% render_field form.status class+="textarea mousetrap is-primary" rows="4" %}
    </div>
</div>

<div class="field">
    <label class="label" > {{ form.visibility.label }}</label>
    <div class="control has-icons-left">
        <div class="select">
            {% render_field form.visibility class+="select"%}
            <span class="icon is-small is-left" >
                <i class="fa address-card"></i>
            </span>
        </div>
    </div>
</div>

<div class="field has-addons">
    <div class="file">
        <label class="file-label">
            {% render_field form.media_file_1 class+="file-input" %}
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fa fa-upload"></i>
                </span>
                <span class="file-label" id="media_filename_1">
                    {{ form.media_file_1.label }}
                </span>
            </span>
        </label>
    </div>
    <div class="control is-expanded"> 
        {% render_field form.media_text_1 class+="input mousetrap" placeholder="Describe attachment" %}
    </div>
</div>

<div class="field has-addons">
    <div class="file">
        <label class="file-label">
            {% render_field form.media_file_2 class+="file-input" %}
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fa fa-upload"></i>
                </span>
                <span class="file-label" id="media_filename_2">
                    {{ form.media_file_2.label }}
                </span>
            </span>
        </label>
    </div>
    <div class="control is-expanded"> 
        {% render_field form.media_text_2 class+="input mousetrap" placeholder="Describe attachment" %}
    </div>
</div>

<div class="field has-addons">
    <div class="file">
        <label class="file-label">
            {% render_field form.media_file_3 class+="file-input" %}
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fa fa-upload"></i>
                </span>
                <span class="file-label" id="media_filename_3">
                    {{ form.media_file_3.label }}
                </span>
            </span>
        </label>
    </div>
    <div class="control is-expanded"> 
        {% render_field form.media_text_3 class+="input mousetrap" placeholder="Describe attachment" %}
    </div>
</div>
<div class="field has-addons">
    <div class="file">
        <label class="file-label">
            {% render_field form.media_file_4 class+="file-input" %}
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fa fa-upload"></i>
                </span>
                <span class="file-label" id="media_filename_4">
                    {{ form.media_file_4.label }}
                </span>
            </span>
        </label>
    </div>
    <div class="control is-expanded"> 
        {% render_field form.media_text_4 class+="input mousetrap" placeholder="Describe attachment" %}
    </div>
</div>


<div class="field has-addons">
    <div class="control level is-mobile">
        <img class="image avatar is-48x48 level-item" src="{{ own_acct.avatar_static }}"
             alt="">
        <input type="submit" class="button is-primary level-item"
               name="toot" value="Toot">
    </div>
</div>
        </form>

        {% if not fullbrutalism %}
            <script type="application/javascript">
             var file1 = document.getElementById("id_media_file_1");
             file1.onchange = function(){
                 if (file1.files.length > 0)
                     {
                         document.getElementById('media_filename_1').innerHTML =  file1.files[0].name;
                     }
             };
             var file2 = document.getElementById("id_media_file_2");
             file2.onchange = function(){
                 if (file2.files.length > 0)
                     {
                         document.getElementById('media_filename_2').innerHTML =  file2.files[0].name;
                     }
             };
             var file3 = document.getElementById("id_media_file_3");
             file3.onchange = function(){
                 if (file3.files.length > 0)
                     {
                         document.getElementById('media_filename_3').innerHTML =  file3.files[0].name;
                     }
             };
             var file4 = document.getElementById("id_media_file_4");
             file4.onchange = function(){
                 if (file4.files.length > 0)
                     {
                         document.getElementById('media_filename_4').innerHTML =  file4.files[0].name;
                     }
             };
            </script>
        {% endif %}