changeset 66d033fe3182 in bugs.tryton.org:default
details: https://hg.tryton.org/bugs.tryton.org?cmd=changeset;node=66d033fe3182
description:
Improve layout on small screens
review304551002
diffstat:
html/issue.item.edit.html | 1 -
html/issue.item.html | 2 ++
html/issue.search.html | 2 +-
html/layout/banner.html | 11 +++++++----
html/layout/footer.html | 2 ++
html/layout/navigation.html | 2 +-
html/layout/page.html | 6 ++++--
static/style.css | 25 +++++++++++++++++++++++--
8 files changed, 40 insertions(+), 11 deletions(-)
diffs (164 lines):
diff -r 3a0b42196f4e -r 66d033fe3182 html/issue.item.edit.html
--- a/html/issue.item.edit.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/issue.item.edit.html Wed Oct 21 15:50:55 2020 +0200
@@ -7,7 +7,6 @@
{% endif -%}
name="itemSynopsis"
enctype="multipart/form-data"
- class="col-xl-6"
>
<fieldset>
<dl class="row row-cols-1 row-cols-lg-2 no-gutters">
diff -r 3a0b42196f4e -r 66d033fe3182 html/issue.item.html
--- a/html/issue.item.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/issue.item.html Wed Oct 21 15:50:55 2020 +0200
@@ -55,7 +55,9 @@
{% if context.is_view_ok() %}
{% if context.is_edit_ok() %}
+ <div class="container ml-0">
{% include 'issue.item.edit.html' %}
+ </div>
{% else %}
{% include 'issue.item.readonly.html' %}
{% endif %}
diff -r 3a0b42196f4e -r 66d033fe3182 html/issue.search.html
--- a/html/issue.search.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/issue.search.html Wed Oct 21 15:50:55 2020 +0200
@@ -41,7 +41,7 @@
<form method="GET" name="itemSynopsis" action="{{ request.classname }}">
-<table class="form">
+<table class="form table-responsive">
<tr>
<th class="header"> </th>
diff -r 3a0b42196f4e -r 66d033fe3182 html/layout/banner.html
--- a/html/layout/banner.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/layout/banner.html Wed Oct 21 15:50:55 2020 +0200
@@ -1,7 +1,10 @@
-<div class="navbar navbar-light bg-light">
+<div class="navbar sticky-top navbar-light bg-light">
<a href="{{ request.base }}" class='navbar-brand'>
<i class='icon-home'></i> {{ config.TRACKER_NAME|u }}
</a>
+ <button class="navbar-toggler collapsed d-md-none" type="button"
data-toggle="collapse" data-target="#navigation" aria-controls="navigation"
aria-expanded="false" aria-label="{% trans %}Toggle navigation{% endtrans %}">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<form name="searchform" method="get" action="issue" class='form-inline my-2
my-lg-0 navbar-search'>
<input type="hidden" name="@columns" value="{{ columns_showall }}"/>
<input type="hidden" name="@sort" value="-activity">
@@ -9,12 +12,12 @@
<input type="hidden" name="@filter" value="status">
<input type="hidden" name="status" value="{{ status_notresolved }}"/>
<input class="form-control form-control-sm mr-sm-2 search-query"
id="search-text" type="search" name="@search_text">
- <input class="btn btn-sm btn-outline-success mr-sm-2 my-2 my-sm-0"
type="submit" value="{% trans %}Search{% endtrans %}" name="submit">
- <div class="form-check mr-sm-2">
+ <input class="btn btn-sm btn-outline-success mr-2 my-2 my-sm-0"
type="submit" value="{% trans %}Search{% endtrans %}" name="submit">
+ <div class="form-check mr-2 w-auto">
<input class="form-check-input" type="radio" name="status"
id="status_notresolved" value="{{ status_notresolved }}" checked/>
<label class="form-check-label" for="status_notresolved">{% trans
%}Open{% endtrans %}</label>
</div>
- <div class="form-check">
+ <div class="form-check w-auto">
<input class="form-check-input" type="radio" name="status"
id="status_all" value=""/>
<label class="form-check-label" for="status_all">{% trans %}All{%
endtrans %}</label>
</div>
diff -r 3a0b42196f4e -r 66d033fe3182 html/layout/footer.html
--- a/html/layout/footer.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/layout/footer.html Wed Oct 21 15:50:55 2020 +0200
@@ -1,8 +1,10 @@
<footer>
<div class='container-fluid'>
+ <div class="col-md-9 col-lg-10 ml-sm-auto">
<hr>
{% trans %}A{% endtrans %}
<a href='http://www.roundup-tracker.org/'>{% trans %}roundup{% endtrans
%}</a>
{% trans %}production{% endtrans %}.
+ </div>
</div>
</footer>
diff -r 3a0b42196f4e -r 66d033fe3182 html/layout/navigation.html
--- a/html/layout/navigation.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/layout/navigation.html Wed Oct 21 15:50:55 2020 +0200
@@ -42,7 +42,7 @@
<div class="form-group">
<input type="hidden" name="@type" value="issue">
<input type="hidden" name="@action" value="show">
- <input class="form-control form-control-sm col-2" type="text"
name="@number">
+ <input class="form-control form-control-sm d-inline-block w-25"
type="text" name="@number">
<input class="btn btn-sm btn-outline-secondary" type="submit"
value="{% trans %}Show issue{% endtrans %}">
</div>
</form>
diff -r 3a0b42196f4e -r 66d033fe3182 html/layout/page.html
--- a/html/layout/page.html Wed Oct 21 11:35:02 2020 +0200
+++ b/html/layout/page.html Wed Oct 21 15:50:55 2020 +0200
@@ -21,13 +21,15 @@
{% block page_content %}
<div class='container-fluid'>
<div class='row'>
- <div class='col-3 col-lg-2 navigation'>
+ <div class='col-md-3 col-lg-2 d-md-block navigation collapse'
id="navigation">
+ <div class="navigation-sticky">
{% block leftnav %}
{% include 'layout/navigation.html' %}
{% endblock %}
+ </div>
</div>
- <div class='col-9 col-lg-10'>
+ <div class='col-md-9 col-lg-10 ml-sm-auto'>
<div class='pb-2 mb-2 border-bottom'>
<h3>{% block page_header %} {% endblock %}</h3>
{% if options.error_message %}
diff -r 3a0b42196f4e -r 66d033fe3182 static/style.css
--- a/static/style.css Wed Oct 21 11:35:02 2020 +0200
+++ b/static/style.css Wed Oct 21 15:50:55 2020 +0200
@@ -17,11 +17,9 @@
}
.navbar-light {
- border-radius: 4px;
border: 1px solid #d4d4d4;
background-image: linear-gradient(to bottom,#ffffff,#e8e8e8);
background-repeat: repeat-x;
- margin: 20px 15px;
padding: .3rem 1rem;
}
@@ -48,7 +46,22 @@
.vspace-five { margin-top: 5em; }
.navigation {
+ background-color: white;
border-right: 1px solid #ddd;
+ position: fixed;
+ z-index: 100;
+}
+
+.navigation-sticky {
+ height: calc(100vh - 48px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: sticky;
+ top: 0;
+}
+
+.navigation-sticky > :last-child {
+ margin-bottom: 100px;
}
.table-condensed td, .table-condensed th {
@@ -102,3 +115,11 @@
border-width: 1.5px;
border-color: #6e747a;
}
+
+@media (max-width: 767.98px) {
+ .history {
+ display: block;
+ width: 100%;
+ overflow-x: auto;
+ }
+}
