BoxPistols

written 2020/08/06

Creative work sheet

• I am - Ito Atsushi
• Job - Web Developer / Designer
• My Corporate(Asagiri Design agd.tokyo)

Profile

BoxPistols

Font Size Calc

A Pen by Pistol on CodePen.

License.

BoxPistols

#app    
  main.mainArea
    .title_main Skill Rating
  
  section.skillMap_area     
    .skillMap_group
      .skillMap_box.core        
        .skillMap_title
          .icon_box
            i.material-icons.icon code

BoxPistols

#app
  v-app#inspire
    0 {{ $data.tg }}
    v-row
      v-col
        //- p {{ $data.events }}
        ul(v-for="e in events")
          li(:class="{ tg, hoge: e.name === '日勤', fuga: e.name === '遅番' }") {{ e.name }} {{ e.job }}　{{ e.start }}

        v-sheet(height="600")

BoxPistols

.wrap
  .contentArea
    .content
      h1 px to rem use js
    .content.useCss
      h1.useCss px to rem use css
      p.px8 px8
      p.px10 px10
      p.px12 px12
      p.px14 px14

BoxPistols

<div id="sample">
  <!--   <div v-text="foo"></div>
  <p>{{ foo }}</p>
  <div>Hellobar}}</div> -->

  <input type="text" v-model.trim="pushItem" />

  <select v-model="pushItemSelect">
    <option value="00" selected>00</option>
    <option value="01" selected>01</option>

BoxPistols

#app
  v-app#inspire
    v-container(fluid="")
      h2 チーム名：2A
      
      h3 上級
      v-row(align="center")
        v-col(cols="12", sm="4")
          v-subheader(v-text="'佐藤真由美'")
        v-col(cols="12", sm="4")

BoxPistols

[
  {
    "id":1,
    "name":"JavaScript",
    "tel":"08000000000"
  },
  {
    "id":2,
    "name":"Object",
    "tel":"09000000000"

BoxPistols

#app
  v-app#inspire
    p {{ event.name }}
    p {{ event.start }} - {{ event.end }}
    p {{ event.color }}
    ul
     li - [ ] ToDo: 人ごとのポップアップ
     li - [ ] ToDo: SortFilter on Bar Colors
    v-row
      v-col.mb-2.controls(sm='2', lg='2')

BoxPistols

#app
  v-app#inspire
    v-row
      v-col.mb-2.controls(sm='2', lg='2')
        v-btn(fab='', small='', absolute='', left='', color='primary', @click='$refs.calendar.prev()')
          v-icon(dark='') mdi-chevron-left
        v-btn(fab='', small='', absolute='', right='', color='primary', @click='$refs.calendar.next()')
          v-icon(dark='') mdi-chevron-right
        br
        br