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 %}