[DBTech] DragonByte Shout [Lite]

[DBTech] DragonByte Shout [Lite] 7.2.0

No permission to download
The shoutbox works good, but I am having an issue with the font icons not showing and some minor alignment problems.
Shoutboxtest.png
 
If you could provide feedback as to what CSS classes we are missing, that would be most appreciated :) This is my first xF mod since xenForo was first released, so there's going to be a few "growing pains" as it were. We are committed to bringing the best possible experience across all colour schemes for skins for our xenForo mods, so I will hotfix the mod for you once you've given me the details of the CSS classes.

I really appreciate you taking the time to help us with this. The reception we've gotten since launching this mod has been nothing short of amazing, and it means a lot both to me as a person and to DragonByte Tech as a business (naturally we would be hesitant to continue xF support if you all told us to go away ;) ) that you all have been so welcoming and helpful. Thank you :)


Fillip
 
It would help a little if the shoutbox used standard XenForo classes actually :D

@bgandy I can take a look for you as it appears to be our blackend theme. I should have time tomorrow to take a look.

It does work fine with the default theme. I am going to look more at it tonight.

@Russ, we are looking at going to either the Blackend Pro, Fusion Gamer, or Frag Zone themes in the near future. Your help would be appreciated in getting this resolved if I can't figure it out later today. I will post back.
 
Will the shoutbox be made responsive at some point? I notice now it just does not show up on smaller screens.
 
If you could provide feedback as to what CSS classes we are missing, that would be most appreciated :) This is my first xF mod since xenForo was first released, so there's going to be a few "growing pains" as it were. We are committed to bringing the best possible experience across all colour schemes for skins for our xenForo mods, so I will hotfix the mod for you once you've given me the details of the CSS classes.

I really appreciate you taking the time to help us with this. The reception we've gotten since launching this mod has been nothing short of amazing, and it means a lot both to me as a person and to DragonByte Tech as a business (naturally we would be hesitant to continue xF support if you all told us to go away ;) ) that you all have been so welcoming and helpful. Thank you :)


Fillip

Well to be honest I'm not really sure where to start and don't take this the wrong way as I do mean for this to come off as constructive criticism.

But when you look at this shoutbox on a default style do you truly think it's appealing? Or was the goal simply to literally copy px for px from the vbulletin version (I haven't seen the vb version so a wild guess)? I think you mentioned the editor can go beneath the chat in only the pro version, when it's a simple template modification a user could do why not just make it an option in the lite as well? Or even better why even have it on the left side? You don't respond to threads with the editor on shifted to the left of the existing messages. Also having it underneath would make your responsive easy peasy (y).

Tabs, XenForo has built in tab classes I suggest using them. See members / member view pages

Editor icons, I understand it's not using the redactor editor but it doesn't mean you can't use the existing sprite / background-positions already set. Your shoutbox currently will not work on dark styles without edits as seen above however most style developers ship out a redactor sprite that is visible on their style. Your setup is just having the user go in and edit each image (B/I/U/Color).

As a designer this really bugs me, last time I checked this is XenForo :D, your classes are filled with dbtech_vbshout classes, I understand the need for wanting to keep things "inline" or whatever you said previously in regards to developing them side by side but this isn't vBulletin, the designs are entirely different and currently it looks like you're styling this for vb3.x.

I truly appreciate when a coder does their best to adhere to XenForo's styling classes the best they can, and where the default things fall short they provide style properties to easily let the user customize things.

This is another chat freshly installed on a stock style just to give you an example or how I think something should look out of the box:

Screenshot_1.webp

Not:

0zNdxVI.webp

Side note what are the hidden menus?

Screenshot_3.webp

It looks like it's literally showing a menu for every single message that is posted.

I wish you guys luck, I think this product has a long ways to go before anyone should even consider upgrading to this "pro" version as the lite version in my opinion requires a ton of work.
 
