Improve usability on mobile

This commit is contained in:
Daoud Clarke 2023-11-11 21:01:50 +00:00
parent f62b8c3cf2
commit 7b19273fe2
5 changed files with 30 additions and 67 deletions

View file

@ -117,7 +117,7 @@ body {
.results { .results {
max-width: 100%; max-width: 100%;
list-style-type: none; list-style-type: none;
padding: 10px; padding: 0;
} }
.result { .result {
@ -125,7 +125,6 @@ body {
} }
.result-container { .result-container {
/*display: block;*/
text-decoration: none; text-decoration: none;
color: var(--dark-color); color: var(--dark-color);
padding: 15px; padding: 15px;
@ -238,74 +237,26 @@ a {
text-decoration: none; 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 { .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 { .validated {
background: lightgreen; background-color: green !important;
opacity: 100%;
} }
.curate-add {
margin-bottom: 0;
}
.modal { .modal {
/*display: none; !* Hidden by default *!*/ /*display: none; !* Hidden by default *!*/
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
@ -360,6 +311,14 @@ a {
transition: background-color 200ms ease-in-out; 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 { .button:hover {
background-color: var(--dark-color); background-color: var(--dark-color);
} }

View file

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

View file

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

View file

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

View file

@ -1,11 +1,6 @@
{% load result_filters %} {% load result_filters %}
<li class="result" is="mwmbl-result"> <li class="result" is="mwmbl-result">
<div class="result-container"> <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"> <div class="result-link">
<a href="{{result.url}}"> <a href="{{result.url}}">
<p class='link'>{{result.url}}</p> <p class='link'>{{result.url}}</p>
@ -13,5 +8,10 @@
</a> </a>
<p class='extract'>{{result.extract|strengthen}}</p> <p class='extract'>{{result.extract|strengthen}}</p>
</div> </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> </div>
</li> </li>