RefactorCSS Notes

[arpee]

Notes:

This should be a clean new implementation - not a copy over. If there is a better or cleaner way to do somthing - this is the time to clean up the structure and method.

• [x] Can we move the redsquare-main.css to the includes folder temporarilty - so that there are no conflicts for the work David and Khan are doing.

• [x] Can we clean out everything from the redsquare css that is not to do with tweets and the module specifically (move the menu css to the menu generically.)

• [x] Can we remove the redsquare ellipsis element - and do the markup by adding a classes to the parent and child tweets?

• [x] Can these classes remove the lines between tweets too?

• [x] Can we label (with a class) the spacer div in the tweet layout so that we don't have an unexplained empty div in the layout?

• [x] Can we fix the line between tweets to not be a line and ellipsis... it should be one thing that looks good...

• [x] Remove junk from class names. <div class=" uiaouiasdf redsquare-ellipsis"></div>? 👅

• In redsquare-main.css we declare: .redsquare-item { cursor: pointer; padding: 2rem 3rem 0 0; border-bottom: 1px solid #a5a5a533; } The left padding is definitely un-needed in mobile (it is there in desktop to balance the content?)

• [x] Can we add images to emoticons in static content?

• [x] Please add at least one of each tweet type:

  • [x] Stand alone
  • [x] Parent
  • [x] Child (reply)
  • [x] Retweet

[arpee]

---

[arpee]

Is there a reason that we declare this:

.saito-user>div:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 1;
    grid-row-end: span 1;
}

Rather than using .saito-address - or another class?

[arpee]

More requests:

• [x] Clean up and streamline tweet classes to:

• tweet

  • saito-user
  • tweet-text
  • tweet-preview
  • tweet-controls

• [x] make sure that all divs/elements have classes

• [x] update saito-user html and css to use classes rather than :nth-child syntax.

• [x] Remove "🟥 RED SQUARE" header in mobile.

• [x] Remove Box and Padding around retweet - maximise size

• [x] make "retweeted by" and key or ident - consistent size.

• [x] investigate making the font size smaller in mobile

Add tweets with content:

• [x] picture
• [x] pictures
• [x] open graph preview
• [x] video embed

[arpee]

Notes:

I have changed the way we handle longer tweets. There are now two classes "preview" and "full".

These should be added if after rendering clientHeight < scrollHeight. So at the end of rendering the tweet.

We then need to add a function to remove preview and replace it with full on click of tweet.review.after and do the opposite on clicking tweet.full::after.

This will expand and contract the tweet content rather than add a scrollbar.

Notes:

• this should be adjusted to work only on the tweet-text element not the tweet element as it does now - in the above rework.
• always make sure that the max-height and height of elements is an integer multiple of the line height - so that things don't get cut off in the middle of a row.

please @davikstone2 and @umairkhannn - co-ordinate on this and ask me any questions if you are unsure - thanks

[arpee]

• [x] Still seeing box and padding around retweet - pls remove.
• [x] Please change class - 'redsquare-item' to 'tweet'
• [x] Please change class - 'tweet' to 'tweet-body'

[arpee]

RS

• [x] Get the center column scrolling with the scrollbar on the side of the window - like the existing site.

Arcade

• [ ] The elements classes in the invite should be reworked so that nameing is clear.

We should go with:

• game-tile
  • game-tile-content invite|watch|review
    • game-tile-image
    • game-tile-info invite|watch|review
      • game-tile-game-name
      • game-tele-game-players
    • game-tile-game-short-description
    • game-tile-game-controls

[arpee]

Arcadexx the left sidebear and content both scroll off page - should only be center.

Have an issue here that the menu top (visible with mouse over) is in line but what folks see is the top of the text.

[arpee]

Things we should get right in redsquare that are good in redsquarex

• [x] Spacing between columns.
• [x] Header at top of column (without buttons till added)
• [x] Ranking table theming (missing hover and spacing)

[arpee]

• [ ] Column spacing still broken in /redsquare atm - where fixes pushed?

• [x] Ranking table mising hover effects
• [x] saito-button-css, saito-chat, saito-modal, saito-overlay, saito-page-layout, saito-table, saito-tweet .css files all have color definitions not using variables - these should be updated to use variables.
• [x] saito-modal.css has a huge amount of stuff in it that is not generic and not being used. (not sure if you of Khan added, but can we clear out?
• [ ] there is redsquare specific css in saito-table.css - this should all be in a redsquare css definition - please move to rs - or make generic if it should be.

[arpee]

Can you explain the move to this structure?

    <div id="saito-container" class="saito-container">

      <div class="saito-sidebar-container">
        <div class="saito-sidebar left">
        </div>
      </div>

      <div class="saito-main">
      </div>

      <div class="saito-sidebar right">
      </div>

    </div>

why did we add saito-sidebar-container? thanks.

[arpee]

• [x] Fix padding on tweets so that content is not touching edges. (Currnently hover looks terrible as the content is touching the edges.)
• [x] Remove iframe borders (so sad.)
• [x] Improve spacing between tweet preview elements - images/ifame etc