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 {
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);
}

View file

@ -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;

View file

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

View file

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

View file

@ -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>