Fixed My assorted fixes in EDGE

Discussion in 'Closed Reports' started by abdfahim, Feb 4, 2017.

  1. abdfahim

    abdfahim Customer

    I am not sure if this would be any help, but I am just pasting the CSS overrides I have done in EXTRA.css to fix cases which I believe design issues. Hopefully they'll be solved in the core, if you guys think they are bugs.

    I have added comment for each cases below to tell, why I was thinking they were bugs

    1. Remove white space around the Sub-forums block and Thread List block (in forum_view)
    Code:
    Copy Source
    .XenBase #content .sectionHeaders, .XenBase #content .subHeading {
        margin: 0px;
    }
    .XenBase #content .discussionList.section.sectionMain {
        padding: 0px;
        margin: 0px;
    }
    .XenBase #content .node.primaryContent {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    
    2. A typo, I believe, in these two classes, border-bottom-right-radius was set to 4px instead of border-top-right-radius
    Code:
    Copy Source
    .XenBase #content .sectionHeaders, .XenBase #content .subHeading {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0px;
    }
    
    3. Making profile post meta smaller
    Code:
    Copy Source
    .messageSimple .comment .commentControls, .messageSimple .messageMeta {
        font-size: 12px !important;
    }
    .messageSimple .comment .commentControls {
        margin-top: 10px !important;
    }
    
    4. Make profile post font size same as the reply font size
    Code:
    Copy Source
    .messageSimple .messageContent {
        font-size: 14px;
    }
    
    5. The Facebook login button breaks into to line (bug reported), hence just made all social login button full width as normal login button
    Code:
    Copy Source
    #xb_eAuthUnit {
        max-width: none;
    }
    
    6. In my opinion, reply blocks (to profile posts) should span 100% width
    Code:
    Copy Source
    .messageSimple .messageResponse {
        max-width: none !important;
    }
    
     
    Last edited: Feb 4, 2017
    bt012ss and thomas1 like this.
  2. thomas1

    thomas1 Customer

    Thank you for posting this. Took me quite a while yesterday to apply similar fixes yesterday. ;)
     
    abdfahim likes this.
  3. abdfahim

    abdfahim Customer

    And here are my results:

    1 & 2
    Before Change:
    upload_2017-2-5_8-51-39.png

    upload_2017-2-5_8-56-47.png

    After Change:
    upload_2017-2-5_8-46-26.png

    upload_2017-2-5_8-57-29.png


    3 & 4
    Before Change:
    upload_2017-2-5_8-59-31.png

    After Change:
    upload_2017-2-5_8-59-7.png

    5
    Before Change:
    upload_2017-2-5_9-2-22.png

    After Change:
    upload_2017-2-5_9-1-38.png

    6.

    Before Change:
    upload_2017-2-5_9-5-42.png

    After Change:
    upload_2017-2-5_9-6-30.png
     
    thomas1 likes this.
  4. thomas1

    thomas1 Customer

    In addition to @abdfahim 's code suggestions I had to add

    Code:
    Copy Source
    .XenBase #content .discussionList.section {
        padding: 0px;
        margin: 0px;
    }
    as well as

    Code:
    Copy Source
    .XenBase #content .section.sectionMain.searchResults {
        padding: 0px;
        margin: 0px;
    }
    in order to eliminate the white space on the search result and the New posts pages.
     
    Last edited: Feb 6, 2017
    Russ likes this.
  5. Russ

    Russ Designer

    Thanks guys, I'm working on the next release of XenBase and these fixes (or my own version) will be in it.
     
    abdfahim and thomas1 like this.
  6. Ruby

    Ruby Customer

    @abdfahim I will say this since joining the Pixel Exit Family last week you have provided a lot of useful information in helping @Russ and @Steve find little quarks in the styles and bringing them to their attention (y)
     
    Russ and abdfahim like this.
  7. abdfahim

    abdfahim Customer

    Thanks, it was completely my pleasure. Those were very small things which they would solve in seconds :). Also I think I owe them that much even if I could save few seconds, after their wonderful support and top-notch products :).

    Oh yaa, good one. Applying that right now.

    Just a note, last night I realized that we should not put "margin: 0px;" in those two styles, that causes alignment issues in other places (for example, AndyB's Similar Threads block while opening a new thread). Also, only setting zero padding is enough. So should be like

    Code:
    Copy Source
    .XenBase #content .discussionList.section.sectionMain, .XenBase #content .section.sectionMain.searchResults {
       padding: 0px;
    }
    Pretty much sure @Russ noticed that (most probably that's why he said, "or my own version" .. :D)
     
    Russ likes this.
  8. abdfahim

    abdfahim Customer

    @thomas1 I found another block where the same fix is necessary (New Posts section). And till @Russ fixes, I guess only below is enough to correct everything. (no need to target one by one like the above quote)

    Code:
    Copy Source
    .XenBase #content .discussionList.section {
        padding: 0px;
    }
     
    thomas1 likes this.
  9. abdfahim

    abdfahim Customer

    ........ except search block ofcourse :p
     
    thomas1 likes this.
  10. Russ

    Russ Designer

    Alright so...

    1.) The white spaces around the discussion areas + nodes in forum_view have been adjusted. I lightened the avatar background slightly as I didn't like the blend between the background and the page bg. This of course can be adjusted via: Style Properties -> [XB] Discussion List -> Avatar Block

    2.) This border radius was placed wrong here: Style Properties -> Building Blocks -> SubHeading

    3.) I'm going to leave this the same size the manual CSS can be used though as you have above.

    4.) The message profile posts now inherit the xb_fontsizes, previously was not.

    5.) This is adjusted, between the font size + the width of it it was causing a line break.

    6.) I'm not going to span these 100% by default, we'll take the default XF approach and leave the max-width on them. But... you can still use your manual CSS of course.
     
  11. Ruby

    Ruby Customer

    Looks like someone has been busy.
     
  12. abdfahim

    abdfahim Customer

    Thanks a lot, @Russ. Happily waiting for the gold release :).
     

Let's work together on your next project

Contact us today to talk about how we can help you