jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: switch mod dashboard, keyboard shortcuts pages to flexbox.

Browse Source 
* Switch /static/keyboard_shortcuts from float-based layout to flexbox.
* Switch /moderator/dashboard from float-based layout to flexbox.
* Remove various .clearfix, `clear: both` rules.
* Remove dead .quick-mod rule.
This commit is contained in:
evazion
2019-10-02 00:30:33 -05:00
parent b9c869f3e4
commit d9f154094f
11 changed files with 85 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/src/styles/base/020_base.scss
View File

@@ -128,6 +128,13 @@ table tfoot {
max-width: 70em; max-width: 70em;
} }
.column-container {
display: flex;
.column-expand { flex: 1; }
.column-shrink { flex: 0; }
}
ul.list-bulleted { ul.list-bulleted {
list-style: inside disc; list-style: inside disc;
} }

5
app/javascript/src/styles/common/main_layout.scss
View File

@@ -25,7 +25,6 @@ div#page {
} }
footer#page-footer { footer#page-footer {
clear: both;
width: 100%; width: 100%;
margin-top: 1em; margin-top: 1em;
text-align: center; text-align: center;
@@ -33,10 +32,6 @@ footer#page-footer {
border-top: var(--footer-border); border-top: var(--footer-border);
} }
div.clearfix {
clear: both;
}
.sidebar-container { .sidebar-container {
display: flex; display: flex;

1
app/javascript/src/styles/common/paginator.scss
View File

@@ -2,7 +2,6 @@ div.paginator {
display: block; display: block;
padding: 2em 0 1em 0; padding: 2em 0 1em 0;
text-align: center; text-align: center;
clear: both;
li { li {
a { a {

14
app/javascript/src/styles/specific/keyboard_shortcuts.scss
View File

@@ -1,16 +1,10 @@
@import "../base/000_vars.scss";
div#c-static { div#c-static {
div#a-keyboard-shortcuts { div#a-keyboard-shortcuts {
overflow: visible; section.column {
min-width: 25em;
section { ul {
min-width: 20%; margin-bottom: 2em;
float: left;
margin-bottom: 1em;
h1 {
font-size: $h3_size;
} }
li { li {

11
app/javascript/src/styles/specific/moderator_dashboard.scss
View File

@@ -1,13 +1,6 @@
div#c-moderator-dashboards { div#c-moderator-dashboards {
div#col1 { #column-left {
width: 45%; margin-right: 2em;
float: left;
padding-right: 5%;
}
div#col2 {
width: 45%;
float: left;
} }
div.activity { div.activity {

4
app/javascript/src/styles/specific/posts.scss
View File

@@ -331,10 +331,6 @@ div#c-posts {
margin: 1em 0 0.5em; margin: 1em 0 0.5em;
} }
span.quick-mod {
float: right;
}
.pool-name, .search-name { .pool-name, .search-name {
word-wrap: break-word; word-wrap: break-word;
} }

10
app/javascript/src/styles/specific/users.scss
View File

@@ -4,16 +4,6 @@ div#c-users {
margin-bottom: 2em; margin-bottom: 2em;
} }
/* clearfix hacks */
div.box:before, div.box:after {
content: "";
display: table;
}
div.box:after {
clear: both;
}
table.user-statistics { table.user-statistics {
tr { tr {
height: 1.75em; height: 1.75em;

1
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -77,7 +77,6 @@
} }
article.post-preview { article.post-preview {
float: none;
margin: 0; margin: 0;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;

1
app/views/explore/posts/intro.html.erb
View File

@@ -17,7 +17,6 @@
<div class="posts"> <div class="posts">
<h2><%= link_to tag, posts_path(:tags => tag) %></h2> <h2><%= link_to tag, posts_path(:tags => tag) %></h2>
<%= post_set.presenter.post_previews_html(self, show_cropped: true) %> <%= post_set.presenter.post_previews_html(self, show_cropped: true) %>
<div class="clearfix"></div>
</div> </div>
<% end %> <% end %>
<% end %> <% end %>

28
app/views/moderator/dashboards/show.html.erb
View File

@@ -5,20 +5,22 @@
<%= render "search" %> <%= render "search" %>
<%= render "posts/partials/common/inline_blacklist" %> <%= render "posts/partials/common/inline_blacklist" %>
<div id="col1"> <section class="column-container">
<div class="activity"><%= render "activity_upload" %></div> <div id="column-left" class="column column-expand">
<div class="activity"><%= render "activity_note" %></div> <div class="activity"><%= render "activity_upload" %></div>
<div class="activity"><%= render "activity_tag" %></div> <div class="activity"><%= render "activity_note" %></div>
<div class="activity"><%= render "activity_wiki_page" %></div> <div class="activity"><%= render "activity_tag" %></div>
<div class="activity"><%= render "activity_artist" %></div> <div class="activity"><%= render "activity_wiki_page" %></div>
<div class="activity"><%= render "activity_comment" %></div> <div class="activity"><%= render "activity_artist" %></div>
</div> <div class="activity"><%= render "activity_comment" %></div>
</div>
<div id="col2"> <div id="column-right" class="column column-expand">
<div class="activity"><%= render "activity_appeal" %></div> <div class="activity"><%= render "activity_appeal" %></div>
<div class="activity"><%= render "activity_user_feedback" %></div> <div class="activity"><%= render "activity_user_feedback" %></div>
<div class="activity"><%= render "activity_mod_action" %></div> <div class="activity"><%= render "activity_mod_action" %></div>
</div> </div>
</section>
</div> </div>
</div> </div>

112
app/views/static/keyboard_shortcuts.html.erb
View File

@@ -2,66 +2,68 @@
<div id="a-keyboard-shortcuts"> <div id="a-keyboard-shortcuts">
<h1>Keyboard Shortcuts</h1> <h1>Keyboard Shortcuts</h1>
<section> <div class="column-container">
<h1>Listing</h1> <section class="column column-shrink">
<ul> <h2>Listing</h2>
<li><kbd class="key">a</kbd>, <kbd class="key">⇦</kbd> Previous page</li> <ul>
<li><kbd class="key">d</kbd>, <kbd class="key">⇨</kbd> Next page</li> <li><kbd class="key">a</kbd>, <kbd class="key">⇦</kbd> Previous page</li>
<li><kbd class="key">q</kbd> Search</li> <li><kbd class="key">d</kbd>, <kbd class="key">⇨</kbd> Next page</li>
<li><kbd class="key">w</kbd> Scroll up</li> <li><kbd class="key">q</kbd> Search</li>
<li><kbd class="key">s</kbd> Scroll down</li> <li><kbd class="key">w</kbd> Scroll up</li>
<li><kbd class="key">r</kbd> Go to random post</li> <li><kbd class="key">s</kbd> Scroll down</li>
<li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Switch tag script</li> <li><kbd class="key">r</kbd> Go to random post</li>
</ul> <li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Switch tag script</li>
</section> </ul>
</section>
<section> <section class="column column-shrink">
<h1>Post</h1> <h2>Post</h2>
<ul> <ul>
<li><kbd class="key">n</kbd> New note</li> <li><kbd class="key">n</kbd> New note</li>
<li><kbd class="key">e</kbd> Edit tags</li> <li><kbd class="key">e</kbd> Edit tags</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">e</kbd> Edit tags in dialog window</li> <li><kbd class="key">shift</kbd>+<kbd class="key">e</kbd> Edit tags in dialog window</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">o</kbd> Approve post</li> <li><kbd class="key">shift</kbd>+<kbd class="key">o</kbd> Approve post</li>
<li><kbd class="key">enter</kbd> Submit tag changes</li> <li><kbd class="key">enter</kbd> Submit tag changes</li>
<li><kbd class="key">q</kbd> Search</li> <li><kbd class="key">q</kbd> Search</li>
<li><kbd class="key">w</kbd> Scroll up</li> <li><kbd class="key">w</kbd> Scroll up</li>
<li><kbd class="key">s</kbd> Scroll down</li> <li><kbd class="key">s</kbd> Scroll down</li>
<li><kbd class="key">a</kbd> Previous post</li> <li><kbd class="key">a</kbd> Previous post</li>
<li><kbd class="key">d</kbd> Next post</li> <li><kbd class="key">d</kbd> Next post</li>
<li><kbd class="key">f</kbd> Favorite post</li> <li><kbd class="key">f</kbd> Favorite post</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">f</kbd> Unfavorite post</li> <li><kbd class="key">shift</kbd>+<kbd class="key">f</kbd> Unfavorite post</li>
<li><kbd class="key">g</kbd> Add post to favorite group</li> <li><kbd class="key">g</kbd> Add post to favorite group</li>
<li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Add post to favorite group #N</li> <li><kbd class="key">1</kbd>, <kbd class="key">2</kbd>, <kbd class="key">3</kbd>... Add post to favorite group #N</li>
<li><kbd class="key">v</kbd> Toggle between sample and full size</li> <li><kbd class="key">v</kbd> Toggle between sample and full size</li>
</ul> </ul>
</section> </section>
<section> <section class="column column-shrink">
<h1>Artists</h1> <h2>Artists</h2>
<ul> <ul>
<li><kbd class="key">e</kbd> Edit artist</li> <li><kbd class="key">e</kbd> Edit artist</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete artist</li> <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete artist</li>
</ul> </ul>
<h1>Forum</h1> <h2>Forum</h2>
<ul> <ul>
<li><kbd class="key">e</kbd> Edit topic</li> <li><kbd class="key">e</kbd> Edit topic</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete topic</li> <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete topic</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">r</kbd> Mark all as read</li> <li><kbd class="key">shift</kbd>+<kbd class="key">r</kbd> Mark all as read</li>
</ul> </ul>
<h1>Pools</h1> <h2>Pools</h2>
<ul> <ul>
<li><kbd class="key">e</kbd> Edit pool</li> <li><kbd class="key">e</kbd> Edit pool</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete pool</li> <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete pool</li>
</ul> </ul>
<h1>Wiki</h1> <h2>Wiki</h2>
<ul> <ul>
<li><kbd class="key">e</kbd> Edit wiki page</li> <li><kbd class="key">e</kbd> Edit wiki page</li>
<li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete wiki page</li> <li><kbd class="key">shift</kbd>+<kbd class="key">d</kbd> Delete wiki page</li>
</ul> </ul>
</section> </section>
</div>
</div> </div>
</div> </div>