How could I use HTML snippets in VS Community 2017? - visual-studio-2017

How could I easly generate next code in Visual Studio Community 2017 in an ASP.NET MVC project?
<h1 id="welcome"></h1>
<div class="row">
<section class="col-md-4">
<h2><h2>
<p></p>
</section>
<section class="col-md-4">
<h2><h2>
<p></p>
</section>
<section class="col-md-4">
<h2><h2>
<p></p>
</section>
</div>
using next snippet
h1#welcome+div.row>(section.col-md-4>(h2+p))*3
Like on this image
This must work inside a .cshtml (HTML with razor code) and .html file

h1#welcome+div.row>(section.col-md-4>(h2+p))*3
Looks like you are doing Zen Coding of HTML. VS needs an extension for that to work.
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ZenCoding

Related

Foundation reveal modal won't open

When you click the "client login" link at the top of this page, the reveal modal should appear. The HTML for it is correct for sure, so a script must be wrong.
In the head of my page, I have these scripts/link:
<!-- jQuery in case needed for Foundation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Foundation CDN Links -->
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
The compressed CSS and JavaScript are what Foundation says to use.
I created the project with foundation-cli originally but am unable to deploy, so I copied all the static files/minified CSS into this new GitHub repo and published with GitHub Pages without issue: https://github.com/nataliecardot/zeus-hosting
If I can't simply use CDN links for the reveal modal to work, maybe I could copy the needed files from the original project's repo (created by running foundation new).
Here's the HTML of the reveal modal, although I know it's correct:
<div class="reveal login-modal" id="loginModal" data-reveal>
<h1 class="h3">Client Login</h1>
<form>
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label>
<div class="login-bottom-group">
<button class="button" type="submit">Login</button>
<div class="login-couple">
<span>Remember Me</span>
<div class="switch">
<input class="switch-input" id="rememberSwitch" type="checkbox" name="rememberSwitch">
<label class="switch-paddle" for="rememberSwitch">
<span class="show-for-sr">Remember Me</span>
</label>
</div>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
Scripts have to be and should always be at the end of <body>, right before </body>.

Why Prestashop's checkout template doesn't extend page.tpl?

In prestashop 1.7, the checkout template file themes/classic/templates/checkout/checkout.tpl uses its own html structure instead of extending page.tpl, like every other checkout pages (cart, order confirmation, etc).
Why is that? Is there any security flaw we should be aware of?
I've overriden checkout.tpl in my own theme {extends file='page.tpl'} and I want to make sure that everything's alright:
{extends file='page.tpl'}
{block name='content'}
<section id="content">
<div class="row">
<div class="col-md-8">
{block name='cart_summary'}
{render file='checkout/checkout-process.tpl' ui=$checkout_process}
{/block}
</div>
<div class="col-md-4">
{block name='cart_summary'}
{include file='checkout/_partials/cart-summary.tpl' cart = $cart}
{/block}
{hook h='displayReassurance'}
</div>
</div>
</section>
{/block}
Thanks!
Florian

Foundation 6 Off Canvas, where should I put the menu content?

I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">

odoo / OpenERP V8 - template lost for the QWEB reports

system:
Odoo V8.
Issue:
On The last PDF order i discovered that somehow the template is not applied. (only flat ugly text)
All the fields are here, including footer but the header is not here and there is no style applied nor pictures (as it was by default in the previous reports)
The same occurred for all the PDF reports so i guess i somehow changed or killed the template. How may i fix it?
Before:
After the install everything was correct. The base template was applied and was ok for both sales and purchase PDF files.
UPDATE:
The content of the model in the company setting (settings=>company under the report tab) is correct (when i preview the page everything is ok)
The external_layout qview is :
<?xml version="1.0"?>
<t t-name="report.external_layout">
<!-- Multicompany -->
<t t-if="o and 'company_id' in o">
<t t-set="company" t-value="o.company_id"/>
</t>
<t t-if="not o or not 'company_id' in o">
<t t-set="company" t-value="res_company"/>
</t>
<t t-call="report.external_layout_header"/>
<t t-raw="0"/>
<t t-call="report.external_layout_footer"/>
</t>
The external_layout_header qview is (we can clearly see the call to the RML header which is what is expected):
<?xml version="1.0"?>
<t t-name="report.external_layout_header">
<div class="header">
<div class="row">
<div class="col-xs-3">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 45px;"/>
</div>
<div class="col-xs-9 text-right" style="margin-top:20px;" t-field="company.rml_header1"/>
</div>
<div class="row zero_min_height">
<div class="col-xs-12">
<div style="border-bottom: 1px solid black;"/>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div t-field="company.partner_id" t-field-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}" style="border-bottom: 1px solid black;"/>
</div>
</div>
</div>
</t>
Both footer and header seem included. but the result of all the PDF reports is:
- no header
- content ok (but no font nor style)
- footer ok (but no font nor style)
Thank you
Hello Stephane TAMPIGNY,
Plase read this post
Click to See the Answer for your questioned post References
I hope this should helpful for you ..:)
I found out that my issue was similar to this one : https://github.com/odoo/odoo/issues/1105
It is due to the web.base.url value which was different depending working from a place or another. then I just fixed it to the most common value and will have to forget working from some computers with tunneling.
Check the details to fixed the value : https://bugs.launchpad.net/openobject-server/+bug/1295022

Foundation 4 - Sections- Centering Tabs

Problem: Attempting to Create 6 centered tabs in a row, however because I can't keep all 6 tabs on the same row. It does center the tabs, however pushes 2 of the tabs one line below and leaves an extra empty cell on the first line.
I tried using small-centered and made no difference.
Version: Foundation 4
Browser: Chrome - Latest
Code
<div class="row">
<div class="large-6 large-centered columns">
<div class="section-container horizontal-nav" data-section="horizontal-nav" >
<section class="section">
<p class="title">Tab 1</p>
</section>
<section class="section">
<p class="title">Tab 2</p>
</section>
<section class="section">
<p class="title">Tab 3</p>
</section>
<section class="section">
<p class="title">Tab 4</p>
</section>
<section class="section">
<p class="title">Tab 5</p >
</section>
<section class="section">
<p class="title">Tab 6</p>
</section>
</div>
</div>
</div>
I don't think this is possible with Foundation 4 out of the box. By using large-centered, you are just centering the div containing the tabs and not the tabs themselves. The tabs will always align left.
The functionality you are looking for is available in button groups. For example button-group even-6 will fill the entire space. Maybe it is possible to use jQuery to use a button group instead or to take a look at the JavaScript source and see how Zurb is resizing those elements and apply it to your section / tabs.