shakrmedia / petal Goto Github PK

Petal looks great, thanks for creating it.

I think a navbar component would be a great addition to help get started. How do you feel about adding something like what bootstrap has?

https://getbootstrap.com/docs/4.1/components/navbar/

.table-striped .table-hover does not work even on the demo website.

It seems like documentation footer collides with sidebar on pages with short content block.

I am in the process of building a new site from scratch with Petal for the first time. I am at the wireframe / design stage. I am trying to create a menu bar out of buttons (extra vote for Nav component please).

When I click on the "caret" to instantiate the dropdown, there are no problems and the list appears but when I click on the "caret" again to hide the menu, it does not hide and the JS console displays an error:

Uncaught TypeError: can't access property "parentNode", dropdown_el is null

I have examined the source of your buttons in your Documentation and my code is a copy of that:

`

				<div class="btn-group">
					<!-- Home -->
					<button class="btn hollow whitetext navbtn" data-action="/" type="button">Home</button>
				</div>

				<!-- User not logged in -->
				<div class="btn-group">
					<button class="btn hollow whitetext" data-toggle="dropdown" id="usermenu">User&nbsp;<span class="caret"></span></button>
					<ul class="dropdown-menu whitetext" data-dropdown-align="right">
						<li><a href="#">Register</a></li>
						<li><a href="#">Login</a></li>
					</ul>
				</div>

				<div class="btn-group">
					<!-- User logged in -->
					<button class="btn hollow whitetext" data-toggle="dropdown" data-dropdown="membermenu">Member&nbsp;<span class="caret"></span></button>
					<ul class="dropdown-menu whitetext" id="membermenu" data-dropdown-align="right">
						<li><a href="#">Profile</a></li>
						<li><a href="#">Logout</a></li>
					</ul>
				</div>

			</div>
		</div>`

Hi there folks, Thanks for the effort to create such a nice boilerplate.
As SASS/SCSS is more adopted and accepted among developers, It would be nice to have a scss version of styles. I'd be glad to contribute for the scss version.

When using input group and form validation(with icon).
form validation is work fine. but, icon doesn't appear right position. (hide back to the button...)

am I write HTML source wrong? or it is a bug?

Demo Screen (Without Hide Button)

Demo Screen (With Hide Button)

Here is a source code.

<form>
  <div class="form-group validation validation-icons valid">
    <label class="form-label" for="serialNumber">Serial Number</label>
    <div class="input-group">
      <input class="input" id="serialNumber" placeholder="시리얼 번호 입력" />
      <span class="input-addon-btn">
        <button id="launchQRScanner" class="btn green"><span class="alert-icon"><i class="petalicon petalicon-camera"></i></span></button>
      </span>
    </div>
    <p id="serialNumberNotice" class="form-caption">오른쪽의 버튼을 눌러 QR코드를 스캔할 수 있습니다.</p>
  </div>
</form>

Demo Page : https://devhaus.ikstudio.net/blobs/webview
(form validation status will be always valid on this page.)

I'm getting an error every time I click with the js installed via npm.

petal.min.js:formatted:1 Uncaught TypeError: Cannot read property 'contains' of undefined
    at HTMLDocument.<anonymous> (petal.min.js:formatted:1)
    at HTMLDocument.<anonymous> (petal.min.js:formatted:1)
(anonymous) @ petal.min.js:formatted:1
(anonymous) @ petal.min.js:formatted:1
petal.min.js:formatted:1 Uncaught TypeError: Cannot read property 'contains' of undefined
    at HTMLDocument.<anonymous> (petal.min.js:formatted:1)

Looks like it could be the global click handler. This event is coming from the html tag

How about make npm package with petal React components?

Any chance on getting an Alert component similar to bootstrap 4's alerts? https://v4-alpha.getbootstrap.com/components/alerts/

Petal currently uses global shade generator (.colorset()) in many places to utilize a shade of a specified base color to emphasize or differentiate from base color. The button generator (.generate-btn) mixin apparently was made before the global shade generator mixin, and it uses a separate 'custom' parameter to use custom-defined shade variables instead of using auto-generated shades.

In a generic use case, if one wants to use manually set color shades, it's likely that he will do so for all colors instead of just specific colors, so using a global variable like @disable-auto-shade-generator that controls the behavior globally would make more sense than having the 'custom' parameter in just button generator. (It simplifies the button generator mixin as well)

Looks really beautiful & well made. Is there any plan to make petal responsive out of the box?

Hello,

I'm having trouble with implementing the spinner inside a textbox. Please, can you share the JavaScript to make this work?

Thanks.

Best Regards