make plugins page responsive

This commit is contained in:
Muhammad Labeeb 2025-02-27 17:02:52 +05:00 committed by Régis Behmo
parent a622d7fc6a
commit 1295be0aee
2 changed files with 71 additions and 39 deletions

View File

@ -166,6 +166,7 @@ main {
.page-button {
display: flex;
justify-content: center;
margin-bottom: 1.25em;
@media (max-width: 600px) {
width: 100%;
justify-content: end;
@ -195,7 +196,7 @@ main {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 1.25em 0em;
margin-bottom: 1.25em;
.search-input {
font-size: 1em;
@ -433,33 +434,62 @@ main {
margin-bottom: 1em;
align-items: center;
height: 3em;
max-width: 60em;
@media (max-width: 1100px) {
flex-direction: column;
height: 5em;
align-items: start;
justify-content: space-between;
}
div {
height: 100%;
font-weight: 600;
width: 25em;
}
flex: 1;
input {
border: 1px solid $gray-3;
border: 1px solid #888;
padding: 0.75em;
border-radius: 0.5em;
font-size: 1em;
margin-left: 1em;
width: 25em;
@media (max-width: 1100px) {
flex: 0;
}
}
.config-forms {
display: flex;
button {
width: 4em;
height: 2em;
background-color: $light-blue;
border: none;
border-radius: 0.5em;
color: white;
font-size: 1em;
cursor: pointer;
margin: 0em 0.5em;
@media (max-width: 700px) {
&:first-child {
width: 50%;
}
}
form {
display: flex;
align-items: center;
input {
border: 1px solid $gray-3;
border: 1px solid #888;
padding: 0.75em;
border-radius: 0.5em;
font-size: 1em;
margin-left: 1em;
width: 25em;
@media (max-width: 700px) {
width: 80%;
}
}
button {
width: 4em;
height: 2em;
background-color: $light-blue;
border: none;
border-radius: 0.5em;
color: white;
font-size: 1em;
cursor: pointer;
margin: 0em 0.5em;
}
}
}
}
}

View File

@ -2,25 +2,27 @@
{% for key, value in config.items() %}
<div class="item">
<div>{{ key }}:</div>
<form
action="{{ url_for('config_set', name=key, next=url_for('plugin', name=plugin_name)) }}"
method="POST"
oninput="this.querySelector('button[type=submit]').disabled = false">
<input type="hidden" name="plugin_name" value="{{ plugin_name }}" size="50"/>
{% if value is boolean %}
<input type="checkbox" name="value" {% if value %}checked{% endif %} />
{% else %}
<input type="text" name="value" value="{{ value }}" size="50"/>
{% endif %}
{# TODO how to display lists? #}
<button type="submit" disabled>update</button>
</form>
<div class="config-forms">
<form
action="{{ url_for('config_set', name=key, next=url_for('plugin', name=plugin_name)) }}"
method="POST"
oninput="this.querySelector('button[type=submit]').disabled = false">
<input type="hidden" name="plugin_name" value="{{ plugin_name }}" size="50"/>
{% if value is boolean %}
<input type="checkbox" name="value" {% if value %}checked{% endif %} />
{% else %}
<input type="text" name="value" value="{{ value }}" size="50"/>
{% endif %}
{# TODO how to display lists? #}
<button type="submit" disabled>update</button>
</form>
{% if key in user_config %}
<form action="{{ url_for('config_unset', name=key, next=url_for('plugin', name=plugin_name)) }}" method="POST">
<button type="submit">unset</button>
</form>
{% endif %}
{% if key in user_config %}
<form action="{{ url_for('config_unset', name=key, next=url_for('plugin', name=plugin_name)) }}" method="POST">
<button type="submit">unset</button>
</form>
{% endif %}
</div>
</div>
{% endfor %}
</div>