References #18 | Update some hobbies

LoanR · Mar 28, 2019 · 5df06f0 · 5df06f0
1 parent 9a3db21
commit 5df06f0
Show file tree

Hide file tree

Showing 14 changed files with 674 additions and 63 deletions.
diff --git a/docs/assets/main.css b/docs/assets/main.css
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/static/icons/spot-icon.png b/docs/static/icons/spot-icon.png
diff --git a/docs/vendor.js b/docs/vendor.js
diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
@@ -64,18 +64,20 @@ html {
       }
     }
 
-    p, h1 {
-      a {
-        cursor: pointer;
-        box-shadow: inset 0 -1px var(--secondary-color);
-        transition: all $t-duration $t-timing-function;
-        text-decoration: none;
-        color: inherit;
+    .subtle {
+      opacity: 0.2;
+    }
+
+    p a, h1 a, .link-style {
+      cursor: pointer;
+      box-shadow: inset 0 -1px var(--secondary-color);
+      transition: all $t-duration $t-timing-function;
+      text-decoration: none;
+      color: inherit;
 
-        &:hover, &.active-mutation-link {
-          color: $light-color;
-          box-shadow: inset 0 -2rem var(--secondary-color);
-        }
+      &:hover, &.active-mutation-link {
+        color: $light-color;
+        box-shadow: inset 0 -2rem var(--secondary-color);
       }
     }
   }

diff --git a/src/components/board/CardComponent.vue b/src/components/board/CardComponent.vue
@@ -123,6 +123,7 @@ export default {
       left: 50%;
       transform: translate(-50%, -50%);
       border: 6px solid $light-color;
+      overflow: hidden;
 
       .thumbnail {
         max-width: 80px;

diff --git a/src/components/board/CardMutationLinkComponent.vue b/src/components/board/CardMutationLinkComponent.vue
@@ -1,12 +1,18 @@
 <template>
   <span>
-    <span v-if="index > 0">
+    <span
+      v-if="index > 0"
+      class="subtle"
+    >
       •
     </span>
     <a
       :class="{ 'active-mutation-link': isSelected }"
       @click="selectCard"
-    >{{ linkContent }}</a>
+    >{{ linkContent.title }}<span
+      v-if="linkContent.detail"
+      class="subtle"
+    > - {{ linkContent.detail }}</span></a>
   </span>
 </template>
 

diff --git a/src/components/board/CardMutationLinksComponent.vue b/src/components/board/CardMutationLinksComponent.vue
@@ -28,7 +28,9 @@ export default {
     ...mapState(['cardIndex']),
     ...mapGetters(['currentPagePart']),
     cardChoices () {
-      return this.currentPagePart.cards.map(card => card.selectionName)
+      return this.currentPagePart.cards.map(card => {
+        return { title: card.selectionName, detail: card.selectionDetail }
+      })
     },
     cardSelectionTitle () {
       return this.currentPagePart.cardSelectionTitle

diff --git a/src/components/board/SectionSelectorComponent.vue b/src/components/board/SectionSelectorComponent.vue
@@ -91,6 +91,8 @@ import TypetimeBoardOperationComponent from '../specific_content/boards/experien
 import TypetimeBoardTodoComponent from '../specific_content/boards/experiences/TypetimeBoardTodo.vue'
 import CavesBoardStackComponent from '../specific_content/boards/experiences/CavesBoardStack.vue'
 import CavesBoardWorkComponent from '../specific_content/boards/experiences/CavesBoardWork.vue'
+import ComposeBoardSetlistComponent from '../specific_content/boards/hobbies/ComposeBoardSetlist.vue'
+import ListenBoardPlaylistsComponent from '../specific_content/boards/hobbies/ListenBoardPlaylists.vue'
 
 export default {
   components: {
@@ -130,7 +132,9 @@ export default {
     'typetime-board-operation-component': TypetimeBoardOperationComponent,
     'typetime-board-todo-component': TypetimeBoardTodoComponent,
     'caves-board-stack-component': CavesBoardStackComponent,
-    'caves-board-work-component': CavesBoardWorkComponent
+    'caves-board-work-component': CavesBoardWorkComponent,
+    'compose-board-setlist-component': ComposeBoardSetlistComponent,
+    'listen-board-playlists-component': ListenBoardPlaylistsComponent
   },
 
   props: {

diff --git a/src/components/specific_content/boards/hobbies/ComposeBoardSetlist.vue b/src/components/specific_content/boards/hobbies/ComposeBoardSetlist.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <iframe
+      width="100%"
+      height="300"
+      scrolling="no"
+      frameborder="no"
+      allow="autoplay"
+      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/737244282&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false&visual=true"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  iframe {
+    margin-top: -2px;
+  }
+</style>
diff --git a/src/components/specific_content/boards/hobbies/ListenBoardPlaylists.vue b/src/components/specific_content/boards/hobbies/ListenBoardPlaylists.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <ul class="">
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one:playlist:6tSE0JyPUR8IjYPRM1eMpr"
+        >square</a>
+        <span class="subtle">
+          : rock • new wave • cold wave • post punk
+        </span>
+      </li>
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one:playlist:2KntDF4wsbGVRD9zAZcIBz"
+        >haraud</a>
+        <span class="subtle">
+          : down tempo • electro • abstract • idm
+        </span>
+      </li>
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one:playlist:6AcbJ1z28mAWmdg1V2aEhw"
+        >dust, elegy & vessel</a>
+        <span class="subtle">
+          : burial • burial • burial • others
+        </span>
+      </li>
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one:playlist:6Jxg4zw8BD0Cdv2OUHA5uI"
+        >harp</a>
+        <span class="subtle">
+          : bass • trap • grime • money
+        </span>
+      </li>
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one:playlist:1RSig4jFkNnSp4p66B9vGW"
+        >dec</a>
+        <span class="subtle">
+          : dub • reggae • electro
+        </span>
+      </li>
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one:playlist:7n4TF17R0F90QjhRu5XR2U"
+        >sleep paralysis</a>
+        <span class="subtle">
+          : nu metal • emo • heavy funk hard rock
+        </span>
+      </li>
+      <li class="color-hover">
+        <img
+          class="inline-icon"
+          src="static/icons/spot-icon.png"
+          alt="icon"
+        >
+        <a
+          class="link-style"
+          href="spotify:user:low-one"
+        >...</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    margin:0;
+    padding: 0;
+    text-indent: 0;
+    list-style-type: none;
+  }
+</style>
diff --git a/src/components/specific_content/cards/hobbies/ComposeCard.vue b/src/components/specific_content/cards/hobbies/ComposeCard.vue
@@ -1,15 +1,11 @@
 <template>
   <div>
     <p>
-      Lorem ipsum dolor sit,
-      <strong>
-        amet
-      </strong>
-      consectetur adipisicing elit. Quis eum non ipsum
-      <em>
-        laboriosam
-      </em>
-      sapiente dolorem culpa fuga ducimus, dolor labore ipsam hic error totam laudantium animi, ad, veritatis maxime assumenda.
+      7 ans de musique, batterie, percussions.
+    </p>
+    <p>
+      Guitare, instruments à clavier<br>
+      Musique assistée par ordinateur, SuperCollider
     </p>
   </div>
 </template>