Removed the pin function

Author: Sandstedt

docs/.vuepress/components/MojsInteractive.vue

@@ -42,12 +42,8 @@ or with no controlls at all (static animation, unless you provide a .play() func
   <div class="mojs-interactive">
     <div
       class="mojs-interactive__code"
-      :class="{ 'mojs-interactive__code--pinned': isPinned }"
     >
       <prism-editor :code="code" language="js" @change="change"></prism-editor>
-      <button class="button button--icon button--pin" v-on:click="pin" aria-label="Pin the code on scroll">
-        {{ isPinned ? "✖️" : "📍" }}
-      </button>
       <div class="buttons">
         <button class="button button--secondary" v-on:click="reset">Reset</button>
         <button class="button" v-on:click="updateCode">Update code</button>
@@ -90,7 +86,6 @@ or with no controlls at all (static animation, unless you provide a .play() func
       return {
         rawCode: this.code,
         isPlaying: false,
-        isPinned: false,
       }
     },
 
@@ -179,10 +174,6 @@ or with no controlls at all (static animation, unless you provide a .play() func
         }
         this.isPlaying = !this.isPlaying;
       },
-
-      pin: function() {
-        this.isPinned = !this.isPinned;
-      }
     },
 
     mounted () {

docs/.vuepress/styles/index.styl

@@ -191,26 +191,6 @@ blockquote {
   bottom: 1rem;
   right: 1rem;
 }
-/* TODO: Add the pinned to the container, co both the code and the code exmple can be side by side. 
-  And add a placeholder block where the old elements had been so the text doesnt jump.
-*/
-.mojs-interactive__code.mojs-interactive__code--pinned {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 200;
-  background: $c-purple-dark;
-}
-.mojs-interactive__code.mojs-interactive__code--pinned .prism-editor-wrapper {
-  max-height: 50vh;
-  overflow: auto;
-}
-.mojs-interactive__code .button--pin {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
 
 .mojs-interactive__result {
   position: relative;