diff --git a/public_html/css/core.css b/public_html/css/core.css
index a4b17e35..3afe21ce 100644
--- a/public_html/css/core.css
+++ b/public_html/css/core.css
@@ -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;
}
diff --git a/public_html/css/forms.css b/public_html/css/forms.css
index d0a8cf49..102b774c 100644
--- a/public_html/css/forms.css
+++ b/public_html/css/forms.css
@@ -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;
}
diff --git a/public_html/css/post-list.css b/public_html/css/post-list.css
index af9fe988..9c5540c7 100644
--- a/public_html/css/post-list.css
+++ b/public_html/css/post-list.css
@@ -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;
diff --git a/public_html/index.html b/public_html/index.html
index 5035891f..f3cefb91 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -21,6 +21,7 @@
/build -->
+
diff --git a/public_html/js/Presenters/PostListPresenter.js b/public_html/js/Presenters/PostListPresenter.js
index 6b8db18f..021d5b98 100644
--- a/public_html/js/Presenters/PostListPresenter.js
+++ b/public_html/js/Presenters/PostListPresenter.js
@@ -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');
diff --git a/public_html/templates/post-list.tpl b/public_html/templates/post-list.tpl
index 6a6464fb..80a69f8a 100644
--- a/public_html/templates/post-list.tpl
+++ b/public_html/templates/post-list.tpl
@@ -4,12 +4,13 @@
<% if (privileges.canMassTag) { %>
-
+
+
Tagging with <%= massTag %>
+
+
Tagging with <%= massTag %>
-