Refactor presenters and fix styles

LibCrowds · Oct 31, 2017 · dbf76de · dbf76de
1 parent 8ef8a45
commit dbf76de
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 31 deletions.
diff --git a/assets/style/settings.scss b/assets/style/settings.scss
@@ -50,6 +50,7 @@ $btn-border-radius-sm:             0px;
 /* Navbars */
 $navbar-light-color:               rgba($black, .7);
 $app-navbar-height:                50px;
+$collection-navbar-height:         65px;
 $navbar-dark-color:                $white;
 $navbar-dark-toggler-border-color: transparent;
 $sidebar-width:                    250px;

diff --git a/components/buttons/ProjectContrib.vue b/components/buttons/ProjectContrib.vue
@@ -1,10 +1,11 @@
 <template>
   <b-btn
     :to="{
-      name: 'collection-short_name-projects-id',
+      name: 'collection-short_name-projects-id-presenter',
       params: {
         short_name: collection.short_name,
-        id: project.id
+        id: project.id,
+        presenter: collection.info.presenter
       }
     }"
     :block="block"

diff --git a/components/cards/Project.vue b/components/cards/Project.vue
@@ -4,10 +4,11 @@
     class="project-card">
     <nuxt-link
       :to="{
-        name: 'collection-short_name-projects-id',
+        name: 'collection-short_name-projects-id-presenter',
         params: {
           short_name: collection.short_name,
-          id: project.id
+          id: project.id,
+          presenter: collection.info.presenter
         }
       }">
       <div class="avatar-wrapper">
@@ -21,10 +22,11 @@
       <div class="card-title mb-0">
         <nuxt-link
           :to="{
-            name: 'collection-short_name-projects-id',
+            name: 'collection-short_name-projects-id-presenter',
             params: {
               short_name: collection.short_name,
-              id: project.id
+              id: project.id,
+              presenter: collection.info.presenter
             }
           }">
           <h4 class="card-title mb-1 px-2 pt-2">

diff --git a/components/navbars/Collection.vue b/components/navbars/Collection.vue
@@ -375,16 +375,16 @@ export default {
 @import '~hamburgers/_sass/hamburgers/hamburgers';
 
 #collection-navbar {
-  z-index: 200;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: $collection-navbar-height;
   font-family: $font-family-base;
   font-weight: 500;
   letter-spacing: 0.8px;
   justify-content: center;
-  align-items: baseline;
   transition: background-color 200ms;
-  padding: .75rem 1.5rem;
-  display: flex;
-  flex-direction: row;
 
   .container {
     margin: 0;

diff --git a/components/presenters/LibcrowdsViewer.vue b/components/presenters/LibcrowdsViewer.vue
@@ -34,6 +34,7 @@ export default {
     currentUser () {
       return this.$store.state.currentUser
     },
+
     taskOpts () {
       return this.tasks.map((task) => {
         let opts = task.info
@@ -44,6 +45,7 @@ export default {
         return opts
       })
     },
+
     buttons () {
       let buttons = {
         note: 'Seen something interesting?<br>Add a note',
@@ -80,11 +82,6 @@ export default {
 
 <style lang="scss">
 .libcrowds-viewer-presenter {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 1040;
   background-color: #000;
   width: 100%;
   height: 100%;

diff --git a/layouts/bases/Collection.vue b/layouts/bases/Collection.vue
@@ -3,6 +3,7 @@
     <div id="collection-background" :style="bgStyle"></div>
 
     <collection-navbar
+      :slim="slimNavbar"
       :collection="collection"
       :current-user="currentUser">
     </collection-navbar>
@@ -11,7 +12,10 @@
       <slot></slot>
     </main>
 
-    <app-footer :collections="publishedCollections"></app-footer>
+    <app-footer
+      v-if="!hideFooter"
+      :collections="publishedCollections">
+    </app-footer>
 
   </div>
 </template>
@@ -27,6 +31,17 @@ export default {
     AppFooter
   },
 
+  props: {
+    hideFooter: {
+      type: Boolean,
+      default: false
+    },
+    slimNavbar: {
+      type: Boolean,
+      default: false
+    }
+  },
+
   computed: {
     collection () {
       return this.$store.state.currentCollection

diff --git a/layouts/collection-fullscreen-dark.vue b/layouts/collection-fullscreen-dark.vue
@@ -0,0 +1,38 @@
+<template>
+  <div id="collection-fullscreen-dark-layout">
+    <collection-base hide-footer>
+      <div class="content">
+        <nuxt></nuxt>
+      </div>
+    </collection-base>
+  </div>
+</template>
+
+<script>
+import CollectionBase from '@/layouts/bases/Collection'
+
+export default {
+  components: {
+    CollectionBase
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~assets/style/settings';
+
+#collection-fullscreen-dark-layout {
+  .content {
+    height: calc(100vh - #{$collection-navbar-height});
+  }
+
+  #collection-navbar {
+    background-color: #0D0D0D;
+
+    .container {
+      margin: 0 1rem;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/...ection/_short_name/projects/_id/index.vue → ...ame/projects/_id/_presenter.vue/index.vue b/...ection/_short_name/projects/_id/index.vue → ...ame/projects/_id/_presenter.vue/index.vue
@@ -1,17 +1,12 @@
 <template>
-  <div id="presenter">
-    <p class="lead text-center" v-if="!presenter">
-      No task presenter has been configured for this collection.
-    </p>
-    <component
-      v-else-if="project"
-      :is="presenter"
-      :project="project"
-      :tasks="tasks"
-      @submit="onSubmit"
-      @taskliked="onTaskLiked">
-    </component>
-  </div>
+  <component
+    v-else-if="project"
+    :is="presenter"
+    :project="project"
+    :tasks="tasks"
+    @submit="onSubmit"
+    @taskliked="onTaskLiked">
+  </component>
 </template>
 
 <script>
@@ -22,7 +17,13 @@ import LibcrowdsViewerPresenter from '@/components/presenters/LibcrowdsViewer'
 import Z3950Presenter from '@/components/presenters/Z3950'
 
 export default {
-  layout: 'collection-tabs',
+  layout ({ params, store }) {
+    const layouts = {
+      'libcrowds-viewer': 'collection-fullscreen-dark',
+      'z3950': 'collection-tabs'
+    }
+    return layouts[params.presenter] || 'collection-tabs'
+  },
 
   mixins: [ notifications, fetchCollectionByName ],