The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> [EASY] Help for embedding a CodePen, Easy integration CSS
Laryssa
post May 17 2019, 03:54 PM
Post #1





Group: Members
Posts: 1
Joined: 17-May 19
Member No.: 26,894



Hello,

The solution to my problem is surely extremely simple and it is all the more annoying.

I'm just trying to put a CodePen (small template) in a container but it is capricious and does not appear. One of the comments (CSS) of the code specifies that it is necessary to attribute a size and a height to the object under pain of not seeing it appearing and in spite of that I do not see the error.

CodePen : https://codepen.io/fabianmossberg/pen/yZMxzP

my container :

CODE
body{
    margin:0;
    padding: 0;
}

.container-wrap{
            width: 100vw;
            height:100vh;
            margin:0 auto;
            position: relative;
            background: url("../res/img/map_01.2.png") no-repeat center center;
            background-size: cover;
    overflow: hidden;
        }


And here is the CSS that I have to adapt to make the whole thing work:
(With translated comments ^^)

CODE

/* This style can only be applied to this demo, For reference only, Customizable by design or preference */

html,body{ height: 100%; }

body { background: #20262E;
overflow: hidden;
}

#app{
  overflow-x:hidden;
}

/* Direct script reference suggestions are added, otherwise it would cause flickering, a single file component does not need */

[v-cloak] { display: none; }

/* Warning! The width and height of the component must be defined, otherwise it will not come out!!! */

#app .vue-tinder {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 23px;
  margin: auto;
  width: calc(100% - 20px);
  height: calc(100% - 23px - 18%);
  min-width: 300px;
  max-width: 355px;
}

/* The position of the three status indicators on the map, the transparency will be automatically adjusted by the component */

.nope-pointer { right: 10px; }
.like-pointer { left: 10px; }
.nope-pointer,
.like-pointer {
  position: absolute;
  z-index: 1;
  top: 20px;
  width: 64px;
  height: 64px;
}
.super-pointer {
  position: absolute;
  z-index: 1;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: auto;
  width: 112px;
  height: 78px;
}

/* Style d'image de fente */
.pic {
  width: 100%;
  height: 100%;
  background-size: cover;
}

/* Style de bouton */
.btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  max-width: 355px;
}
.btns img{ width: 80px; }




I also add HTML and JS in case :

HTML
CODE

<div id="app" v-cloak>
  <tinder
    ref="tinder"
    :queue.sync="queue"
    @submit="submit">
    <template slot-scope="{data}">
      <div
        class="pic"
        :style="`background-image:url(https://picsum.photos/710/1152/?random=${data.key})`">
      </div>
    </template>
    <img class="like-pointer" slot="like" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like-txt.png">
    <img class="nope-pointer" slot="nope" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope-txt.png">
    <img class="super-pointer" slot="super" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-txt.png">
  </tinder>
  <div class="btns">
    <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope.png" @click="decide('nope')">
    <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-like.png" @click="decide('super')">
    <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like.png" @click="decide('like')">
  </div>
</div>


JS
CODE
new Vue({
  el: "#app",
  data: {
    queue: []
  },
  created () {
    this.getData()
  },
  methods: {
    /**
     * 用于产生demo用的数据
     * @method getData
     */
    getData () {
      const list = []
      for (let i = 0; i < 5; i++) {
        list.push({
          key: Math.random()
        })
      }
      this.queue = this.queue.concat(list)
    },
    /**
     * 点击按钮所绑定的方法,此方法为调用vue-tinder组件内方法的示例,仅供参考
     * @method submit
     * @param  {String} choice
     */
    decide (choice) {
      this.$refs.tinder.decide(choice)
    },
    /**
     * 自定义事件submit绑定的方法,移除卡片的回调
     * @method submit
     * @param  {Object} choice {type,key}
     */
    submit (choice) {
      switch (choice) {
        case 'nope': // 左滑
          break;
        case 'like': // 右滑
          break;
        case 'super': // 上滑
          break;
      }
      if (this.queue.length < 2) {
        this.getData()
      }
    }
  }
})


This post has been edited by Laryssa: May 17 2019, 03:56 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th June 2019 - 04:23 PM