Commit 30f7578d authored by maikelkoopman's avatar maikelkoopman
Browse files

DS-4123 by maikelkoopman: display popover with upload requirement

parent b46850f2
# 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.
styling. We expect developers to want to change this for their own project.
As you can see there is also a theme called **socialblue**. Socialblue is the
demo/styling sub theme for Open Social.
......@@ -9,7 +9,7 @@ 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
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.
......@@ -18,15 +18,15 @@ 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
html/sites/default there is a development.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.
Duplicate this file and remove the example part from the filename.
After you have configured these files you need to rebuild the caches.
This will speed up you development process.
### Goodies used
......@@ -42,16 +42,18 @@ process.
<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
<dd>This is source 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># node_modules</dt>
<dd>Yarn will install all devDependencies in this folder.
What gets installed is listed in package.json</dd>
<dt># src</dt>
<dd>Drupal plugins - contains most functions and template suggestions.
@see [Drupal Bootstrap documentation](https://drupal-bootstrap.org/api/bootstrap/docs%21plugins%21README.md/group/plugins/8)
<dd>Drupal plugins - contains most functions and template suggestions.
[Drupal Bootstrap documentation](https://drupal-bootstrap.org/api/bootstrap/docs%21plugins%21README.md/group/plugins/8)
on how to extend this in your subtheme.</dd>
<dt># Templates</dt>
<dd>This folder contains all twig templates for the theme.</dd>
......@@ -80,7 +82,7 @@ documentation
```
3. The package.json file contains the versions of all the node packages you
need. To install them run:
need. To install them run from the theme:
```
yarn install
```
......
......@@ -11,6 +11,10 @@
background-color: #f3f3f3;
}
.form-type-managed-file .image-widget + .help-block {
margin-top: -0.875rem;
}
.btn--post-remove-image {
position: absolute;
top: -1px;
......
......@@ -26,6 +26,11 @@
}
}
// close the gap between an image upload and the description text right below it.
.form-type-managed-file .image-widget + .help-block {
margin-top: -0.875rem
}
// This is kind of a hack. The upload field op on the post needs to display inline, but the image should not. Since this library is only loaded when the preview is there, the following line overrides the style from form-post-create.
.form--post-create .field--name-field-post-image.container-post-image {
......
......@@ -24,6 +24,7 @@ region_wells:
footer: ''
forms_smart_descriptions: 0
cdn_provider: ''
popover_trigger: hover
tooltip_enabled: 0
button_colorize: 0
button_iconize: 0
......
......@@ -44,7 +44,9 @@ libraries-extend:
#extend the core datepicker with a stylesheet and attach the listener
core/jquery.ui.datepicker:
- socialbase/form--timepicker
# attach the bootstrap library script and css component
# Attach the bootstrap library script and css component.
# Note that the socialbase library scripts needs to load first. That is
# why we added weights to the library JS files in socialbase.
bootstrap/popover:
- socialbase/popover
core/drupal.dialog.ajax:
......
......@@ -190,8 +190,8 @@ popover:
component:
assets/css/popover.css: {}
js:
/libraries/bootstrap/js/tooltip.js: {}
/libraries/bootstrap/js/popover.js: {}
/libraries/bootstrap/js/tooltip.js: { weight: -2 }
/libraries/bootstrap/js/popover.js: { weight: -1 }
select2:
css:
......
......@@ -12,11 +12,16 @@
*/
#}
{% if description %}
{{ description }}<br>
{% endif %}
{% if popover %}
{{ popover }}
{% else %}
{{ descriptions|safe_join('<br>') }}
{% endif %}
{% if popover and description %}
&bullet;
{% endif %}
{% if description %}
{{ description }}
{% endif %}
\ No newline at end of file
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