mike-goodwin / pug-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

80.0 80.0 58.0 5 MB

A port of https://github.com/rajasegar/JADE-Bootstrap from jade to pug

License: MIT License

HTML 47.93% CSS 15.11% JavaScript 36.96%

pug-bootstrap's People

Contributors

Stargazers

Watchers

pug-bootstrap's Issues

Support for bootstrap 4

Does this pug-bootstrap work well for bootstrap 4?

fix tooltips mixin

Port the tooltips mixin to the new interpolation syntaxand add unit tests

Hello guys
i found this great work but seems not ready to use yet. i am newbie in javascript template engine. can i go with this and i'll update when official release. i'll try my best contribution also.

Problem on buttons.pug

Hi,
There is a problem on buttons.pug in components, when you specify the caption for submit-primary,
like this
+submit-primary("CREATE")
you have the value equal to #{caption} and the class equal to btn-#{type}.
I tried to replace the code (line 135) :
input.btn(class="btn-#{type}",type="submit",value="#{caption}")
by
input.btn(class="btn-" + type,type="submit",value=caption)
and now it works fine.
it the same thing on line 115 in the same file
cheers
Fabrice

Wrong Interpolation Syntax

Hi Mike,

i'm starting using your mixins library. I've noticed that the interpolation syntax is not compatible with Pug 2. For examples:

mixin nav(type,items,active)
ul.nav(class="#{type}")

in https://github.com/mike-goodwin/pug-bootstrap/blob/master/components/navs.pug.

Spec. Ref: https://pugjs.org/api/migration-v2.html

are you going to update your library?
Thank you for the support and the usefull porting.
Enrico.

      +accordion("sample")
          +accordion-item-primary("Title1","sample","true")
              |  This is first accordion content
          +accordion-item-default("Title2","sample")
              |  This is second accordion content
          +accordion-item-default("Title3","sample")
              |  This is third accordion content

results in the following markup being generated:

<div class="panel-group" id="accordion#{id}" role="tablist" aria-multiselectable="true">
            <div class="panel panel-#{type}">
              <div class="panel-heading" role="tab" id="heading#{title}">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion#{parent}" href="#collapse#{id}" aria-expanded="true" aria-controls="collapseOne">Title1</a></h4>
              </div>
              <div class="panel-collapse collapse in" id="collapse#{id}" role="tabpanel" aria-labelledby="heading#{title}">
                <div class="panel-body"> This is first accordion content
                </div>
              </div>
            </div>
            <div class="panel panel-#{type}">
              <div class="panel-heading" role="tab" id="heading#{title}">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion#{parent}" href="#collapse#{id}" aria-expanded="true" aria-controls="collapseOne">Title2</a></h4>
              </div>
              <div class="panel-collapse collapse" id="collapse#{id}" role="tabpanel" aria-labelledby="heading#{title}">
                <div class="panel-body"> This is second accordion content
                </div>
              </div>
            </div>
            <div class="panel panel-#{type}">
              <div class="panel-heading" role="tab" id="heading#{title}">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion#{parent}" href="#collapse#{id}" aria-expanded="true" aria-controls="collapseOne">Title3</a></h4>
              </div>
              <div class="panel-collapse collapse" id="collapse#{id}" role="tabpanel" aria-labelledby="heading#{title}">
                <div class="panel-body"> This is third accordion content
                </div>
              </div>
            </div>
          </div>

And this error in the console:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #{id}

Modal mixin doesn't work

The code

 button.btn.btn-primary(data-toggle="modal",data-target="#myModal") Launch demo modal
 +modal("Modal title","myModal")
    p This is modal content

doesn't work

Fix tables mixin

Update tables mixin to the new interpolation syntax and add unit tests

Syntax Error: Unexpected character '`'

I am a complete newbie to jade/pug... Trying to add bootstrap to pug
i copied pug-bootstrap folder inside my views folder
changed my index.pug as follows

extends ./pug-bootstrap/_bootstrap
block body
    h1 Put your own body content here

I am getting this error when i load my index page

D:\Workspace\NodeJs\for_delete\views\pug-bootstrap\components\tabs.pug:11:13 9| if (index === active) 10| li.active > 11| a(href=`#tab${item}`,role="tab",data-toggle="tab")= item --------------------^ 12| else 13| li 14| a(href=`#tab${item}`,role="tab",data-toggle="tab")= item Syntax Error: Unexpected character '`'

Error: D:\Workspace\NodeJs\for_delete\views\pug-bootstrap\components\tabs.pug:11:13
    9| 			if (index === active)
    10| 				li.active
  > 11| 					a(href=`#tab${item}`,role="tab",data-toggle="tab")= item
--------------------^
    12| 			else
    13| 				li
    14| 					a(href=`#tab${item}`,role="tab",data-toggle="tab")= item

Syntax Error: Unexpected character '`'
    at makeError (D:\Workspace\NodeJs\for_delete\node_modules\pug-error\index.js:32:13)
    at Lexer.error (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:58:15)
    at Lexer.assertExpression (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:86:12)
    at Lexer.attrs (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:1089:18)
    at Lexer.callLexerFunction (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:1319:23)
    at Lexer.advance (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:1356:15)
    at Lexer.callLexerFunction (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:1319:23)
    at Lexer.getTokens (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:1375:12)
    at lex (D:\Workspace\NodeJs\for_delete\node_modules\pug-lexer\index.js:12:42)
    at Object.lex (D:\Workspace\NodeJs\for_delete\node_modules\pug\lib\index.js:99:27)

is it because you are using "pug": "^2.0.0-beta3" and i am using "pug": "^2.0.0-rc.3",

Fix list-groups and add unit tests

Port the list groups mixin to the new interpolation syntaxand add unit tests

mike-goodwin / pug-bootstrap Goto Github PK

pug-bootstrap's People

Contributors

Stargazers

Watchers

Forkers

pug-bootstrap's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs