ui improvement

lightningrodlabs · Feb 1, 2024 · ea7aa66 · ea7aa66
1 parent 77f26f2
commit ea7aa66
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 20 deletions.
diff --git a/ui/src/app.css b/ui/src/app.css
@@ -235,6 +235,20 @@ body {
   justify-content: space-between;
 }
 
+/* for mobile and tablet */
+@media (max-width: 768px) {
+  .two-sides {
+    flex-direction: column;
+  }
+
+  .two-sides > div {
+    width: 100%;
+    display: flex;
+    /* center content */
+    align-items: center;
+  }
+}
+
 .vertical-progress-bar-container {
   width: 24px;
   height: 100%;

diff --git a/ui/src/converge/converge/Criteria/AllCriteria.svelte b/ui/src/converge/converge/Criteria/AllCriteria.svelte
@@ -38,6 +38,11 @@ async function sortCriteria() {
       return b.myObjections - a.myObjections;
     }
   });
+  sortedCriteriaJoined = sortedCriteriaJoined.filter((c) => {
+    if (c.supporters > 0) {
+      return true;
+    }
+  });
   sortedCriteria = sortedCriteriaJoined.map((c) => c.hash);
   console.log(sort, sortedCriteriaJoined)
   // }, 4000)
@@ -60,6 +65,7 @@ onMount(async () => {
     // hashes = [...hashes, payload.action.hashed.hash];
     // sortedCriteria = [...sortedCriteria, payload.action.hashed.hash];
     fetchCriteria()
+    sortCriteria()
   });
 });
 

diff --git a/ui/src/converge/converge/Criteria/CreateAlternative.svelte b/ui/src/converge/converge/Criteria/CreateAlternative.svelte
@@ -216,7 +216,7 @@
     {/if}
     {/each} -->
 
