Here is a live example:
http://alkharia.com/layout/index.html
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/less/app/core.less">
</head>
<body style="">
<!--[if lt IE 7]>
<div class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</div>
<![endif]-->
<header>
<section id="top-bar">
<div class="col-sm-6 col-sm-offset-4">
Login form
</div>
<div class="col-sm-2">
Create an account
</div>
</section>
</header>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/less.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body></html>
So I included the less.js file along with the core.less file
The core.less file #import url("../bootstrap/bootstrap.less"); the bootstrap.less file while the bootstrap.less file imports all the relevant less files.
If you look under the Developer's Tools in Chrome, all less files are being included including ALL the bootstrap.less files that I wanted to import. So they are importing properly, however, they are not styling anything.
I even tried just the #import "path/to/bootstrap.less"; as well and it imports it just like it was.. but not styling.
My core.less file:
#import url("../bootstrap/bootstrap.less");
//
// Variables
// --------------------------------------------------
// Scaffolding
// -------------------------
#body-bg: #1d2a37;
#text-color: #3b3b3b;
// Links
// -------------------------
#link-color: #67ae10;
#link-hover-color: darken(#link-color, 15%);
// Typography
// -------------------------
#font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
#font-family-serif: 'AR JULIAN', serif;
#font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
#font-family-base: #font-family-serif;
#font-size-base: 1.2em;
#font-size-large: ceil((#font-size-base * 1.25)); // ~18px
#font-size-small: ceil((#font-size-base * 0.85)); // ~12px
#font-size-h1: 1.6em
#font-size-h2: #font-size-h1 - 0.1;
#font-size-h3: #font-size-h1 - 0.2;
#font-size-h4: #font-size-h1 - 0.3;
#font-size-h5: #font-size-base;
#font-size-h6: #font-size-base - 0.1;
#line-height-base: 1.56;
#line-height-computed: floor((#font-size-base * #line-height-base)); // ~20px
#headings-font-family: inherit;
#headings-font-weight: 400;
#headings-line-height: 1.1;
#headings-color: inherit;
I also tried removing all the variable overrides and just left the #import line, but it still just loaded the import files and not apply the styling.
HOWEVER, when I just <link> to bootstrap.less instead of going through my core.less file, it loads everything fine and the stylesheets get applied just fine. But of course, I want to be able to override bootstrap's variables.less file along with having my own stylesheet.
I'm doing #Adam's suggestion here : Bootstrap variable overriding with LESS
Thank you for any help..
Related
Has anyone ever succeed integrating Unity WebGl and Polymer 3?
I'm trying to make the webgl code a polymer 3 element, but I am still not able to do it. I could not find any tutorial or information about it.
In html I have to do the following:
head
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Test</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WEBdev.json", {
onProgress: UnityProgress,
Module : {
cacheControl: {"default": "immutable"},
}
});
head
body
<div class="webgl-content">
<div id="gameContainer" style="width: 1066px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">SOMA3D</div>
</div>
</div>
body
Any tips?
So I've set image to display:none using a media query.
#media only screen and (max-width:530px) {
img {
display: none;
}
}
I have also tried putting the image/s in a parent div, then setting that display to none. That didn't work either.
<div id="right">
<img src="images/meeting.jpg" />
</div>
But if you view Chrome dev tools, you can see that it still requests it.
Image
How can I disable the image from being requested but only when in mobile view or specific width (using a media query)
When you run the snippet below and check with developer tools, you will see that 100 and 200 are downloaded. But 300 is not.
.hide {
display: none;
}
/* demo with placehold images */
/* this image is downloaded */
<img src="http://placehold.it/100">
/* this image is downloaded */
<img class="hide" src="http://placehold.it/200">
/* this image is NOT downloaded */
<div class="hide">
<img src="http://placehold.it/300">
</div>
You could also move all css to media query:
#media only screen and (min-width:530px) {
#right>img {
display:block;
content: url("https://i.stack.imgur.com/5Sdkx.png");
}
}
#media only screen and (max-width:530px) {
#right>img {
content: '';
}
}
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="right">
<img src="" />
</div>
</body>
</html>
EDIT
Please, see this link
In CrafterCMS, I'm trying to setup the drag and drop facility in my current project.
But when I'm in studio I get following error message:
Despite the error, I'm able to add new components to the page with drag and drop, however when I add a new component, all the previous selected components are replaced by the new one.
I.e. if I have:
By adding a new "component6" I get:
Here's the template of page
<#import "/templates/system/common/cstudio-support.ftl" as studio />
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<#assign siteTitle = contentModel.title!"" />
<head>
<meta charset="utf-8">
<title>${siteTitle}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/static-assets/images/favicon.ico">
<!--Google Font link-->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link rel="stylesheet" href="/static-assets/css/animate.css">
<link rel="stylesheet" href="/static-assets/css/iconfont.css">
<link rel="stylesheet" href="/static-assets/css/font-awesome.min.css">
<link rel="stylesheet" href="/static-assets/css/bootstrap.css">
<link rel="stylesheet" href="/static-assets/css/magnific-popup.css">
<link rel="stylesheet" href="/static-assets/css/bootsnav.css">
<!--For Plugins external css-->
<link rel="stylesheet" href="/static-assets/css/plugins.css" />
<!--Theme custom css-->
<link rel="stylesheet" href="/static-assets/css/style.css">
<!--<link rel="stylesheet" href="/static-assets/css/colors/maron.css">-->
<!--Theme Responsive css-->
<link rel="stylesheet" href="/static-assets/css/responsive.css" />
<!-- Scroll Indicator Bullets-->
<link rel="stylesheet" href="static-assets/css/jquery.scrollindicatorbullets.css" />
<script src="/static-assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar-menu" data-offset="110">
<!-- Header -->
<#include "/templates/web/page-home-header.ftl" />
<!-- Sections -->
<div <#studio.iceAttr iceGroup="sections"/> >
<div class="sections" <#studio.componentContainerAttr target="sections" objectId=model.objectId/>>
<#list (contentModel.sections.item)![] as aSection >
<#renderComponent component=aSection />
</#list>
</div>
</div>
<!-- Footer -->
<#include "/templates/web/page-home-footer.ftl" />
<!-- JS includes -->
<script src="/static-assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="/static-assets/js/vendor/bootstrap.min.js"></script>
<script src="/static-assets/js/jquery.magnific-popup.js"></script>
<script src="/static-assets/js/jquery.easing.1.3.js"></script>
<script src="/static-assets/js/bootsnav.js"></script>
<script src="/static-assets/js/plugins.js"></script>
<script src="/static-assets/js/main.js"></script>
<#studio.toolSupport/>
</body>
</html>
This is the template of the component I'm using:
<#import "/templates/system/common/cstudio-support.ftl" as studio/>
<!--Dialogue section-->
<section id="dialogue" class="dialogue bg-white roomy-80" <#studio.componentAttr path=contentModel.storeUrl />>
<#if contentModel.sectionTitle?? ><span class="scrollIndicatorTitle">${contentModel.sectionTitle}</span></#if>
<div class="container">
<div class="row">
<div class="main_dialogue text-center">
<div class="col-md-12">
<h3>${contentModel.text}</h3>
</div>
</div>
</div>
</div>
</section>
When I add the component in the log I see:
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Delete for id:"spbb:/site/components/component6.xml" OR parentId:"spbb:/site/components/component6.xml" successful: {responseHeader={status=0,QTime=3}}
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Update for spbb:/site/components/component6.xml successful: {responseHeader={status=0,QTime=3}}
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Commit successful: {responseHeader={status=0,QTime=24}}
[INFO] 2017-05-09 12:25:44,716 [http-nio-8080-exec-9] [spbb] [rest.SiteCacheRestController] | Content cache and Freemarker cache have been cleared for site 'spbb'
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Delete for id:"spbb:/site/website/products/index.xml" OR parentId:"spbb:/site/website/products/index.xml" successful: {responseHeader={status=0,QTime=7}}
WARN : org.craftercms.search.service.impl.RenameFieldsIfMultiValuePostProcessor - Field 'sections.item.component.createdDate_dt' is declared as single value, but multiple values where provided in spbb:/site/website/products/index.xml. Renaming to multi value field 'sections.item.component.createdDate_dts'
WARN : org.craftercms.search.service.impl.RenameFieldsIfMultiValuePostProcessor - Field 'sections.item.component.lastModifiedDate_dt' is declared as single value, but multiple values where provided in spbb:/site/website/products/index.xml. Renaming to multi value field 'sections.item.component.lastModifiedDate_dts'
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Update for spbb:/site/website/products/index.xml successful: {responseHeader={status=0,QTime=7}}
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Commit successful: {responseHeader={status=0,QTime=29}}
[INFO] 2017-05-09 12:25:45,174 [http-nio-8080-exec-10] [spbb] [rest.SiteCacheRestController] | Content cache and Freemarker cache have been cleared for site 'spbb'
There's something else that I'm missing?
'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<polymer-element name="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'm-layout',
togglePanel: function() {
this.$.paper_drawer_panel.togglePanel();
}
});
</script>
</polymer-element>
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp' code:
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html" >
<style>
html, body {
height: 100%;
}
body {
margin: 0;
background-color:#E5E5E5;
}
</style>
</head>
<body>
<m-layout></m-layout>
</body>
</html>
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
I can't found reference about paper-drawer-panel toggle and behavior.....
What should I do to toggle paper-drawer-panel?
There are a few things I noticed in your code.
In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.
I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file.
You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.
In your elements/m-layout.html:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'm-layout'
// this is not needed
//togglePanel: function() {
// this.$.paper_drawer_panel.togglePanel();
//}
});
</script>
and this in main.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html">
</head>
<body>
<m-layout></m-layout>
</body>
</html>
Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.
http://jsbin.com/winedi/edit?html,output
<style>
</style>
<template>
<paper-drawer-panel id="drawer">
<div drawer>
drawer
</div>
<paper-header-panel main>
<paper-toolbar class="teal-500">
<paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
<div class="title">{{toolBarTitle}}</div>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "layout-inbox",
menuToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
},
properties: {
toolBarTitle: {
type: String,
value: "lucok"
}
}
});
</script>
</dom-module>
I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.
Maybe did you just miss the correct DocType in the head of main.jsp
<!DOCTYPE html>
when i call the getAbsoluteLeft/Top method i always get 0 in firefox. For the IE i get a value which seems to be correct. Are there known problems using these methods ? My problem is that i want to set the position of an element with the absolute position values of another element. Thanks in advance. Edit: Using GWT 2.0.3
kuku
EDIT Testcase:
1. The host page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="samplegwt/samplegwt.nocache.js"></script>
<script type="text/javascript" language="javascript">
function execute() {
var element = document.getElementById("paragraph");
if (element != undefined)
element.style.display = "block";
}
</script>
<STYLE TYPE="text/css">
#paragraph {
display: none;
}
</STYLE>
</head>
<body class="body" onload="execute()">
<div align="center">
<table>
<tr>
<td>
<p id="paragraph">
<input type="text" id="example" value="Foobar" > <img border="0" src="images/some.gif" alt="Test"></p>
</td>
</tr>
</table>
</div>
</body>
</html>
In the onModuleLoad() i simply do this: System.out.println(Document.get().getElementById("paragraph")
.getAbsoluteLeft());
Well as stated in the comments the problem was that the element is not visible which results into 2 different behavoirs for IE and FF.