Ionic - Different layouts for mobile and tablets


#1

Hi
I am building a mobile application using Ionic and angularjs and Highcharts. In most of the pages there are sliders to display data. Every slide has two vertical divs containing highchart.

Now the requirement of the app is that when it is open in mobile device(Iphone 4 & 5) it should display one div per slide and when open on tablet(Ipad) it should display two vertical divs per slide containing highchart. All the Highchart data is dynamic. I am posting html code. As for angularJs I am not sure What approach I should take? I have posted image links of screenshots of the desired layouts for both the devices.

Screenshot for a tablet/Ipad

Screenshot for a mobile/Iphone

Html

 <ion-view>
  <div ng-controller="chartHomePage">
    <ion-content>
      <ion-slide-box  show-pager="false" on-slide-changed="slideHasChanged($index)" >
        <ion-slide>
          <div class="card chart-box">
            <div class="item item-divider">
              Chart 1
            </div>
            <div class="item item-text-wrap">
              <div ng-controller="ChartController1">
                <highchart id="" config="chart1"></highchart>
              </div>
            </div>
          </div>
          <div class="card chart-box">
            <div class="item item-divider">
              Chart 2
            </div>
            <div class="item item-text-wrap">
              <div ng-controller="ChartController2">
                <highchart id="" config="chart2"></highchart>
              </div>
            </div>
          </div>
          <iom-slide>
      </ion-slide-box>
    </ion-content>
  </div><!--end controller div-->
</ion-view>

Thanks


#2

On mobile do you need Chart 2 to go to another slide or simply not display?


#3

Yes. I have 10 charts to show. in Iphone/mobile there will be 10 slides(1 chart per slide). and in Tablet/Ipad will have 5 slides(2 chart per slide).
Thanks for looking at the question.


#4

Ok, How I would do this is check the viewpoint size…
Use this as a reference:

Based on the size, generate the slider differently.

You could even run the slides in a ng-repeat.
Generate your array like so for tablet:

  • Slide
  • Graph
    – Content
  • Graph
    – Content
  • Slide
  • Graph
    – Content
  • Graph
    – Content

For Mobile:

  • Slide
  • Graph
    – Content
  • Slide
  • Graph
    – Content
  • Slide
  • Graph
    – Content
  • Slide
  • Graph
    – Content

Then, your HTML could look similar to:

<ion-view>
  <div ng-controller="chartHomePage">
    <ion-content>
      <ion-slide-box  show-pager="false">
        <ion-slide ng-repeat="(key, slide) in myObj">
          <div class="card chart-box" ng-repeat="(key, graph) in slide">
            <div class="item item-divider">
              Chart {key}
            </div>
            <div class="item item-text-wrap">
              <div data-info="{graph}" ng-controller="ChartController">
                <highchart id="" config="chart{key}"></highchart>
              </div>
            </div>
          </div>
          <iom-slide>
      </ion-slide-box>
    </ion-content>
  </div><!--end controller div-->
</ion-view>

This is just an idea, and is untested, but give it a go and hopefully it give you an idea.