I'm building this website using bootstrap.
The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question:
I'm really not experienced in developing UI. Is my approach sufficient?
How should i solve this problem?
I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.
Related
I have a React Native App (using Expo) and I’m trying to implement a map/search layout similar to what is in Yelp or many other location-based hybrid map/search views (eg I checked all of the food related apps on my phone :slight_smile: McDonalds, Starbucks, DoorDash):
Specifically, I’m curious how to create that sort of draggable panel from the bottom, where you can drag it so that it overlaps the map.
Yelp/DoorDash technically have 3 states for this bottom panel: a completely collapsed state, an intermediate (default) state, and a completely expanded state, and you can even flick from completely collapsed to completely expanded.
Is there a standardized way to accomplish this with React Native? (I'm a little out-of-touch with the RN ecosystem.)
Ahh, here's a third party library where this behavior is implemented, and even the example in the documentation is off a map searchview. https://github.com/octopitus/rn-sliding-up-panel
Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.
I am using Angular-UI-Bootstrap. in they github they have allot of examples, one is about carousel and it's really cool on they site. All over the internet i have tried like 50+ examples an none of them worked out. What i need it's simple clicking and moving items inside carousel, without click on sides. I have seen things about animation, i am not using that, maybe angular-ui-bootstrap using it, i am not sure. Any one have found solution for this problem?
What is the difference between Ionic Framework vs Famo.us Framework. It is possible to use both framework in one project . Which One support smooth render graphic on mobile devices ?
Both framework support AngularJs?
Both frameworks work with AngularJS, but they come from a different direction and have different goals.
Ionic
is built on top of AngularJS and extends it, providing you with buttons, grids and other ready made UI elements to help you publishing your mobile app real quick. AngularJS focuses on data binding and the MVC structure of your app and doesn't really care about whether it's running in a desktop browser or on a mobile device. Ionic concentrates on the presentation of your app data and extends AngularJS to make it fit for use on mobile devices and supply you with design patterns that mobile users have come to expect. Since Ionic sits on top of AngularJS, you can't really have Ionic without Angular.
Check out Ionic's components to get a better understanding.
Famo.us
on the other hand strives for the fastest render performance. It just so happens that you can put regular HTML into a Famo.us Surface — which is the container that holds the content to be displayed. That content can be HTML, but doesn't have to.
Famo.us itself doesn't use the standard HTML reflow to position its surfaces in the viewport but its very own implementation of a render tree, so you're free to manipulate surface position and rotation, even in 3D space, with buttery smooth performance. HTML that is put inside a surface on the other hand uses reflows to position its elements just like you're used to. Read more about the render tree.
Famo.us can output to HTML, but can also render using WebGL or even Mixed Mode, combining DOM with WebGL. This allows for fancy graphic effects that wouldn't be quite possible with plain CSS. There's also tight integration with Easing and Physics to allow for playful and realistic animation.
Now that there's Famo.us/Angular, I don't see why you couldn't use Ionic and Famo.us in the same app, although I haven't tried it yet.
Summary
Ionic sticks with the regular DOM for rendering and focuses on mobile design / UX patterns. Famo.us disregards the DOM and lets you (read: requires you to) build / populate the render tree, provides physics and allows for more complex and fluid animations. This also means that using Famo.us comes with a learning curve. Good thing is: you don't have to go 'all in', since you can build certain views of your app with Famo.us and then use regular HTML/CSS for everything else.
ionic lists work well when famous is loaded in the same index.html SPA.
Some things like touch to pan in angular-google-maps stop working when ionic and famo.us share the same page.
Transitions from a ionic tabbed state to a detail view using ion-nav-bar animate badly too.
So i recommend you to keep things separated just by switching your app from famous.html to ionic.html as needed. each implementation having its own stack of dependencies and its own separated styles as they come in the sample apps.
you can transition by using document.location.href
i think you can find a way to transition to specific states from one world to the other by setting the proper state in the url.
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)