Commit 6b7338bb authored by bramtenhove's avatar bramtenhove
Browse files

DS-4253 - Some manual fixes were still needed for coding standards

parent 24b259ca
......@@ -2,8 +2,13 @@
* Added method for autogrow behaviour and changed event triggers.
* Changed overflow styles for autogrow form elements.
* Update class on icons in navbar https://www.drupal.org/node/2872929
* Update instruction: In your sub theme provide a fill color for either `.navbar-nav__icon` which is the new icon class. Or like we did in social blue provide a fill for `.navbar-nav > li > a`. The default color is white. The size of the icon is in socialbase. The float class is removed and not needed.
* Provide a condition before printing the *topic type* in `node--topic--teaser.html.twig`. Although topic type in a required field by default, this can be changed in an installation.
* Update instruction: In your sub theme provide a fill color for either
`.navbar-nav__icon` which is the new icon class. Or like we did in social blue
provide a fill for `.navbar-nav > li > a`. The default color is white. The size
of the icon is in socialbase. The float class is removed and not needed.
* Provide a condition before printing the *topic type* in
`node--topic--teaser.html.twig`. Although topic type in a required field by
default, this can be changed in an installation.
### v2.1.3 -- Apr 2017
* Changed wave-effect styles.
......@@ -17,8 +22,10 @@
* Document and rename alert, badge, list in style guide
* Add Bar chart and Donut chart to MorrisJs documentation
* Optimise small teaser templates
* Add two columns and three columns layout, with sidebar_first and sidebar_second regions.
* Renamed in page-full twig block nodefull_header to metainfo and added twig block metaengage.
* Add two columns and three columns layout, with sidebar_first and
sidebar_second regions.
* Renamed in page-full twig block nodefull_header to metainfo and added twig
block metaengage.
### v2.1.1 -- Feb 2017
* Removed pug style guide files
......@@ -32,19 +39,24 @@
Complete overhaul of theme_hooks and clean up of templates
* All theme_hooks_suggestions and theme_hook_preprocess functions are moved to individual files in the includes folder
* All theme_hooks_suggestions and theme_hook_preprocess functions are moved to
individual files in the includes folder
* Cleaned up form hooks
* Renamed classes in `card` component
* Renamed classes in `teaser` component
* Removed Pug version of styleguide -> styleguide is moved to socialblue theme
* Inserted documentation in component scss files for existing components in styleguide
* Inserted documentation in component scss files for existing components in
styleguide
* Added range slider to atoms > form-controls
* Moved layout from base component to template component folder
* Added Javascript library folder to components for better abstraction of javascript libraries/enhancements
* Added Javascript library folder to components for better abstraction of
javascript libraries/enhancements
* Added Morris.js dependency via bower (gulp plugin)
* Removed theme settings options that are default
* Removed bootstrap function to colorize and iconize buttons. This is now done via form hooks
* Updated the way we override the bootstrap panel implementation for details and fieldsets. Updated corresponding template files
* Removed bootstrap function to colorize and iconize buttons. This is now done
via form hooks
* Updated the way we override the bootstrap panel implementation for details and
fieldsets. Updated corresponding template files
* Merged container templates
* Merged views templates
* Merged form templates
......
# Base theme #
The Social Base theme is designed as a base theme for Open Social. This base theme holds has a lot of sensible defaults. It doesn't however contain much styling. We expect every developer to want to change this for his/her project. As you can see there is also a theme called **socialblue**. Socialblue is the demo/styling sub theme for Open Social.
The Social Base theme is designed as a base theme for Open Social. This base
theme holds has a lot of sensible defaults. It doesn't however contain much
styling. We expect every developer to want to change this for his/her project.
As you can see there is also a theme called **socialblue**. Socialblue is the
demo/styling sub theme for Open Social.
# Changing the style of the theme #
If you are a Drupal themer you know how to create a (sub)theme. There are no tricks in our setup you need to know for Open Social. The easiest way to start is to grab a copy of Social Blue and rename all instances of social Blue to your new theme name. Social Base and Social Blue will get updates each release, so it is best not to make changes in here you want to keep.
Make sure that Social Base is always set as the base theme and inherit the regions from social Base if you do not change the page template.
# Development of your theme #
Before you start theming there are a few things that might be convenient. In html/sites/default there is a services.yml file. Make sure to set
* twig.config -> debug: true
* twig.config -> auto_reload: true
* twig.config -> cache: false
Also in sites default you will find an example.settings.local.php file. Duplicate this file and remove the example part. After you have configured these files you need to rebuild the caches. This will speed up you development process.
If you are a Drupal themer you know how to create a (sub)theme. There are no
tricks in our setup you need to know for Open Social. The easiest way to start
is to grab a copy of Social Blue and rename all instances of social Blue to your
new theme name. Social Base and Social Blue will get updates each release, so it
is best not to make changes in here you want to keep.
Make sure that Social Base is always set as the base theme and inherit the
regions from social Base if you do not change the page template.
# Development of your theme #
Before you start theming there are a few things that might be convenient. In
html/sites/default there is a services.yml file. Make sure to set
* twig.config -> debug: true
* twig.config -> auto_reload: true
* twig.config -> cache: false
Also in sites default you will find an example.settings.local.php file.
Duplicate this file and remove the example part. After you have configured these
files you need to rebuild the caches. This will speed up you development
process.
### Goodies used
......@@ -28,15 +41,20 @@ If you are a Drupal themer you know how to create a (sub)theme. There are no tri
<dt># assets</dt>
<dd>Our gulp tasks will generate our CSS, JS and images that Drupal uses.</dd>
<dt># components</dt>
<dd>This is working folder. The folder is categorised following atomic design principles. Most re-usable css values are turned into variables for consistency.</dd>
<dd>This is working folder. The folder is categorised following atomic design
principles. Most re-usable css values are turned into variables for consistency.
</dd>
<dt># config</dt>
<dd>Drupal installation files</dd>
<dt># js - deprecated</dt>
<dd>Old javascript folder, needs to cleaned up (all JS should be in components are generated to assets folder)</dd>
<dd>Old javascript folder, needs to cleaned up (all JS should be in components
are generated to assets folder)</dd>
<dt># libraries</dt>
<dd>External libraries. Install via Gulp Bower task.</dd>
<dt># src</dt>
<dd>Drupal plugins - mainly overrides for the bootstrap base theme. @see [Drupal Bootstrap documentation](https://drupal-bootstrap.org/api/bootstrap/docs%21plugins%21README.md/group/plugins/8)</dd>
<dd>Drupal plugins - mainly overrides for the bootstrap base theme.
@see [Drupal Bootstrap documentation](https://drupal-bootstrap.org/api/bootstrap/docs%21plugins%21README.md/group/plugins/8)
</dd>
<dt># Templates</dt>
<dd>This folder contains all twig templates for the theme.</dd>
......@@ -44,14 +62,16 @@ If you are a Drupal themer you know how to create a (sub)theme. There are no tri
# Contributing to socialbase #
Social Base uses Gulp.js as a task runner, so that it can do many tasks automatically:
Social Base uses Gulp.js as a task runner, so that it can do many tasks
automatically:
- Build CSS from your Sass using libSass and node-sass.
- Add vendor prefixes for the browsers you want to support using Autoprefixer.
- Watch all of your files as you develop and re-build everything on the fly.
Set up your front-end development build tools:
1. [Install Yarn](https://yarnpkg.com/en/docs/install), see their website for documentation
1. [Install Yarn](https://yarnpkg.com/en/docs/install), see their website for
documentation
2. Install the gulp-cli tool globally. Normally, installing a Node.js globally
is not recommended, which is why both Gulp and Grunt have created wrapper
......@@ -62,7 +82,8 @@ Set up your front-end development build tools:
npm install -g gulp-cli
```
3. The package.json file contains the versions of all the node packages you need. To install them run:
3. The package.json file contains the versions of all the node packages you
need. To install them run:
```
yarn install
```
......@@ -73,13 +94,18 @@ Set up your front-end development build tools:
options.drupalURL = 'http://localhost';
```
4. There are different gulp tasks. What each gulp task does is described in the gulpfile with the task itself. To run a gulp task, type:
4. There are different gulp tasks. What each gulp task does is described in the
gulpfile with the task itself. To run a gulp task, type:
```
gulp [taskname]
```
# Notice
We are constantly improving and updating the theme setup for Open Social. It might be the readme is not always up to date. Also check the changelog file for changes. You can report issues via the drupal.org [issue queue](https://www.drupal.org/project/issues/social?categories=All). The following items are on our roadmap:
* Remove JS folder and make sure all scripts are placed in their corresponding component.
We are constantly improving and updating the theme setup for Open Social. It
might be the readme is not always up to date. Also check the changelog file for
changes. You can report issues via the drupal.org [issue queue](https://www.drupal.org/project/issues/social?categories=All).
The following items are on our roadmap:
* Remove JS folder and make sure all scripts are placed in their corresponding
component.
* Add components library module and create twig templates in the components folder.
* Provide a starterkit in favor a manual copying Social Blue to start a new theme.
......@@ -27,4 +27,4 @@ cdn_provider: ''
tooltip_enabled: 0
button_colorize: 0
button_iconize: 0
modal_enabled: 0
\ No newline at end of file
modal_enabled: 0
......@@ -57,9 +57,9 @@ function socialbase_preprocess_form(&$variables) {
if (is_object($comment)) {
// Display comment created date in format 'time ago'.
$created_time_ago = \Drupal::service('date.formatter')
->formatTimeDiffSince($comment->getCreatedTime(), array('granularity' => 1, 'return_as_object' => TRUE));
->formatTimeDiffSince($comment->getCreatedTime(), ['granularity' => 1, 'return_as_object' => TRUE]);
$submitted = t('@time ago', array('@time' => $created_time_ago->getString()));
$submitted = t('@time ago', [('@time' => $created_time_ago->getString()]);
$variables['submitted'] = Link::fromTextAndUrl($submitted, $comment->urlInfo('canonical'));
$variables['#cache']['max-age'] = $created_time_ago->getMaxAge();
......@@ -79,10 +79,10 @@ function socialbase_preprocess_form(&$variables) {
}
// Author name.
$username = array(
$username = [
'#theme' => 'username',
'#account' => $account,
);
];
$variables['author'] = drupal_render($username);
}
}
......@@ -100,8 +100,8 @@ function socialbase_preprocess_form(&$variables) {
// Display post created date in format 'time ago'.
$created_time_ago = \Drupal::service('date.formatter')
->formatTimeDiffSince($post->getCreatedTime(), array('granularity' => 1, 'return_as_object' => TRUE));
$date = t('%time ago', array('%time' => $created_time_ago->getString()));
->formatTimeDiffSince($post->getCreatedTime(), ['granularity' => 1, 'return_as_object' => TRUE]);
$date = t('%time ago', ['%time' => $created_time_ago->getString()]);
$variables['date']['#markup'] = $date;
$variables['#cache']['max-age'] = $created_time_ago->getMaxAge();
......@@ -205,7 +205,7 @@ function socialbase_form_alter(&$form, FormStateInterface $form_state, $form_id)
// These forms have a container with class form-action at the bottom and
// we style it in a way that the primary/submit button is aligned right
// Also we define the style of the buttons based on their function.
$default_forms = array(
$default_forms = [
'user_form',
'user_pass_reset',
'social_user_login_form',
......@@ -240,7 +240,7 @@ function socialbase_form_alter(&$form, FormStateInterface $form_state, $form_id)
'post_photo_delete_form',
'node_event_delete_form',
'node_topic_delete_form',
);
];
if (in_array($form_id, $default_forms)) {
$form['#attributes']['class'][] = 'form--default';
......@@ -275,7 +275,7 @@ function socialbase_form_alter(&$form, FormStateInterface $form_state, $form_id)
}
// Here we list all the forms that need to be wrapped in cards.
$add_card_to_forms = array(
$add_card_to_forms = [
'group_content_open_group-group_membership_group-join_form',
'group_content_open_group-group_membership_add_form',
'group_content_open_group-group_membership_edit_form',
......@@ -286,7 +286,7 @@ function socialbase_form_alter(&$form, FormStateInterface $form_state, $form_id)
'user_register_form',
'user_pass_reset',
'social_user_password_form',
);
];
if (in_array($form_id, $add_card_to_forms)) {
$form['#attributes']['class'][] = 'card';
......@@ -295,7 +295,7 @@ function socialbase_form_alter(&$form, FormStateInterface $form_state, $form_id)
// List all the confirmation forms here. We need to close the card
// before showing the actions.
$confirm_forms = array(
$confirm_forms = [
'user_cancel_form',
'post_delete_form',
'post_photo_delete_form',
......@@ -310,7 +310,7 @@ function socialbase_form_alter(&$form, FormStateInterface $form_state, $form_id)
'group_content_closed_group-group_membership_delete_form',
'group_content_closed_group-group_membership_group-leave_form',
'_auth_login_notice_form',
);
];
if (in_array($form_id, $confirm_forms)) {
$form['description']['#prefix'] = '<div class="clearfix">';
......
......@@ -87,9 +87,9 @@ function socialbase_preprocess_input(&$variables) {
// Make sure we can use a span class caret in the button.
if (!empty($variables['element']['#attributes']['data-caret']) && $variables['element']['#attributes']['data-caret'] === 'true') {
$variables['element']['caret'] = array(
$variables['element']['caret'] = [
'#markup' => '<span class="caret"></span>',
);
];
}
}
......
......@@ -37,7 +37,7 @@ class SocialBaseThemeSuggestions extends ThemeSuggestions {
}
$block_id = $variables['elements']['#derivative_plugin_id'];
$blocks_id = array(
$blocks_id = [
'upcoming_events-block_my_upcoming_events',
'upcoming_events-block_community_events',
'latest_topics-block_latest_topics',
......@@ -49,13 +49,13 @@ class SocialBaseThemeSuggestions extends ThemeSuggestions {
'group_members-block_newest_members',
'upcoming_events-upcoming_events_group',
'latest_topics-group_topics_block',
);
];
if (in_array($block_id, $blocks_id)) {
$suggestions = array($variables['theme_hook_original'] . '__' . 'views_block__sidebar');
$suggestions = [$variables['theme_hook_original'] . '__' . 'views_block__sidebar'];
}
if (isset($variables['elements']['kpi_analytics'])) {
$suggestions = array($variables['theme_hook_original'] . '__' . 'charts');
$suggestions = [$variables['theme_hook_original'] . '__' . 'charts'];
}
break;
......@@ -111,16 +111,16 @@ class SocialBaseThemeSuggestions extends ThemeSuggestions {
// Alter comment form.
if ($variables['element']['#form_id'] == 'comment_comment_form') {
if (\Drupal::routeMatch()->getRouteName() === 'entity.comment.edit_form') {
$suggestions = array($variables['theme_hook_original'] . '__' . 'comment_edit');
$suggestions = [$variables['theme_hook_original'] . '__' . 'comment_edit'];
}
else {
$suggestions = array($variables['theme_hook_original'] . '__' . 'comment');
$suggestions = [$variables['theme_hook_original'] . '__' . 'comment'];
}
}
if ($variables['element']['#form_id'] == 'comment_post_comment_form') {
if (\Drupal::routeMatch()->getRouteName() === 'entity.comment.edit_form') {
$suggestions = array($variables['theme_hook_original'] . '__' . 'comment_edit');
$suggestions = [$variables['theme_hook_original'] . '__' . 'comment_edit'];
}
else {
$suggestions[] = $variables['theme_hook_original'] . '__comment';
......
......@@ -20,10 +20,10 @@ class SocialBaseActivity extends PreprocessBase {
parent::preprocess($variables, $hook, $info);
// Check if the view mode is one of the notification view modes.
if (in_array($variables['content']['field_activity_output_text']['#view_mode'], array(
if (in_array($variables['content']['field_activity_output_text']['#view_mode'], [
'notification',
'notification_archive',
))) {
])) {
// Remove href from date.
$variables['date'] = strip_tags($variables['date']->toString()->getGeneratedLink());
// Remove href from output text.
......
......@@ -38,15 +38,15 @@ class SocialBaseField extends PreprocessBase {
break;
case 'field_call_to_action_link':
$url_options = array(
'attributes' => array('class' => array('btn btn-primary')),
);
$url_options = [
'attributes' => ['class' => ['btn btn-primary']],
];
if (isset($element[0])) {
$element[0]['#url']->setOptions($url_options);
}
$url_options_1 = array(
'attributes' => array('class' => array('btn btn-default')),
);
$url_options_1 = [
'attributes' => ['class' => ['btn btn-default']],
];
if (isset($element[1])) {
$element[1]['#url']->setOptions($url_options_1);
}
......
......@@ -47,10 +47,10 @@ class SocialBaseNode extends PreprocessBase {
}
// Author name.
$username = array(
$username = [
'#theme' => 'username',
'#account' => $account,
);
];
$variables['author'] = drupal_render($username);
}
......@@ -147,7 +147,7 @@ class SocialBaseNode extends PreprocessBase {
}
// Our node has a comment reference. Let's remove it from content array.
$variables['below_content'] = array();
$variables['below_content'] = [];
if (!empty($comment_field_name)) {
if (!empty($variables['content'][$comment_field_name])) {
// Add it to our custom comments_section for the template purposes and
......@@ -161,7 +161,7 @@ class SocialBaseNode extends PreprocessBase {
// comment count, and add the comment count to the node.
if ($node->$comment_field_name->status != CommentItemInterface::HIDDEN) {
$comment_count = _socialbase_node_get_comment_count($node, $comment_field_name);
$t_args = array(':num_comments' => $comment_count);
$t_args = [':num_comments' => $comment_count];
$variables['below_content'][$comment_field_name]['#title'] = t('Comments (:num_comments)', $t_args);
// If it's closed, we only show the comment section when there are
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment