diff --git a/public/src/forum/topic.js b/public/src/forum/topic.js index 144620790b..7203bf41d6 100644 --- a/public/src/forum/topic.js +++ b/public/src/forum/topic.js @@ -611,7 +611,7 @@ - var postAuthorImage, postAuthorInfo, pagination; + var postAuthorImage, mobileAuthorOverlay, pagination; var postcount = templates.get('postcount'); function updateHeader() { @@ -624,9 +624,9 @@ }); } - jQuery('.mobile-author-info').css('bottom', '0px'); + jQuery('.mobile-author-overlay').css('bottom', '0px'); postAuthorImage = postAuthorImage || document.getElementById('mobile-author-image'); - postAuthorInfo = postAuthorInfo || document.getElementById('mobile-author-info'); + mobileAuthorOverlay = mobileAuthorOverlay || document.getElementById('mobile-author-overlay'); pagination = pagination || document.getElementById('pagination'); pagination.parentNode.style.display = 'block'; @@ -637,7 +637,7 @@ if (scrollTop < 50 && postcount > 1) { postAuthorImage.src = (jQuery('.main-avatar img').attr('src')); - postAuthorInfo.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html(); + mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html(); pagination.innerHTML = '0 out of ' + postcount; return; } @@ -662,7 +662,7 @@ if (inView) { pagination.innerHTML = this.postnumber + ' out of ' + postcount; postAuthorImage.src = (jQuery(this).find('.profile-image-block img').attr('src')); - postAuthorInfo.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html(); + mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html(); } }); diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl index a450405fa6..624c233416 100644 --- a/public/templates/topic.tpl +++ b/public/templates/topic.tpl @@ -18,44 +18,41 @@
  • -
    - -
    -     -

    -

    {topic_name}

    -

    + +
    +     +

    +

    {topic_name}

    +

    -
    -
    - - -
    - -
    - - -
    -
    - - -
    - -
    - - -
    +
    +
    + + +
    + +
    + + +
    +
    + + +
    + +
    + +
    -
    {main_posts.content}
    @@ -88,37 +85,34 @@
    -
    -
    -
    - +
    +
    + - -
    - -
    - -
    -
    - - -
    - -
    - - -
    + +
    + +
    + +
    +
    + + +
    + +
    + +
    -
    {posts.content}
    @@ -162,13 +156,13 @@
    -
    +
    -

    +

    diff --git a/public/themes/cerulean/topic.less b/public/themes/cerulean/topic.less index ca98e928a6..54779eb26d 100644 --- a/public/themes/cerulean/topic.less +++ b/public/themes/cerulean/topic.less @@ -35,6 +35,15 @@ } } + .profile-block { + background: rgba(0, 0, 0, 0.02); + margin: 15px -11px -11px -11px; + border-radius: 0 0 5px 5px; + font-size: 10px; + line-height: 15px; + padding: 5px 8px 5px 5px; + color: #777; + } .active-users { color: rgb(153,153,153); diff --git a/public/themes/vanilla/topic.less b/public/themes/vanilla/topic.less index 053f894c40..1494f95ec0 100644 --- a/public/themes/vanilla/topic.less +++ b/public/themes/vanilla/topic.less @@ -14,161 +14,135 @@ &.deleted { -moz-opacity: 0.30; opacity: 0.30; - height:30px; - overflow-y:hidden; + height: 30px; + overflow-y: hidden; } &.deleted-expanded { - height:100%; - overflow-y:default; + height: 100%; + overflow-y: default; } } } + @media (max-width: 475px) { + .post-tools { + display: none; + } + + .favourite-text { + display: none; + } + } + @media (max-width: 767px) { .topic-main-buttons { margin-bottom: 0px; } } - @media (max-width: 475px) { - .post-tools { - display: none; - } - .favourite-text { - display: none; - } - } - - // styling the chat button in the dropdown to match. surely there's a better way... - .chat { - display: block; - padding: 3px 20px; - clear: both; - .pointer; - - &:hover, &:focus { - color: white; - background-color: rgb(66, 139, 202); - } - } - - .post-signature { - color: #666; - font-size: 12px; - border-top: 1px solid #ddd; - display: inline-block; - - img { - max-width:200px; - max-height:60px; - } - - margin-left: 5px; - } - - .profile-block, .post-block { - position: relative; - border: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 5px; - padding: 10px; - - p { - line-height: 1.75em; - } - } - - .profile-block { - background: rgba(0, 0, 0, 0.02); - margin: 15px -11px -11px -11px; - border-radius: 0 0 5px 5px; - font-size: 10px; - line-height: 15px; - padding: 5px 8px 5px 5px; - color: #777; - } - - .post-block { - .post-buttons { - background: rgba(0, 0, 0, 0.02); + .main-post, .sub-posts { + .profile-block, .post-block { + position: relative; border: 1px solid rgba(0, 0, 0, 0.06); - margin: -5px 0 0 0; - padding: 8px 0 0 23px; + border-radius: 5px; + padding: 10px; - button.show { - display: inline-block !important; + .post-signature { + color: #666; + font-size: 12px; + border-top: 1px solid #ddd; + display: inline-block; + + img { + max-width: 200px; + max-height: 60px; + } + + margin-left: 5px; + } + } + + .post-block { + .topic-buttons { + background: rgba(0, 0, 0, 0.02); + border: 1px solid rgba(0, 0, 0, 0.06); + margin: -5px 0 0 0; + padding: 8px 0 0 23px; + + button.show { + display: inline-block !important; + } + + @media (max-width: 767px) { + padding-left: 9px; + } } - @media (max-width: 767px) { - padding-left: 9px; + .post-content { + padding: 10px 5px 0 5px; + word-wrap: break-word; + } + + .post-images{ + padding: 2px 5px 0 5px; } } } - .post-content { - min-height: 50px; - padding: 10px 5px 0 5px; - word-wrap: break-word; - } - - .post-images{ - padding: 2px 5px 0 5px; - } - - - .sub-posts { - .post-tools { - margin-right: 9px; - } - .post-content { - margin-left: 10px; - } - .post-signature { - margin-left: 15px; + .post-block { + .post-signature { + margin-left: 15px; + } + + .topic-buttons { + margin: -11px -10px 0px -10px; + border: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + padding: 8px 9px 7px 23px; + } + + .post-content { + margin-left: 10px; + } } + .img-thumbnail { padding: 2px; border-radius: 0; margin-left: 16px; } - .post-buttons { - margin: -11px -10px 0 -10px; - border: 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.06); - } } .main-post { - .main-post-buttons { - h3 { - margin: 0; + h3 { + margin: 0; - .topic-title { - width: auto; - overflow: hidden; - margin: 0 0 -5px 0; - padding: 0 0 5px 0 - } + .topic-title { + width: auto; + overflow: hidden; + margin: 0 0 -5px 0; + padding: 0 0 5px 0 + } + } + + .avatar { + color: white; + position: relative; + float: left; + margin: 0 10px 0 0; + padding-bottom: 0px; + text-align: center; + width: 100px; + + @media (max-width: 767px) { + display: none; } - .main-avatar { - color: white; - position: relative; - float: left; - margin: 0 10px 0 0; - padding-bottom: 0px; - text-align: center; - width:100px; - - @media (max-width: 767px) { - display: none; - } - - .img-thumbnail { - padding: 2px; - border-radius: 0; - } + .img-thumbnail { + padding: 2px; + border-radius: 0; } } @@ -181,44 +155,26 @@ } .post-block { - .post-buttons { + .topic-buttons { + background: rgba(0, 0, 0, 0.02); + border: 1px solid rgba(0, 0, 0, 0.06); + margin: 0 -11px 0 92px; + padding: 10px; + border-right: 0; + + @media (max-width: 767px) { + margin-left: -11px; + border-left: 0; + } + button.show { display: inline-block!important; } - } } - - .favourite { - .pointer; - } - .btn { - display: inline-block; - } - - .topic-buttons { //main-post version is called post-buttons, needs to be consolidated. - background: rgba(0, 0, 0, 0.02); - border: 1px solid rgba(0, 0, 0, 0.06); - margin: 0 -11px 0 92px; - padding: 10px; - border-right: 0; - - @media (max-width: 767px) { - margin-left: -11px; - border-left: 0; - } - - button.show { - display: inline-block!important; - } - } - } - - - - .mobile-author-info { + .mobile-author-overlay { display: none; z-index: 9999; @@ -248,4 +204,17 @@ font-size: 16px; } } + + // styling the chat button in the dropdown to match. surely there's a better way... + .chat { + display: block; + padding: 3px 20px; + clear: both; + .pointer; + + &:hover, &:focus { + color: white; + background-color: rgb(66, 139, 202); + } + } } \ No newline at end of file