Danbooru

[Prototype] Mobile Layout (CSS)

Posted under General

Intro

I've been working on developing CSS code that will make the Danbooru mobile layout work a bit differently, and hopefully a bit better. My goal was to optimize the view for the portrait display, i.e. holding the phone upright instead of sideways.

The below was tested using a Samsung Galaxy 6 and Chrome web browser, using various different viewport settings.

Code

Mobile Layout
/*Settings for mobile layout*/
@media screen and (max-width: 660px){
    /****GENERAL FIXES****/
    
    /*Fix for menu search*/
    header#top menu form input {
        width: 90vw;
    }
    
    /*Fix for prose in both comments and forum posts*/
    /*Must use matching viewport settings*/
    .expandable-content, .prose {
        overflow-x: auto;
    }
    
    /*Fixes issue with posts in landscape mode*/
    article.post-preview {
        height: 150px;
        width: 150px;
        padding-left: 10px;
        padding-bottom: 10px;
    }
    article.post-preview img {
        width: unset;
    }

    /*Fix for blacklist controls*/
    /*Inline blacklist*/
    #blacklist-box.inline-blacklist {
        margin: 1em 0 0 1em;
        font-size: 1.25em;
        margin-top: 0.2em;
        margin-bottom: 0.5em;
        float: left;
        clear: left;
    }
    #blacklist-box.inline-blacklist li:not(#disable-all-blacklists):not(#re-enable-all-blacklists) {
        display: block;
    }
    #blacklist-box.inline-blacklist li:not(#disable-all-blacklists):not(#re-enable-all-blacklists) a {
        max-width: 75vw;
    }
    
    /*Fix for DText preview button*/
    .dtext-preview-button  {
        font-size: 160%;
    }
    
    /*Fix for edit menu (uploads/posts)*/
    #fetch-data-manual {
        font-size: 150%;
    }
    .ratings input {
        float: left;
        clear: left;
        margin: 10px;
    }
    .ratings label {
        float: left;
    }
    input[type="checkbox"] {
        margin: 10px;
    }
    #open-edit-dialog {
        /*The popup dialog is very bad to use on mobile*/
        display: none;
    }
    
    /*Fix related tags section (posts/uploads)*/
    #related-tags-container {
        font-size: 150%;
    }
    .related-tags .tag-column {
        margin-right: 0;
    }
    .user-related-tags-columns,
    .current-related-tags-columns,
    .source-related-tags-columns {
        display: block;
    }
    .artist-related-tags-column ul:nth-of-type(2) {
        white-space: nowrap;
        overflow-x: auto;
        width: 93vw;
    }
    .related-tags {
        width: unset;
    }    
    
    /*Fix width of many input boxes*/
    /*Stacked input boxes*/
    #c-moderator-post-queues form input[type=text], form.simple_form:not(.inline-form) div.input input[type=text],
    form.simple_form:not(.inline-form) div.input input[type=file], form.simple_form:not(.inline-form) div.input input[type=password],
    form.simple_form:not(.inline-form) div.input input[type=email], form.simple_form:not(.inline-form) div.input input[type=number] {
        padding-right: 0;
        width: 90vw;
        margin-left: 10px;
        font-size: 16pt;
    }
    form.simple_form:not(.inline-form) div.input textarea {
        width: 95vw;
        margin-left: 5px;
    }
    form.simple_form:not(.inline-form) div.input select {
        font-size: 150%;
        margin-left: 10px;
    }
    form.simple_form:not(.inline-form) div.input label {
        font-size: 150%;
    }
    /*Inline input boxes*/
    #c-pools .search div.input input[type=text],form.simple_form.inline-form div.input input[type=text],
    form.simple_form.inline-form div.input input[type=file], form.simple_form.inline-form div.input input[type=password],
    form.simple_form.inline-form div.input input[type=email], form.simple_form.inline-form div.input input[type=number] {
        padding-right: 0;
        font-size: 18pt;
        width: 95%;
    }
    #c-pools .search select,
    #c-pools .search label,
    form.simple_form.inline-form div.input select,
    form.simple_form.inline-form div.input label {
        font-size: 125%;
    }
    input[type=submit] {
        margin-left: 10px;
    }
    .hint {
        margin-left: 10px;
    }
    button {
        margin-left: 10px;
        font-size: 12pt;
    }
    
    /*Fix for paginator*/
    div.paginator li a, div.paginator li span {
        padding: 0 5px;
    }
    
    /*****SPECIFIC FIXES****/
    
    /*Fix for profile page*/
    #c-users #a-show div.box {
        margin-left: 1em;
    }
    #c-users #a-show div.box h2 {
        font-size: 2em;
    }
    #c-users #a-show .user-statistics th,
    #c-users #a-show .user-statistics td {
        font-size: 1.25em;
        padding: 0.5em;
    }
    #c-users #a-show > div:not(.box) h2 {
        font-size: 1.5em;
    }
    #c-users #a-show > h1 {
        text-align: center;
    }
    #c-users #a-show tr:nth-child(6) > td > a:nth-child(2) {
        visibility: hidden;
        font-size: 0%;
    }
    #c-users #a-show tr:nth-child(6) > td > a:nth-child(2)::after {
        content: "report";
        visibility: visible;
        font-size: 18px;
    }
    #c-users #a-edit #edit-options {
        font-size: 150%;
        text-align: center;
    }
    
    /*Fix for users search*/
    #c-users #a-search [for="search_can_upload_free"] {
        visibility: hidden;
        font-size: 0%;
    }
    #c-users #a-search [for="search_can_upload_free"]::after {
        content: "Unrestricted?";
        visibility: visible;
        font-size: 18px;
        padding-right: 10px;
    }
    
    /*Fix for posts*/
    #c-posts #tags,
    #c-posts #a-index #mode-box select,
    #c-posts #a-index #mode-box #tag-script-field {
        width: 95vw;
    }
    #c-posts #tags~button {
        margin: 5px;
    }
    #c-posts #a-index #post-sections {
        font-size: 150%;
        margin-left: 1em;
    }
    #c-posts #a-index #excerpt {
        margin: 0.5em;
    }
    #c-posts #a-show .expand-comment-response {
        font-size: 125%;
    }
    
    /*Fix for comments*/
    #c-comments .post .comments-for-post, #c-comments .post .comment {
        float: left;
        clear: left;
        margin-left: 0px;
        min-width: initial;
    }
    .comments-for-post .list-of-comments .comment {
        margin-bottom: initial;
        padding: 0.2em;
    }
    #c-comments .post, #c-posts .comment {
        margin-bottom: 1em;
    }
    #c-posts .comment h1 {
        margin-top: 0.2em;
    }
    #c-comments .post-preview, #c-posts .comment {
        border: 2px solid grey;
        padding: 0.2em;
        border-radius: 10px;
        width: auto;
    }
    .comments-for-post .info {
        display: block;
    }
    
    /*Fix for pools*/
    #c-pools #a-gallery .post-preview {
        height: 220px;
    }
    
    /*Fix for forum posts*/
    .forum-post .content {
        float: left;
        clear: left;
        margin: 0;
    }
    .forum-post {
        border: 2px solid grey;
        padding: 0.2em;
        border-radius: 10px;
        width: auto;
    }
    .list-of-forum-posts article {
        margin-bottom: 1em;
    }
    
    /*Fix for wiki pages*/
    #wiki-page-body,
    #wiki-page-posts {
        margin: 0 0.5em;
    }
    #wiki-page-posts h2 {
        font-size: 2em;
    }
    
    /*Fix for artists*/
    #c-artists #a-show ul:nth-child(6),
    #c-artists #a-show ul:nth-child(7) {
        white-space: nowrap;
        overflow-x: auto;
    }
    
    /*Fixes for tags and meta-searches*/
    #c-tags td:nth-of-type(3), #c-meta-searches td:nth-of-type(3) {
        width: 25%;
        text-align: right;
    }
    #c-tags a[href^="/posts?tags="], #c-meta-searches td, #c-tags a[href^="/posts?tags="] {
        word-break: break-all;
    }
    
    /*Fix for saved search*/
    #c-saved-searches a[href^="/posts?tags="] {
        word-break: break-all;
    }
    #subnav-manage-saved-searches a {
        visibility: hidden;
        font-size: 0%;
    }
    #subnav-manage-saved-searches a::after {
        content: "Manage searches";
        visibility: visible;
        font-size: 20pt;
    }
    
    /*Fix for dmails*/
    #c-dmails #a-show .dmail {
        margin-left: 10px;
    }
    #c-dmails #a-show .dmail > p {
        font-size: 150%;
    }
    
    /*Fix for uploads*/
    #c-uploads #a-new #upload-guide-notice {
        margin: 0.5em;
    }
    #c-uploads #a-new #filedropzone {
        display: none;
    }
    #c-uploads #a-new .fallback {
        display: block;
    }
    #c-uploads #a-new #upload_artist_commentary_desc {
        width: 90vw;
    }
    #c-uploads #a-new .input > strong,
    #c-uploads #a-new .input > a {
        font-size: 150%;
    }
    #c-uploads #a-new #upload_as_pending {
        margin-left: 10px;
    }
    
    #c-uploads #a-batch #batch_url {
        width: 95vw;
        margin-left: 5px;
    }
    #c-uploads #a-batch .upload-preview {
        width: 150px;
        height: 180px;
        padding-left: 1em;
        padding-bottom: 1em;
    }
    
    /*Fix popular searches / most viewed*/
    #c-explore-posts #a-popular,
    #c-explore-posts #a-viewed {
        display: inherit;
    }
    #c-explore-posts .period:first-child {
        margin-left: 2em;
    }
    #c-explore-posts .period {
        float: left;
        clear: left;
        font-size: 150%;
        margin: 0.2em 2em;
    }
    #c-explore-posts article:first-of-type {
        float: left;
        clear: left;
    }
    #c-explore-posts p:not(#popular-nav-links):not(.paginator) {
        /*Fix chicken message*/
        clear: left;
        font-size:150%;
        margin-left: 2em;
        padding-top: 1em;
    }
    
    /*Fix mod queue*/
    #c-moderator-post-queues .post section {
        width: auto;
        word-wrap: break-word;
    }
    #c-moderator-post-queues #moderation-guideline {
        width: auto;
    }
    
    /*Fix static map*/
    #c-static {
        font-size: 150%;
    }
    #c-static #a-site-map, #c-static #a-site-map section {
        width: auto;
        margin-left: 0.5em;
    }
    
    /*Fix bans*/
    #c-bans table.autofit .col-expand {
        width: auto;
    }
    
    /*Fix artist URLS*/
    #c-artist-urls [for="search_normalized_url_matches"] {
        visibility: hidden;
        font-size: 0%;
    }
    #c-artist-urls [for="search_normalized_url_matches"]::after {
        content: "Norm URL";
        visibility: visible;
        font-size: 18px;
        padding-right: 10px;
    }
    
    /****TABLES FIX****/
    /* Force table to not be like tables anymore*/
    /* Credit: https://css-tricks.com/responsive-data-tables/ */
    
    #c-artists table, #c-artists thead, #c-artists tbody, #c-artists tr, #c-artists th, #c-artists td,
    #c-artist-versions table, #c-artist-versions thead, #c-artist-versions tbody, 
    #c-artist-versions tr, #c-artist-versions th, #c-artist-versions td,
    #c-artist-commentaries table, #c-artist-commentaries thead, #c-artist-commentaries tbody,
    #c-artist-commentaries tr, #c-artist-commentaries th, #c-artist-commentaries td,
    #c-artist-commentary-versions table, #c-artist-commentary-versions thead, 
    #c-artist-commentary-versions tbody, #c-artist-commentary-versions tr, 
    #c-artist-commentary-versions th, #c-artist-commentary-versions td,
    #c-artist-urls table, #c-artist-urls thead, #c-artist-urls tbody,
    #c-artist-urls tr, #c-artist-urls th, #c-artist-urls td,
    #c-bans table, #c-bans thead, #c-bans tbody, #c-bans tr, #c-bans th, #c-bans td,
    #c-bulk-update-requests table, #c-bulk-update-requests thead, #c-bulk-update-requests tbody,
    #c-bulk-update-requests tr, #c-bulk-update-requests th, #c-bulk-update-requests td,
    #c-dmails table, #c-dmails thead, #c-dmails tbody, #c-dmails tr, #c-dmails th, #c-dmails td,
    #c-explore-posts table, #c-explore-posts thead, #c-explore-posts tbody,
    #c-explore-posts tr, #c-explore-posts th, #c-explore-posts td,
    #c-forum-posts #a-index table, #c-forum-posts #a-index thead, #c-forum-posts #a-index tbody, #c-forum-posts #a-index tr,
    #c-forum-posts #a-index th, #c-forum-posts #a-index td,
    #c-forum-topics #a-index table, #c-forum-topics #a-index thead, #c-forum-topics #a-index tbody, #c-forum-topics #a-index tr,
    #c-forum-topics #a-index th, #c-forum-topics #a-index td,
    #c-mod-actions table, #c-mod-actions thead, #c-mod-actions tbody, #c-mod-actions tr,
    #c-mod-actions th, #c-mod-actions td,
    #c-notes table, #c-notes thead, #c-notes tbody, #c-notes tr, #c-notes th, #c-notes td,
    #c-note-versions table, #c-note-versions thead, #c-note-versions tbody, #c-note-versions tr, 
    #c-note-versions th, #c-note-versions td,
    #c-pools .striped table, #c-pools .striped thead, #c-pools .striped tbody, #c-pools .striped tr,
    #c-pools .striped th, #c-pools .striped td,
    #c-pool-versions table, #c-pool-versions thead, #c-pool-versions tbody, #c-pool-versions tr,
    #c-pool-versions th, #c-pool-versions td,
    #c-post-appeals table, #c-post-appeals thead, #c-post-appeals tbody, #c-post-appeals tr,
    #c-post-appeals th, #c-post-appeals td,
    #c-post-approvals table, #c-post-approvals thead, #c-post-approvals tbody, #c-post-approvals tr,
    #c-post-approvals th, #c-post-approvals td,
    #c-post-events table, #c-post-events thead, #c-post-events tbody, #c-post-events tr, #c-post-events th,
    #c-post-events td,
    #c-post-flags table, #c-post-flags thead, #c-post-flags tbody, #c-post-flags tr, #c-post-flags th,
    #c-post-flags td,
    #c-post-replacements table, #c-post-replacements thead, #c-post-replacements tbody, #c-post-replacements tr,
    #c-post-replacements th, #c-post-replacements td,
    #c-post-versions table, #c-post-versions thead, #c-post-versions tbody, #c-post-versions tr,
    #c-post-versions th, #c-post-versions td,
    #c-saved-searches table, #c-saved-searches thead, #c-saved-searches tbody, #c-saved-searches tr,
    #c-saved-searches th, #c-saved-searches td,
    #c-tag-aliases table, #c-tag-aliases thead, #c-tag-aliases tbody, #c-tag-aliases tr,
    #c-tag-aliases th, #c-tag-aliases td,
    #c-tag-implications table, #c-tag-implications thead, #c-tag-implications tbody, #c-tag-implications tr,
    #c-tag-implications th, #c-tag-implications td,
    #c-upload-tags-report table, #c-upload-tags-report thead, #c-upload-tags-report tbody,
    #c-upload-tags-report tr, #c-upload-tags-report th, #c-upload-tags-report td,
    #c-uploads table, #c-uploads thead, #c-uploads tbody, #c-uploads tr, #c-uploads th, #c-uploads td,
    #c-user-feedbacks table, #c-user-feedbacks thead, #c-user-feedbacks tbody, #c-user-feedbacks tr,
    #c-user-feedbacks th, #c-user-feedbacks td,
    #c-users #a-index table, #c-users #a-index thead, #c-users #a-index tbody, #c-users #a-index tr,
    #c-users #a-index th, #c-users #a-index td,
    #c-wiki-pages table, #c-wiki-pages thead, #c-wiki-pages tbody, #c-wiki-pages tr, #c-wiki-pages th,
    #c-wiki-pages td,
    #c-wiki-page-versions table, #c-wiki-page-versions thead, #c-wiki-page-versions tbody,
    #c-wiki-page-versions tr, #c-wiki-page-versions th, #c-wiki-page-versions td {
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    #c-artists thead tr, #c-artist-versions thead tr, #c-artist-commentaries thead tr, 
    #c-artist-commentary-versions thead tr, #c-artist-urls thead tr, #c-bans thead tr, #c-bulk-update-requests thead tr,
    #c-dmails thead tr, #c-forum-posts #a-index thead tr, #c-forum-topics #a-index thead tr,
    #c-explore-posts thead tr, #c-mod-actions thead tr, #c-notes thead tr, #c-note-versions thead tr,
    #c-pools .striped thead tr, #c-pool-versions thead tr, #c-post-appeals thead tr, #c-post-approvals thead tr,
    #c-post-events thead tr, #c-post-flags thead tr, #c-post-replacements thead tr, #c-post-versions thead tr, 
    #c-saved-searches thead tr, #c-tag-aliases thead tr, #c-tag-implications thead tr,
    #c-upload-tags-report thead tr, #c-uploads thead tr, #c-user-feedbacks thead tr,
    #c-users #a-index thead tr, #c-wiki-pages thead tr, #c-wiki-page-versions thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    #c-artists tr, #c-artist-versions tr, #c-artist-commentaries tr, #c-artist-commentary-versions tr,
    #c-artist-urls tr, #c-bans tr, #c-bulk-update-requests tr, #c-dmails tr, #c-explore-posts  tr,
    #c-forum-posts #a-index tr, #c-forum-topics #a-index tr, #c-mod-actions tr, #c-notes tr, #c-note-versions tr, 
    #c-pools .striped tr, #c-pool-versions tr, #c-post-appeals tr, #c-post-approvals tr, #c-post-events tr,
    #c-post-flags tr, #c-post-replacements tr, #c-post-versions tr, #c-saved-searches tr,
    #c-tag-aliases tr, #c-tag-implications tr, #c-upload-tags-report td, #c-uploads tr,
    #c-user-feedbacks tr, #c-users #a-index tr, #c-wiki-pages tr, #c-wiki-page-versions tr { 
        border: 1px solid #ccc; 
        }
    
    #c-artists td, #c-artist-versions td, #c-artist-commentaries td, #c-artist-commentary-versions td,
    #c-artist-urls td, #c-bans td, #c-bulk-update-requests td, #c-dmails td, #c-explore-posts td,
    #c-forum-posts #a-index td, #c-forum-topics #a-index td, #c-mod-actions td, #c-notes td, #c-note-versions td,
    #c-pools .striped td, #c-pool-versions td, #c-post-appeals td, #c-post-approvals td, #c-post-events td,
    #c-post-flags td, #c-post-replacements td, #c-post-versions td, #c-saved-searches td,
    #c-post-appeals td, #c-post-events td, #c-post-flags td, #c-post-versions td, #c-saved-searches td,
    #c-tag-aliases td, #c-tag-implications td, #c-upload-tags-report td, #c-uploads td,
    #c-user-feedbacks td, #c-users #a-index td, #c-wiki-pages td, #c-wiki-page-versions td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ddd; 
        position: relative;
        padding-left: 26%; 
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    #c-artists td::before, #c-artist-versions td::before, #c-artist-commentaries td::before, #c-artist-commentary-versions td::before,
    #c-artist-urls td::before, #c-bans td::before, #c-bulk-update-requests td::before, #c-dmails td::before,
    #c-explore-posts td::before, #c-forum-posts #a-index td::before, #c-forum-topics #a-index td::before,
    #c-mod-actions td::before, #c-notes td::before, #c-note-versions td::before, #c-pools .striped td::before,
    #c-pool-versions td::before, #c-post-appeals td::before, #c-post-approvals td::before, #c-post-events td::before,
    #c-post-flags td::before, #c-post-replacements td::before, #c-post-versions td::before, #c-saved-searches td::before,
    #c-tag-aliases td::before, #c-tag-implications td::before, #c-upload-tags-report td::before, #c-uploads td::before,
    #c-user-feedbacks td::before , #c-users #a-index td::before, #c-wiki-pages td::before,
    #c-wiki-page-versions td::before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 25%; 
        /*padding-right: 10px; */
        white-space: nowrap;
    }
    
    /****************
    Label the data
    *****************/
    /*Artists*/
    #c-artists td:nth-of-type(1)::before { content: "Name"; }
    #c-artists td:nth-of-type(2)::before { content: "Other"; }
    #c-artists td:nth-of-type(2) { min-height: 20px; }
    #c-artists td:nth-of-type(3)::before { content: "Status"; }
    /*Artist versions*/
    #c-artist-versions td:nth-of-type(1)::before { content: "Name"; }
    #c-artist-versions td:nth-of-type(2)::before { content: "Other"; }
    #c-artist-versions td:nth-of-type(2) { min-height: 20px; }
    #c-artist-versions td:nth-of-type(3)::before { content: "Group"; }
    #c-artist-versions td:nth-of-type(3) { min-height: 20px; }
    #c-artist-versions td:nth-of-type(4)::before { content: "Updated"; }
    #c-artist-versions td:nth-of-type(5)::before { content: "Updater"; }
    /*For Builder-*/
    [data-user-is-moderator="false"] #c-artist-versions td:nth-of-type(6)::before { content: "Active"; } 
    [data-user-is-moderator="false"] #c-artist-versions td:nth-of-type(7)::before { content: "URLs"; }
    [data-user-is-moderator="false"] #c-artist-versions td:nth-of-type(7) { min-height: 20px; overflow-x: auto; }
    /*For Moderator+*/
    [data-user-is-moderator="true"] #c-artist-versions td:nth-of-type(6)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-artist-versions td:nth-of-type(7)::before { content: "Active"; } 
    [data-user-is-moderator="true"] #c-artist-versions td:nth-of-type(8)::before { content: "URLs"; }
    [data-user-is-moderator="true"] #c-artist-versions td:nth-of-type(8) { min-height: 20px; overflow-x: auto; }
    /*Artist commentaries*/
    #c-artist-commentaries td:nth-of-type(1)::before, 
    #c-artist-commentary-versions td:nth-of-type(1)::before { content: "Post"; }
    #c-artist-commentaries td:nth-of-type(1),
    #c-artist-commentary-versions td:nth-of-type(1)    { min-height: 155px; }
    #c-artist-commentary-versions td:nth-of-type(2)::before { content: "Version"; }
    #c-artist-commentaries td:nth-of-type(2)::before,
    #c-artist-commentary-versions td:nth-of-type(3)::before { content: "Original"; }
    #c-artist-commentaries td:nth-of-type(2),
    #c-artist-commentary-versions td:nth-of-type(3) { min-height: 20px; }
    #c-artist-commentaries td:nth-of-type(3)::before,
    #c-artist-commentary-versions td:nth-of-type(4)::before { content: "Translated"; }
    #c-artist-commentaries td:nth-of-type(3),
    #c-artist-commentary-versions td:nth-of-type(4) { min-height: 20px; }
    /*For Builder-*/
    [data-user-is-moderator="false"] #c-artist-commentary-versions td:nth-of-type(5)::before { content: "Updater"; }
    [data-user-is-moderator="false"] #c-artist-commentary-versions td:nth-of-type(6)::before { content: "Date"; }
    /*For Moderator+*/
    [data-user-is-moderator="true"] #c-artist-commentary-versions td:nth-of-type(5)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-artist-commentary-versions td:nth-of-type(6)::before { content: "Updater"; }
    [data-user-is-moderator="true"] #c-artist-commentary-versions td:nth-of-type(7)::before { content: "Date"; }
    /*Artist URLs*/
    #c-artist-urls td:nth-of-type(1)::before { content: "ID"; }
    #c-artist-urls td:nth-of-type(2)::before { content: "Artist"; }
    #c-artist-urls td:nth-of-type(3)::before { content: "URL"; }
    #c-artist-urls td:nth-of-type(3) { overflow-x: auto; text-overflow: unset; white-space: nowrap; }
    #c-artist-urls td:nth-of-type(4)::before { content: "Norm URL"; }
    #c-artist-urls td:nth-of-type(4) { overflow-x: auto; text-overflow: unset; white-space: nowrap; }
    #c-artist-urls td:nth-of-type(5)::before { content: "Active"; }
    #c-artist-urls td:nth-of-type(6)::before { content: "Created"; }
    #c-artist-urls td:nth-of-type(7)::before { content: "Updated"; }
    /*Bans*/
    #c-bans td:nth-of-type(1)::before { content: "User"; }
    #c-bans td:nth-of-type(2)::before { content: "Banner"; }
    #c-bans td:nth-of-type(3)::before { content: "Banned"; }
    #c-bans td:nth-of-type(4)::before { content: "Duration"; }
    #c-bans td:nth-of-type(5)::before { content: "Reason"; }
    #c-bans td:nth-of-type(6) { display: none; }
    #c-bulk-update-requests td:nth-of-type(1)::before { content: "Creator"; }
    #c-bulk-update-requests td:nth-of-type(2)::before { content: "Approver"; }
    #c-bulk-update-requests td:nth-of-type(2) { min-height: 20px; }
    #c-bulk-update-requests td:nth-of-type(3)::before { content: "Forum"; }
    #c-bulk-update-requests td:nth-of-type(4)::before { content: "Script"; }
    #c-bulk-update-requests td:nth-of-type(5)::before { content: "Status"; }
    /*Dmails*/
    #c-dmails td:nth-of-type(1)::before { content: "Date"; }
    #c-dmails td:nth-of-type(2)::before { content: "From"; }
    #c-dmails td:nth-of-type(3)::before { content: "To"; }
    #c-dmails td:nth-of-type(4)::before { content: "Subject"; }
    /*Explore posts (missed searches)*/
    #c-explore-posts #a-missed-searches td:nth-of-type(1)::before { content: "Tag"; }
    #c-explore-posts #a-missed-searches td:nth-of-type(2)::before { content: "Wiki"; }
    #c-explore-posts #a-missed-searches td:nth-of-type(2) { min-height: 20px; }
    #c-explore-posts #a-missed-searches td:nth-of-type(3)::before { content: "Count"; }
    #c-explore-posts #a-missed-searches td:nth-of-type(3) { text-align: start; }
    /*Explore posts (popular searches)*/
    #c-explore-posts #a-searches td:nth-of-type(1)::before { content: "Tag"; }
    #c-explore-posts #a-searches td:nth-of-type(2)::before { content: "Count"; }
    #c-explore-posts #a-searches td:nth-of-type(2) { text-align: start; }
    /*Forum topics*/
    #c-forum-posts #a-index td:nth-of-type(1)::before { content: "Topic"; }
    #c-forum-posts #a-index td:nth-of-type(2)::before { content: "Excerpt"; }
    #c-forum-posts #a-index td:nth-of-type(3)::before { content: "Creator"; }
    #c-forum-posts #a-index td:nth-of-type(4)::before { content: "Date"; }
    /*Forum topics*/
    #c-forum-topics #a-index td:nth-of-type(1)::before { content: "Title"; }
    #c-forum-topics #a-index td:nth-of-type(2)::before { content: "Creator"; }
    #c-forum-topics #a-index td:nth-of-type(3)::before { content: "Updater"; }
    #c-forum-topics #a-index td:nth-of-type(4)::before { content: "Updated"; }
    /*Moderator (IP addresses)*/
    #c-moderator-ip-addrs #p-user-listing td:nth-of-type(2)::before { content: "Occurences"; }
        /*User listing*/
    #c-moderator-ip-addrs #p-user-listing td:nth-of-type(1)::before { content: "User"; }
        /*IP listing*/
    #c-moderator-ip-addrs #p-ip-listing td:nth-of-type(1)::before { content: "IP Address"; }
    /*Mod actions*/
    #c-mod-actions td:nth-of-type(1)::before { content: "Date"; }
    #c-mod-actions td:nth-of-type(2)::before { content: "User"; }
    #c-mod-actions td:nth-of-type(3)::before { content: "Message"; }
    #c-mod-actions td:nth-of-type(3) { overflow-x: auto; max-width:75%; }
    /*Notes*/
    #c-notes td:nth-of-type(1)::before { content: "Post"; }
    #c-notes td:nth-of-type(2)::before { content: "Note"; }
    #c-notes td:nth-of-type(3)::before { content: "Creator"; }
    #c-notes td:nth-of-type(4)::before { content: "Created"; }
    #c-notes td:nth-of-type(5)::before { content: "Body"; }
    /*Note versions*/
    #c-note-versions td:nth-of-type(1) { display: none; }
    #c-note-versions td:nth-of-type(2)::before { content: "Post"; }
    #c-note-versions td:nth-of-type(3)::before { content: "Note"; }
    #c-note-versions td:nth-of-type(4)::before { content: "Body"; }
    #c-note-versions td:nth-of-type(5)::before { content: "Position"; }
        /*For Builder-*/
    [data-user-is-moderator="false"] #c-note-versions td:nth-of-type(6)::before { content: "Updater"; }
    [data-user-is-moderator="false"] #c-note-versions td:nth-of-type(7)::before { content: "Updated"; }
        /*For Moderator+*/
    [data-user-is-moderator="true"] #c-note-versions td:nth-of-type(6)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-note-versions td:nth-of-type(7)::before { content: "Updater"; }
    [data-user-is-moderator="true"] #c-note-versions td:nth-of-type(8)::before { content: "Updated"; }
    /*Pools*/
    #c-pools .striped td:nth-of-type(1) { display: none; }
    #c-pools .striped td:nth-of-type(2)::before { content: "Name"; }
    #c-pools .striped td:nth-of-type(3)::before { content: "Count"; }
    /*Pool versions*/
    #c-pool-versions td:nth-of-type(1)::before { content: "Name"; }
    #c-pool-versions td:nth-of-type(2)::before { content: "Count"; }
    #c-pool-versions td:nth-of-type(3)::before { content: "Changes"; }
    #c-pool-versions td:nth-of-type(3) { min-height: 20px; }
    #c-pool-versions td:nth-of-type(4)::before { content: "Desc Chg"; }
    #c-pool-versions td:nth-of-type(5)::before { content: "Updater"; }
        /*For Builder-*/
    [data-user-is-moderator="false"] #c-pool-versions td:nth-of-type(6)::before { content: "Date"; }
        /*For Moderator+*/
    [data-user-is-moderator="true"] #c-pool-versions td:nth-of-type(6)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-pool-versions td:nth-of-type(7)::before { content: "Date"; }
    /*Post appeals*/
    #c-post-appeals td:nth-of-type(1)::before { content: "Post"; }
    #c-post-appeals td:nth-of-type(1) { min-height: 155px; }
    #c-post-appeals td:nth-of-type(2)::before { content: "Reason"; }
    #c-post-appeals td:nth-of-type(3)::before { content: "Appeals"; }
    #c-post-appeals td:nth-of-type(4)::before { content: "Resolved"; }
    #c-post-appeals td:nth-of-type(5)::before { content: "Uploaded"; }
    #c-post-appeals td:nth-of-type(6)::before { content: "Appealed"; }
    #c-post-appeals td:nth-of-type(7)::before { content: "Approver"; }
    /*Post approvals*/
    #c-post-approvals td:nth-of-type(1)::before { content: "Post"; }
    #c-post-approvals td:nth-of-type(1) { min-height: 155px; }
    #c-post-approvals td:nth-of-type(2)::before { content: "Approver"; }
    /*Post events*/
    #c-post-events td:nth-of-type(1)::before { content: "Type"; }
    #c-post-events td:nth-of-type(2)::before { content: "Reason"; }
    #c-post-events td:nth-of-type(3)::before { content: "Resolved"; }
    #c-post-events td:nth-of-type(4)::before { content: "Date"; }
    /*Post flags*/
    #c-post-flags td:nth-of-type(1)::before { content: "Post"; }
    #c-post-flags td:nth-of-type(1) { min-height: 155px; }
    #c-post-flags td:nth-of-type(2)::before { content: "Reason"; }
    #c-post-flags td:nth-of-type(3)::before { content: "Flags"; }
    #c-post-flags td:nth-of-type(4)::before { content: "Category"; }
    #c-post-flags td:nth-of-type(5)::before { content: "Resolved"; }
    #c-post-flags td:nth-of-type(6)::before { content: "Uploaded"; }
    #c-post-flags td:nth-of-type(7)::before { content: "Flagged"; }
    #c-post-flags td:nth-of-type(8)::before { content: "Approver"; }
    /*Post replacements*/
    #c-post-replacements td:nth-of-type(1)::before { content: "Post"; }
    #c-post-replacements td:nth-of-type(1) { min-height: 155px; }
    #c-post-replacements td:nth-of-type(2)::before { content: "Source"; }
    #c-post-replacements td:nth-of-type(2) { overflow-x: auto; max-width:75%; }
    #c-post-replacements td:nth-of-type(3)::before { content: "MD5"; }
    #c-post-replacements td:nth-of-type(3) { overflow-x: auto; max-width:75%; }
    #c-post-replacements td:nth-of-type(4)::before { content: "Size"; }
    #c-post-replacements td:nth-of-type(5)::before { content: "Replacer"; }
    /*Post versions*/
    #c-post-versions td:nth-of-type(1)::before { content: "Post"; }
    #c-post-versions td:nth-of-type(2)::before { content: "Date"; }
    #c-post-versions td:nth-of-type(3)::before { content: "User"; }
    #c-post-versions td:nth-of-type(4)::before { content: "Rating"; }
    #c-post-versions td:nth-of-type(5)::before { content: "Parent"; }
    #c-post-versions td:nth-of-type(5) { min-height: 20px; }
        /*For Builder-*/
    [data-user-is-moderator="false"] #c-post-versions td:nth-of-type(6)::before { content: "Tags"; }
    [data-user-is-moderator="false"] #c-post-versions td:nth-of-type(7) { min-height: 20px; }
        /*For Moderator+*/
    [data-user-is-moderator="true"] #c-post-versions td:nth-of-type(6)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-post-versions td:nth-of-type(7)::before { content: "Tags"; }
    [data-user-is-moderator="true"] #c-post-versions td:nth-of-type(8) { min-height: 20px; }
    /*Saved searches*/
    #c-saved-searches td:nth-of-type(1)::before { content: "Query"; }
    #c-saved-searches td:nth-of-type(2)::before { content: "Labels"; }
    /*Tag aliases*/
    #c-tag-aliases td:nth-of-type(1)::before { content: "From"; }
    #c-tag-aliases td:nth-of-type(2)::before { content: "To"; }
    #c-tag-aliases td:nth-of-type(3)::before { content: "Forum"; }
    #c-tag-aliases td:nth-of-type(3) { min-height: 20px; }
    #c-tag-aliases td:nth-of-type(4)::before { content: "Approver"; }
    #c-tag-aliases td:nth-of-type(4) { min-height: 20px; }
    #c-tag-aliases td:nth-of-type(5)::before { content: "Status"; }
    /*Tag implications*/
    #c-tag-implications td:nth-of-type(1)::before { content: "From"; }
    #c-tag-implications td:nth-of-type(2)::before { content: "To"; }
    #c-tag-implications td:nth-of-type(3)::before { content: "Forum"; }
    #c-tag-implications td:nth-of-type(3) { min-height: 20px; }
    #c-tag-implications td:nth-of-type(4)::before { content: "Approver"; }
    #c-tag-implications td:nth-of-type(4) { min-height: 20px; }
    #c-tag-implications td:nth-of-type(5)::before { content: "Status"; }
    /*Upload tags report*/
    #c-upload-tags-report td:nth-of-type(1)::before { content: "Post"; }
    #c-upload-tags-report td:nth-of-type(1) { min-height: 155px; }
    #c-upload-tags-report td:nth-of-type(2)::before { content: "Orig Tags"; white-space: normal; }
    #c-upload-tags-report td:nth-of-type(3)::before { content: "Changes"; white-space: normal; }
    #c-upload-tags-report td:nth-of-type(3) { min-height: 40px; }
    /*Uploads*/
    #c-uploads td:nth-of-type(1)::before { content: "Upload"; }
    #c-uploads td:nth-of-type(2)::before { content: "Info"; }
    #c-uploads td:nth-of-type(3)::before { content: "Uploader"; }
    #c-uploads td:nth-of-type(4)::before { content: "Status"; }
    /*User feedbacks*/
    #c-user-feedbacks td:nth-of-type(1)::before { content: "User"; }
    #c-user-feedbacks td:nth-of-type(2)::before { content: "Creator"; }
    #c-user-feedbacks td:nth-of-type(3)::before { content: "When"; }
    #c-user-feedbacks td:nth-of-type(4)::before { content: "Message"; }
    #c-user-feedbacks td:nth-of-type(5) { display: none; }
    /*Users (index)*/
    #c-users #a-index td:nth-of-type(2)::before { content: "Name"; }
    #c-users #a-index td:nth-of-type(3)::before { content: "Posts"; }
    #c-users #a-index td:nth-of-type(4)::before { content: "Deleted"; }
        /*Builder*/
    [data-user-is-moderator="false"] #c-users #a-index td:nth-of-type(1) { display: none; }
    [data-user-is-moderator="false"] #c-users #a-index td:nth-of-type(5)::before { content: "Notes"; }
    [data-user-is-moderator="false"] #c-users #a-index td:nth-of-type(6)::before { content: "Edits"; }
    [data-user-is-moderator="false"] #c-users #a-index td:nth-of-type(7)::before { content: "Level"; }
    [data-user-is-moderator="false"] #c-users #a-index td:nth-of-type(8)::before { content: "Joined"; }
        /*Moderator*/
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(1)::before { content: "Promote"; }
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(5)::before { content: "5+ SBCI"; }
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(6)::before { content: "10+ SBCI"; }
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(7)::before { content: "Notes"; }
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(8)::before { content: "Edits"; }
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(9)::before { content: "Level"; }
    [data-user-is-moderator="true"] #c-users #a-index td:nth-of-type(10)::before { content: "Joined"; }
    /*Wiki pages*/
    #c-wiki-pages td:nth-of-type(1)::before { content: "Title"; }
    #c-wiki-pages td:nth-of-type(2)::before { content: "Edited"; }
    /*Wiki page versions*/
    #c-wiki-page-versions #p-global-listing td:nth-of-type(1)::before { content: "Title"; }
    #c-wiki-page-versions #p-global-listing td:nth-of-type(2)::before { content: "Deleted"; }
    #c-wiki-page-versions #p-global-listing td:nth-of-type(2) { min-height: 20px; }
    #c-wiki-page-versions #p-global-listing td:nth-of-type(3)::before { content: "Wiki Link"; }
        /*For Builder-*/
    [data-user-is-moderator="false"] #c-wiki-page-versions #p-global-listing td:nth-of-type(4)::before { content: "Edited"; }
        /*For Moderator+*/
    [data-user-is-moderator="true"] #c-wiki-page-versions #p-global-listing td:nth-of-type(4)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-wiki-page-versions #p-global-listing td:nth-of-type(5)::before { content: "Edited"; }
    /*Wiki version comparison*/
    #c-wiki-page-versions #p-page-listing td:nth-of-type(1)::before { content: "Diff Link"; }
    #c-wiki-page-versions #p-page-listing td:nth-of-type(2)::before { content: "Pre Select"; }
    #c-wiki-page-versions #p-page-listing td:nth-of-type(3)::before { content: "Post Select"; }
    #c-wiki-page-versions #p-page-listing td:nth-of-type(4)::before { content: "Title"; }
    #c-wiki-page-versions #p-page-listing td:nth-of-type(5)::before { content: "Deleted"; }
    #c-wiki-page-versions #p-page-listing td:nth-of-type(5) { min-height: 20px; }
    #c-wiki-page-versions #p-page-listing td:nth-of-type(6)::before { content: "Wiki Link"; }
        /*For Builder-*/
    #c-wiki-page-versions #p-page-listing td:nth-of-type(7)::before { content: "Edited"; }
        /*For Moderator+*/
    [data-user-is-moderator="true"] #c-wiki-page-versions #p-page-listing td:nth-of-type(7)::before { content: "IP Addr"; }
    [data-user-is-moderator="true"] #c-wiki-page-versions #p-page-listing td:nth-of-type(8)::before { content: "Edited"; }
}

