Merge pull request #126 from mwmbl/mobile-adjustments
Mobile adjustments
This commit is contained in:
Daoud Clarke
GitHub
commit
8790d758a3
6 changed files with 44 additions and 65 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -116,6 +116,7 @@ class ResultsHandler {
|
|||
const sortable = new Sortable(this.results, {
|
||||
"onStart": this.__sortableActivate.bind(this),
|
||||
"onEnd": this.__sortableDeactivate.bind(this),
|
||||
"handle": ".handle",
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue