Improve usability on mobile

front-end/assets/css/global.css

@@ -117,7 +117,7 @@ body {
 .results {
   max-width: 100%;
   list-style-type: none;
-  padding: 10px;
+  padding: 0;
 }
 
 .result {
@@ -125,7 +125,6 @@ body {
 }
 
 .result-container {
-  /*display: block;*/
   text-decoration: none;
   color: var(--dark-color);
   padding: 15px;
@@ -238,74 +237,26 @@ a {
   text-decoration: none;
 }
 
-.result-container {
-  /*display: flex;*/
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-/*.result-link {*/
-/*  background: white;*/
-/*}*/
-
-.result-link,.curation-buttons {
-  /*padding: 20px;*/
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .curation-buttons {
-  z-index: 10;
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 20px;
+  grid-auto-columns: max-content;
 }
 
-.curation-button {
+.result-container .button {
-  opacity: 0;
+  background-color: var(--dark-gray-color);
-  color: inherit;
+  color: white;
-  border: none;
+  padding: 5px 10px;
-  padding: 0;
+  margin: 0;
-  font: inherit;
+  font-size: var(--small-font-size);
-  outline: inherit;
+  font-weight: var(--bold-font-weight);
-  cursor: pointer;
-
-  background: darkgrey;
-  box-shadow: 3px 3px 3px lightgrey;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex; /* or inline-flex */
-  align-items: center;
-  justify-content: center;
-  margin: 10px 0 10px 0;
-}
-
-.result:hover .curation-button {
-  opacity: 70%;
-  transition:
-    opacity 200ms ease-in-out;
-}
-
-.result:hover .curation-button:hover {
-  opacity: 100%;
-}
-
-.curate-delete {
-  margin-top: 0;
 }
 
 .validated {
-  background: lightgreen;
+  background-color: green !important;
-  opacity: 100%;
 }
 
-.curate-add {
-  margin-bottom: 0;
-}
-
-
 .modal {
   /*display: none; !* Hidden by default *!*/
   position: fixed; /* Stay in place */
@@ -360,6 +311,14 @@ a {
     transition: background-color 200ms ease-in-out;
 }
 
+@media screen and (max-width: 600px) {
+  .button {
+    padding: 5px 10px;
+    font-size: var(--small-font-size);
+    margin: 5px;
+  }
+}
+
 .button:hover {
     background-color: var(--dark-color);
 }

front-end/assets/css/theme.css

@@ -7,9 +7,11 @@
   --primary-color: #185ADB;
   --gray-color: #EEEEEE;
   --light-color: #F8F8F8;
+  --dark-gray-color: #767676;
 
   /* Fonts: */
   --regular-font: 'Inter', sans-serif;
+  --small-font-size: 12px;
   --default-font-size: 16px;
   --default-font-weight: 400;
   --bold-font-weight: 700;

front-end/src/components/organisms/results.js

@@ -116,6 +116,7 @@ class ResultsHandler {
       const sortable = new Sortable(this.results, {
         "onStart": this.__sortableActivate.bind(this),
         "onEnd": this.__sortableDeactivate.bind(this),
+        "handle": ".handle",
       });
     }
 

mwmbl/templates/home.html

@@ -2,6 +2,7 @@
 {%  include "title.html" %}
 <div class="main">
   {% if query %}
+    <button class="button curate-add" is="mwmbl-add-button">＋ Add new</button>
     {% if results %}
       <ul class='results'>
         {% for result in results %}

mwmbl/templates/result.html

@@ -1,11 +1,6 @@
 {% load result_filters %}
 <li class="result" is="mwmbl-result">
   <div class="result-container">
-    <div class="curation-buttons">
-      <button class="curation-button curate-delete" is="mwmbl-delete-button">✕</button>
-      <button class="curation-button curate-approve" is="mwmbl-validate-button">✓</button>
-      <button class="curation-button curate-add" is="mwmbl-add-button">＋</button>
-    </div>
     <div class="result-link">
       <a href="{{result.url}}">
         <p class='link'>{{result.url}}</p>
@@ -13,5 +8,10 @@
       </a>
       <p class='extract'>{{result.extract|strengthen}}</p>
     </div>
+    <div class="curation-buttons">
+      <span class="button handle">↕ Move</span>
+      <button class="button curate-delete" is="mwmbl-delete-button">✕ Delete</button>
+      <button class="button curate-approve" is="mwmbl-validate-button">✓ Looks good</button>
+    </div>
   </div>
 </li>