Commit 54760155 authored by Daniel J. Ramirez's avatar Daniel J. Ramirez
Browse files

Several style improvements

Improved visibility of buttons in general, including pagination buttons.
Reduced the amount of space used by infobox links.
Other minor changes
parent c2888ab0
......@@ -24,6 +24,7 @@ a {
opacity: .4;
}
#pagination {
margin-top: 48px;
display: flex;
justify-content: space-between;
}
......@@ -154,35 +155,53 @@ a {
border: 2px solid rgba(0, 0, 0, 0.2);
padding: 4px 12px;
background-color: transparent;
transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.btn {
padding: 8px 16px;
text-transform: uppercase;
text-transform: capitalize;
background-color: transparent;
border-radius: 8px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #5c6469;
cursor: pointer;
}
.btn:not(:disabled) {
color: #5068dd;
border-color: #5068dd;
}
.btn:hover:not(:disabled) {
border-color: #2344a2;
color: #2344a2;
}
.btn.primary,
input.btn[type="submit"] {
color: #5068dd;
background-color: #5068dd;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.2);
}
.btn:hover {
border-color: #5068dd;
.btn.primary:hover,
input.btn[type="submit"]:hover {
color: #ffffff;
background-color: #2344a2;
}
.btn.danger:hover {
.btn.danger {
color: #e06572;
border-color: #e06572;
}
.btn.danger:hover {
border-color: rgba(0, 0, 0, 0.2);
background-color: #e06572;
color: #ffffff;
}
.btn.btn-flat {
border: none;
border-radius: 0;
background-color: transparent;
}
.btn.btn-flat:hover {
color: #5068dd;
color: #2344a2;
}
.btn.plain-white {
border-color: rgba(255, 255, 255, 0.4);
......@@ -513,6 +532,10 @@ nav #eelo_links > * {
padding-left: 16px;
padding-right: 16px;
}
#search_form .tt-dropdown-menu .tt-cursor,
#search_form .tt-dropdown-menu .tt-highlight {
font-weight: bold;
}
#search_form.inline-search .tt-dropdown-menu {
padding-left: 52px;
}
......@@ -570,14 +593,20 @@ nav #eelo_links > * {
border-radius: 8px;
border: 2px solid rgba(0, 0, 0, 0.2);
background-color: #eeeeee;
padding-bottom: 16px;
padding-bottom: 8px;
padding-top: 8px;
left: 0;
z-index: 998;
}
#search_form #more_categories > label {
padding: 16px;
padding-bottom: 0;
padding-bottom: 8px;
padding-top: 8px;
white-space: nowrap;
margin-right: 0;
}
#search_form #more_categories > label:hover {
background-color: rgba(0, 0, 0, 0.1);
}
#more_categories_container {
border-left: 1px solid rgba(0, 0, 0, 0.24);
......@@ -802,8 +831,17 @@ nav #eelo_links > * {
width: 100%;
margin-top: 16px;
}
.infobox .footer .links a {
padding-left: 0;
padding-top: 0;
padding-bottom: 16px;
padding-right: 32px;
display: inline-block;
font-size: 14px;
}
.infobox table {
margin-top: 16px;
width: 100%;
}
.infobox table tr {
vertical-align: top;
......
This diff is collapsed.
......@@ -5,11 +5,14 @@
@link-color: #1f6ed7;
@color_accent: #5068dd;
@color_accent__op: white;
@color_accent__dark: #2344a2;
@color_primary: blue;
@color_base: blue;
@color_base-text-hl: #5c6469;
@color_danger: #e06572;
@color_danger__op: white;
@corner-radius: 8px;
......@@ -57,6 +60,7 @@
@color-transition: color .2s ease-in-out;
@border-color-transition: border-color .2s ease-in-out;
@background-color-transition: background-color .2s ease-in-out;
@fill-transition: fill .2s ease-in-out;
@box-shadow-transition: box-shadow .2s ease-in-out;
......
#pagination {
margin-top: @spacing_x-huge;
display: flex;
justify-content: space-between;
}
......
......@@ -169,10 +169,20 @@
}
.footer {
.links a {
padding-left: 0;
padding-top: 0;
padding-bottom: @spacing_large;
padding-right: @spacing_xx-large;
display: inline-block;
font-size: @fontsize_small;
}
}
table { margin-top: @spacing_large; }
table {
margin-top: @spacing_large;
width: 100%;
}
table tr {
vertical-align: top;
......
......@@ -94,6 +94,10 @@
background-color: @grey;
padding-left: @spacing_large;
padding-right: @spacing_large;
& .tt-cursor, & .tt-highlight {
font-weight: bold;
}
}
&.inline-search {
......@@ -159,14 +163,21 @@
border-radius: @corner-radius;
.widget-border();
background-color: @grey;
padding-bottom: @spacing_large;
padding-bottom: @spacing_large / 2;
padding-top: @spacing_large / 2;
left: 0;
z-index: 998;
}
#more_categories > label {
padding: @spacing_large;
padding-bottom: 0;
padding-bottom: @spacing_large / 2;
padding-top: @spacing_large / 2;
white-space: nowrap;
margin-right: 0;
&:hover {
background-color: @dim-color-lighter;
}
}
}
#more_categories_container {
......
......@@ -13,7 +13,7 @@
padding: 4px 12px;
background-color: transparent;
transition: @border-color-transition, @color-transition;
transition: @border-color-transition, @color-transition, @background-color-transition;
}
.btn {
......@@ -21,20 +21,42 @@
padding: 8px 16px;
text-transform: uppercase;
text-transform: capitalize;
background-color: transparent;
border-radius: @corner-radius;
text-align: center;
font-size: @fontsize_medium;
font-weight: bold;
color: @color_base-text-hl;
cursor: pointer;
&.primary, input&[type="submit"] {
&:not(:disabled) {
color: @color_accent;
border-color: @color_accent;
}
&:hover:not(:disabled) {
border-color: @color_accent__dark;
color: @color_accent__dark;
}
&.primary, input&[type="submit"] {
background-color: @color_accent;
color: @color_accent__op;
border-color: @dim-color-light;
&:hover {
color: @color_accent__op;
background-color: @color_accent__dark;
}
}
&.danger {
&:extend(.danger);
color: @color_danger;
border-color: @color_danger;
}
&.danger:hover {
border-color: @dim-color-light;
background-color: @color_danger;
color: @color_danger__op;
}
&:hover { border-color: @color_accent; }
&.danger { &:extend(.danger); }
&.danger:hover { border-color: @color_danger; }
&.btn-flat {
border: none;
......@@ -43,7 +65,7 @@
}
&.btn-flat:hover {
color: @color_accent;
color: @color_accent__dark;
}
&.btn-block { &:extend(.block); }
......
......@@ -39,9 +39,10 @@
<div class="footer">
{% if infobox.urls %}
<div class="links">
<p>{{_("More information:")}}</p>
<bdi>
{% for url in infobox.urls %}
<p>{{ result_link(url.url, url.title, 'btn btn-default btn-block') }}</p>
{{ result_link(url.url, url.title, 'btn btn-flat') }}
{% endfor %}
</bdi>
</div>
......
......@@ -95,7 +95,7 @@
</form>
<form method="{{ method or 'POST' }}" action="{{ url_for('index') }}">
{{ search_form_attrs(pageno + 1) }}
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span> {{ _('next page') }}</button>
<button type="submit" class="btn primary"><span class="glyphicon glyphicon-backward"></span> {{ _('next page') }}</button>
</form>
</div><!-- /#pagination -->
{% endif %}
......
......@@ -481,7 +481,6 @@ def index():
request.form['categories'] = ['general', 'videos', 'images']
else:
request.form['categories'] = [selected_category]
search_data = search(request, settings['redis']['host'])
except Exception as e:
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment