modified component structure

Author: youknowznm

src/App.vue

@@ -83,14 +83,12 @@
 
  <!-- 字符串过滤器 -->
  <li>
- <form class="navbar-form">
- <input
- type="text"
- class="search-box form-control"
- placeholder="过滤标题、内容、时间戳"
- v-model="queryString"
- @keyup="filterBy(currentCategoryId, queryString)">
- </form>
+ <input
+ type="text"
+ class="search-box form-control"
+ placeholder="过滤标题、内容、时间戳"
+ v-model="queryString"
+ @keyup="filterBy(currentCategoryId, queryString)">
  </li>
  <!-- -->
 
@@ -113,6 +111,7 @@
 </template>
 
 <script>
+import helpers from './helpers';
 import storeUtil from './storage';
 import memoItem from './components/memoItem.vue';
 import memoEditor from './components/memoEditor.vue';
@@ -134,6 +133,7 @@ export default {
  2: '生活',
  3: '学习',
  },
+ helpers,
  };
  },
  components: {
@@ -233,6 +233,11 @@ export default {
  this.filterBy(0, this.queryString);
  this.sortByTimeOrTitle('title');
  },
+ watch: {
+ memosFiltered () {
+ helpers.resizeMemos();
+ }
+ }
 };
 </script>
 

src/helpers/index.js

@@ -111,8 +111,8 @@ const initCanvas = (canvasEle, colorsEle, controllersEle, imageData) => {
  let stX, stY;
  switch (evt.type) {
  case 'touchstart':
- stX = evt.targetTouches[0].clientX;
- stY = evt.targetTouches[0].clientY;
+ stX = evt.touches[0].clientX;
+ stY = evt.touches[0].clientY;
  break;
  default:
  stX = evt.offsetX;

src/main.js

@@ -7,9 +7,9 @@ Vue.config.debug = true;
 new Vue({
  el: 'body',
  components: { App }
-})
+});
 
-//
-$(window).on('resize load', () => {
+// 调整所有 memo 的尺寸以响应浏览器
+$(window).on('resize', () => {
  helpers.resizeMemos();
 });

src/storage/index.js

@@ -113,7 +113,7 @@ class VueMemoStore {
 
  let m5 = new Memo({
  categoryId: 1,
- title: '5. Westworld - Quote',
+ title: '6. Westworld - Quote',
  type: 0,
  content: `> By most mechanical and dirty hand,\n\n> I shall have such revenges on you both.\n\n> The things I will do,\n\n> what they are yet I know not,\n\n> but they will be the terrors of the earth.`,
  });
@@ -122,7 +122,7 @@ class VueMemoStore {
 
  let m6 = new Memo({
  categoryId: 2,
- title: '6. 凛冬的寒风快点出版啊！！',
+ title: '5. 凛冬的寒风快点出版啊！！',
  type: 1,
  });
  m6.timeStamp = toReadableDate(new Date(Date.parse('Oct 5, 2016')));

src/style/main.styl

@@ -66,17 +66,14 @@ blockquote
  -webkit-user-select none
 
  .navbar-right
- padding-right 0
 
  a
- cursor pointer !important
- line-height 24px !important
-
- .navbar-form
- padding-right 0
+ cursor pointer
 
  .search-box
+ width calc(100% - 24px)
  min-width 180px
+ margin 6px 12px
 
  .dropdown-toggle
  position relative
@@ -87,17 +84,17 @@ blockquote
  background rgb(231, 231, 231) !important
 
  &:after
- content ' '
+ position absolute
  width 24px
  height 24px
- background url("/src/images/icons/icon-dropdown.png") 0 0 no-repeat
- position absolute
+ top 8px
  right 18px
+ background url("/src/images/icons/icon-dropdown.png") 0 0 no-repeat
+ content ' '
  opacity .6
- top 8px
 
  @media (min-width 768px)
- top 15px
+ top 13px
 
  .count
  border-radius 5px
@@ -113,15 +110,12 @@ blockquote
 
 #memos
  min-height 800px
- padding 0 6px
-
-#memos-wrapper
- margin 0 auto
+ margin-top 6px
+ padding 0
 
 .memo-container
- padding 5px
+ padding 6px
  float left
- margin-top 10px
 
 .memo
  position relative
@@ -132,18 +126,17 @@ blockquote
  transition all .15s ease-in-out
 
  &:hover
- box-shadow 0 0 10px 0 $dark-grey
+ box-shadow 0 0 6px 0 $dark-grey
 
  .mark
  display block
 
  &[data-completed=true]
- border-color $dark-blue
+ border-color $tint-blue
 
  .mark
  display block
 
-
  .mark
  display none
  position absolute
@@ -160,8 +153,6 @@ blockquote
  &:hover
  transform scale(1.2)
 
-
-
  .memo-heading
  position relative
  width 100%
@@ -353,7 +344,7 @@ blockquote
 
  &:hover,
  &.current
- box-shadow 0 0 4px $bootstrap-black
+ box-shadow 0 0 6px $bootstrap-black
  &[data-color=green]
  background-color $bootstrap-green
  &[data-color=yellow]
@@ -373,12 +364,14 @@ blockquote
 
 @media (max-width 768px)
 
+ #memos
+ padding 0 5px
+
  .memo-container
+ padding 2px
+ margin-top 0
  width 50%
 
- .search-box
- text-indent 18px
-
 @media (min-width 768px) and (max-width 992px)
  .memo-container
  width 33.3%