Skip to content

Commit

Permalink
fix: improve reading experience for very wide screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@pdmnyberg
pdmnyberg committed May 23, 2024
1 parent 5af776e commit 49107a0
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 93 deletions.
Binary file added static/img/gwcdt.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 78 additions & 0 deletions static/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.break-all {
word-break: break-all;
}

.annotated-sequence {
display: inline-block;
position: relative;
padding-bottom: 20px;
margin-bottom: 20px;
letter-spacing: 4px;
border-left: solid 2px rgba(0, 0, 0, 0);
border-right: solid 2px rgba(0, 0, 0, 0);
}

.annotated-sequence:first-child {
border-left: solid 2px rgba(0, 0, 0, 1);
}

.annotated-sequence:last-child {
border-right: solid 2px rgba(0, 0, 0, 1);
}

.annotated-sequence::after {
display: block;
content: "";
position: absolute;
top: calc(100% - 20px);
left: 1px;
right: 1px;
height: 5px;
/* background: #900;*/
border-top: solid 1px black;
border-left: solid 1px black;
border-right: solid 1px black;
transition: color 0.1s, background-color 0.1s, border-color 0.1s;
/*border-radius: 0 0 5px 5px;*/
overflow: hidden;
/*color: #fff;*/
}

.annotated-sequence:hover {
color: #666;
border-left: solid 2px rgba(200, 200, 200, 1);
border-right: solid 2px rgba(200, 200, 200, 1);
}

.annotated-sequence::after {
letter-spacing: normal;
content: attr(aria-label);
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
}

.annotated-sequence:hover::after {
color: black;
background-color: #eee;
}

.form-group {
margin-bottom: 1rem;
}

.pagination-label {
position: relative;
display: block;
padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
font-size: var(--bs-pagination-font-size);
text-decoration: none;
background-color: var(--bs-pagination-disabled-bg);
border: var(--bs-pagination-border-width) solid var(--bs-pagination-disabled-bg);
white-space: nowrap;
}

.page-content {
max-width: 90em;
}
112 changes: 21 additions & 91 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,110 +8,40 @@
<link rel="stylesheet" href="/static/vendor/bootstrap-icons.min.css">
<script src="/static/vendor/bootstrap.bundle.min.js"></script>
{% block head %}{% endblock %}
<style>
.break-all {
word-break: break-all;
}
.annotated-sequence {
display: inline-block;
position: relative;
padding-bottom: 20px;
margin-bottom: 20px;
letter-spacing: 4px;
border-left: solid 2px rgba(0, 0, 0, 0);
border-right: solid 2px rgba(0, 0, 0, 0);
}
.annotated-sequence:first-child {
border-left: solid 2px rgba(0, 0, 0, 1);
}
.annotated-sequence:last-child {
border-right: solid 2px rgba(0, 0, 0, 1);
}
.annotated-sequence::after {
display: block;
content: "";
position: absolute;
top: calc(100% - 20px);
left: 1px;
right: 1px;
height: 5px;
/* background: #900;*/
border-top: solid 1px black;
border-left: solid 1px black;
border-right: solid 1px black;
transition: color 0.1s, background-color 0.1s, border-color 0.1s;
/*border-radius: 0 0 5px 5px;*/
overflow: hidden;
/*color: #fff;*/
}
.annotated-sequence:hover {
color: #666;
border-left: solid 2px rgba(200, 200, 200, 1);
border-right: solid 2px rgba(200, 200, 200, 1);
}
.annotated-sequence::after {
letter-spacing: normal;
content: attr(aria-label);
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
}
.annotated-sequence:hover::after {
color: black;
background-color: #eee;
}

.form-group {
margin-bottom: 1rem;
}

.pagination-label {
position: relative;
display: block;
padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
font-size: var(--bs-pagination-font-size);
text-decoration: none;
background-color: var(--bs-pagination-disabled-bg);
border: var(--bs-pagination-border-width) solid var(--bs-pagination-disabled-bg);
white-space: nowrap;
}
</style>
<link href="/static/style.css" rel="stylesheet">
</head>
<body>
<div class="content-main">

<div class="container-fluid px-lg-5">
<div class="container-fluid page-content px-lg-5">
<div class="row">
<div class="col-5 col-md-2 col-lg-1 p-3">
<img src="/static/img/gwcdt.svg" width="100%" height="auto">
<img src="/static/img/gwcdt.png" width="100%" height="auto">
</div>
<div class="col-2 col-md-8 col-lg-10"></div>
<div class="col-5 col-md-2 col-lg-1 p-3">
<img src="/static/img/umea_university.png" width="100%" height="auto">
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light px-3" style="background-color: #f0f0f0">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="/search">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/page/changelog">Changelog</a>
</li>
</ul>
</div>
</nav>
</div>

<nav class="navbar navbar-expand-lg navbar-light px-2 px-lg-5" style="background-color: #f0f0f0">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="/search">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/page/changelog">Changelog</a>
</li>
</ul>
</div>
</nav>
{% block content %}
</div>
{% block content %}
{% endblock %}
</body>
</html>
2 changes: 1 addition & 1 deletion templates/form.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block title %}Search form{% endblock %}
{% block content %}
<div class="container-fluid px-lg-5 my-3">
<div class="container-fluid page-content px-lg-5 my-3">
<h2>Search</h2>
<form
action="/search"
Expand Down
2 changes: 1 addition & 1 deletion templates/page.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block title %}Vector oligo search: {{ title }}{% endblock %}
{% block content %}
<div class="container-fluid px-lg-5 py-3">
<div class="container-fluid page-content px-lg-5 py-3">
{% autoescape false %}
{{ content }}
{% endautoescape %}
Expand Down

0 comments on commit 49107a0

Please sign in to comment.