ExtJS has a very useful layout mechanism called flex. It works by summing all the things on a row or in a column. Then the space is parceled out using the flex value divided by the sum of all the flex values. This results in a layout like below:
The Red box is an hbox layout, the blocks E and F have the given flex values that sum up to 3, so E gets 1/3 the width of the screen, and F gets 2/3rds.
The Blue box is another hbox layout, where all 4 pieces (A-D) have the same flex so each one gets 25% of the space.
What isn't shown is the surrounding vbox layout where the blue box has a flex of 22 and the red box has a flex of 78.
Is there anything like this kind of layout in Angular? If there isn't, how would you put this together in Angular?
Additional information based on some of the answers below:
I want to be able to replace extjs with Angular. To do that I need some functionality that I have in extjs that I don't know exists in Angular. I've found ways to watch for screen size, change to adjust the overall display size, but I haven't seen a good example yet of a directive that essentially introspects its constituent directives for this flex value and sets their size based on a size change event of the container. Flex doesn't work from inside the divs, it works inside the container of the divs, because it has to go across all the divs in the container to divide the space correctly. I haven't seen an angular directive that does this yet.
I have no actual development experience with Angular yet (I've watched many of the videos from http://egghead.io, I've read documentation and tutorials, listened to this podcast: JSJ-Angular) and so I don't know if this is something that is easy to solve, or hard to solve, or if someone has already solved it. This flex layout is wickedly cool and easy to use, in fact for full page apps, I'm not sure there is an easier way to lay them out so that they stay full screen and are malleable to screen size changes. Grid systems are great for some things, but they don't address what the flex system addresses.
I'm trying to see if there is a way to leap from extjs to Angular without really making my life difficult.
Additional discovered information:
Looks like flex is becoming a display type now in the form of the CSS display: flex or display: inline-flex (with prefixes at the moment)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to see the illustration calls it the Holy Grail Layout example. Of course IE won't implement it right, or in a timely fashion, but my customers don't mind using Chrome if it gets the job done.
Turns out someone has create one and it does MOST of what I was looking for.
http://ngmodules.org/modules/flexy-layout
You missing the point. Angular is only JS library that helps you with:
modularization your code
allow you load content asynchronously
change content using "magic" (two-way bindings)
etc.
It doesn't describe style of your site. You have to do it by yourself or use one of popular fluid/responsive CSS frameworks, i.e.:
Bootstrap by Twitter
Zurb Foundation
Inuit.css
Pure
Gumby
Metro UI
etc.
Just choose yourself and then apply to your site. Using that also make your design independent from JS (which is very bad) and JS framework (which is 9th circle of hell).
Related
I have a client who is using Squarespace and asked that I fix a mobile stacking issue.
I have 2 rows that have image + text alternating side by side. This looks fine on desktop, but the on mobile the stacking order is wrong.
Desktop Stacking:
Image + Text
Text + Image
Current Mobile Stacking:
Image
Text
Text
Image
Ideal Stacking:
Image
Text
Image
Text
Typically I was accomplish this by alternating the sections with a custom class, but I'm not seeing any place to add this. Are you able to add custom classes to sections?
Any help is appreciated. Thanks!
It is not possible to directly edit the markup that appears within Squarepace's default grid and block system (they call it, "LayoutEngine"). Generally speaking, one must either write their own HTML within a Code Block (or via Code Injection points), or use JavaScript to alter the HTML after the default markup is loaded onto the page.
But in your case specifically, this is a common problem in Squarespace, and it is usually solved with just CSS, using a combination of:
first-child, last-child and nth-child selectors, and/or
the > direct-descendant/child-combinator, and/or
specific block IDs (each sqs-block has a unique id attribute), and/or
a media query so that the rules only take affect after your mobile breakpoint is reached, and/or
either display:flex with the order property. or display:table-header with display:table-footer in order to force a different stacking order.
The specific CSS often varies greatly based on the specific circumstance, whether you're trying to reorder blocks, columns, or rows. The similar question linked to above provides a specific solution to the same problem you are trying to solve, but the code that solves it in your case may look quite different, though it will likely use a combination of the five things mentioned above.
Or, you can use JavaScript to target the blocks and add your own classes, then write the CSS with those classes. Even in that case, the general approach is the same.
I am working on a project that requires a slider control that corresponds to an image and or a multitude of div objects. The spacing of the slider is irregular (the steps could be [1,4,7,13,14,16...]). Also the steps will correspond to specific spots on an image and or to a specific div object. The perfect slider would be dynamic and re-size with the screen but that may be actually impossible.
The hard part is that I am unable to use JQueryUI, instead I am limited to using controls that work with AngularJS.
I have been looking for hours and cannot find anything that would be a good starting point. So my question is whether anyone has found a good slider control to use with AngularJS?
This one fits some of your criteria
angularjs-slider
A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/
I am developing a little application to manage messages. Such application has two panels on big screens: a sidebar with the messages list and a panel with the message details: [ ][ ]. But in case the screen is small (smartphone) and just because we want it to be responsive, the sidebar is the only thing shown and when you click on a message the details are displayed hiding the sidebar.
With Angular, the last approach is quite easy doing some routing and it works very well. My problem comes when the screen is big enough to accept both panels together, as I want Angular to still control the flow but not hide/show any panel as I want both views visible.
Is there a way to go routing (one view at a time) with Angular when the screen is small but change the behavior when the screen is big to show the two views at a time?
By the way, I'm using Bootstrap to control the responsiveness and that's working quite well (the panels hide/show depending on screen size), I'm just worried about how am I going to handle this with Angular now.
Examples
Just to see if I can explain myself better, this is what I want it to be when screen is big enough: http://plnkr.co/edit/WuN08Q?p=preview (make sure you make the preview screen big enough to see it, click on a message, and then resize to smaller size to see how the details hide)
And this when it's small: http://plnkr.co/edit/UL1OpXjzEcCU9722lpA9?p=preview
First example has two panels visible and one of them is hidden when screen becomes small, second example uses two views and works as I want it when screen is small. Now what I want is to make it behave like first example when screen is big enough and like second when it's small.
Thank you Angular wizards!
Probably not the answer you're looking for, but one solution building upons Jonathan Hair's answer is contained in a fork of you original plunker:
http://plnkr.co/edit/chdn6XDpdnqaay3VfOqI?p=preview
This solution is not preferred because you end up having to refresh when you break across your sm / large barrier (in this case 768px width) in order to get the expected rendering behavior.
I think a better approach to this problem is to not use routing. (Which is precisely what I did for your "Big view.")
As an example, here is a unified scope that utilized the bootstrap responsive utility and builds off of Jonathan's size detection. As the screen is resized, it should follow the expected behavior. No routing necessary.
http://embed.plnkr.co/b7sSyDjRLSRrJF29l01d/preview
You could use a function in the templateUrl section for routing in you app config and change the templateUrl based on current window size. I dare say you would have the same functionality in the controllers so changes to just the templateUrl should suffice.
NOTE: In my example below I have just placed the window size logic where needed, you would put this somewhere else in your app like a helper file or a service instead.
Example
http://plnkr.co/edit/udDlJT?p=preview
The app I'm writing involves buttons that have a slight noise filter texture, which can be any size. For a standard button I'd simply use resizableImageWithCapInsets: but due to the texture, this causes unusual artefacts to appear on the resulting button.
A solution I have in mind, is to use the Core Image monochrome filter combined with the random noise filter to add the noise texture to a plain image. In theory this works, and in practice this has been shown to work (One example here) but these are all in cases where the button size is known at the point of invoking the CI code.
What I'm looking to do, is use the appearance proxies, so across the app I can simply set the style of UIBarButtonItems for instance.
Is there a way I can apply these CI filters to the buttons through the appearance proxies or isn't this possible? Would something like a category on UIImage to add noise work? I'm not entirely sure at which point the appearance proxy would actually invoke that code.
Any help is appreciated
OK So I finally solved it but found out some stuff on the way.
It seems you can create a category on UIImage and use that in the appearance proxy. I created a category to add noise, and it seemed to partly work, but I couldn't get it looking how I wanted as it wasn't quite rendering properly, but in the process of coding this discovered another method
resizableImageWithCapInsets:resizingMode:
Because the texture I was dealing with was simply noise, it could be tiled, so rather than the image now being stretched, the centre of the image is instead tiled which gives me the appearance I needed :)