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

Style updates for examples and API docs

Browse Source
This commit is contained in:
Tim Schaub
2022-07-31 15:45:39 -06:00
committed by Tim Schaub
parent 15329aad00
commit 1bd9201fed
18 changed files with 430 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
config/jsdoc/api/template/static/logo-70x70.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

1
config/jsdoc/api/template/static/logo-dark.svg Symbolic link
View File

@@ -0,0 +1 @@
../../../../../site/resources/logo-dark.svg

65
config/jsdoc/api/template/static/styles/carbon.css Normal file
View File

@@ -0,0 +1,65 @@
/* Carbon adds (see https://sell.buysellads.com) */
#ad {
padding:0.5rem;
min-height: 125px;
}
#carbonads {
font-family: "Quattrocento Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
#carbonads {
display: flex;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
.carbon-img {
display: block;
margin: 0;
line-height: 1;
}
.carbon-img img {
display: block;
}
.carbon-text {
font-size: 13px;
padding: 10px;
line-height: 1.5;
text-align: left;
}
.carbon-poweredby {
display: block;
padding: 8px 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: .5px;
font-weight: 600;
font-size: 9px;
line-height: 1;
}
#carbonads a.carbon-poweredby {
color: #aaa;
}

1
config/jsdoc/api/template/static/styles/ol.css Symbolic link
View File

@@ -0,0 +1 @@
../../../../../../src/ol/ol.css

65
config/jsdoc/api/template/static/styles/site.css
View File

@@ -1,65 +0,0 @@
/* Carbon adds (see https://sell.buysellads.com) */
#ad {
padding:0.5rem;
min-height: 125px;
}
#carbonads {
font-family: "Quattrocento Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
#carbonads {
display: flex;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
.carbon-img {
display: block;
margin: 0;
line-height: 1;
}
.carbon-img img {
display: block;
}
.carbon-text {
font-size: 13px;
padding: 10px;
line-height: 1.5;
text-align: left;
}
.carbon-poweredby {
display: block;
padding: 8px 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: .5px;
font-weight: 600;
font-size: 9px;
line-height: 1;
}
#carbonads a.carbon-poweredby {
color: #aaa;
}

1
config/jsdoc/api/template/static/styles/site.css Symbolic link
View File

@@ -0,0 +1 @@
../../../../../../site/site.css

4
config/jsdoc/api/template/tmpl/layout.tmpl
View File

@@ -75,12 +75,14 @@ var version = obj.packageInfo.version;
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/jaguar.css">
<link type="text/css" rel="stylesheet" href="styles/carbon.css">
<link type="text/css" rel="stylesheet" href="styles/ol.css">
<link type="text/css" rel="stylesheet" href="styles/site.css">
</head>
<body>
<div class="container-fluid">
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<a class="navbar-brand" href="https://openlayers.org/"><img src="logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

4
examples/geolocation-orientation.html
View File

