ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix ol.css for some examples

Browse Source 
- es2015-custom-element needs css variables declared in :host
- external-map-map still does not work when editing in codesandbox,
  though that neither worked before.
This commit is contained in:
Maximilian Krög
2022-08-13 16:39:28 +02:00
parent 839e1d1c65
commit 259e3fe1c9
5 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/es2015-custom-element.js
+1 -1
View File
@@ -9,7 +9,7 @@ class OLComponent extends HTMLElement {
this.shadow = this.attachShadow({mode: 'open'}); this.shadow = this.attachShadow({mode: 'open'});
const link = document.createElement('link'); const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet'); link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'css/ol.css'); link.setAttribute('href', 'theme/ol.css');
this.shadow.appendChild(link); this.shadow.appendChild(link);
const style = document.createElement('style'); const style = document.createElement('style');
style.innerText = ` style.innerText = `
examples/mobile-full-screen.html
+1 -1
View File
@@ -13,7 +13,7 @@ cloak:
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mobile full screen example</title> <title>Mobile full screen example</title>
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style type="text/css"> <style type="text/css">
html, body, .map { html, body, .map {
margin: 0; margin: 0;
examples/resources/external-map-map.html
+1 -1
View File
@@ -1,7 +1,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style> <style>
body { body {
margin: 0; margin: 0;
site/src/download/index.hbs
+1 -1
View File
@@ -18,7 +18,7 @@ layout: default.hbs
<p> <p>
If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page: If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page:
<pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/build/ol.js"&gt;&lt;/script&gt; <pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/build/ol.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/css/ol.css"&gt; &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/theme/ol.css"&gt;
</code></pre> </code></pre>
</p> </p>
</div> </div>
src/ol/ol.css
+2 -1
View File
@@ -1,4 +1,5 @@
:root { :root,
:host {
--ol-background-color: white; --ol-background-color: white;
--ol-accent-background-color: #F5F5F5; --ol-accent-background-color: #F5F5F5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25); --ol-subtle-background-color: rgba(128, 128, 128, 0.25);