Individually pick your viewport settings at https://mydevice.io/devices/ , or just copy/paste the entire section.

Viewport Settings
/*Settings above 660px will not currently work with Danbooru's mobile layout*/
/*but are included for the sake of completeness.*/
@media screen and (width: 768px) {
    .prose {
        max-width: 728px;
    }
    .ui-dialog {
        max-width: 748px;
    }
}
@media screen and (width: 736px) {
    .prose {
        max-width: 696px;
    }
    .ui-dialog {
        max-width: 716px;
    }
}
@media screen and (width: 695px) {
    .prose {
        max-width: 655px;
    }
    .ui-dialog {
        max-width: 675px;
    }
}
@media screen and (width: 690px) {
    .prose {
        max-width: 650px;
    }
    .ui-dialog {
        max-width: 670px;
    }
}
@media screen and (width: 667px) {
    .prose {
        max-width: 627px;
    }
    .ui-dialog {
        max-width: 647px;
    }
}
@media screen and (width: 640px) {
    .prose {
        max-width: 600px;
    }
    .ui-dialog {
        max-width: 620px;
    }
}
@media screen and (width: 598px) {
    .prose {
        max-width: 558px;
    }
    .ui-dialog {
        max-width: 578px;
    }
}
@media screen and (width: 568px) {
    .prose {
        max-width: 528px;
    }
    .ui-dialog {
        max-width: 548px;
    }
}
@media screen and (width: 533px) {
    .prose {
        max-width: 493px;
    }
    .ui-dialog {
        max-width: 513px;
    }
}
@media screen and (width: 504px) {
    .prose {
        max-width: 464px;
    }
    .ui-dialog {
        max-width: 484px;
    }
}
@media screen and (width: 480px) {
    .prose {
        max-width: 440px;
    }
    .ui-dialog {
        max-width: 460px;
    }
}
@media screen and (width: 432px) {
    .prose {
        max-width: 392px;
    }
    .ui-dialog {
        max-width: 412px;
    }
}
@media screen and (width: 414px) {
    .prose {
        max-width: 374px;
    }
    .ui-dialog {
        max-width: 394px;
    }
}
@media screen and (width: 412px) {
    .prose {
        max-width: 372px;
    }
    .ui-dialog {
        max-width: 392px;
    }
}
@media screen and (width: 400px) {
    .prose {
        max-width: 360px;
    }
    .ui-dialog {
        max-width: 380px;
    }
}
@media screen and (width: 390px) {
    .prose {
        max-width: 350px;
    }
    .ui-dialog {
        max-width: 370px;
    }
}
@media screen and (width: 384px) {
    .prose {
        max-width: 344px;
    }
    .ui-dialog {
        max-width: 364px;
    }
}
@media screen and (width: 375px) {
    .prose {
        max-width: 335px;
    }
    .ui-dialog {
        max-width: 355px;
    }
}
@media screen and (width: 360px) {
    .prose {
        max-width: 320px;
    }
    .ui-dialog {
        max-width: 340px;
    }
}
@media screen and (width: 346px) {
    .prose {
        max-width: 306px;
    }
    .ui-dialog {
        max-width: 326px;
    }
}
@media screen and (width: 320px) {
    .prose {
        max-width: 280px;
    }
    .ui-dialog {
        max-width: 300px;
    }
}
Edits:
Show
(2017-05-20)
  • Created issue #3073 so that CSS code can distinguish between Builder- and Moderator+.
