diff --git a/front-end/assets/css/global.css b/front-end/assets/css/global.css
index fba40fd..5e3a4c5 100644
--- a/front-end/assets/css/global.css
+++ b/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 {
- opacity: 0;
- color: inherit;
- border: none;
- padding: 0;
- font: inherit;
- outline: inherit;
- 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;
+.result-container .button {
+ background-color: var(--dark-gray-color);
+ color: white;
+ padding: 5px 10px;
+ margin: 0;
+ font-size: var(--small-font-size);
+ font-weight: var(--bold-font-weight);
}
.validated {
- background: lightgreen;
- opacity: 100%;
+ background-color: green !important;
}
-.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);
}
diff --git a/front-end/assets/css/theme.css b/front-end/assets/css/theme.css
index 3cb8a7f..33f6df7 100644
--- a/front-end/assets/css/theme.css
+++ b/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;
diff --git a/front-end/src/components/organisms/results.js b/front-end/src/components/organisms/results.js
index f2d2e9c..cfeab6b 100644
--- a/front-end/src/components/organisms/results.js
+++ b/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",
});
}
diff --git a/mwmbl/templates/home.html b/mwmbl/templates/home.html
index c905806..3620c94 100644
--- a/mwmbl/templates/home.html
+++ b/mwmbl/templates/home.html
@@ -2,6 +2,7 @@
{% include "title.html" %}
{% if query %}
+
{% if results %}
{% for result in results %}
diff --git a/mwmbl/templates/result.html b/mwmbl/templates/result.html
index 9775aa8..6b5a634 100644
--- a/mwmbl/templates/result.html
+++ b/mwmbl/templates/result.html
@@ -1,11 +1,6 @@
{% load result_filters %}
-
-
-
-
-
-
+
+ ↕ Move
+
+
+