Code Monkey home page Code Monkey logo

nova-html-card's Introduction

We stand with Ukraine πŸ‡ΊπŸ‡¦

Nova HTML Card

Latest Stable Version Total Downloads Type coverage

Adds a card to the Laravel Nova dashboard with any arbitrary HTML content.

image

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require interaction-design-foundation/nova-html-card

Usage

Register your new card.

use InteractionDesignFoundation\HtmlCard\HtmlCard;

public function cards()
{
    return [
        (new HtmlCard())->width('1/3')->html('<h1>Hello World!</h1>'),
        (new HtmlCard())->width('1/3')->markdown('# Hello World!'),
        (new HtmlCard())->width('1/3')->view('cards.hello', ['name' => 'World']),
     ];
}

Options

  • Set content
    • ->html('<h1>Hello!</h1>'): Set HTML or plain content.
    • ->markdown('# Hello!'): Set Markdown content that will be converted into HTML.
    • ->view('path.to.view', []): Specify blade view file and optionally pass an array of data to view.
  • Styling
    • ->center(false): Center card's content. false by default.
    • ->withoutCardStyles(true): Whether to use standard Nova Card styles for a card (background, padding, etc). false by default.
    • ->withBasicStyles(): Adds some basic styling to the HTML elements in the card. Useful when rendering Markdown.

Why this package?

There are a few packages with similar functionality. Our package provides an API to cover all cases covered by these packages plus additionally provides some unique features like:

  • Markdown support
  • easy switch between class Nova-card look and raw-HTML look
  • Simple, Laravel-like API

Changelog

Please see Releases for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.

nova-html-card's People

Contributors

alies-dev avatar bluec avatar lptn avatar renovate[bot] avatar shawnheide avatar timciep avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nova-html-card's Issues

No Styles apply

  • Package Version: 3.0.1
  • Nova Version: 4~
  • PHP Version: 8.2

Description:

html, blade, markdown syntax will not apply the style I gave it.

image

The Text are small and are not an H1 or # Headline.

Steps To Reproduce:

Installed nova and https://github.com/InteractionDesignFoundation

    public function cards(NovaRequest $request)
    {
        return [
            (new HtmlCard())->width('1/3')->markdown('# Optionaler Wert')->center(),
            (new HtmlCard())->width('1/3')->html('<h1> Optionaler Wert </h1>')->center(),
        ];
    }

Feature request: auto refresh

Hi. Thanks for your great contribution.
I wonder if there is a way to add the ability to define a refresh parameter.
I am using your card to show some status, and would like to auto-refresh every 10 secs or so.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • Lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

composer
composer.json
  • php ^8.1
  • laravel/nova ^4.20
  • interaction-design-foundation/coding-standard ^0.2.0
  • orchestra/testbench ^8.3
  • phpunit/phpunit ^10.5 || ^11.0
  • vimeo/psalm ^5.22
github-actions
.github/workflows/format_php.yml
  • actions/checkout v4
  • shivammathur/setup-php v2
  • actions/cache v4
  • actions/cache v4
  • actions/cache v4
  • EndBug/add-and-commit v9
.github/workflows/psalm.yml
  • actions/checkout v4
  • shivammathur/setup-php v2
  • actions/cache v4
.github/workflows/run-tests.yml
  • actions/checkout v4
  • shivammathur/setup-php v2
  • actions/checkout v4
  • actions/setup-node v4
  • actions/cache v4
npm
package.json
  • vue ^3.2.36
  • laravel-mix ^6.0.43
  • node-sass ^9.0.0
  • sass-loader ^13.2.0
  • vue-loader ^16.8.3
  • node >=16.0

  • Check this box to trigger a request for Renovate to run again on this repository

Update for Nova 4.0

Could you update this package for Nova 4.0? It's probably as simple as updating composer.json to include || ^4.0

Thanks!

Minor CSS issues when using withBasicStyles - hr, blockquote, and ol

  • Package Version: 3.2.0
  • Nova Version: 4.3.15
  • PHP Version: 8.3.x

Description:

There's some minor CSS issues when rendering HTML/Markdown usng the withBasicStyles options: Horizontal rules have no margin so they stack on top of each other, Blockquotes don't indent, and ordered lists have no numbering.

