ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to appearance

Browse source
This commit is contained in:
Marcin Kurczewski 2014-10-10 14:02:28 +02:00
parent 672185f959
commit d2695e635c
6 changed files with 75 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public_html/css/core.css
View file

@ -48,12 +48,12 @@ h3 {
} }
a { a {
color: #298; color: #24A2DD;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #4ba; color: #34B2ED;
} }
hr { hr {
@ -70,13 +70,13 @@ hr {
} }
.big-button.active { .big-button.active {
background: #f7fbfc; background: #f7fbfc;
color: #8ba !important; color: #24A2DD !important;
} }
.big-button:focus, .big-button:focus,
.big-button:hover { .big-button:hover {
background: #f3f7f8; background: #f7fbfc;
color: #7a9 !important; color: #34B2ED !important;
outline: 0; outline: 0;
} }

29
public_html/css/forms.css
View file

@ -35,10 +35,11 @@
textarea, textarea,
input[type=text], input[type=text],
input[type=password] { input[type=password] {
padding: 2px 4px; padding: 3px 6px 4px 6px;
border: 1px solid #eee; border: 1px solid #eee;
box-shadow: 0 1px 2px -1px #e0e0e0 inset;
background: #fafafa; background: #fafafa;
font-family: monospace; font-family: 'Inconsolata', monospace;
font-size: 17px; font-size: 17px;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
@ -51,9 +52,12 @@ input:-webkit-autofill {
button, button,
input[type=button] { input[type=button] {
padding: 0.1em 0.5em; padding: 2px 15px 3px 15px;
border: 1px solid #eee; border: 1px solid #ccc;
background: #eee; 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-family: 'Droid Sans', sans-serif;
font-size: 17px; font-size: 17px;
} }
@ -63,7 +67,7 @@ input[type=button]:not(:disabled) {
} }
button:not(:disabled):hover, button:not(:disabled):hover,
input[type=button]:not(:disabled):hover { input[type=button]:not(:disabled):hover {
background: #f5f5f5; background: linear-gradient(#fafafa, #eaeaea);
} }
button:disabled { button:disabled {
color: gray; color: gray;
@ -71,11 +75,12 @@ button:disabled {
button.highlight, button.highlight,
input[type=button].highlight { input[type=button].highlight {
background: #ad5; background: linear-gradient(#74D2FD, #64C2ED);
text-shadow: 0 1px 1px #8ff;
} }
button:not(:disabled):hover.highlight, button:not(:disabled):hover.highlight,
input[type=button]:not(:disabled):hover.highlight { input[type=button]:not(:disabled):hover.highlight {
background: #dfa; background: linear-gradient(#84E2FF, #74D2FD);
} }
button:focus, button:focus,
@ -91,8 +96,8 @@ input::-moz-focus-inner {
button:focus, button:focus,
textarea:focus, textarea:focus,
input:not(.tag-real-input):focus { input:not(.tag-real-input):focus {
box-shadow: 0 0 0 1px #5da inset; box-shadow: 0 0 0 1px #64C2ED inset;
border-color: #5da; border-color: #64C2ED;
} }
input[type=radio], input[type=radio],
@ -180,7 +185,7 @@ input[type=checkbox]:checked + label:before {
list-style-type: none; list-style-type: none;
padding: 0 0 !important; padding: 0 0 !important;
margin: 0 !important; margin: 0 !important;
border: 2px solid #5da; border: 2px solid #64C2ED;
background: white; background: white;
display: block !important; display: block !important;
text-align: left; text-align: left;
@ -192,5 +197,5 @@ input[type=checkbox]:checked + label:before {
} }
.autocomplete li.active { .autocomplete li.active {
background: #5da; background: #64C2ED;
} }

30
public_html/css/post-list.css
View file

@ -2,6 +2,11 @@
text-align: center; text-align: center;
} }
.post-list form input,
.post-list form button {
font-size: 15px;
}
.post-list .wrapper { .post-list .wrapper {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
@ -9,26 +14,39 @@
.post-list .search { .post-list .search {
margin-bottom: 1em; margin-bottom: 1em;
text-align: left;
} }
.post-list .search input { .post-list .search input {
max-width: 20em; 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; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; }
flex-wrap: wrap; .post-list ul.posts .post-small {
justify-content: center; margin: 0;
padding: 0;
} }
.post-small { .post-small {
position: relative; position: relative;
} }
.post-small a { .post-small a {
display: inline-block; display: block;
margin: 0.4em; margin: 0.2em;
border: 1px solid #999; border: 1px solid #999;
z-index: 1; z-index: 1;
position: relative; position: relative;

1
public_html/index.html
View file

@ -21,6 +21,7 @@
/build --> /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="//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" 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 --> <!-- build:remove -->
<link rel="stylesheet" type="text/css" href="/css/core.css"/> <link rel="stylesheet" type="text/css" href="/css/core.css"/>
<link rel="stylesheet" type="text/css" href="/css/forms.css"/> <link rel="stylesheet" type="text/css" href="/css/forms.css"/>

24
public_html/js/Presenters/PostListPresenter.js
View file

@ -51,6 +51,8 @@ App.Presenters.PostListPresenter = function(
reinit(params, function() {}); reinit(params, function() {});
}); });
}); });
jQuery(window).on('resize', windowResized);
} }
function reinit(params, loaded) { function reinit(params, loaded) {
@ -61,6 +63,7 @@ App.Presenters.PostListPresenter = function(
function deinit() { function deinit() {
pagerPresenter.deinit(); pagerPresenter.deinit();
jQuery(window).off('resize', windowResized);
} }
function render() { function render() {
@ -80,6 +83,8 @@ App.Presenters.PostListPresenter = function(
keyboard.keyup('q', function() { keyboard.keyup('q', function() {
$searchInput.eq(0).focus().select(); $searchInput.eq(0).focus().select();
}); });
windowResized();
} }
function softRender() { function softRender() {
@ -107,6 +112,7 @@ App.Presenters.PostListPresenter = function(
softRenderPost($post); softRenderPost($post);
$target.append($post); $target.append($post);
}); });
windowResized();
} }
function renderPost(post) { 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); $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) { function postTagButtonClicked(e) {
e.preventDefault(); e.preventDefault();
var $post = jQuery(e.target).parents('li'); var $post = jQuery(e.target).parents('li');

7
public_html/templates/post-list.tpl
View file

@ -4,12 +4,13 @@
<button type="submit" name="search">Search</button> <button type="submit" name="search">Search</button>
<% if (privileges.canMassTag) { %> <% 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> </form>
<p class="mass-tag-info">Tagging with <span class="mass-tag"><%= massTag %></span></p>
<div class="pagination-target"> <div class="pagination-target">
<div class="wrapper"> <div class="wrapper">
<ul class="posts"> <ul class="posts">