I trying to use Zurb's Foundation Equalizer to make two columns the same height.
The syntax according to the Foundation website it:
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
How do I translate this to haml? Is this possible?
Here is a link to the Foundation website for reference: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
(I'm assuming with my answer that you already know how to use HAML.)
You would render the classes as normal, but the data attributes have to be specifically hashed in to HAML. Luckily the HAML documentation I just found describes how to do this: http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes
HTML5 Custom Data Attributes
HTML5 allows for adding custom non-visible data attributes to elements using attribute names beginning with data-. Custom data attributes can be used in Haml by using the key :data with a Hash value in an attribute hash. Each of the key/value pairs in the Hash will be transformed into a custom data attribute. For example:
%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author
will render as:
<a data-author-id='123' href='/posts'>Posts By Author</a>
Read that page to get more information.
Related
I created a custom component.
I also created a custom Style with the corresponding css class and added the components to the Available Renderings. The styles show up correctly in the Experience Editor
.
Here is the markup:
<div class="section component full-image">
<div class="container">
//Rest of the code
</div>
</div>
If I apply this style to any of the out-of-the-box components, it gets applied. However, it does not apply to my component. What Am I missing?
Applied to OOTB components like the rich text box
Not applied to my component
Figured it out, Sitecore didn't like a "section" class in the parent div. Removing it works
I have a list of results from a user's search and I want the user to be able to re-order them
as they wish. It is simple enough to pre-sort the queryset on the backend, in views.py which is what every Google
search brings up on the topic. But I need to have this done by the user. On the frontend. This is
usually done with a dropdown with options allowing alphabetical sort A-Z or sort by date added or so on.
I can't find an answer with Google search or a single tutorial that covers it, yet I see it used almost everywhere.
Does the solution involve ajax? How would I use ajax to do it? Is there a py module that does this in Django?
I am rendering the search results something like this
{% for stor in stories %}
<div>
<span class="story_block stock_bg">
<a href="{{stor.get_absolute_url}}">
<div class="story_con_block">
<p class="s_t">{{stor.title}}</p>
<p>by <strong>{{stor.author.username}}</strong></p>
<p>{{stor.summary}}</p>
</div>
</a>
</span>
</div>
{% endfor %}
It can be done with javascript if you are rendering the list with javascript. as javascript can manipulate the DOM , so you can sort it with javascript code and add click event to these sorting functions
In a page, I have a rendering with a placeholder, Offcanvas.cshtml
<div data-ads-offcanvas-id="#Model.Id" class="ads-offcanvas #Html.GetCssStyles()">
#{
<a data-ads-offcanvas-trigger-id="#Model.Id" class="ads-close-button" href="#0">X</a>
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
}
and inside that rendering, I plan to put another rendering with a placeholder named Modal.cshtml
<div data-ads-modal-container="#Model.Id" class="ads-modal-container">
<div class="ads-modal-dialog">
<div class="ads-close-box">
<a data-ads-modal-id="#Model.Id" href="#0">X</a>
</div>
<div class="ads-modal-content">
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
</div>
</div>
So it looks like:
-Offcanvas
+-Modal
++-Text content
When I put text content inside the Modal rendering, the content is not rendered. I'm guessing that it only renders that first few renderings and fail to do so when the renderings became highly nested.
Is there a solution to render components to the very-most child?
Thanks guys!
EDIT:
Here's the code for GetPlaceholder:
public static string GetPlaceholder(string name, Guid id)
{
return $"{name}_{id}";
}
Dynamic placeholders are a bit more complicated than generating a unique placeholder key. The generated key still needs to resolve back to a real placeholder that is defined in Sitecore.
Check out the Integrated Dynamic Placeholder module.
This will provide an Html helper similar to your current implementation:
#Html.Sitecore().DynamicPlaceholder("[Placeholder Name]")
I'm trying to use gulp-uncss to remove unneeded CSS from a Zurb Foundation website.
Within the site I'm using Foundation's Equalizer to make two columns the same height. This works by adding a data- attribute to an element:
<div data-equalizer>
<div data-equalizer-watch>
<div>
<div data-equalizer-watch>
<div>
<div>
When the page loads Foundation determines the height of the two elements and injects an inline style to set the height of the elements to the greater of the two element heights. The result is:
<div data-equalizer>
<div data-equalizer-watch style="height: 256px;">
<div>
<div data-equalizer-watch style="height: 256px;">
<div>
<div>
When I add gulp-uncss to my gulpfile.js the Equalizer no longer works. The data- attributes are still present in the HTML file, but the inline styles are not added.
I've tried using the ignore option in gulp-uncss to ignore height but had no luck. The inline style is no longer added to HTML document.
Is there an option in gulp-uncss that will allow the equalizer to do it's job?
I was able to get gulp-uncss working using the ignore parameter in UnCSS.
Adding:
ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]
to uncss() kept all the necessary CSS. The most important of these is /^meta.foundation as this allows the Foundation JS to inject the styles. The remaining values /f-topbar-fixed, contain-to-grid, /sticky/ and /fixed/ are all specific to the Foundation JS modules I'm using. The above work for a .sticky topbar.
If you're using other JS modules you'll need to determine what classes are being injected and add those to the the ignore array.
Is there a way in Sitecore SPEAK UI (7.5) to configure a ListControl (ViewMode set to DetailList) to contain a column with images, and another column containing buttons?
I've created a ListControl Parameters item beneath my PageSettings item and have added a few ColumnField items for the required columns - but cant find any other template types to add for different types of column data. I've also tried playing around with the Formatter and HTMLTemplate fields of the ColumnFields but am not sure how these are meant to be used.
Considering button means hyperlink. You can try adding the following in the HTMLTemplate:
For Image:
<img src="{{YourImageSourceField}}" ..../>
For Hyperlink:
{{YourLinkTextField}}
You can also consider reading Martina Welander Speak Series for some information on this kind of custom implementations.
I've also used the custom title property of the ListView by setting ViewMode to TileList. Then used Knockout to databind to a custom tile using standard cshtml, if this is any use?
<div class="sc-tile-default" data-bind="attr: {id: Id}">
<div style="min-height: 98px;">
<img width="112" data-bind="attr: {src: Path}" />
</div>
<div class="sc-iconList-item-title">
<span data-bind="text: Name"></span>
</div>
See this project
https://github.com/sobek1985/WallpaperManager