Improvements to appearance
This commit is contained in:
Marcin Kurczewski
parent
672185f959
commit
d2695e635c
6 changed files with 75 additions and 26 deletions
|
|
@ -48,12 +48,12 @@ h3 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #298;
|
||||
color: #24A2DD;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #4ba;
|
||||
color: #34B2ED;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
@ -70,13 +70,13 @@ hr {
|
|||
}
|
||||
.big-button.active {
|
||||
background: #f7fbfc;
|
||||
color: #8ba !important;
|
||||
color: #24A2DD !important;
|
||||
}
|
||||
|
||||
.big-button:focus,
|
||||
.big-button:hover {
|
||||
background: #f3f7f8;
|
||||
color: #7a9 !important;
|
||||
background: #f7fbfc;
|
||||
color: #34B2ED !important;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,10 +35,11 @@
|
|||
textarea,
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
padding: 2px 4px;
|
||||
padding: 3px 6px 4px 6px;
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 0 1px 2px -1px #e0e0e0 inset;
|
||||
background: #fafafa;
|
||||
font-family: monospace;
|
||||
font-family: 'Inconsolata', monospace;
|
||||
font-size: 17px;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
|
|
@ -51,9 +52,12 @@ input:-webkit-autofill {
|
|||
|
||||
button,
|
||||
input[type=button] {
|
||||
padding: 0.1em 0.5em;
|
||||
border: 1px solid #eee;
|
||||
background: #eee;
|
||||
padding: 2px 15px 3px 15px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 1px 1px 0 #e5e5e5;
|
||||
background: linear-gradient(#f5f5f5, #e5e5e5);
|
||||
color: #444;
|
||||
text-shadow: 0 1px 1px #fafafa;
|
||||
font-family: 'Droid Sans', sans-serif;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
|
@ -63,7 +67,7 @@ input[type=button]:not(:disabled) {
|
|||
}
|
||||
button:not(:disabled):hover,
|
||||
input[type=button]:not(:disabled):hover {
|
||||
background: #f5f5f5;
|
||||
background: linear-gradient(#fafafa, #eaeaea);
|
||||
}
|
||||
button:disabled {
|
||||
color: gray;
|
||||
|
|
@ -71,11 +75,12 @@ button:disabled {
|
|||
|
||||
button.highlight,
|
||||
input[type=button].highlight {
|
||||
background: #ad5;
|
||||
background: linear-gradient(#74D2FD, #64C2ED);
|
||||
text-shadow: 0 1px 1px #8ff;
|
||||
}
|
||||
button:not(:disabled):hover.highlight,
|
||||
input[type=button]:not(:disabled):hover.highlight {
|
||||
background: #dfa;
|
||||
background: linear-gradient(#84E2FF, #74D2FD);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
|
|
@ -91,8 +96,8 @@ input::-moz-focus-inner {
|
|||
button:focus,
|
||||
textarea:focus,
|
||||
input:not(.tag-real-input):focus {
|
||||
box-shadow: 0 0 0 1px #5da inset;
|
||||
border-color: #5da;
|
||||
box-shadow: 0 0 0 1px #64C2ED inset;
|
||||
border-color: #64C2ED;
|
||||
}
|
||||
|
||||
input[type=radio],
|
||||
|
|
@ -180,7 +185,7 @@ input[type=checkbox]:checked + label:before {
|
|||
list-style-type: none;
|
||||
padding: 0 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 2px solid #5da;
|
||||
border: 2px solid #64C2ED;
|
||||
background: white;
|
||||
display: block !important;
|
||||
text-align: left;
|
||||
|
|
@ -192,5 +197,5 @@ input[type=checkbox]:checked + label:before {
|
|||
}
|
||||
|
||||
.autocomplete li.active {
|
||||
background: #5da;
|
||||
background: #64C2ED;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.post-list form input,
|
||||
.post-list form button {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.post-list .wrapper {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
|
|
@ -9,26 +14,39 @@
|
|||
|
||||
.post-list .search {
|
||||
margin-bottom: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
.post-list .search input {
|
||||
max-width: 20em;
|
||||
}
|
||||
.post-list .search .mass-tag-wrapper {
|
||||
float: right;
|
||||
}
|
||||
.post-list .search .mass-tag-wrapper p {
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.post-list ul {
|
||||
.post-list .posts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.post-list ul.posts .post-small {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-small {
|
||||
position: relative;
|
||||
}
|
||||
.post-small a {
|
||||
display: inline-block;
|
||||
margin: 0.4em;
|
||||
display: block;
|
||||
margin: 0.2em;
|
||||
border: 1px solid #999;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
/build -->
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Sans:400,700"/>
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Inconsolata" type="text/css">
|
||||
<!-- build:remove -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/core.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/css/forms.css"/>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ App.Presenters.PostListPresenter = function(
|
|||
reinit(params, function() {});
|
||||
});
|
||||
});
|
||||
|
||||
jQuery(window).on('resize', windowResized);
|
||||
}
|
||||
|
||||
function reinit(params, loaded) {
|
||||
|
|
@ -61,6 +63,7 @@ App.Presenters.PostListPresenter = function(
|
|||
|
||||
function deinit() {
|
||||
pagerPresenter.deinit();
|
||||
jQuery(window).off('resize', windowResized);
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
|
@ -80,6 +83,8 @@ App.Presenters.PostListPresenter = function(
|
|||
keyboard.keyup('q', function() {
|
||||
$searchInput.eq(0).focus().select();
|
||||
});
|
||||
|
||||
windowResized();
|
||||
}
|
||||
|
||||
function softRender() {
|
||||
|
|
@ -107,6 +112,7 @@ App.Presenters.PostListPresenter = function(
|
|||
softRenderPost($post);
|
||||
$target.append($post);
|
||||
});
|
||||
windowResized();
|
||||
}
|
||||
|
||||
function renderPost(post) {
|
||||
|
|
@ -136,6 +142,24 @@ App.Presenters.PostListPresenter = function(
|
|||
$post.find('.action button').text(_.contains(classes, 'tagged') ? 'Tagged' : 'Untagged').unbind('click').click(postTagButtonClicked);
|
||||
}
|
||||
|
||||
function windowResized() {
|
||||
var $list = $el.find('ul.posts');
|
||||
var $posts = $list.find('.post-small');
|
||||
var $firstPost = $posts.eq(0);
|
||||
var $lastPost = $firstPost;
|
||||
for (var i = 1; i < $posts.length; i ++) {
|
||||
$lastPost = $posts.eq(i-1);
|
||||
if ($posts.eq(i).offset().left < $lastPost.offset().left) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($firstPost.length === 0) {
|
||||
return;
|
||||
}
|
||||
$el.find('.search').css('margin-left', $firstPost.offset().left - $list.offset().left);
|
||||
$el.find('.search').css('margin-right', $list.width() - ($lastPost.offset().left - $list.offset().left + $lastPost.width()));
|
||||
}
|
||||
|
||||
function postTagButtonClicked(e) {
|
||||
e.preventDefault();
|
||||
var $post = jQuery(e.target).parents('li');
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
<button type="submit" name="search">Search</button>
|
||||
|
||||
<% if (privileges.canMassTag) { %>
|
||||
<button name="mass-tag">Mass tag</button>
|
||||
<div class="mass-tag-wrapper">
|
||||
<p class="mass-tag-info">Tagging with <span class="mass-tag"><%= massTag %></span></p>
|
||||
<button name="mass-tag">Mass tag</button>
|
||||
</div>
|
||||
<% } %>
|
||||
</form>
|
||||
|
||||
<p class="mass-tag-info">Tagging with <span class="mass-tag"><%= massTag %></span></p>
|
||||
|
||||
<div class="pagination-target">
|
||||
<div class="wrapper">
|
||||
<ul class="posts">
|
||||
|
|
|
|||
Loading…
Reference in a new issue