How can I shrink a 4-column flexbox layout to 2 columns in Polymer?

Question!

I have a dashboard I made with Polymer and the flex layout, however there's some issues. Basically I need it to be 4 columns long, but when the screen shrinks I need it to go to 2 columns, and then finally to 1 column. (basically laptop - 4, tablet - 2, phone - 1). Right now it goes 4 to 3 to 2 to 1. How can I achieve the 4 to 2 to 1?

Here's what I currently have:

<style>
      #container {
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        -webkit-flex-direction: row; /* Safari */
        flex-direction: row;
        -webkit-justify-content: space-between; /* Safari */
        justify-content: space-between;
      }
</style>

and

    <div id="container">
        <paper-card heading="ep-gw-ops-node1">
          <div class="card-content">
            <paper-card heading="Temperature" id="temperature" class="blue" style="width: 275px; margin: 2px">
              <div class="card-content">
                <div>
                  <h3 id="tv_temperature" style="color:#fff; text-align: center"> 0 </h3>
                </div>
                <div style="" id="chart_div_0"></div>
              </div>
            </paper-card>

    ...

    ...

    ...

</paper-card>    
</div>

I've attached a basic wireframe of what I am trying to accomplish. If there is a better way to do it without paper-cards I'm more than open to suggestions.

Note* the last column will be lowered so the 'node 1' header will stretch all the way across and the columns will be the same size.

wireframe



Answers

I do something like this

<dom-module id="my-element">
  <template>
    <style>

      .grouph[wide-layout] {
        @apply(--layout-horizontal);
        @apply(--layout-wrap);
        @apply(--layout-center-justified);
      }

      .grouph:not([wide-layout]). .groupv {
        @apply(--layout-vertical);

      }
    </style>
    <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
    <div class="grouph" wide-layout$="[[wide]]">
        <paper-card>...</paper-card>
        <paper-card>...</paper-card>
    </div>
  </template>
  <script>
  Polymer ({
    is: 'my-element'
  });
</dom-module>

This doesn't match your case exactly but the principal is the same. Use a media query to define a boolean property (in my case wide) that can be set for one of your two cases and unset for the other.

Use wide-layour$="[[wide]]" on an element that you want to alter dependant on the width.

Use CSS with a selector of [wide-layout] or :not([wide-layout]) to define how a container lays out its children.

You can do it at multiple levels to get whatever re-arrangement you want.

By : akc42


I don't think it needs to be that complicated:

center=(600,600)
rad=120
coordinate=(50,70)

if (coordinate[0]-circle[0])**2 + (coordinate[1]-circle[1])**2 < radius**2:
    print "inside"
else:   
    print "outside"
By : aqua


You can use a WHERE clause for this. Convert your INSERT VALUES to an INSERT SELECT and add a WHERE clause.

For example,

INSERT INTO fields (field_name, control_type_id, needs_approval)
SELECT
'Array Photos', 3, 0
WHERE Condition;

If Condition is true, it will insert the row. If Condition is false, the SELECT will return zero rows and thus the INSERT will insert zero rows.



This video can help you solving your question :)
By: admin