I am testing lungo framework, and by reading their examples (http://lungo.tapquo.com/howto/prototype), it does not work.
I am using their skeleton code:
<body class="app">
<section id="main" data-transition="">
<article id="main-article" class="active">
test.
</article>
</section>
<script src="components/quojs/quo.js"></script>
<script src="components/lungo/lungo.js"></script>
<script type='text/javascript'>
Lungo.init({
name: 'example'
});
</script>
</body>
I have no errors in my console. What can be causing the issue?
Thanks in advance.
If that's all of your HTML, then you're missing a whole bunch of CSS files, etc. Could you share a JS fiddle or longer code example? The way you're not getting any JS errors implies to me you may well be missing some CSS. Also, what version of Lungo are you using? How did you obtain it?
Lots of questions :) However, I created a basic Lungo JSfiddle a while ago - http://jsfiddle.net/otupman/vz59n/ - try that and see if it works. In the "External Resources" section you'll find the CSS & JS I'm including to make it work.
The simple code I'm using (as S/O won't let me post a JSFiddle link without code) simply looks like this:
<section id="main" >
<header data-title="JsFiddle Lungo">
<nav class="left">
<a data-icon="home"></a>
</nav>
</header>
<article class="active" id="first_article">
<strong>Simple Example</strong>
Second article
<br/>
Second section
</article>
<article id="second_article">
<strong>Second article</strong>
First article
<br/>
Second section
</article>
</section>
All of the CSS/JS files are coming from Lungo's example, for example, one CSS is http://lungo.tapquo.com/example/components/lungo/lungo.css
Related
I am testing Material Components Web from their recommended CDN & some minimal simple custom Vanilla Javascript to get it work properly.
For example, I can follow the single line list example showed here like this:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul class="mdc-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
</ul>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'));
</script>
</body>
</html>
Everything works fine except for the Css styling. No height: 48px is set to any of the list items, so all of them appear horribly collapsed, with no paddings at all.
Using the the Chrome Developer Inspector in the online example on their website, I see that height should be 48px height for every single list item.
Why are there missing styles in the official CDN Css?
NOTE: Things I am NOT asking for
I am not using any Js framework: Vue, Angular, React, Web dev server... just plain vanilla Js.
I am not asking how to add custom Css to add that specific missing value (I know how to do it, I just want to avoid doing it, since it should come already with the library). I just showed a single simple example of some missing attribute. I wonder if I am missing some other import or something.
I am already using the deprecated version of lists in production, that work fine, but I am trying here to update to the new recommended way of defining lists.
First of all, I'd recommend using docs on github repo - https://github.com/material-components/material-components-web/tree/master/packages/mdc-list:
List is currently being updated to better match the Material spec. As a result, there are two versions of List available: the deprecated old version and the new, future-proof version.
... there are differences in class names and DOM structure: the old version uses class names with a mdc-deprecated-list prefix (e.g., mdc-deprecated-list-item) whereas the new version uses the typical mdc-list prefix (e.g., mdc-list-item).
The example you referenced is related to deprecated version. You either need to add deprecated to class names, or update it according to the new docs.
Here is updated code which uses the new List version:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul class="mdc-list">
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
</ul>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
mdc.list.MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));
</script>
</body>
</html>
I have a layout.ejs file that provides the basic layout of every page that I have for my node application. This includes some basic CSS files (i.e bootstrap). I have other ejs files that have their body rendered using that layout.ejs file but I also want them to be able to include their own CSS files for some custom styles.
I've tried to include the CSS directly in the other ejs files but that just sets the css file in the body of the html. I have thought about using a javascript file that injects the CSS file client-side but this feels too 'hacky' for me.
Currently, my test layout (the one that inherits from layout.ejs) looks essentially like this:
<head>
<link href="../public/styles/index.css" rel="stylesheet" type="text\css">
</head>
<section id="box-section" class="blox-mf route">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="title-box text-center">
<h3 class="title-a">
Title2
</h3>
<p class="subtitle-a" style="color: #be3131;">
Subtitle 2
</p>
<div class="line-mf"></div>
</div>
</div>
</div>
</div>
</section>
<script src="/scripts/index.js" crossorigin="anonymous"></script>
As I said, all I have is a css attached to the body of the html and not in the header so everything keeps the default style as the layout.ejs file. Is there a way I can achieve this by finding a way to get different routes to use the basic layout css files but allow for some variation using their own css?
I found a method to do this. All it takes is to have a variable passed into the template ejs that is an array of URIs to your css files. The ejs then loops through the array and creates the template with the required css files.
Here's the code for passing through the css files:
myCss.push({
uri: 'public/styles/index.css'
})
res.render('./home', {
styles: myCss,
});
And then on the template, all you have to do is:
<% for(var i=0; i < styles.length; i++) { %>
<link href="<%= styles[i].uri %>" rel="stylesheet" type="text/css">
<% } %>
Now all the sheets you need for a route can be passed on. A bit of code refactoring is necessary to replace having to add the links manually but you can get the essence of it.
EDIT:
This requires some setup to serve static files. You can do this by including this in your express application:
app.use(express.static(__dirname + '/public'));
I would just love to try creating an AMP HTML website. However, what I cannot miss is our search function.
From what I understand so far, a search (input field, JavaScript handler) would not be possible with AMP HTML.
Is there any way to provide a neat search functionality within AMP HTML? Maybe using the amp-list component?
Forms are supported in AMP via the amp-form component. Using amp-form, you can embed a search form into your AMPs and render the search results into a new AMP on your server.
This is a search form in AMP:
<html>
<head>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<form method="get" action="https://example.com/search" target="_top">
<input name="search" type="search">
<input type="submit" value="">
</form>
</body>
</html>
https://example.com/search can then render to an AMP page showing the search results:
<html>
<head>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<h1>Results</h1>
<ul>
<li>Result 1</li>
<li>Result 2</li>
</ul>
</body>
</html>
You can find a working sample for a search implemented with AMP here.
Form support will come eventually. Please file a on Github with your use case: https://github.com/ampproject/amphtml/issues/new
There is a placeholder issue on Github to capture intent and use cases for Forms, see: https://github.com/ampproject/amphtml/issues/1286
I've succesfully installed the Facebook Like module by fekke.
However when i add this module to layer (for example homepage) nothing is showing up except the Title.
When inspecting the widget with firebug i get the following code (only copied the main elements, the full code is not shown belong due the length):
<div class="zone zone-tripel-second">
<article class="widget-tripel-second widget-facebook-like-widget widget">
<header>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" colorscheme="" font="Lucida Grande" action="like" width="450" show_faces="show_faces" href="http://localhost:30320/OrchardLocal/" fb-xfbml-state="rendered">
</article>
</div>
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.