wikiki/bulma-quickview

Bulma extension to display a QuickView compoment

❗❗❗ Looking for new Maintainer ❗❗❗

As you may have noticed, this package has not been updated for some time. I'm sorry, but unfortunately I'm not able to continue to maintain it, so I'm looking for someone who would like to take it over and maintain it. If you are interested, please contact me at [email protected] to discuss how to proceed.

bulma-quickview

Bulma's extension to display quick view of data without leaving the current page (find all my bulma's extensions here)

Documentation & Demo

You can find the Documentation and a demo here

bulma-quickview's Issues

Using quick view inside vue component

Hello! I have the following problem:

<template>
  <div>
    <div id="quickviewDefault" class="quickview">
      <header class="quickview-header">
        <p class="title">Quickview title</p>
        <span class="delete" data-dismiss="quickview"></span>
      </header>

      <div class="quickview-body">
        <div class="quickview-block">
          ...
        </div>
      </div>
      <footer class="quickview-footer">
      </footer>
    </div>
      <button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
    <div v-if="visible === true">
      .....
    </div>
  </div>
</template>
<script>
var quickview = require("../../node_modules/bulma-quickview/dist/js/bulma-quickview.min.js")
quickview.attach()
</script>

(This is an shortened version of the vue component)

When the pages renders the quickview elements that are supposed to be hidden, are not and clicking the button does nothing. My guess is that the attach function is not firing at the correct moment but I can't figure out where to place it (if this is the problem)

Any thoughts?

Undefined variable: "$grey-lighter" with vueJS

I'm having issue importing bulma-quickview. I'm using vueJS 2.6.9.

If i try to import like below, the sass-loader complains that dependency is not found.

require('bulma-quickview') 

If i try to import like below, the sass-loader complains undefined variable "$grey-lighter"

require('bulma-quickview/src/sass/index.sass') 

As you can see, these are the sequence of my imports. I do import bulma before the extensions.
I didn't have this issue with bulma-divider or bulma-switch

require('bulma')
// require('bulma-quickview/src/sass/index.sass')
//require('bulma-quickview')
require('bulma-divider')
require('bulma-switch')
require('animate.css')
export default {
  
}

close on show

would be good if this could close on repeated click as well.

Add tabs container

Add the possibility tp display tabs component at top or bottom

Standalone Bulma-Quickview not found when used with React.js

Hi everyone,

With Bulma Quickview standalone, I'm trying to import bulmaQuickview in my React.js web application as follows:

import React from 'react';
import bulmaQuickview from 'bulma-quickview';

And I get this error from create-react-app server:

Failed to compile.
./src/FooComponent.js
Module not found: Can't resolve 'bulma-quickview' in '/path/to/my-app/src'

But it works if I import Bulma Quickview from the whole Bulma Extensions as follows:

import React from 'react';
import { bulmaQuickview } from 'bulma-extensions';

NB: This way of importing a standalone Bulma Extension works with Bulma Calendar.

Any idea where the issue comes from?

Thanks in advance for your help.

Best regards,

Quentin

issue with scroll

Just looked at this extension, and I've noticed an issue with the scroll.

Adding scroll to that section, would created that problem of double scroll.
Maybe it should add the class .is-clipped to the html tag, and it should be able to scroll the specific content.
To complete this behave, maybe add a background like the modal.

I can really see this a side navigation for most websites.

If there a way to open the quickview using JavaScript ?

Hi,

Thanks for this great extension
Im using multiple quick views for a project, if this possible to open or close a quick view using JavaScript ? And if yes, can you provide the code for it ? I'm struggling to find a way to do it

Kindly.

Typo in package.json, bulma-quickview.min.jss

Right/left position and sizes

Hi!

I didn't find your twitter or another way to contact.
Do you think right and left position support is something useful?
what about sizes? small, medium, large, etc..

I can send a pull request for those features.

send data with the event the show the duickview panel

Hello,
I think it could be helpfull to launch an event when we display the panel, with perhaps the element clicked or something that can help to know what make the panel shown.

Example : I'm in a table, I click on a line to display data about it in a quick view. I f I got this event, it's easy to customize it.

Left hand quickview

Would be nice to have a left handed quickview modifier.

Add sizes