(2017-06-14)
  • Added fix for post comments and regular comments
  • Added word break on meta-tag and saved search
  • Popular posts page uses new #a-popular <div> ID
  • Better alignment for blacklist box (popular and pool)
  • Fix width issue on bans
  • Table fixes
    • New tables
      • Bans
      • Popular searches
      • Missed searches
      • Forum posts
      • Moderator IP address
    • Differentiated Builder-/Moderator+
    • Differentiated other pages
      • Wiki page versions
      • Moderator IP address
(2017-06-23)
  • Added fix for forum topics
    • DText tables appearing in forum topics are no longer processed by the CSS
(2017-06-29)
  • Added fix for long content such as links or tables causing pages to overflow
    • Added viewport settings section to assist with this (and possibly later fixes)
(2017-07-10)
  • Updated CSS for new Notes page layout
(2017-10-13)
  • Added fixes for various items
    • Search bar in top menu
    • Post previews in landscape mode
    • Spacing for paginator
  • Fixed bugs in prior version
    • Moderator queues using wrong CSS
    • Artist commentary version table post spacing
    • Reworded headers to be shorter in upload tags report
  • Added support for additional tables
    • Forum posts
    • Mod actions
    • Post replacements
  • Added additional setting to viewport settings
(2018-11-08)
  • Refactored CSS
  • Added support for additional tables
    • Artist URLs
    • Post approvals
  • Fixed revised tables
    • Artist commentary versions
    • Bulk update requests
    • Post replacements
  • Fixed tables that allow blank spots
  • Fixed pages/sections that overflowed off the page
  • Tweaked styles on multiple pages
    • Profile page
    • Uploads/post edit menu
    • Related tags section
    • Increased size and spacing of many links
    • Increased size of text inputs to maximum width allowable
    • Increased spacing for prose/posts