-    <select bind:value={selectedCriterion} on:change={()=>{addAlternative(selectedCriterion)}} style="width: fit-content; margin: 6px">
+    <select bind:value={selectedCriterion} on:change={()=>{addAlternative(selectedCriterion)}} style="width: fit-content; margin: 6px; max-width: 40%;">
       <option value="" disabled selected>Suggest existing alternative</option>
 
       {#each allCriteria as c (c.hash.join(','))}

diff --git a/ui/src/converge/converge/Criteria/CreateCriterion.svelte b/ui/src/converge/converge/Criteria/CreateCriterion.svelte
@@ -183,23 +183,25 @@ async function createCriterion() {
       <div style="display: flex; flex-direction: column">
         <h2>Add a new criterion</h2>
         {#if alternativeToFull}
-        <div><span class="green-alert">↯ </span><strong>Alternative to {alternativeToFull.title}</strong></div><br>
+        <div><span class="green-alert">↯ </span><strong>Alternative to {alternativeToFull.title}</strong></div>
+        <br>
         {/if}
-
-        <small class="instructions" style="max-width: 400px;">
+        <small class="instructions" style="white-space: pre-line; font-size: 10px; margin: 0; width: calc(100vw - 111px); max-width: 388px;">
           TIP: Does the criterion have these helpful characteristics?
 
-          Is noncontroversial
-          Can be evaluated (subjectively)
-          Uses positive language (what is wanted rather than what is not wanted)
-          Is relevant to the context
-          Is operational (can in principle be made to happen)
-          Applies to everyone (this is a need that everyone can recognize, not just one person’s need)
-          Doesn’t have a specific outcome (as long as it’s noncontroversial, this is the least important characteristic) 
+          • Is noncontroversial
+          • Can be evaluated (subjectively)
+          • Uses positive language (what is wanted rather than what is not wanted)
+          • Is relevant to the context
+          • Is operational (can in principle be made to happen)
+          • Applies to everyone (not just one person’s need)
+          • Doesn’t have a specific outcome
         </small>
 
+        <br>
+
         <div style="margin-bottom: 16px">
-          <mwc-textarea style="max-width: 400px; height: 60px; width: calc(100vw - 84px);" outlined label="Title" value={ title } on:input={e => { title = e.target.value; } } required></mwc-textarea>          
+          <mwc-textarea style="max-width: 400px; height: 90px; width: calc(100vw - 84px);" outlined label="Description" value={ title } on:input={e => { title = e.target.value; } } required></mwc-textarea>          
         </div>
 
         <div style="display: flex; flex-direction: column; max-width: 400px; margin-bottom: 16px">

diff --git a/ui/src/converge/converge/Criteria/Criterion.svelte b/ui/src/converge/converge/Criteria/Criterion.svelte
@@ -59,6 +59,7 @@ onMount(async () => {
     hash: criterionHash,
     comments: commentsNumber,
     weight: support / supporters.length,
+    supporters: supporters.length,
     mySupport: mySupport,
     myObjections: objections.filter(item => item.agent.join(",") === client.myPubKey.join(",")).length,
   };
@@ -293,18 +294,23 @@ async function scrollToDiv() {
     <!-- <span style="white-space: pre-line">{ criterion.objections }</span> -->
     {#if support}
       <div style="display: flex; flex-direction: row; font-size: .8em">
-        Support: {Math.round(support / supporters.length * 100)}%
+        <!-- <SvgIcon color="black" icon=faUser size=10/> -->
+        Supporters: {supporters.length}
+      </div>
+      <div style="display: flex; flex-direction: row; font-size: .8em">
+        <!-- <SvgIcon color="black" icon=faCog size=10/> -->
+        Importance: {Math.round(support / supporters.length * 100)}%
       </div>
       <!-- <div style="display: flex; flex-direction: row; font-size: .8em">
         {JSON.stringify(support / supporters.length)} average support
       </div> -->
     {/if}
 
-    {#if commentsNumber && commentsNumber > 0}
+    <!-- {#if commentsNumber && commentsNumber > 0}
       <div style="display: flex; flex-direction: row; font-size: .8em">
         Comments: {commentsNumber}
       </div>
-    {/if}
+    {/if} -->
 
     {#if objections && objections.length > 0}
     <div style="display: flex; flex-direction: row; margin-bottom: 16px; font-size: .8em; color: red;">

diff --git a/ui/src/converge/converge/Criteria/CriterionCommentDetail.svelte b/ui/src/converge/converge/Criteria/CriterionCommentDetail.svelte
@@ -301,7 +301,7 @@ async function deleteCriterionComment() {
     padding: 10px;
     position: relative;
     margin: 6px;
-    width: 100%;
+    width: fit-content;
     margin-left: 0;
   }
 
@@ -321,8 +321,8 @@ async function deleteCriterionComment() {
   }
 
   .comment-text {
-    /* white-space: pre-line; */
-    /* flex: 1; */
+    white-space: pre-line;
+    flex: 1;
     display: block;
   }
 

diff --git a/ui/src/converge/converge/Header.svelte b/ui/src/converge/converge/Header.svelte
@@ -102,7 +102,9 @@
             {:else}
             <a id="logo" class="navbar-brand" on:click={() => navigate("instructions")}>
 
-            <h1 id="converge-title">Converge<img id="minilogo" class="logo-image small" src={Logo} alt="whos-in logo"/><small id="subtitle">&nbsp;for Moss</small></h1>
+            <h1 id="converge-title">Converge<img id="minilogo" class="logo-image small" src={Logo} alt="whos-in logo"/>
+              <!-- <small id="subtitle">&nbsp;for Moss</small> -->
+            </h1>
             </a>
             {/if}
           </div>

diff --git a/ui/src/converge/converge/svgIcons.ts b/ui/src/converge/converge/svgIcons.ts
@@ -22,5 +22,6 @@ export const svgIcons = {
     faBug: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"/></svg>`,
     faBars: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
     faClone: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z"/></svg>`,
-    faPaperclip: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`
+    faPaperclip: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`,
+    mountain: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256c0-141.4 114.6-256 256-256s256 114.6 256 256zM256 32C132.3 32 32 132.3 32 256c0 50.1 14.5 96.6 39.6 136 1.9 2.9 5.5 3.9 8.4 2.1l104.5-68.9c4.1-2.7 9.6-2.7 13.7 0l104.5 68.9c2.9 1.9 6.5.8 8.4-2.1C465.5 352.6 480 306.1 480 256c0-123.7-100.3-224-224-224z"/></svg>`,
   }