But when you look at this shoutbox on a default style do you truly think it's appealing? Or was the goal simply to literally copy px for px from the vbulletin version (I haven't seen the vb version so a wild guess)?
Currently, the goal of the design of the shoutbox is to have it "good enough for a Beta" :) You will also notice that the Archive page is lacking breadcrumbs, for instance. This is because I'm focusing on function over form just now - hence why I'm collecting feedback on the styling.

To answer your question; yes, the goal for Beta 1 was to copy the vBulletin version pixel by pixel :) The goal for Beta 2 was to restore the most important missing functionality and fix reported issues.

Tabs, XenForo has built in tab classes I suggest using them. See members / member view pages
I will definitely write this down and look into using those classes.

Editor icons, I understand it's not using the redactor editor but it doesn't mean you can't use the existing sprite / background-positions already set. Your shoutbox currently will not work on dark styles without edits as seen above however most style developers ship out a redactor sprite that is visible on their style. Your setup is just having the user go in and edit each image (B/I/U/Color).
Definitely something I'll be changing in a future version :)

As a designer this really bugs me, last time I checked this is XenForo :D, your classes are filled with dbtech_vbshout classes
It's doubtful we'll be changing the class names as they have literally 0% impact on the functionality or design of the product, I'm sure you can understand :)

I truly appreciate when a coder does their best to adhere to XenForo's styling classes the best they can, and where the default things fall short they provide style properties to easily let the user customize things.
IIRC I don't use any in-line styling, all colours can be customised via the easily accessible dbtech_vbshout_colours.css template :)

Side note what are the hidden menus? It looks like it's literally showing a menu for every single message that is posted.
That's correct. Since each shout has a different context (e.g. we shouldn't show the "Ban User" menu item for users that are in a protected usergroup), it made the most sense at a time to pre-generate hidden menus via jQuery Templates so they could be loaded and unloaded each time the Shoutbox fetches new shouts.

Is this a problem?

I wish you guys luck, I think this product has a long ways to go before anyone should even consider upgrading to this "pro" version as the lite version in my opinion requires a ton of work.
To be fair, the reasons people would upgrade to Pro is for the added functionality, not whether the Lite version is pretty enough ;)


PS: I do appreciate you trying to understand why we did things the way we did. It would have been very easy to rip us a new one for not doing everything 100% native looking. Aside from a few cheeky comments, it was indeed very constructive, thank you :)


Fillip
 
Look into creating style properties as opposed to directing people to editing your CSS files.

All of XenForo's menu's are loaded at the bottom of the page if you look at the source, you have yours loading in a random div below the chat with display none. Also if there's 200 messages in the chat box there would be 200 menus loading (although hidden)? I'd suggest the username be linked to the membercard like default XenForo functionality and possibly add something near the date to edit/delete/report(P.S permissions as if I can't delete/edit shouts I shouldn't be able to see them).


As for inline-styling you have a ton. A quick look at the source code would reveal that.

I'll take another look at it as you guys progress and get some of the obvious things knocked out.
 
Look into creating style properties as opposed to directing people to editing your CSS files.
I could do that, sure :)

All of XenForo's menu's are loaded at the bottom of the page if you look at the source, you have yours loading in a random div below the chat with display none.
Is there a difference? I'm not being sarcastic, I'm genuinely curious as to whether there's any actual difference in terms of how the page loads / looks.

Also if there's 200 messages in the chat box there would be 200 menus loading (although hidden)?
Like I said before, each menu has a different context. Consider the following scenario:
There are 4 people using the Shoutbox just now:
  • User ID 1 (Administrator, in the Administrators user group)
  • User ID 2 (Moderator, in the Moderators user group)
  • User ID 3 (Member, in the Registered Members user group)
  • User ID 4 (Annoy-o-tron, in the Squelched Users user group)
Simplified, that creates the following permission matrix:
  • If you are viewing the SB as UID 1, you have the ability to edit/delete/prune shouts for user ID 1, 2, 3 and 4.
  • If you are viewing the SB as UID 2, you have the ability to edit shouts for user ID 1, 2, 3 4
  • If you are viewing the SB as UID 3, you have the ability to edit shouts for user ID 3
  • If you are viewing the SB as UID 4, you have no editing capabilities at all
