Next Generation Community Builder 2.0 RC Released

9 years 8 months ago #247618 by michaedt
Installed on two test sites; one as upgrade and another as a fresh install. At first blush it looks great.
A few small items.

1) No matter what I do to the avatar field and tab settings, I can't get consistency regarding the shape of the avatar. The circle, in particular, almost never looks like a circle (more of a horizontal oval). And when I resize the screen or view on mobile device, the oval gets even more flattened. It seems to me like this should have a responsive class to resize the circle automatically for different devices. Am I doing something wrong with configuration? If yes, some of the defaults should probably be changed because this problem existed without any modifications to CB configuration.

2) Similarly, no matter what I change in canvas settings, I can't get the background image to be taller. I'm using the default template.

2) I'm always a fan of text residing in language files so that I can perform overrides via Joomla without messing with code. The article plugin, for example, has the following in tab.php:
'<th style="width: 50%;" class="text-left">' . CBTxt::T( 'Article' ) . '</th>'
I would rather "Article" be a language variable so that I can change it to whatever I want (this is particularly helpful for those that use CCKs to use articles for uses other than "articles").
This is a small thing, but thought I'd make a note.

Please Log in to join the conversation.

9 years 8 months ago #247629 by krileon

The circle, in particular, almost never looks like a circle (more of a horizontal oval).

Depends entirely on the size of the image. If the images aren't square then it'll be more oval shape. It's using CSS radius rules to give the circle look.

And when I resize the screen or view on mobile device, the oval gets even more flattened.

Your image isn't square and as the screen size gets smaller it makes the image smaller.

It seems to me like this should have a responsive class to resize the circle automatically for different devices

It already does, the issue is your images are not setup to be made circular.

2) Similarly, no matter what I change in canvas settings, I can't get the background image to be taller. I'm using the default template.

It's forced to 200px height (100px on mobile). It can be adjusted by modifying the CSS, but the positioning of elements are absolute based off 200px height so it is not possible for there to be a parameter for this.

I would rather "Article" be a language variable so that I can change it to whatever I want (this is particularly helpful for those that use CCKs to use articles for uses other than "articles").

It is a language variable. CBTxt is our language API. We do not use or support Joomla language API as it is no where near as flexible and powerful as CBs. To change it you'll need to modify your CB language files which you can find at the below location.

components/com_comprofiler/plugin/language/default_language/language.php


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
The following user(s) said Thank You: michaedt

Please Log in to join the conversation.

9 years 8 months ago #247644 by michaedt
Thank you,
I set the image parameters so that height and width would be restricted to 200 x 200 pixels on upload, thus making a perfect square. It looks square on a desktop but turns into a rectangle on mobile devices. Same holds for the round images. They become oval on mobile devices. I can't expect my users to jump through hoops to resize their images. Most are used to Facebook, where you can pop it in and it resizes automatically. Once I changed the properties of the avatar to be square, we're much closer.
And thanks for the tip on the language file.
Kind Regards.

Please Log in to join the conversation.

9 years 8 months ago #247648 by glenanPL
Hello,
Where is it possible to download a French translation for RC2.0, if it exists?
With the package forge.joomlapolis.com/projects/lan-cb-en some strings are missing.
Thank you in advance for the answer
NB: I saw pass a Swedish translation of the CB 2.0 beta 3, but ...

Please Log in to join the conversation.

9 years 8 months ago - 9 years 8 months ago #247650 by Himgoku
Hi michaedt,

the user avatar gets distorted on a small screen because it has a fixed width.
Changing 'width' into 'max-width' solves it:
.cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ .cb_form_line > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ tr > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line ~ .cbft_status > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr ~ .cbft_status > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ .cb_form_line > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ tr > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line ~ .cbft_status > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr ~ .cbft_status > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr > .fieldCell {
    bottom: -25px;
    height: 200px;
    left: 15px;
    max-width: 200px !important;
    position: absolute;
    z-index: 5;
}

Best regards

CB 2.0 RC
Joomla 3.3.3
The following user(s) said Thank You: michaedt

Please Log in to join the conversation.

9 years 8 months ago #247663 by michaedt

Himgoku wrote: Hi michaedt,

the user avatar gets distorted on a small screen because it has a fixed width.
Changing 'width' into 'max-width' solves it:

.cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ .cb_form_line > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ tr > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line ~ .cbft_status > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr ~ .cbft_status > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr > .cb_field, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ .cb_form_line > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cbft_status ~ tr > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line ~ .cbft_status > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr ~ .cbft_status > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto .cb_form_line > .fieldCell, .cb_template .cbPosCanvas .cbPosCanvasHeader .cbPosCanvasPhoto tr > .fieldCell {
    bottom: -25px;
    height: 200px;
    left: 15px;
    max-width: 200px !important;
    position: absolute;
    z-index: 5;
}

Best regards


Very cool! I added to my template CSS override and it works. Thank you.
I wish the user name would move above or below the image (or disappear on small devices), but the image correction is a good start. Thank you!

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.246 seconds

Facebook Twitter LinkedIn