I am creating a mobile application using HTML, Cordova, Aurelia, and Bootstrap. The application has the ability to upload images and create a row of thumbnails. Being that this is a first time using Aurelia for me, the challenge is that I need a row to consist of only 4 images. I need to have the application create a new row of images after the current row reaches it's fourth image. I searched the web for solutions but didn't really find anything to suit my needs other than I might need to incorporate a value converter somehow. Does anyone know how I would go about accomplishing this task? Any assistance would be greatly appreciated. I have included my original code below, which is pretty much the code I had before knowing that I would have to dynamically create additional rows.
<div class="row">
<div class="col-sm-3" repeat.for="image of images">
<div class="thumbnail">
<img src.bind="image | blobToUrl" />
<div class="caption text-center">
<button type="button" class="btn btn-default" click.trigger="setCoverPhoto($index)" data-toggle="tooltip" title="Use as cover">Set Cover</button>
<button type="button" class="btn btn-default" click.trigger="removeAttachment($index)" data-toggle="tooltip" title="Remove photo">Remove</button>
</div>
</div>
</div>
</div>
Thanks for your help!!!!!
Ashley's answer is correct in this scenario.
Sometimes however it may be necessary to render a list with a wrapping element that contains x amount of items from this list.
You can solve this by grouping the list and iterating twice. Once on the grouped list and inside this loop another loop on the children lists.
You shouldn't pollute your VM with this grouped list if it's for UI purposes only, so it belongs in a converter. Example : https://gist.run/?id=9d624d96d86c7e0ad1c0919fd5fb8819
I put your code in a gist here: https://gist.run/?id=fb3631fe09d44395fd352c29e145c4a0
It looks fine to me as is.
Bootstrap is responsive, so you can't "lock" to 4 images per row, per se. It will go to one image per row below a certain screen width.
You can play with the dimensions in the images array in app.js to see how bootstrap will handle different things.
Related
DNN 9.3.2 / 2sxc 10.25.2
Using 2sxc Content and c# Razor templates, I'm able to create a content type with some fields and enable the list mode on the template so that I can have a list of items and manage it. This is great because it lets me have one (1) 2sxc Content module on the page and list out as much content as I need.
However, in many cases, I need a "list within a list" so that I can have a repeating list of content within a repeating list of content and manage the design through the template instead of relying on my Content Editors to write HTML. See screenshot for an example.
In this design, I have 1 module that has "List" enabled and in that module I have 3 items called "Spotlights" which are just Content items. But then in each "Spotlight", there is a list of "PRE-CONFERENCE SESSIONS" which each have a title, link, and specific style (colour) for each item. In this setup, I simply made the "PRE-CONFERENCE SESSIONS" section a DNN Editor (tinymce) and then manually edit the HTML to make the FontAwesome caret and assign a CSS class to style each accordingly (each colour is important as it indicates the type of session). This method works but is cumbersome and involves me as a developer to maintain the list as the Content Editors don't know HTML.
I know that I can break this 1 module apart into 3 modules where each Spotlight is the Header content, and then the PRE-CONFERENCE SESSIONS links are the content item, but I was hoping to keep everything contained in 1 module for ease of maintenance. I also run into other scenarios in design where a sort of "sub" (or nested) list content would be really useful.
Is it possible to do this in 2sxc? Or is there a better way of achieving this?
I've done something similar to this where I created an Bootstrap Accordion and then also had a nested Bootstrap Accordion within that. Here's an example, maybe it'll help. https://www.crawfordinsurancegroup.com/commercial-insurance expand the Target Markets Accordion and you'll see a nested one within it.
I used the concept of Content-Blocks for this. In the main Accordion, I added another field called AccordionItem and made it an Entity Type and the Input Type as ContentBlocks. This give you the ability to select another 2sxc entity within your content,
https://www.screencast.com/t/iwCn2zmH8H
In your template, you can add a foreach to loop through the content items and render them
#foreach(var cb in AsDynamic(Content.AccordionItem)){
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion-#(Dnn.Module.ModuleID)" href="#collapse-#cb.EntityId" aria-expanded="true" aria-controls="collapseOne">
<strong>#cb.Title</strong>
</a>
<div class="panel-title"></div>
</div>
<div id="collapse-#cb.EntityId" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
#Html.Raw(cb.Content)
</div>
</div>
</div>
}
So in my example, I'm creating new Bootstrap accordions. You can reference the fields that are part of the nested entity (cb in my case) and output them in the template as you need them. Hope this helps.
Just as an added info: 2sxc 11.0 enhances lists-in-lists, so that the edit-toolbar of items-in-property-lists actually also get buttons like move-up/move-down etc.
enjoy ;)
So I'm making a web app to run a small CTF that I will be hosting within my school, and I have developed a webpage that will load up the problems, my example right now lays out the problems in a long row
Here's how that's done:
<body class="main-body">
<div class="body">
<section class="content">
<div class="container-asdf"> <!-- This is a grid, assume that this particular element is repeated several times with changes -->
<div class="item-a">Test Problem</div>
<div class="item-b">Category: Test, Problem</div>
<div class="item-c"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-info">Button</button></div>
</div>
</section>
</div>
</body>
(Full disclosure that this HTML is likely pretty bad, just working with what I know)
the div with class "container-asdf" is automatically generated for the amount of problems, assume it works perfectly and it generates say 50 problems, I only want 10 of them to appear on the page at a time and I want to separate them using pagination, without having to make a ton of different HTML pages, how exactly could I do this? I don't need code, just some concepts and guides of how I could. My first thought process was to put it in invisible containers and make it appear as you select different numbers, thus why I asked how to use pagination
In summary: I have a lot of elements(in the same HTML file) appearing on the page at once, I want to limit this and split it into pages without having to make multiple HTML files, I am using Flask/Jinja to generate said HTML file, if that helps.
Thanks for any help!
Not sure if this applies but have you considered using the easyPaginate jQuery plugin for the pagination? An example and setup is available here.
Bill Component
This would be my item component which gets instantiated through my bill component
export default function Item (props) {
return (
<div className="item">
<span>{props.itemName}</span>
<span>$ {(props.price * props.quantity).toFixed(2)}</span>
<button className='qtyminus' field='quantity'
onClick={() => {props.decrementFunction(props.itemName, props.price)}}
><span>-</span>
</button>
<button className='qtyplus' field='quantity'
onClick={() => {props.incrementFunction(props.itemName, props.price)}}
><span>+</span></button>
<button className='deleteItem'
onClick={()=> {props.deleteItemFunction(props.itemName, props.price)}}
><span>x</span>
</button>
{/* <div>{props.quantity}</div> */}
</div>
)
}
and here's basically the category bar above the bill container div which
lists the categories of each item
<div className="bill-category">
<div>Item</div>
<div>Price</div>
<div>Quantity</div>
</div>
As I'm working through finishing this component, I'm having quite some trouble adjusting the CSS category alignments with the item names, price and buttons that come along with it. Would it be better practice to completely refactor my code to use table/rows/cols tags in this case? Please let me know your opinions.
Write semantic markup
Apply CSS to make it look the way you want
You appear to have tabular data. Use a table.
From a personal experience, you may gain some performance if you use DIV instead of TABLE in case you have really huge data and you want to dynamically add or remove columns.
But in long term I still prefer table since it is more semantically correct, easily accessible out of the box and leads to less issues if printed or exported.
If you look at the rendering of the big component vendors who provide datatable/grids you would see some are using tables and some divs, both approaches scale and are usable in big projects so it would be hard to tell what is best or if it really matter for a simple pages.
I'm making a little quiz in ionic and im dynamically creating the boxes using n-g repeat for the answers. Ive bee trying for hours but it either works well on ipad but aweful on iphone or the other way round. Here is how it looks on my phone :
and here on my ipad
All im trying to do is have an object with an answer so for example "over the mood" and dynamically create the boxes that corespond with the answer so for this example [][][][] [][][] [][][][]..
I am using ng-repeat to do what i have in my example :
<form>
<span ng-repeat="content in answerArr track by $index" class="single-input"><span style="margin-right:10px;"></span><!--this adds space -->
<div class="testingg" style="width:50%;margin-right:auto;">
<div style="width:50%;margin-right:auto;margin-left:auto;">
<span class="single-input" ng-repeat="contentt in content track by $index">
<div class="row"style="">
<span ng-if="$index < content.length">
<div class="box single-number" style="">
<input type="text" class="" focus maxlength="1">
</div>
</span>
</div>
</div>
</span>
</div>
</span>
</form>
is there a better way to do this or am i missing something obvious? im trying to achieve the sort of centered css where if the word overlaps then it goes to the next line .. something like the below
althought they use __ and i am using a box. can anyone help?
Well, you can Set particular length for your each rows .And Using answer's length create substrings of tho and push them into any object.Like if your row's length is 5 and your answer is "over the mood" . You have to create 3 substrings
and push them into object . Now implement an nested ng-repeat, first with
that object containing substring and then inside that with substring itself
Hope It will help you :)
Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...