Updated

Thanks for starting to work on this; the usability has needed work since the layout was introduced.

Would it be possible to move the "resize to window" button closer to the image and/or (I'm guessing this would require scripts) make it so that images start out resized on page load?

Gollgagh said:

Would it be possible to move the "resize to window" button closer to the image and/or (I'm guessing this would require scripts) make it so that images start out resized on page load?

There is already an option for this in user settings (highlighted in red):

https://drive.google.com/open?id=0B39jDgCtzVHuU0NFUGYwc3U1Nk0

Although, I do think that I would want this resize setting to be on for my mobile device using the mobile layout, but off for my laptop/desktop using the desktop layout. Does anyone else think so...?

Updated

BrokenEagle98 said:

Although, I do think that I would want this resize setting to be on for my mobile device using the mobile layout, but off for my laptop/desktop using the desktop layout. Does anyone else think so...?

Yeah, sorry, that's what I was trying to get at.

@Gollgagh and others interested...

Just as a notice, issue #3074 has been partially fixed, so the image will now automatically resize with the mobile layout.

Also, I've been busy with other items, but I plan to update the Mobile Layout CSS hopefully by the end of the week. It's mostly just fixing the CSS for Moderators/Admins so that they wouldn't need to modify which sections are commented.

I found the overlap caused frequently by the DanbooruBot and my own bot's comments to be a bit annoying, so I added a fix that will control the overflow and add a scroll bar as necessary. It does require using settings tailored to a particular viewport, so I went through all of the settings at https://mydevice.io/devices/ and added them to a separate section.

They can either be copied en masse, or individually tailored. It doesn't matter, since they'll only fire when the screen is a certain width. Also, some settings won't work just yet with Danbooru's mobile layout since that fires with a pixel size less than 660, but they were included for completeness in case that ever changes.

I did a lot of updating that needed doing, both for changing tables and new pages. For page tweaks, I focused heavily on the post show page, upload new page, and user profile page. Beyond that, I adjusted the text size and links for better readability and easier clicking, and also sized text input and replaced/resized labels to increase the size of the inputs without overflowing off the page.

I consider the current release to be Beta-ish, and will probably finalize it once I've had enough time actually using it.

1