I've redesigned the bet page based on feedback from several license holders. This new layout works better with all responsive break points and only includes the VITAL information needed by the viewing user. The vital information is now more prominently displayed via CSS Classes that use larger font sizes, colors etc (font sizes change based on responsive break points).
The HEADER Area consists of the Owner Avatar - Bet Description/Wager Info - Challengers Avatar in a responsive container. The Avatar Sizes change based on responsive break points as does the Bet Description Text/Wager Info.
Below the HEADER Area is the STATUS Area. This area includes both TEXT explaining the Status of the Bet and Buttons allowing the viewing user to perform an action (accept, withdraw, settle, settle as bookie).
Below the STATUS Area is the INFO Area. This area is for displaying misc bet information like if it is associated with a Sportsbook Event or Private Bet or Customization's that you make and want to display additional data.
Below the INFO Area is the Content Area. This area is for display META data (owner, private/public controls. likes etc) and the Accept and Settlement Status blocks.
Last but not least is the Comments Area (nothing has changed with this).
The first few shots are just showing you the same bet in different Status stages....
As you can see, the bet is large print in your face now and directly below it is the Wager Amount (text muted, but still large and readable) and the Amount is GREEN to stick out and catch the users eye. Since this is OPEN bet, the STATUS area has a GREEN (again, eye catching) status telling the viewing that they can accept it. Followed by RED (again, eye catching) telling the user that its going to expire in x amount of days. If they are able to accept, the Accept Button will display. This bet is associated with a sportsbook event, so its displaying that information with a link to the Event.
In this shot, you can see someone has accepted the bet and now the Handle (which is the total of both bets placed on the wager) displays in place of the Wager Amount. The status has changed and the viewing user that accepted the bet is viewing, so they can see the Withdraw button. You can also see the Challenger accept message.
The Event has concluded, so the bet status is now awaiting settlement.
Lets settle the bet... In this shot, you'll see that the loser's Avatar is opaque. This is to make the Winners Avatar standout to quickly ID who won the bet. You'll see that the Handle turned into Paidout and below that, the Winner's name is displayed as well as the status message. You'll also see the Settlement Status Messages displayed.
As mentioned above, this layout is responsive. Here you will see the Avatar and Font size changing when it hits the WIDE responsive break point
Here you will see the Avatar and Font size changing when it hits the MEDIUM responsive break point
Here you will see the Avatar and Font size changing when it hits the NARROW responsive break point
This is about what a 4 inch screen size on a smart phone would look like.
Here is one with a long bet description and the user that is viewing has permission to both settle and settle as a bookie, so they have both settlement buttons (and links) displaying.
The HEADER Area consists of the Owner Avatar - Bet Description/Wager Info - Challengers Avatar in a responsive container. The Avatar Sizes change based on responsive break points as does the Bet Description Text/Wager Info.
Below the HEADER Area is the STATUS Area. This area includes both TEXT explaining the Status of the Bet and Buttons allowing the viewing user to perform an action (accept, withdraw, settle, settle as bookie).
Below the STATUS Area is the INFO Area. This area is for displaying misc bet information like if it is associated with a Sportsbook Event or Private Bet or Customization's that you make and want to display additional data.
Below the INFO Area is the Content Area. This area is for display META data (owner, private/public controls. likes etc) and the Accept and Settlement Status blocks.
Last but not least is the Comments Area (nothing has changed with this).
The first few shots are just showing you the same bet in different Status stages....
As you can see, the bet is large print in your face now and directly below it is the Wager Amount (text muted, but still large and readable) and the Amount is GREEN to stick out and catch the users eye. Since this is OPEN bet, the STATUS area has a GREEN (again, eye catching) status telling the viewing that they can accept it. Followed by RED (again, eye catching) telling the user that its going to expire in x amount of days. If they are able to accept, the Accept Button will display. This bet is associated with a sportsbook event, so its displaying that information with a link to the Event.
In this shot, you can see someone has accepted the bet and now the Handle (which is the total of both bets placed on the wager) displays in place of the Wager Amount. The status has changed and the viewing user that accepted the bet is viewing, so they can see the Withdraw button. You can also see the Challenger accept message.
The Event has concluded, so the bet status is now awaiting settlement.
Lets settle the bet... In this shot, you'll see that the loser's Avatar is opaque. This is to make the Winners Avatar standout to quickly ID who won the bet. You'll see that the Handle turned into Paidout and below that, the Winner's name is displayed as well as the status message. You'll also see the Settlement Status Messages displayed.
As mentioned above, this layout is responsive. Here you will see the Avatar and Font size changing when it hits the WIDE responsive break point
Here you will see the Avatar and Font size changing when it hits the MEDIUM responsive break point
Here you will see the Avatar and Font size changing when it hits the NARROW responsive break point
This is about what a 4 inch screen size on a smart phone would look like.
Here is one with a long bet description and the user that is viewing has permission to both settle and settle as a bookie, so they have both settlement buttons (and links) displaying.
Upvote
0
