fix flex display issue. code review by LZF
Showing
2 changed files
with
67 additions
and
54 deletions
| @@ -37,19 +37,28 @@ function hiddenTips($ele) { | @@ -37,19 +37,28 @@ function hiddenTips($ele) { | ||
| 37 | } | 37 | } |
| 38 | } | 38 | } |
| 39 | 39 | ||
| 40 | -function isFlexSupport() { | ||
| 41 | - var flex = document.createElement('p').style.flex, | ||
| 42 | - webkitFlex = document.createElement('p').style.webkitFlex, | ||
| 43 | - flexWrap = document.createElement('p').style.flexWrap; | ||
| 44 | - | ||
| 45 | - if ((flex === '' || webkitFlex === '') && flexWrap === '') { | ||
| 46 | - return true; | ||
| 47 | - } else { | ||
| 48 | - return false; | ||
| 49 | - } | 40 | +//function isFlexSupport() { |
| 41 | +// var flex = document.createElement('p').style.flex, | ||
| 42 | +// webkitFlex = document.createElement('p').style.webkitFlex, | ||
| 43 | +// flexWrap = document.createElement('p').style.flexWrap; | ||
| 44 | +// | ||
| 45 | +// if ((flex === '' || webkitFlex === '') && flexWrap === '') { | ||
| 46 | +// return true; | ||
| 47 | +// } else { | ||
| 48 | +// return false; | ||
| 49 | +// } | ||
| 50 | +//} | ||
| 51 | + | ||
| 52 | +function wrapElements(selector, count) { | ||
| 53 | + $(selector).each(function(idx, el) { | ||
| 54 | + if (idx % count === 0) { | ||
| 55 | + $($(selector).slice(idx, idx + count)).wrapAll($('<div class="js-wraper"></div>')); | ||
| 56 | + } | ||
| 57 | + }); | ||
| 50 | } | 58 | } |
| 51 | 59 | ||
| 52 | 60 | ||
| 61 | + | ||
| 53 | function search() { | 62 | function search() { |
| 54 | if (searching || end) { | 63 | if (searching || end) { |
| 55 | return; | 64 | return; |
| @@ -84,9 +93,10 @@ function search() { | @@ -84,9 +93,10 @@ function search() { | ||
| 84 | hiddenTips($('#size-swiper-container')); | 93 | hiddenTips($('#size-swiper-container')); |
| 85 | hiddenTips($('#reference-swiper-container')); | 94 | hiddenTips($('#reference-swiper-container')); |
| 86 | 95 | ||
| 87 | - if (!isFlexSupport()) { | ||
| 88 | - $('.detail .column').removeClass('column').addClass('oldbox'); | ||
| 89 | - } | 96 | + //if (!isFlexSupport()) { |
| 97 | + // $('.detail .column').removeClass('column').addClass('oldbox'); | ||
| 98 | + //} | ||
| 99 | + wrapElements('.detail .column', 2); | ||
| 90 | searching = false; | 100 | searching = false; |
| 91 | end = true; | 101 | end = true; |
| 92 | loading.hideLoadingMask(); | 102 | loading.hideLoadingMask(); |
| @@ -47,50 +47,53 @@ $basicBtnC:#eb0313; | @@ -47,50 +47,53 @@ $basicBtnC:#eb0313; | ||
| 47 | } | 47 | } |
| 48 | 48 | ||
| 49 | &.table { | 49 | &.table { |
| 50 | - @include flexbox(( | 50 | + .js-wraper { |
| 51 | + @include flexbox(( | ||
| 51 | display: box, | 52 | display: box, |
| 52 | box-lines: multiple, | 53 | box-lines: multiple, |
| 53 | box-pack: start | 54 | box-pack: start |
| 54 | - ), $version: 1); | ||
| 55 | - @include flexbox(( | ||
| 56 | - display: flex, | ||
| 57 | - flex-wrap: wrap, | ||
| 58 | - justify-content: flex-start | ||
| 59 | - )); | ||
| 60 | - width: 100%; | ||
| 61 | - .column { | ||
| 62 | - box-sizing: border-box; | ||
| 63 | - //padding: pxToRem(20px) pxToRem(12px); | ||
| 64 | - padding: pxToRem(6px) 3%; | ||
| 65 | - width: 49.9%; | ||
| 66 | - border: 1px solid #fff; | ||
| 67 | - font-size: pxToRem(24px); | ||
| 68 | - background-color: $tableCellC; | ||
| 69 | - word-wrap: break-word; | ||
| 70 | - @include flexbox(( | ||
| 71 | - box-flex: 1.0, | ||
| 72 | - display: box, | ||
| 73 | - box-align: center | ||
| 74 | - ), $version: 1); | ||
| 75 | - @include flexbox(( | ||
| 76 | - display: flex, | ||
| 77 | - align-items: center, | ||
| 78 | - flex-basis: 49.9% | ||
| 79 | - )) | ||
| 80 | - } | ||
| 81 | - .oldbox{ | ||
| 82 | - padding: pxToRem(6px) 3%; | ||
| 83 | - width: 49.9%; | ||
| 84 | - background-color: $tableCellC; | ||
| 85 | - box-sizing: border-box; | ||
| 86 | - border: 1px solid #fff; | ||
| 87 | - width: 49.9%; | ||
| 88 | - height: 100%; | ||
| 89 | - float: left; | ||
| 90 | - text-overflow:ellipsis; | ||
| 91 | - white-space:nowrap; | ||
| 92 | - overflow:hidden; | ||
| 93 | - } | 55 | + ), $version: 1); |
| 56 | + @include flexbox(( | ||
| 57 | + display: flex, | ||
| 58 | + flex-wrap: wrap, | ||
| 59 | + justify-content: flex-start | ||
| 60 | + )); | ||
| 61 | + } | ||
| 62 | + width: 100%; | ||
| 63 | + .column { | ||
| 64 | + box-sizing: border-box; | ||
| 65 | + //padding: pxToRem(20px) pxToRem(12px); | ||
| 66 | + padding: pxToRem(6px) 3%; | ||
| 67 | + width: 49.9%; | ||
| 68 | + border: 1px solid #fff; | ||
| 69 | + font-size: pxToRem(24px); | ||
| 70 | + background-color: $tableCellC; | ||
| 71 | + word-wrap: break-word; | ||
| 72 | + @include flexbox(( | ||
| 73 | + box-flex: 1.0, | ||
| 74 | + display: box, | ||
| 75 | + box-align: center | ||
| 76 | + ), $version: 1); | ||
| 77 | + @include flexbox(( | ||
| 78 | + display: flex, | ||
| 79 | + align-items: center, | ||
| 80 | + flex-basis: 49.9% | ||
| 81 | + )) | ||
| 82 | + } | ||
| 83 | + .oldbox{ | ||
| 84 | + padding: pxToRem(6px) 3%; | ||
| 85 | + width: 49.9%; | ||
| 86 | + background-color: $tableCellC; | ||
| 87 | + box-sizing: border-box; | ||
| 88 | + border: 1px solid #fff; | ||
| 89 | + width: 49.9%; | ||
| 90 | + height: 100%; | ||
| 91 | + float: left; | ||
| 92 | + text-overflow:ellipsis; | ||
| 93 | + white-space:nowrap; | ||
| 94 | + overflow:hidden; | ||
| 95 | + } | ||
| 96 | + | ||
| 94 | } | 97 | } |
| 95 | } | 98 | } |
| 96 | } | 99 | } |
-
Please register or login to post a comment