@@ -11,8 +11,8 @@ tags: "fullscreen, geolocation, orientation, mobile"
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<link rel="stylesheet" href="./css/site.css" type="text/css">
<title>Mobile Geolocation Tracking with Orientation</title>
<style type="text/css">
html, body, .map {

16
examples/index.html
View File

@@ -6,13 +6,14 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<link rel="stylesheet" href="./css/site.css" type="text/css">
<style>
body {
padding-top: 70px;
padding-top: 50px;
}
input.search-query {
color: #333;
color: var(--ol-foreground-color);
}
.example {
display: block;
@@ -25,8 +26,11 @@
font-size: smaller;
margin: 5px 0;
}
.example:hover {
background-color: #F5F5F5;
a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
background-color: #f8f9fa !important;
}
</style>
<script type="text/javascript" src="resources/Jugl.js"></script>
@@ -38,7 +42,7 @@
<body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./resources/logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./resources/logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

198
examples/resources/layout.css
View File

@@ -1,198 +0,0 @@
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
body {
font-family: 'Quattrocento Sans', sans-serif;
font-size: 16px;
}
.navbar {
background-color: #1F6B75;
color: white;
border: 0;
border-radius: 0;
}
.navbar-brand {
color: white;
font-weight: bold;
font-size: 160%;
padding: 8px 0;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #aae1e9;
}
.navbar-brand img {
height: 35px;
width: 35px;;
vertical-align: middle;
margin-right: 5px;
display: inline-block;
}
.dropdown-item.active, .dropdown-item:hover {
color: #fff;
text-decoration: none;
background-color:#268591
}
.nav>li>a:hover, .nav>li>a:focus, .nav>li>a.active {
background-color: #268591;
}
.navbar-nav>li>a {
color: white;
}
.display-table {
display: table;
}
a {
color: #03899c;
text-decoration:none
}
a:hover, a:focus, footer a:hover, footer a:focus {
color: #ff7a00;
text-decoration:none
}
.btn-link {
font-weight: 400;
color: #03899c;
text-decoration: none;
}
.btn-link:hover {
color: #ff7a00;
text-decoration: none;
}
.version-form, .navbar-form {
display: table-cell;
vertical-align: middle;
}
.version-form {
color: #333;
}
#title {
margin-top: 0;
}
.badge-group {
display: inline-block;
}
.badge-group > .badge:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.badge-group > .badge:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tag-modal-toggle {
cursor: pointer;
}
.modal-tag-example .modal-body {
padding: 0;
}
.modal-tag-example .list-group-item:focus,
.modal-tag-example .list-group-item:hover,
.modal-tag-example .list-group-item:active {
background-color: rgba(31, 107, 117, .6875);
border-color: #1F6B75;
color: white;
}
.modal-tag-example .list-group-item.active {
background-color: #1F6B75;
color: white;
}
#docs {
margin-top: 1em;
}
ul.inline,
ol.inline {
margin-left: 0;
padding-left: 0;
list-style: none;
}
ul.inline>li,
ol.inline>li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.map {
height: 400px;
width: 100%;
background: url(map-background.jpg) repeat;
margin-bottom: 10px;
}
.ol-control {
line-height: normal;
}
.ol-attribution.ol-logo-only,
.ol-attribution.ol-uncollapsible {
max-width: calc(100% - 3em);
}
.iframe-info iframe {
width: 100%;
}
.source-heading {
margin-top: 1em;
margin-bottom: 0;
padding-left: .6em;
font-weight: bold;
}
pre[class*="language-"] {
background: #FFFFFF;
font-size: 87.5%;
}
pre {
border: 1px solid #eee;
border-radius: 0;
}
#tags, #shortdesc, .hidden {
display: none;
}
#api-links ul {
display: inline;
}
#latest-check {
margin-top: -10px;
margin-bottom: 10px;
}
/* restyle prism copy button */
div.code-toolbar > .toolbar {
opacity: 1;
top: -2.4em;
}
div.code-toolbar > .toolbar button {
font-size: 16px;
color: #03899c;
background-color: transparent;
box-shadow: none;
padding: .615rem .75rem;
}
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus {
color: #ff7a00;
}
div.code-toolbar > .toolbar button:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
div.code-toolbar > .toolbar button:before {
margin-right: .184em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f0ea";
font-size: 1.33333333em;
line-height: .75em;
vertical-align: middle;
}

BIN
examples/resources/logo-70x70.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

1
examples/resources/logo-dark.svg Symbolic link
View File

@@ -0,0 +1 @@
../../site/resources/logo-dark.svg

1
examples/resources/logo-light.svg Symbolic link
View File

@@ -0,0 +1 @@
../../site/resources/logo-light.svg

4
examples/templates/example.html
View File

@@ -66,7 +66,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<link rel="stylesheet" href="./css/site.css" type="text/css">
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
@@ -77,7 +77,7 @@
<body>
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

1
examples/webpack/config.mjs
View File

