beenull/mwmbl
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #126 from mwmbl/mobile-adjustments

Browse source 
Mobile adjustments
This commit is contained in:
Daoud Clarke 2023-11-11 21:03:03 +00:00 committed by GitHub
parent 5c29792d14 7b19273fe2
commit 8790d758a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
front-end/assets/css/global.css
View file

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

2
front-end/assets/css/theme.css
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;

1
front-end/src/components/organisms/results.js
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",
}); });
} }

1
mwmbl/templates/home.html
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 %}

8
mwmbl/templates/index.html
View file

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

12
mwmbl/templates/result.html
View file

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