updated details toggle

public/assets/css/BEM.css

@@ -9,11 +9,33 @@ p {
 	padding-left: 0.3em;
 }
 
+.center-text {
+	text-align: center;
+}
+
 .url-text {
 	margin:0px;
 	padding:0px;
 }
 
+/* HEADERS */
+
+h1 {
+	font-size: x-large;
+}
+
+h2 {
+	font-size: medium;
+	margin-top: 1em;
+	border-top: 1px #999 solid;
+	background-color: lightgray;
+	padding: 6px;
+}
+
+h4 {
+	padding: 3px;
+}
+
 /* CONTAINERS */
 
 .wrapper {
@@ -152,32 +174,6 @@ footer {
 	width: 96%;
 }
 
-/* HEADERS */
-
-h1 {
-	font-size: x-large;
-}
-
-h2 {
-	font-size: medium;
-	margin-top: 1em;
-	border-top: 1px #999 solid;
-	background-color: lightgray;
-	padding: 6px;
-}
-
-.subheader {
-	margin-top: 0px;
-}
-
-h4 {
-	padding: 3px;
-}
-
-.center-text {
-	text-align: center;
-}
-
 /* LINKS */
 
 a, a:visited {
@@ -225,9 +221,6 @@ input:-webkit-autofill {
 	border: 1px solid grey;
 }
 
-.label--secondary {
-	color: grey;
-}
 /* BUTTONS */
 
 button {

public/assets/js/generalFunctions.js

@@ -5,14 +5,16 @@ function toggleSection(event){
 	var status = dataSet.open;
 	var masterElement = document.getElementById(event.target.id||event.srcElement.id);
 	var slaveElement = document.getElementById(dataSet.slaveelementid);
+	var closedLabel = dataSet.closedlabel;
+	var openLabel = dataSet.openlabel;
 	
 	if (status === "false") {
 		slaveElement.hidden = false;
-		masterElement.innerText = "[close]";
+		masterElement.innerText = openLabel;
 		masterElement.dataset.open = "true";
 	} else {
 		slaveElement.hidden = true;
-		masterElement.innerText = "[open]";
+		masterElement.innerText = closedLabel;
 		masterElement.dataset.open = "false";
 	}
 }

routes/sockets-routes.js

@@ -43,6 +43,7 @@ module.exports = (app, siofu, hostedContentPath) => {
 
         // prepare the publish parameters
         const publishParams = publishHelpers.createPublishParams(file.meta.name, file.pathName, file.meta.title, file.meta.description, file.meta.license, file.meta.nsfw, file.meta.channel);
+        logger.debug(publishParams);
         // publish the file
         publishController.publish(publishParams, file.name, file.meta.type)
         .then(result => {

views/partials/assetInfo.handlebars

@@ -3,7 +3,7 @@
 	<p>{{fileInfo.title}}</>
 </div>
 <div class="panel links">
-	<h2 class="subheader">Links</h2>
+	<h2>Links</h2>
 	{{!--short direct link to asset--}}
 	<div class="share-option">
 		<a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Permanent Short Link</a> (most convenient)
@@ -49,7 +49,7 @@
     <p>{{fileInfo.description}}</p>
 </div>
 <div class="panel">
-	<h2 class="subheader">Metadata</h2>
+	<h2>Metadata</h2>
 	<table class="metadata-table" style="table-layout: fixed">
 		<tr class="metadata-row">
 			<td class="left-column">Name</td>

views/partials/documentation.handlebars

@@ -1,6 +1,6 @@
 <div class="panel">
 	<h2>Documentation
-		<a class="toggle-link" id="documentation-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="documentation-detail">[open]</a>
+		<a class="toggle-link" id="documentation-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[ - ]" data-closedlabel="[ + ]" data-slaveelementid="documentation-detail">[ + ]</a>
 	</h2>
 	<div id="documentation-detail" hidden="true">
 		<code>https://spee.ch/</code>

views/partials/examples.handlebars

@@ -1,6 +1,6 @@
 <div class="panel">
 	<h2>Examples
-		<a class="toggle-link" id="examples-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="examples-detail">[open]</a>
+		<a class="toggle-link" id="examples-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[ - ]" data-closedlabel="[ + ]" data-slaveelementid="examples-detail">[ + ]</a>
 	</h2>
 	<div id="examples-detail" hidden="true">
 		<div class="example">

views/partials/publishForm-Channel.handlebars

@@ -27,7 +27,6 @@
     {{> channelCreationForm}}
 </div>
 
-
 <script src="/assets/js/authFunctions.js"></script>
 <script type="text/javascript">
  function toggleChannel (event) {

views/partials/publishForm-Details.handlebars

@@ -1,17 +1,8 @@
-<div class="row">
-    <div class="column column--3">
-        <label class="label">Details:</label>
-    </div>
-    <div class="column column--9">
-        <a class="toggle-link" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="details-detail">[open]</a>
-    </div>
-</div>
-
 <div id="details-detail" hidden="true">
 
     <div class="row row--thin">
         <div class="column column--3">
-            <label for="publish-title" class="label label--secondary">Title: </label>
+            <label for="publish-title" class="label">Title: </label>
         </div>
         <div class="column column--9">
             <input type="text" id="publish-title" class="input-text input-text--primary">
@@ -20,7 +11,7 @@
 
     <div class="row row--thin">
         <div class="column column--3">
-            <label for="publish-description" class="label label--secondary">Description: </label>
+            <label for="publish-description" class="label">Description: </label>
         </div>
         <div class="column column--9">
             <textarea rows="2" id="publish-description" class="input-textarea"></textarea>
@@ -29,7 +20,7 @@
 
     <div class="row row--thin">
         <div class="column column--3">
-            <label for="publish-license" class="label label--secondary">License:* </label>
+            <label for="publish-license" class="label">License:* </label>
         </div>
         <div class="column column--9">
             <select type="text" id="publish-license" class="select select--primary">
@@ -41,14 +32,18 @@
 
     <div class="row row--thin">
         <div class="column column--3">
-            <label for="publish-nsfw" class="label label--secondary">NSFW*</label>
+            <label for="publish-nsfw" class="label">NSFW*</label>
         </div>
         <div class="column column--9">
             <input class="input-checkbox" type="checkbox" id="publish-nsfw">
         </div>
     </div>
+</div>
 
-
+<div class="row">
+    <div class="column column--12">
+        <a class="label" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="details-detail">[more]</a>
+    </div>
 </div>