Screenshot 2024-03-12 at 09 46 32 Screenshot 2024-03-12 at 09 46 58 Screenshot 2024-03-12 at 09 46 47

Steps To Reproduce:

Here's some example markdown that will generate the screenshots above.


## Horizontal Rules

___

---

***

## Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

Happy to raise a little PR to address these issues.

Feature Request LiveWire

As for ->html and ->view it would be nice with a ->liveWire('my-livewire-component')
Sure, I can use views but...

Class 'App\Nova\Dasboards\HtmlCard' Not Found

I get the error above as can be seen in the title and this is the code:

<?php
    namespace App\Nova\Dashboards;

    use Laravel\Nova\Dashboard;

    use App\Nova\Metrics\UserDashboard\NewUsersToday;
    use App\Nova\Metrics\UserDashboard\NewUsersWeek;
    use App\Nova\Metrics\UserDashboard\NewUsersMonth;
    use App\Nova\Metrics\UserDashboard\UserTotal;

    use App\Nova\Metrics\UserDashboard\UserLoginTrendLine;

    use App\Nova\Cards\UserDashboard\MostActiveUsers;
    use App\Nova\Cards\UserDashboard\LeastActiveUsers;

    class UserStatistics extends Dashboard
    {
        /**
         * Get the displayable name of the dashboard.
         *
         * @return string
         */
        public static function label()
        {
            return 'User Insights';
        }

        /**
         * Get the cards for the dashboard.
         *
         * @return array
         */
        public function cards()
        {
            return [
                (new NewUsersToday)->width('1/4'),
                (new NewUsersWeek)->width('1/4'),
                (new NewUsersMonth)->width('1/4'),
                (new UserTotal)->width('1/4'),

                (new UserLoginTrendLine)->width('1/2'),
                (new \Rocramer\MatomoAnalytics\Cards\VisitLength())->width('1/2'),

                (new MostActiveUsers())->width('1/2'),
                (new LeastActiveUsers())->width('1/2'),

                (new HtmlCard())->width('1/3')->html('<h1>Hello World!</h1>')->center(true),
            ];
        }

I'm assuming the package needs to be imported via a use statement at the top but there is not example on how to do so.

Ends up last if width('full')

Hi! I think this is a missing piece in Nova, so thanks a lot for building it.

I have one strange bug that may or may not be fixable by the package. If I use width('full') then the card ends up on the bottom of the page. It does not happen if I use width('1/3') or width('1/2').

Here is my complete cards setup for that dashboard:

public function cards()
{
    return [
        (new HtmlCard)->width('full')->html('Data might be up to 30 minutes old')->center(true),

        (new GlobalPets)->width('1/3'),
        (new GlobalOwners)->width('1/3'),
        (new GlobalVets)->width('1/3'),

        (new GlobalNewPets)->width('1/3'),
        (new GlobalPetsPerWeek)->width('2/3'),

        (new GlobalNewOwners)->width('1/3'),
        (new GlobalOwnersPerWeek)->width('2/3'),

        (new GlobalNewVets)->width('1/3'),
        (new GlobalVetsPerWeek)->width('2/3'),
    ];
}

Support for bare html cards

At the moment your fantastic package is trying to mimic novas card layout with itβ€˜s border, rounded edges and padding. This is very useful and we have been able to build some cards which look nova-like.

I wish for an option to remove this styling completely. Say you want to render e.g. an alert on top of a resources record. Nova does not have this and there are no packages for it. And displaying it within a card looks strange. So in some cases it would be nice to be able to render a β€žcardβ€œ without any predefined styling and defaults so you can completely design it to your custom needs.

There are many different cases where someone would like to tune the styling a little bit. And this is the most easy if you can start from a blank space without any defaults being set.

[Question] How to pass data from the resource to the card

I am using these cards in ->onlyOnDetail(), but cannot seem to get $this->someColumn in the html block. Is this even possible?

Example:

public function cards(Request $request)
{
    return [
         (new HtmlCard)->onlyOnDetail()->html('<div>'.$this->id.'</div>')
    ];
}

$this->id displays nothing, but $this->all() displays the content πŸ€”

I can pull the information manually, but I should have access to it already, but cannot work out why not

Thanks

no output on nova 2.2

the card is not showing up, sourcecode view in browser shows:

<html-card card="[object Object]" lens="" class="card-panel"></html-card>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.