diff --git a/public/js/image_selector.js b/public/js/image_selector.js index 6a8dfb5c..a07aedbb 100644 --- a/public/js/image_selector.js +++ b/public/js/image_selector.js @@ -1,4 +1,7 @@ -function ImageSelector(form, maxFileSize, container, defaultImageUrl) { +function ImageSelector(form, maxFileSize, container, { + defaultImageUrl = "", + onUpdate = (url) => {}, +} = {}) { this.form = form; this.maxFileSize = maxFileSize; this.fileInput = container.querySelector(".imginput"); @@ -11,12 +14,13 @@ function ImageSelector(form, maxFileSize, container, defaultImageUrl) { this.originalImageUrl = this.imageEl.getAttribute("data-imginput-original"); this.originalImageFilename = this.imageEl.getAttribute("data-imginput-original-filename"); this.currentImageUrl = this.originalImageUrl; - this.defaultImageUrl = defaultImageUrl || ""; + this.defaultImageUrl = defaultImageUrl; + this.onUpdate = onUpdate; this.fileInput.value = ""; this.removeImageInput.value = ""; - this.setImageUrl(this.originalImageUrl); + this.setImageUrl(this.originalImageUrl, true); this.updatePreview(); this.fileInput.addEventListener("change", function(ev) { @@ -79,7 +83,7 @@ ImageSelector.prototype.setError = function(error) { this.fileInput.reportValidity(); } -ImageSelector.prototype.setImageUrl = function(url) { +ImageSelector.prototype.setImageUrl = function(url, initial = false) { this.currentImageUrl = url; this.imageEl.src = url; if (url.length > 0) { @@ -87,6 +91,10 @@ ImageSelector.prototype.setImageUrl = function(url) { } else { this.imageEl.style.display = "none"; } + this.url = url; + if (!initial) { + this.onUpdate(url); + } }; ImageSelector.prototype.updatePreview = function(file) { diff --git a/public/style.css b/public/style.css index d64546ad..d5633d21 100644 --- a/public/style.css +++ b/public/style.css @@ -8501,6 +8501,17 @@ span.icon-rss::before { content: "\200b"; padding: var(--spacing-2) 0; } +.project-homepage-card { + width: 100%; + max-width: var(--site-width-narrow); + padding: var(--spacing-3); + background-color: var(--c-transparent-background); + --link-color: var(--color); + display: flex; + gap: var(--spacing-3); + overflow: hidden; + margin-top: -4rem; +} /* src/rawdata/scss/showcase.css */ .showcase-item .gradient { diff --git a/src/rawdata/scss/projects.css b/src/rawdata/scss/projects.css index 97fa5831..bf0e5e74 100644 --- a/src/rawdata/scss/projects.css +++ b/src/rawdata/scss/projects.css @@ -94,4 +94,17 @@ content: '\200b'; padding: var(--spacing-2) 0; } +} + +.project-homepage-card { + width: 100%; + max-width: var(--site-width-narrow); + padding: var(--spacing-3); + background-color: var(--c-transparent-background); + --link-color: var(--color); + display: flex; + gap: var(--spacing-3); + overflow: hidden; + + margin-top: -4rem; } \ No newline at end of file diff --git a/src/templates/src/include/image_selector.html b/src/templates/src/include/image_selector.html index 48ca53c4..84bbd2a4 100644 --- a/src/templates/src/include/image_selector.html +++ b/src/templates/src/include/image_selector.html @@ -7,7 +7,7 @@ {{ $filename := or (and .Asset .Asset.Filename) "" }}
-
+
Reset Remove
diff --git a/src/templates/src/landing.html b/src/templates/src/landing.html index 62655332..d6d093ae 100644 --- a/src/templates/src/landing.html +++ b/src/templates/src/landing.html @@ -157,26 +157,22 @@ {{ else }}
You are not following anything. Follow users and projects to see their posts here.
{{ end }} - TODO: READ MORE LINK
{{ end }}
{{ range .FeaturedItems }} {{ template "timeline_item.html" . }} {{ end }} - TODO: READ MORE LINK
{{ range .RecentItems }} {{ template "timeline_item.html" . }} {{ end }} - TODO: READ MORE LINK
{{ range .NewsItems }} {{ template "timeline_item.html" . }} {{ end }} - TODO: READ MORE LINK
diff --git a/src/templates/src/project_edit.html b/src/templates/src/project_edit.html index 24531e9d..75d93d46 100644 --- a/src/templates/src/project_edit.html +++ b/src/templates/src/project_edit.html @@ -49,12 +49,24 @@
- +
-
Plaintext only. No links or markdown.
@@ -215,6 +227,13 @@ + +
{{ range .AllLogos }} {{ .Svg }} @@ -226,17 +245,43 @@ We don't have a good story for sharing templates between Go and JS. --> - -
-
-
-
-
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ Project Logo +
+
+

+
+
+
+
+ +
+
+ Example User +
+
+
+
+

About {{ .Project.Name }}

+
@@ -247,14 +292,6 @@ let projectForm = document.querySelector("#project_form"); - projectForm.addEventListener("invalid", function(ev) { - switchToTabOfElement(document.body, ev.target); - }, true); - - function gotoTab(tabName) { - switchTab(document.body, tabName); - } - ////////// // Tags // ////////// @@ -302,6 +339,7 @@ let ownersError = document.querySelector("#owners_error"); let ownerList = document.querySelector("#owner_list"); let ownerTemplate = makeTemplateCloner("owner_row"); + let ownerPreviewTemplate = makeTemplateCloner("owner_preview"); addOwnerInput.addEventListener("keypress", function(ev) { if (ev.which == 13) { @@ -394,38 +432,52 @@ updateAddOwnerStyles(); }); - ///////////////////// - // Logo management // - ///////////////////// + ////////////////////////////// + // Logo / header management // + ////////////////////////////// const logoMaxFileSize = {{ .LogoMaxFileSize }}; + const headerMaxFileSize = {{ .HeaderMaxFileSize }}; const logoSelector = new ImageSelector( document.querySelector("#project_form"), logoMaxFileSize, - document.querySelector(".light_logo") + document.querySelector(".light_logo"), + { + onUpdate() { + updateCardPreview(); + }, + }, ); function openLogoSelector(e) { e.preventDefault(); logoSelector.openFileInput(); } - /////////////////////// - // Header management // - /////////////////////// - - const headerMaxFileSize = {{ .HeaderMaxFileSize }}; - const headerSelector = new ImageSelector( document.querySelector("#project_form"), headerMaxFileSize, - document.querySelector(".header_image") + document.querySelector(".header_image"), + { + onUpdate() { + updateCardPreview(); + }, + }, ); function openHeaderSelector(e) { e.preventDefault(); headerSelector.openFileInput(); } + function updateCardPreview() { + document.querySelector("#logo_preview").hidden = !logoSelector.url; + document.querySelector("#logo_preview img").src = logoSelector.url; + document.querySelector("#header_img_preview").style.backgroundImage = `url(${headerSelector.url})`; + document.querySelector("#name_preview").innerText = document.querySelector("#project_name").value; + document.querySelector("#blurb_preview").innerText = document.querySelector("#description").value; + } + updateCardPreview(); + ////////////////// // Asset upload // ////////////////// diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html index 6b5fa803..6927297a 100644 --- a/src/templates/src/project_homepage.html +++ b/src/templates/src/project_homepage.html @@ -14,7 +14,7 @@
{{ if .CanEdit }} -
+
{{ svg "edit-line" }}Edit Project
{{ end }} @@ -37,7 +37,7 @@
-
+
{{ if .Project.Logo }} Project Logo @@ -127,7 +127,6 @@ {{ range .RecentActivity }} {{ template "timeline_item.html" . }} {{ end }} - TODO: READ MORE LINK