@@ -70,6 +70,7 @@ export default {
new CopyPlugin({
patterns: [
{from: '../src/ol/ol.css', to: 'css'},
{from: '../site/site.css', to: 'css'},
{from: 'data', to: 'data'},
{from: 'resources', to: 'resources'},
{from: 'index.html', to: 'index.html'},

23
site/resources/logo-dark.svg Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="layer" transform="translate(50 50)">
<g transform="scale(0.7071 0.5)">
<g transform="translate(-50 -50)">
<rect width="100" height="100" rx="15" transform="rotate(45 50 50)" />
</g>
</g>
</g>
</defs>
<g fill="#FFFFFF" transform="translate(0 10)">
<use xlink:href="#layer"/>
</g>
<g fill="#333333">
<use xlink:href="#layer"/>
</g>
<g fill="#00AAFF" transform="translate(0 -10)">
<use xlink:href="#layer"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 739 B

23
site/resources/logo-light.svg Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="layer" transform="translate(50 50)">
<g transform="scale(0.7071 0.5)">
<g transform="translate(-50 -50)">
<rect width="100" height="100" rx="15" transform="rotate(45 50 50)" />
</g>
</g>
</g>
</defs>
<g fill="#333333" transform="translate(0 10)">
<use xlink:href="#layer"/>
</g>
<g fill="#FFFFFF">
<use xlink:href="#layer"/>
</g>
<g fill="#00AAFF" transform="translate(0 -10)">
<use xlink:href="#layer"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 739 B

291
site/site.css Normal file
View File

@@ -0,0 +1,291 @@
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
body {
font-family: 'Quattrocento Sans', sans-serif;
font-size: 16px;
color: var(--ol-foreground-color);
}
code {
color: var(--ol-foreground-color);
background-color: var(--ol-accent-background-color);
padding: 0.2em 0.4em;
border-radius: 3px;
}
a > code,
pre > code {
color: inherit;
background-color: initial;
padding: initial;
border-radius: initial;
}
a {
color: var(--ol-brand-color);
text-decoration: none
}
a:hover,
a:focus,
footer a:hover,
footer a:focus {
color: var(--ol-brand-color);
text-decoration: underline;
}
pre[class*="language-"] {
background: #FFFFFF;
font-size: 87.5%;
}
pre {
border: 1px solid #eee;
border-radius: 0;
}
.navbar {
background-color: var(--ol-foreground-color);
color: var(--ol-background-color);
border: 0;
border-radius: 0;
}
.navbar-brand {
color: var(--ol-background-color);
font-weight: bold;
font-size: 160%;
padding: 8px 0;
}
.navbar-brand img {
height: 35px;
width: 35px;
;
vertical-align: middle;
margin-right: 5px;
display: inline-block;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--ol-background-color);
}
.navbar-dark .navbar-nav .nav-link:hover {
color: var(--ol-brand-color);
}
a.dropdown-item {
color: var(--ol-foreground-color);
}
.dropdown-item.active,
.dropdown-item:hover {
color: var(--ol-brand-color);
text-decoration: none;
background-color: var(--ol-background-color)
}
.navbar-nav>li>a {
color: var(--ol-background-color);
}
.display-table {
display: table;
}
.btn-link {
font-weight: 400;
color: var(--ol-subtle-foreground-color);
text-decoration: none;
}
.btn-link:hover {
color: var(--ol-brand-color);
text-decoration: none;
}
.version-form,
.navbar-form {
display: table-cell;
vertical-align: middle;
}
.version-form {
color: var(--ol-foreground-color);
}
#title {
margin-top: 0;
}
.badge-group {
display: inline-block;
}
.badge-group>.badge:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.badge-group>.badge:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.badge-info {
background-color: var(--ol-subtle-foreground-color);
}
a.badge-info:focus,
a.badge-info:hover {
background-color: var(--ol-foreground-color);
color: var(--ol-brand-color);
}
.tag-modal-toggle {
cursor: pointer;
}
.modal-tag-example .modal-body {
padding: 0;
}
.modal-tag-example .list-group-item:focus,
.modal-tag-example .list-group-item:hover,
.modal-tag-example .list-group-item:active {
background-color: var(--ol-background-color);
color: var(--ol-brand-color);
}
.modal-tag-example .list-group-item.active {
background-color: var(--ol-subtle-foreground-color);
color: var(--ol-background-color);
border: none;
}
#docs {
margin-top: 1em;
}
ul.inline,
ol.inline {
margin-left: 0;
padding-left: 0;
list-style: none;
}
ul.inline>li,
ol.inline>li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.map {
height: 400px;
width: 100%;
background: url(map-background.jpg) repeat;
margin-bottom: 10px;
}
.ol-control {
line-height: normal;
}
.ol-attribution.ol-logo-only,
.ol-attribution.ol-uncollapsible {
max-width: calc(100% - 3em);
}
.iframe-info iframe {
width: 100%;
}
.source-heading {
margin-top: 1em;
margin-bottom: 0;
padding-left: .6em;
font-weight: bold;
}
#tags,
#shortdesc,
.hidden {
display: none;
}
#api-links ul {
display: inline;
}
#latest-check {
margin-top: -10px;
margin-bottom: 10px;
}
/* restyle prism copy button */
div.code-toolbar>.toolbar {
opacity: 1;
top: -2.4em;
}
div.code-toolbar>.toolbar button {
font-size: 16px;
color: var(--ol-subtle-foreground-color);
background-color: transparent;
box-shadow: none;
padding: .615rem .75rem;
}
div.code-toolbar>.toolbar button:hover,
div.code-toolbar>.toolbar button:focus {
color: var(--ol-brand-color);
}
div.code-toolbar>.toolbar button:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
div.code-toolbar>.toolbar button:before {
margin-right: .184em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f0ea";
font-size: 1.33333333em;
line-height: .75em;
vertical-align: middle;
}
/* jarguar overrides for jsdoc */
.navigation {
background-color: var(--ol-foreground-color);
color: var(--ol-background-color);
}
.navigation li.item .subtitle {
color: var(--ol-background-color);
}
.navigation li.item a:hover,
.navigation li.item .title a:hover {
color: var(--ol-brand-color);
}
.main .subsection-title {
color: var(--ol-foreground-color);
}
.main .nameContainer,
.main .nameContainer.inherited {
border-top-color: var(--ol-subtle-foreground-color);
color: var(--ol-foreground-color);
}
.nameContainer .anchor:target + h4 {
background-color: inherit;
}

8
src/ol/ol.css
View File

@@ -1,16 +1,18 @@
:root {
--ol-background-color: white;
--ol-foreground-color: #333333;
--ol-subtle-foreground-color: #666666;
--ol-accent-background-color: #F5F5F5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);
--ol-partial-background-color: rgba(255, 255, 255, 0.75);
--ol-foreground-color: #333333;
--ol-subtle-foreground-color: #666666;
--ol-brand-color: #00AAFF;
}
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 1.5px solid var(--ol-background-color);
background-color: var(--ol-subtle-background-color);
background-color: var(--ol-partial-background-color);
}
.ol-mouse-position {