Merge pull request #126 from mwmbl/mobile-adjustments

Mobile adjustments
This commit is contained in:
Daoud Clarke 2023-11-11 21:03:03 +00:00 committed by GitHub
commit 8790d758a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 65 deletions

View file

@ -21,6 +21,12 @@ body {
margin: 25px;
}
@media screen and (max-width: 600px) {
.branding {
display: none;
}
}
.brand-title {
text-align: center;
font-weight: var(--black-font-weight);
@ -111,15 +117,14 @@ body {
.results {
max-width: 100%;
list-style-type: none;
padding: 10px;
padding: 0;
}
.result {
min-height: 120px;
}
.result a {
display: block;
.result-container {
text-decoration: none;
color: var(--dark-color);
padding: 15px;
@ -131,11 +136,11 @@ body {
outline 100ms ease-in-out;
}
.result:hover a, .result a:focus {
.result-container:hover,.result-container:focus {
background-color: var(--gray-color);
}
.result a:focus {
.result-container:focus {
outline: 3px solid var(--primary-color);
}
@ -229,65 +234,29 @@ body {
a {
font-weight: var(--bold-font-weight);
color: var(--primary-color);
text-decoration: underline;
}
.result-container {
display: flex;
}
.result-link a {
background: white;
text-decoration: none;
}
.curation-buttons {
padding: 20px;
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 */
@ -342,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

@ -45,11 +45,9 @@
<body>
<mwmbl-app></mwmbl-app>
<header class="search-menu compact">
<a href="/">
<div class="branding">
<a href="/" class="branding">
<img class="brand-icon" src="/static/images/logo.svg" width="40" height="40" alt="mwmbl logo">
<span class="brand-title">Mwmbl</span>
</div>
</a>
<form class="search-bar">
<i class="ph-magnifying-glass-bold"></i>

View file

@ -1,17 +1,17 @@
{% 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>
<p class='title'>{{result.title|strengthen}}</p>
<p class='extract'>{{result.extract|strengthen}}</p>
</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>