Add size modifiers:
is-small
is-normal
is-medium
is-large

Add a scrollbar

My content for the Quickview exceeds the height of the viewport but there is no vertical scrollbar.

The browser scrolls the whole page but behind the quickview. It's almost like the Quickview is behaving like a modal.

How can I add a scrollbar to Quickview? I appreciate this will result in double scrollbars but that's okay for my use case. I took a look at #3 but it didn't really help me as such and is in any case now marked closed.

Thanks in advance :)

Sharing : Vue Component

The scss file needs to be created and where you load de original sass files. If you could publish this as part of the package ? Would be awesome. then I can just import it from npm. PM me if something is not clear.

<template>
  <transition name="slide-fade" appear>
    <div class="quickview is-active">
      <header class="quickview-header is-vcentered">
        <p class="has-text-weight-bold is-size-4">{{ title }}</p>
        <span class="delete" @click="$emit('close')"></span>
      </header>

      <div class="quickview-body">
        <div class="quickview-block p-4">
          <slot></slot>
        </div>
      </div>

      <footer v-if="footer" class="quickview-footer">
        <p>{{ footer }}</p>
      </footer>
    </div>
  </transition>
</template>
<script>
  import Vue from 'vue'
  import "../../public/assets/bulma_quickview.scss"
  export default{
    name:"BulmaButton",
    props:{
      title:{type:String},
      footer:{type:String}
    },
    data(){
      return  {

      }
    },methods:{
    }
  }
</script>
<style scoped>
.slide-fade-enter-active, .slide-fade-leave-active {
  transform: translateX(0%);
  transition: all 0.4s ease-in-out;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
}
</style>

Usage in vue :

    <BulmaQuickView v-if="showMe" title="My title" footer="My footer" @close="showMe=false">
        <!-- your body content here -->
    </BulmaQuickView>

bulmaQuickview is not defined

I am trying to use bulmaQuick in a react project & I am having issue with using below reference
<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-quickview/dist/bulma-quickview.min.js"></script> .

The issue is that my production build is ignoring the node modules to be bundled, so how should I add the reference to bulma.quickview.min.js

Mobile display doesn't have the 'delete' button

Hi Wikiki,

As always, thanks for your amazing work on bulma! I think there may be an issue with the quickview extension.

It is reproducible on the extensions overview page.

Change to mobile view and activate the quickview. The delete button is not accessible.

It would be awesome if this could be fixed!

Thanks,
Saurabh

Catch quickview:ready, quickview:show, quickview:hide

Thanks for the great extension! I'd like to run some code on quickview:ready (and similarly on show/hide), is this possible? Basically as soon as the quickview:ready is fired I'd like to click the button (i.e. before window.onload, which is where I'm currently calling showButton.click())

I've not yet managed to figure out how (I've tried attaching the event listener to the show/hide buttons and the quickview itself but to no avail)

showButton.addEventListener('quickview:ready', () => { console.log('quickview:ready') })

Am I missing something obvious or can't this currently be done?

Thank you!

Compatiblity with IE11

Hi,

I've successfuly used your nice component with Chrome but it doesn't work with IE11, stopping on the following lines:

var onQuickviewShowClick = Symbol('onQuickviewShowClick'); var onQuickviewDismissClick = Symbol('onQuickviewDismissClick');

Is there any workaround to make it working with IE11 just using the .js files in dist folder ?

Thanks a lot.

Minor issue: code comments refer to carousel rather than quickview

Hi,

reading the code in index.js I noticed that the comments refer to 'carousel' and not to 'quickview'.

Add flexible show/dismiss targets

It would be great if we can use a button or icon to trigger both, show and dismiss the QuickView. Also dismiss by click on body would be great.

Add "custom" open position

Hi, thanks for your job.

It's possible to add a class or something like that to choose the opening side?
Something like is-left, is-right, is-bottom and is-top ?

Thanks 👋

Use as Side Drawer for Hamburger Menu?

I'm trying to use quickview as a side drawer when the hamburger menu item is clicked. The drawer will open and close when the hamburger is clicked.

The problem is the height of quickview window covers the entire viewport including the navbar and here is no way to close the window since the hamburger is covered.

Is there any way to adjust the height of the window so it doesn't cover the navbar?