[Prototype] Mobile Layout (CSS)

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 by BrokenEagle98 over 7 years ago

Reply

Gollgagh

almost 9 years ago

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?

Reply

BrokenEagle98

almost 9 years ago

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 by BrokenEagle98 almost 9 years ago

Reply

Gollgagh

almost 9 years ago

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.

Reply

BrokenEagle98

almost 9 years ago

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

Ah, got it. Thanks for the feedback BTW. Created issue #3074.

Reply

BrokenEagle98

almost 9 years ago

@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.

Reply

BrokenEagle98

almost 9 years ago

It's a bit late, but I updated the OP with the latest CSS code.

Reply

BrokenEagle98

almost 9 years ago

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.

Reply

BrokenEagle98

over 7 years ago

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.

Reply