In other words, each combination of browsing user -> shout user creates an entirely different matrix, meaning I cannot simply have 1 menu item loaded as "one size fits all".

I can look into generating the menu on-the-fly, but I'm not sure if that would be more performance efficient than pre-loading them. However, it's also true that continuously loading/unloading DOM entries can have a negative impact on performance.

I'll definitely look into performing some tests on this once I have more of the actual functionality completed.

I'd suggest the username be linked to the membercard like default XenForo functionality and possibly add something near the date to edit/delete/report
I'm not sure how I would load extra membercard links only in that particular context, but it's definitely something I will be looking into. The design screenshot for that other Shoutbox was inspiring :)

(P.S permissions as if I can't delete/edit shouts I shouldn't be able to see them).
You don't have to tell me about permissions, this is handled via the jQuery Template. Options the user cannot access is not shown, hence why there's different menus. You don't have to teach me why permissions are a good idea ;)

As for inline-styling you have a ton. A quick look at the source code would reveal that.
I will definitely look into that, it may have been a bodge to get Beta 1 ready and I forgot about it for Beta 2.


PS: I brought up with our Managing Director your feedback regarding the shout area on the left/right vs above/below, and we both agree that you have a very valid point. In Beta 3, we will be removing the left/right oriented shout area from the system. The Lite version will have the ability to choose to have a horizontal input area above or below the shoutbox :)


Fillip
 
I have actually uninstalled the shoutbox. The forum was running slow, and we found 224 pages of server errors since last night:(

This is one of the pages:

  1. Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  2. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  3. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  4. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  5. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  6. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  7. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  8. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  9. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  10. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  11. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  12. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  13. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  14. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  15. Delete...
    Undefined offset: 5Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  16. Delete...
    Undefined offset: 6Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  17. Delete...
    Undefined offset: 6Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  18. Delete...
    Undefined offset: 6Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  19. Delete...
    Undefined offset: 6Yesterday at 1:53 AM - /home/bgandy/public_html/forums/packages/DBTech/Shout/Shoutbox.php:200
  20. Delete...
    Undefined offset: 6
 
@Russ @bgandy Here's a preview of the new design in Beta 3:
Oi0zGwY.png


I've gone through every template and ensured that inline styling is only used where variables from PHP is used, and ensured there's no colour definitions anywhere in any CSS template - it's all using xF's style properties.

I've also significantly reduced the amount of templates used by consolidating code and removing dead weight as a result of the new simplified shout area system. The CSS templates have also been trimmed of useless definitions, and the dbtech_vbshout_colours.css template has been entirely removed as a result.

I'm going to look into what I can do to use the member card instead of custom menus, while still maintaining functionality. I do agree that using the member card would be superior to having to create a bodged menu, I'm just unsure how I would actually achieve it.

Again, thank you both for your feedback, you've both helped make the mod that much more awesome :)


Fillip
 
Did someone say Mention support with member card popups in shouts? ;)

BRtEIma.png


I've also figured out how to create a custom card, I'm hoping the card will allow me to utilise the AJAX functionality found in the old menu. If not, I'll just ditch the old menu functionality in general. This'll hopefully improve performance by reducing the DOM bloat of continuously adding/removing menu items.

This thread is turning into a "Have You Seen" thread, isn't it :p

I continue to be impressed with how easy it is to create some really cool looking functionality in xenForo. It has been an absolute dream to work with thus far :)


Fillip
 
DragonByte Tech updated [DBTech] DragonByte Shout v7 with a new update entry:

7.0.0 Beta 3

New/Restored Features:
  • The shoutbox has undergone a major facelift! Be sure to check out the new design.
  • The JavaScript has been significantly refactored to support the new design
  • Mentions are now supported in shouts and will bring up the member card
  • Member Cards are now used for usernames in the Active Users sideblock
  • Member Cards are now used for usernames in the Active Users tab
  • Custom member cards are now used for usernames in the main shout area,...

Read the rest of this update entry...
 
Top Bottom