@quasar/qflashcard v1.0.0-beta.5 Release!

Hawkeye64

https://github.com/quasarframework/app-extension-qflashcard/releases/tag/v1.0.0-beta.5

Updated to latest @quasar/app extension api
Ensured component will compile for SSR

kp

What would be the responsive and working way to fit an image into the flashcard?
It mostly ignores the image style and is only shown partly - i some places. Seems to dependof elements outside of it. Any tipps?

Also img works, q-img not.

kp

As implicit in using your flashcards, I think they are great.
May I ask for an improvement in the example section? It would be great to see the source code of the different examples, so I can easier work with them. Reverse engineering is so cumbersome ;).
( https://quasarframework.github.io/app-extension-qflashcard/demo/dist/spa/#/ )

Even for your ONE example, I need to figure out the style myself. Your work IS great, your documentation isn’t. But in adoption of tech, documentation is a big factor. And from a creators perspective, everything is known, everything is straight forward - if it wasn’t the creator wouldn’t have done it this way. Implicit knowledge is the keyword here.

Talking specifically of your extensions: not being documented at least in a intermediate manner, it hurts your great results. The best tool won’t be used if only few people are able to understand how it works and have to be used.

kp

And yes, you can have a look in the source. As being fullstack including devops myself, I do have a wide range of tech and information need to know. The better the documentation, the less hazzle do people like me have. And I bet, I am not the only one not having 10 years frontend experience or specialization in node / vue / css and companion techs.

kp

One specific question / feature request I do have: How would I do it that one section is shown with mouse out and “effects out” - while another section “effects in” with mouse over.
Would be great for labels as in titles and descriptions.

Maybe “inversed transition” is the key word here?

Hawkeye64

Here’s an example:

      <div class="q-pa-sm">
        <div class="description text-center rounded-borders">
          <p>  {{ touchOrClick }} the example below:</p>
          <q-flashcard :style="style">
            <q-flashcard-section transition="flip-left-out">
              <img src="statics/1.jpg" width=300 height=200>
            </q-flashcard-section>
            <q-flashcard-section transition="flip-left-in" class="fit" style="top:0;background-color: rgba(219,127,8, 0.7);">
              <q-flashcard-section class="text-center my-header">
                Combo Demo #1
              </q-flashcard-section>
              <q-flashcard-section class="my-text">
                For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.
              </q-flashcard-section>
              <q-flashcard-section class="fit flex justify-center items-end">
                <a href="#" class="my-button">Learn More</a>
              </q-flashcard-section>
            </q-flashcard-section>
          </q-flashcard>
          <div class="text-h5 q-pt-sm">Combo Demo #1</div>
        </div>
      </div>

And, a good way to add an image is htorugh the background-image css attribute.

style () {
      return {
        width: '320px',
        height: '220px',
        backgroundImage: `url('statics/bgimg.jpg')`,
        padding: '10px',
        border: '10px solid #fff',
        textAlign: 'center',
        boxShadow: '1px 1px 2px #e6e6e6'
      }

You can find all the demo source here: https://github.com/quasarframework/app-extension-qflashcard/blob/dev/demo/src/pages/Index.vue

kp

Will try the bg image approach. I think this could be my solution. Will report back.

Hawkeye64

@kp Hopefully it worked out for you.

ravimeetsu

Hello @Hawkeye64

Thank you for this wonderful plugin and your last example That really helped!

Question: Is it possible to flip cards on click instead of hover? Also, how would hover work on a mobile device ?

Hawkeye64

@ravimeetsu Excellent question! Use the no-hover property for clicks and mobile

metalsadman

@Hawkeye64 are the events passed thru? And maybe add method so devs can control when to activate the animation.

pazarbasifatih

Another secret feature of the Quasar.
I feel lucky clicking the forum today.
Now let me see if I can create a learning app with that

No More Posting New Topics!

@quasar/qflashcard v1.0.0-beta.5 Release!