Start reworking project edit page

This commit is contained in:
Ben Visness 2024-05-24 21:09:28 -05:00
parent 2fbc1a5d5a
commit e6dc21f058
1 changed files with 83 additions and 95 deletions

View File

@ -1,4 +1,4 @@
{{ template "base.html" . }} {{ template "base-2024.html" . }}
{{ define "extrahead" }} {{ define "extrahead" }}
{{ template "markdown_previews.html" .TextEditor }} {{ template "markdown_previews.html" .TextEditor }}
@ -22,22 +22,71 @@
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="ph3 ph0-ns"> <div class="pa3">
{{ if .Editing }} <div class="flex g3">
<h1>Edit {{ .ProjectSettings.Name }}</h1> <form id="project_form" class="edit-form bg--card pa3 flex-fair" method="POST" enctype="multipart/form-data">
{{ else }} {{ csrftoken .Session }}
<h1>Create a new {{ if .ProjectSettings.JamParticipation }}jam {{ end }}project</h1>
{{ end }} <h1 class="f4">
<form id="project_form" class="tabbed edit-form" method="POST" enctype="multipart/form-data"> {{ if .Editing }}
{{ csrftoken .Session }} Edit {{ .ProjectSettings.Name }}
<div class="tab" data-name="General" data-slug="general"> {{ else }}
Create a {{ if .ProjectSettings.JamParticipation }}jam {{ end }}project
{{ end }}
</h1>
<hr>
<div class="edit-form-row"> <div class="edit-form-row">
<div class="pt-input-ns">Project name:</div> <div class="pt-input-ns">Project title:</div>
<div> <div>
<input required type="text" name="project_name" maxlength="255" class="textbox" value="{{ .ProjectSettings.Name }}"> <input required type="text" name="project_name" maxlength="255" class="textbox" value="{{ .ProjectSettings.Name }}">
<span class="note">* Required</span> <span class="note">* Required</span>
</div> </div>
</div> </div>
<div class="edit-form-row">
<div class="pt-input-ns">Short description:</div>
<div>
<textarea id="description" required maxlength="140" name="shortdesc">
{{- .ProjectSettings.Blurb -}}
</textarea>
<div class="c--dim f7">Plaintext only. No links or markdown.</div>
</div>
</div>
<div class="edit-form-row">
<div class="pt-input-ns">Long description:</div>
<div>
<textarea id="full_description" class="w-100 h5 minh-5 mono lh-copy" name="full_description">
{{- .ProjectSettings.Description -}}
</textarea>
<div class="flex justify-end items-center mt2">
<div class="upload_bar flex-grow-1">
<div class="instructions">
Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
</div>
<div class="progress flex">
<div class="progress_text mr3"></div>
<div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="edit-form-row">
<div>Light theme logo:</div>
<div class="light_logo">
{{ template "image_selector.html" imageselectordata "light_logo" .ProjectSettings.LightLogo false }}
</div>
</div>
<div class="edit-form-row">
<div>Dark theme logo:</div>
<div class="dark_logo">
{{ template "image_selector.html" imageselectordata "dark_logo" .ProjectSettings.DarkLogo false }}
</div>
</div>
<hr>
<div class="edit-form-row"> <div class="edit-form-row">
<div class="pt-input-ns">Status:</div> <div class="pt-input-ns">Status:</div>
<div> <div>
@ -100,10 +149,22 @@
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ if and .Editing .User.IsStaff }} <div class="edit-form-row">
<div class="edit-form-row"> <div class="pt-input-ns">Project links:</div>
<div class="pt-input-ns">Admin settings</div> <div>
<textarea class="links" name="links" id="links" maxlength="2048" data-max-chars="2048">
{{- .ProjectSettings.LinksText -}}
</textarea>
<div class="c--dim f7">
<div>Relevant links to put on the project page.</div>
<div>Format: url [Title] (e.g. <code>http://example.com/ Example Site</code>)</div>
<div>(1 per line, 10 max)</div>
</div>
</div> </div>
</div>
{{ if and .Editing .User.IsStaff }}
<hr>
<div class="edit-form-row"> <div class="edit-form-row">
<div>Official:</div> <div>Official:</div>
<div> <div>
@ -135,85 +196,7 @@
</div> </div>
</div> </div>
{{ end }} {{ end }}
<div class="edit-form-row">
<div></div>
<div>
{{ if .Editing }}
<input type="submit" value="Save" />
{{ else }}
<a class="button submit" href="javascript:;" onclick="gotoTab('description');">Next</a>
{{ end }}
</div>
</div>
</div>
<div class="tab" data-name="Description" data-slug="description">
<div class="edit-form-row">
<div class="pt-input-ns">Short description:</div>
<div>
<textarea id="description" required maxlength="140" name="shortdesc">
{{- .ProjectSettings.Blurb -}}
</textarea>
<div class="c--dim f7">Plaintext only. No links or markdown.</div>
</div>
</div>
<div class="edit-form-row">
<div class="pt-input-ns">Project links:</div>
<div>
<textarea class="links" name="links" id="links" maxlength="2048" data-max-chars="2048">
{{- .ProjectSettings.LinksText -}}
</textarea>
<div class="c--dim f7">
<div>Relevant links to put on the project page.</div>
<div>Format: url [Title] (e.g. <code>http://example.com/ Example Site</code>)</div>
<div>(1 per line, 10 max)</div>
</div>
</div>
</div>
<div class="edit-form-row">
<div class="pt-input-ns">Full description:</div>
<div>
<textarea id="full_description" class="w-100 h5 minh-5 mono lh-copy" name="full_description">
{{- .ProjectSettings.Description -}}
</textarea>
<div class="flex justify-end items-center mt2">
<div class="upload_bar flex-grow-1">
<div class="instructions">
Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
</div>
<div class="progress flex">
<div class="progress_text mr3"></div>
<div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
</div>
</div>
</div>
<div class="b mt3 mb2">Preview:</div>
<div id="desc-preview" class="w-100"></div>
</div>
</div>
<div class="edit-form-row">
<div></div>
<div>
{{ if .Editing }}
<input type="submit" value="Save" />
{{ else }}
<a class="button submit" href="javascript:;" onclick="gotoTab('assets');">Next</a>
{{ end }}
</div>
</div>
</div>
<div class="tab" data-name="Assets" data-slug="assets">
<div class="edit-form-row">
<div>Light theme logo:</div>
<div class="light_logo">
{{ template "image_selector.html" imageselectordata "light_logo" .ProjectSettings.LightLogo false }}
</div>
</div>
<div class="edit-form-row">
<div>Dark theme logo:</div>
<div class="dark_logo">
{{ template "image_selector.html" imageselectordata "dark_logo" .ProjectSettings.DarkLogo false }}
</div>
</div>
<div class="edit-form-row"> <div class="edit-form-row">
<div></div> <div></div>
<div> <div>
@ -224,10 +207,15 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</form>
<div class="bl b--dimmest"></div>
<div class="flex-fair">
<div id="desc-preview" class="w-100"></div>
</div> </div>
</form> </div>
<input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(mark): copied NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}
</div> </div>
<input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(mark): copied NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}
<script> <script>
let csrf = JSON.parse({{ csrftokenjs .Session }}); let csrf = JSON.parse({{ csrftokenjs .Session }});